{"id":63315,"date":"2024-04-11T03:01:55","date_gmt":"2024-04-10T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63315"},"modified":"2024-04-11T10:06:39","modified_gmt":"2024-04-11T00:06:39","slug":"colouring-in-drag-and-drop-settings-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-settings-tutorial\/","title":{"rendered":"Colouring In Drag and Drop Settings Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Settings Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_fw_na.jpg\" title=\"Colouring In Drag and Drop Settings Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Settings Tutorial<\/p><\/div>\n<p>Onto the start for our Colouring In web application via yesterday&#8217;s <a title='Colouring In Canvas Clone of Numbers Guessing Game Tutorial' href='#ciccnggt'>Colouring In Canvas Clone of Numbers Guessing Game Tutorial<\/a> we&#8217;re starting to enhance, on top of that &#8220;clone level&#8221; functionality, via two new settings with two approaches to the management of data, regarding, those being &#8230;<\/p>\n<ul>\n<li>number of table cells across (that programmatically is made to be the same number of cells, as down) &#8230; we deal with via a get ? (or &#038;) address line URL arrangement &#8230; whereas &#8230;<\/li>\n<li>pen &#8220;width&#8221; can be 1 or 2 (where 2 colours in the 1+8=9 surrounding cells of a dragged over cell) &#8230; we deal with via a hashtag arrangement<\/li>\n<\/ul>\n<p>Why the difference in approach?  Let&#8217;s start with hashtag methodologies.  This arrangement can leave everything about a webpage, in place, regarding the user actions on a webpage, while the <font color=blue>Javascript can detect that change<\/font> in &#8230;<\/p>\n<p><code><br \/>\n location.hash<br \/>\n<\/code><\/p>\n<p> &#8230; dynamically.  In other words some dragging canvas drawings with pen &#8220;width&#8221; 2 can be combined with some using pen &#8220;width&#8221; 1 in the same user creation.<\/p>\n<p>But when the data management involves get ? (or &#038;) address line URL arrangements, this involves navigation to a new incarnation of the webpage creation logic, effectively wiping the webpage slate clean.  This is apt for the &#8220;number of table cells across&#8221; data item, because the HTML content of the table element is not just affected, but is totally structured, according to this user setting.<\/p>\n<p>Lately, more and more, we&#8217;ve been hashtagging data to dynamically created &#8220;a&#8221; link &#8220;mailto:&#8221; email or &#8220;sms:&#8221; SMS communication body webpage URL links.   An email link or SMS link, from the recipient&#8217;s point of view is a &#8220;brand new start&#8221; that can address either or both of these data conduit arrangements, we&#8217;re getting happier and happier to discover &#8230;<\/p>\n<p><code><br \/>\n    \/\/ ondragover event function code snippet below ...<br \/>\n    ev.target.style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n    <font color=blue>if (decodeURIComponent(('' + location.hash)).indexOf('fontweight=') != -1) {<br \/>\n       ifontweight=eval('' + ('' + decodeURIComponent(('' + location.hash))).split('fontweight=')[1].substring(0,1));<br \/>\n    }<\/font> else if (document.getElementById('numfontweight')) {<br \/>\n       ifontweight=eval('' + document.getElementById('numfontweight').value);<br \/>\n    }<br \/>\n     if (ifontweight == 2) { \/\/ colour in 8 surrounding cells, as applicable<br \/>\n       var minusthree=-3;<br \/>\n       if (document.getElementById('numacross')) {<br \/>\n       minusthree=eval(-1 * eval('' + document.getElementById('numacross').value.length));<br \/>\n       }<br \/>\n       var tdx=eval(('' + ev.target.id).substring(2).split('_')[0].replace(\/^0\/g,'').replace(\/^0\/g,''));<br \/>\n       var tdy=eval(('' + ev.target.id).split('_')[1].replace(\/^0\/g,'').replace(\/^0\/g,''));<br \/>\n       if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       <br \/>\n       if (document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       if (document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       <br \/>\n       if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n       if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {<br \/>\n         document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;<br \/>\n       }<br \/>\n    }<br \/>\n<\/code><\/p>\n<p>Codewise &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html----------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis &#8230; helps out &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php--GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php--GETME\">colouring_in_was_numbers_guessing_game.php<\/a> PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">Colouring In  Game<\/a> you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Our recent <a target=_blank title='Earth Scanner' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html'>Earth Scanner<\/a> <a target=_blank title='Earth Bearing Distance Missing Two Earth Scanner Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-bearing-distance-missing-two-earth-scanner-integration-tutorial'>project<\/a> was conducted during our <i>&#8220;Hashtagging Enlightenment Period&#8221;<\/i>, whereby, around here, the &#8230; <\/p>\n<blockquote><p>\nWhat the Hep?\n<\/p><\/blockquote>\n<p> &#8230; greeting, is code for <i>&#8220;Have yourself a happy and fruitful hashtagging day&#8221;<\/i> &#8230; but we digress.  In amongst it&#8217;s code there was an example codeline &#8230;<\/p>\n<p><code><br \/>\nvar nontz=('' + location.search + ('' + location.hash).replace(\/^\\#\/g,'')).split('nontz=')[1] ? decodeURIComponent(('' + location.search + ('' + location.hash).replace(\/^\\#\/g,'')).split('nontz=')[1].split('&')[0].split('#')[0]) : '';<br \/>\n<\/code><\/p>\n<p> &#8230; exemplifying, how more and more, we&#8217;re happy with setting (or other types of incoming) data coming from get (? and &#038; <font size=1>( eg. ?nontz=Alice_Springs%7C133.8807%7C_23.6980%7C )<\/font>) arguments via <i>location.search<\/i> and\/or hashtagged data coming from <i>location.hash<\/i> <font size=1>( eg. #nontz=Alice_Springs%7C133.8807%7C_23.6980%7C )<\/font> above, either or both, perhaps, used in an email or SMS body URL link.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-settings-tutorial\/'>Colouring In Drag and Drop Settings Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciccnggt'>Previous relevant <a target=_blank title='Colouring In Canvas Clone of Numbers Guessing Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-canvas-clone-of-numbers-guessing-game-tutorial\/'>Colouring In Canvas Clone of Numbers Guessing Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Canvas Clone of Numbers Guessing Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.jpg\" title=\"Colouring In Canvas Clone of Numbers Guessing Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Canvas Clone of Numbers Guessing Game Tutorial<\/p><\/div>\n<p>As the blog posting title suggests, cloned from yesterday&#8217;s <a title='Numbers Guessing Game Dragover Tutorial' href='#nggdt'>Numbers Guessing Game Dragover Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>Numbers Guessing Game dragover &#8220;value add&#8221; proof of concept work &#8230; comes &#8230;<\/li>\n<li>Colouring In Canvas drag and (faux) drop web application<\/li>\n<\/ul>\n<p> &#8230; where a &#8220;canvas&#8221; palette (which is really an HTML table element made up of lots of table cells, rather than an HTML5 canvas element).  Why this design?  Well, each table cell element can be identified as an individual &#8220;dragged over&#8221; element.  &#8220;Dragged over&#8221; by what?  Well, we turn some &#8220;draggable&#8221; wording in the basis HTML into &#8230;<\/p>\n<ul>\n<li>an emoji pen &#x1f58c; piece of text &#8230; and next to that we add &#8230;<\/li>\n<li>an input type=color Colour Picker to choose a pen colour &#8230; and because the &#8220;ondragover&#8221; event is so sensitive, we also add an optionally used, or not &#8230;<\/li>\n<li>input type=number defining any delay (in seconds) before the &#8220;ondragover&#8221; colouring in kicks in, from when it could first of happened, as the pen crosses over into the palette &#8230; along with &#8230;<\/li>\n<li>input type=number countdown of the delay<\/li>\n<p> &#8230; so that the user can use &#8220;dragover&#8221; event means by which to create their own &#8220;colouring in creation&#8221;!<\/p>\n<p>Codewise &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------------------------GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis &#8230; helps out &#8230;<\/li>\n<li>a new Colouring In <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php-GETME\">how we got there<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php-GETME\">colouring_in_was_numbers_guessing_game.php<\/a> PHP coded <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" title=\"Click picture\">new web application<\/a> you can also try for yourself, below &#8230;<\/li>\n<\/ul>\n<p><iframe id=ciif src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php\" style=\"width:95%;height:900px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-canvas-clone-of-numbers-guessing-game-tutorial\/'>Colouring In Canvas Clone of Numbers Guessing Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nggdt'>Previous relevant <a target=_blank title='Numbers Guessing Game Dragover Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-dragover-tutorial\/'>Numbers Guessing Game Dragover Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Numbers Guessing Game Dragover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game_dragover.jpg\" title=\"Numbers Guessing Game Dragover Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Numbers Guessing Game Dragover Tutorial<\/p><\/div>\n<p>Today we&#8217;re honing in on &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'>drag and drop<\/a> methodology &#8230;<\/li>\n<li><a target=_blank href='https:\/\/www.w3schools.com\/jsref\/event_ondragover.asp#:~:text=The%20ondragover%20event%20occurs%20when,done%20by%20calling%20the%20event.'>dragover<\/a> event &#8230; <i>value adding<\/i> where &#8230;<\/li>\n<li>drop element(s) are cells of an HTML table element (also a drop element)<\/li>\n<\/ul>\n<p> &#8230; as our interest.  We scouted around for the best &#8220;design match&#8221; and came up with the arrangements existing when we presented <a title='Numbers Guessing Game Tutorial' href='#nggt'>Numbers Guessing Game Tutorial<\/a> some time ago now.<\/p>\n<p>And if we succeed with some form of <i>value adding<\/i> here, we have another idea for the ideas we&#8217;re presenting today.  Spoiler alert!  Yes, it can be made to be useful.<\/p>\n<p>As such we&#8217;ve &#8230;<\/p>\n<table>\n<tr>\n<th><font color=blue>Added toggleable<\/font> &#8220;show where contemplated&#8221; value added border where dragover logic<\/th>\n<\/tr>\n<tr>\n<td>&lt;?php<br \/>\n<code style=font-size:9px;><br \/>\n  $templategame=file_get_contents('.\/experimental_drag_and_drop.htm');<br \/>\n  <font color=blue>if (isset($_GET['notice'])) {<br \/>\n  $templategame=str_replace('&gt;-&lt;\/span&gt;', '&gt;&lt;a style=\"text-decoration:none;cursor:pointer;\" title=\"Stop showing where contemplated as well.\" onclick=\"location.href=' . \"'#no_tice=y'\" . ';\"&gt;-&lt;\/a&gt;&lt;a style=\"text-decoration:none;cursor:pointer;\" title=\"Show where contemplated as well.\" onclick=\"location.href=' . \"'#notice=y'\" . ';\"&gt;+&lt;\/a&gt;&lt;\/span&gt;', $templategame);<br \/>\n  } else {<br \/>\n  $templategame=str_replace('&gt;-&lt;\/span&gt;', '&gt;&lt;a style=\"text-decoration:none;cursor:pointer;\" title=\"Show where contemplated as well.\" onclick=\"location.href=' . \"'#notice=y'\" . ';\"&gt;+&lt;\/a&gt;&lt;a style=\"text-decoration:none;cursor:pointer;\" title=\"Stop showing where contemplated as well.\" onclick=\"location.href=' . \"'#no_tice=y'\" . ';\"&gt;-&lt;\/a&gt;&lt;\/span&gt;', $templategame);<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th><font color=blue>Tweaked<\/font> dragover logic<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:9px;><br \/>\ntarget.addEventListener(\"dragover\", (ev) =&gt; {<br \/>\n  if (lastbco) {  lastbco.style.backgroundColor='white'; lastbco=null;  }<br \/>\n  if (ev.target.outerHTML.indexOf('&lt;table') != 0 && ev.target.outerHTML.indexOf(' data-piece=\"') != -1) {<br \/>\n  if (ev.target.outerHTML.split(' data-piece=\"')[1].substring(0,1) == (itisthiscmove + ev.target.outerHTML.split(' data-piece=\"')[1].substring(0,1)).substring(0,1)) {<br \/>\n  lohfulloh=ev.target.outerHTML;<br \/>\n  console.log(\"LOHfulloh=\" + lohfulloh);<br \/>\n  }<br \/>\n  }<br \/>\n  \/\/console.log(\"dragOver \" + ev.target.id + ' ' + ('' + ev.target.style.backgroundColor).replace('white','') + ' ' + document.body.innerHTML.indexOf('tab' + 'lece' + 'llb' + 'c'));<br \/>\n  \/\/if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  \/\/  document.title='ev.preventDefault(); \/\/4';<br \/>\n  \/\/}<br \/>\n  ev.preventDefault();<br \/>\n  if (('' + ev.target.id).indexOf('td') == 0 && ('' + ev.target.style.backgroundColor).trim().replace('white','') == '' && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {<br \/>\n    \/\/document.getElementById(sourceid).style.opacity='0.6';<br \/>\n    lastbco=ev.target;<br \/>\n    ev.target.style.backgroundColor='pink';<br \/>\n    if (document.getElementById('mybut')) {<br \/>\n      if (document.getElementById('mybut').innerHTML.indexOf(' .. ') == -1) {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.replace(' Game Game', ' Game');<br \/>\n        document.getElementById('mybut').innerHTML+=' .. current guess is ' + ev.target.innerHTML;<br \/>\n      } else {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;<br \/>\n      }<br \/>\n    }<br \/>\n    if (document.getElementById('sdropz')) {<br \/>\n      if (document.getElementById('sdropz').innerHTML.indexOf(' .. ') == -1) {<br \/>\n        document.getElementById('sdropz').innerHTML+=' .. current guess is ' + ev.target.innerHTML;<br \/>\n      } else {<br \/>\n        document.getElementById('sdropz').innerHTML=document.getElementById('sdropz').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;<br \/>\n      }<br \/>\n    }<br \/>\n    <font color=blue>if (('' + document.URL + decodeURIComponent('' + location.hash)).indexOf('notice=') != -1 && ('' + decodeURIComponent('' + location.hash)).indexOf('no_tice=') == -1) { ev.target.style.border='2px dashed yellow';   }<\/font><br \/>\n  }<br \/>\n  \/\/document.getElementById(sourceid).style.cursor='progress';<br \/>\n  \/\/ev.target.style.cursor='progress';<br \/>\n  \/\/ev.target.dataTransfer.dropEffect = 'progress';.id)<br \/>\n});<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<tr>\n<th><font color=blue>Flag<\/font> any continued &#8220;show where contemplated&#8221; interest<\/th>\n<\/tr>\n<tr>\n<td><code style=font-size:9px;><br \/>\n         <font color=blue>var secsmore='';<br \/>\n         if (('' + document.URL + decodeURIComponent('' + location.hash)).indexOf('notice=') != -1 && ('' + decodeURIComponent('' + location.hash)).indexOf('no_tice=') == -1) { secsmore='&notice=y';  }<\/font><br \/>\n         if (document.URL.indexOf('rjmprogramming-com-au.translate.goog') != -1) {<br \/>\n         location.href=document.URL.split('&score=')[0] + '&score=' + score + '&secs=' + secs<font color=blue> + secsmore<\/font>;<br \/>\n         } else {<br \/>\n         location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs<font color=blue> + secsmore<\/font>;<br \/>\n         }<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; to, as the user requests, add some table cell border enhancements (as our &#8220;<i>value adding<\/i>&#8220;) to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php--GETME\">our tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php--GETME\">third draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\">game<\/a> (helped out by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------------------------GETME\">experimental_drag_and_drop.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\">Experimental Drag and Drop<\/a> clientside HTML and Javascript basis), as the user drags the draggable element over the table droppable element and its cohort table cell elements.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-dragover-tutorial\/'>Numbers Guessing Game Dragover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nggt'>Previous relevant <a target=_blank title='Numbers Guessing Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-tutorial\/'>Numbers Guessing Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Numbers Guessing Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.jpg\" title=\"Numbers Guessing Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Numbers Guessing Game Tutorial<\/p><\/div>\n<p>We&#8217;ve been working on aspects to the genericity of the table that is &#8230;<\/p>\n<blockquote style=\"font-size:58px;text-shadow:-1px 1px 1px #ff2d95;\"><p>\nThe Drop Zone\n<\/p><\/blockquote>\n<p> &#8230; do do &#8230; do do &#8230; do do &#8230; do do &#8230; do do do do do do do do do do do do &#8230; yesterday&#8217;s threat <font size=1>&#8220;now so yesterday&#8221;<\/font> being &#8230;<\/p>\n<ul>\n<li>allow for the number of table cells to be other than 9 (with <a target=_blank title='Animal Mineral Vegetable Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/animal-mineral-vegetable-game-tutorial' >Animal Mineral Vegetable Game Tutorial<\/a> where it is 3 in total) &#8230; and today &#8230;<\/li>\n<li>allow the number of cells across in a column not be 3<\/li>\n<\/ul>\n<p> &#8230; in a <font size=1>(very difficult)<\/font> Numbers Guessing game for numbers from 1 to 99 that regular readers may be familiar with as the (same content <font size=1>(and mentioned at <a target=_blank title='Useful link, thanks' href='https:\/\/leisureguy.ca\/category\/math\/'>this link<\/a> &#8230; thanks &#8230;)<\/font> as the) Numbers Guessing game at this blog, but presented using a Drag and Drop modus operandi.<\/p>\n<p>Feel free to try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php_GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\"><\/iframe><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>On your smaller devices we found the Numbers Guessing Game a bit hard to use.  As such, <i>we researched and played around with &#8220;drag and drop&#8221; cursor ideas<\/i> unsuccessfully to end up, instead, not thinking about the cursor <font size=1>(albeit, we find that idea cuter)<\/font> but rather styling the target table cell&#8217;s background colour and informing the user of that up at the top button wording in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php-GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php-GETME\">second draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/numbers_guessing_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--------GETME\">experimental_drag_and_drop.htm<\/a> HTML and Javascript and CSS <font color=blue>helper<\/font>&#8230;<\/p>\n<p><code><br \/>\nvar lastbco=null;<br \/>\n<br \/>\nconst target = document.querySelector(\"#target\");<br \/>\ntarget.addEventListener(\"dragover\", (ev) => {<br \/>\n  if (lastbco) {  lastbco.style.backgroundColor='white'; lastbco=null;  }<br \/>\n  console.log(\"dragOver \" + ev.target.id + ' ' + ('' + ev.target.style.backgroundColor).replace('white','') + ' ' + document.body.innerHTML.indexOf('tab' + 'lece' + 'llb' + 'c'));<br \/>\n  ev.preventDefault();<br \/>\n  <font color=blue>if (('' + ev.target.id).indexOf('td') == 0 && ('' + ev.target.style.backgroundColor).trim().replace('white','') == '' && document.body.innerHTML.indexOf('Numbe' + 'rs Guessi' + 'ng Ga' + 'me') != -1) {<br \/>\n    \/\/document.getElementById(sourceid).style.opacity='0.6';<br \/>\n    lastbco=ev.target;<br \/>\n    ev.target.style.backgroundColor='pink';<br \/>\n    if (document.getElementById('mybut')) {<br \/>\n      if (document.getElementById('mybut').innerHTML.indexOf(' .. ') == -1) {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.replace(' Game Game', ' Game');<br \/>\n        document.getElementById('mybut').innerHTML+=' .. current guess is ' + ev.target.innerHTML;<br \/>\n      } else {<br \/>\n        document.getElementById('mybut').innerHTML=document.getElementById('mybut').innerHTML.split(' .. ')[0] + ' .. current guess is ' + ev.target.innerHTML;<br \/>\n      }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  <i>\/\/document.getElementById(sourceid).style.cursor='progress';<br \/>\n  \/\/ev.target.style.cursor='progress';<br \/>\n  \/\/ev.target.dataTransfer.dropEffect = 'progress';<\/i><br \/>\n});<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/numbers-guessing-game-tutorial\/'>Numbers Guessing Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='pmgt'>Previous relevant <a target=_blank title='Planet Moon Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/planet-moon-game-tutorial\/'>Planet Moon Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Planet Moon Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.jpg\" title=\"Planet Moon Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Planet Moon Game Tutorial<\/p><\/div>\n<p>Another thing that there is nine of <font size=1>(as contentious as it is regarding Pluto)<\/font> is Planets in the Solar System, revolving around the Sun.  And so, in keeping with a lot of the same design as yesterday&#8217;s <a title='Enneagram Type Game Tutorial' href='#etgt'>Enneagram Type Game Tutorial<\/a> we have a Planet Moon Game to present for you to play around with today.<\/p>\n<p>Again, PHP uses a framework of Experimental Drag and Drop HTML and Javascript and CSS, mainly via one PHP codeline &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $templategame=file_get_contents('.\/experimental_drag_and_drop.htm');<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and, perhaps, your curiosity that we have not &#8220;passed&#8221; data via $_GET[] or $_POST[] arguments, but rather just the simple act of &#8230;<\/p>\n<ul>\n<li>moulding and manipulating (eg. arranging &#8220;callback&#8221; logic means, as used below) that $templategame &#8220;template&#8221; for our purposes <font size=1>&#8230; nga ha ha ha ha ha ha ha ha &#8230;<\/font> but we digress &#8230;<\/li>\n<li>simply &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  echo $templategame;<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; outputs a webpage &#8230; <\/li>\n<li>and on the way back to play again, we use $_GET[&#8216;score&#8217;] and $_GET[&#8216;secs&#8217;] (in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a>) to keep the ball rolling back to the game specific PHP we use &#8230;<br \/>\n<code><br \/>\n  location.href=document.getElementById('callback').value + '?score=' + score + '&secs=' + secs;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php-GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\">game<\/a>, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\"><\/iframe><\/p>\n<p><i><b>Stop Press<\/b><\/i><\/p>\n<p>We fully concur with any adage that goes &#8230;<\/p>\n<blockquote><p>\nYou learn most from your mistakes\n<\/p><\/blockquote>\n<p> &#8230; just as we&#8217;re curious about &#8220;the things that go wrong&#8221;, and not having them repeat!   Same with pooches!<\/p>\n<p>Take our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php--GETME\">first to<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php--GETME\">second draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/planet_moon_game.php\">game<\/a> <font size=1>(to the opera, would be preferable)<\/font>.  We wondered why, occasionally, with the &#8220;first draft&#8221; it would hang.  It took us a half day to realize, as you could yourself have tweaked to a lot quicker if you had followed the adage &#8230;<\/p>\n<p><code><br \/>\nHanging issues mostly team up with code within a loop<br \/>\n<\/code><\/p>\n<p>The situation, we&#8217;ve reasoned, is that we had that PHP $badlist variable store a comma separated list of planets with either zero moons or more than one moon randomly selected representing it.  We&#8217;d assumed, yesterday, not that we&#8217;d put it in words, but in logic, that this list would not <font size=1>(have the same length or)<\/font> be the same as a (new $goodlist variable) list of planets with either zero moons or selected while collecting the random list of Moon\/Planet combinations &#8230; ie. we assumed in the list would be a Planet with only one of its Moons randomly selected &#8230; mistake!!!  <font color=blue>Better<\/font> is &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  <font color=blue>$goodlist=',Mercury,Venus,';<br \/>\n  $badlist=',Mercury,Venus,';<\/font><br \/>\n<br \/>\n  <font color=blue>while (strlen($goodlist) == strlen($badlist)) {<br \/>\n  $goodlist=',Mercury,Venus,';<\/font><br \/>\n  $badlist=',Mercury,Venus,';<br \/>\n  <br \/>\n  $correctans=rand(0,8);<br \/>\n  $sofar=';';<br \/>\n  for ($i=0; $i&lt;9; $i++) {<br \/>\n    $j=rand(0, (-1 + sizeof($wikidesignations)));<br \/>\n    if ($crandlist == '') {<br \/>\n      $crandlist='' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    } else if (strpos((',' . $crandlist . ','), (',' . $j . ',')) !== false) { \/\/ || strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) {<br \/>\n      while (strpos((',' . $crandlist . ','), (',' . $j . ',')) !== false) { \/\/ || strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) {<br \/>\n        $j=rand(0, (-1 + sizeof($wikidesignations)));<br \/>\n      }<br \/>\n      $crandlist.=',' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    } else {<br \/>\n      if (strpos($sofar, ';' . $wikidescriptions[$j] . ';') !== false) { $badlist.=$wikidescriptions[$j] . ','; }<br \/>\n      $crandlist.=',' . $j;<br \/>\n      $sofar.=$wikidescriptions[$j] . ';';<br \/>\n      <font color=blue>if (strpos($goodlist, $wikidescriptions[$j]) === false) {   $goodlist.=$wikidescriptions[$j] . ',';     }<\/font><br \/>\n    }<br \/>\n  }<br \/>\n  <font color=blue>}  <\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-enneagram-type-game-tutorial\/'>Planet Moon Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='etgt'>Previous relevant <a target=_blank title='Enneagram Type Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/planet-moon-game-tutorial\/'>Enneagram Type Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Enneagram Type Game Tutorial<\/p><\/div>\n<p>A lot of us wonder what goes towards making up our personalities.  We remember doing a <a target=Myers-Briggs href='https:\/\/www.google.com\/search?q=myers-briggs&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=myers-briggs&#038;gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIJCAEQABhDGIoFMgcIAhAAGIAEMgcIAxAAGIAEMgcIBBAAGIAEMgcIBRAAGIAEMg0IBhAuGMcBGNEDGIAEMgcIBxAAGIAEMgcICBAAGIAEMgcICRAAGIAE0gEIMzYzN2owajSoAgCwAgA&#038;sourceid=chrome&#038;ie=UTF-8'>Myers-Briggs<\/a> test for some job as part of the vetting process.  We thought we&#8217;d write another experimental drag and drop game, like yesterday&#8217;s  <a title='Australian Street Type Game Tutorial' href='#astgt'>Australian Street Type Game Tutorial<\/a>, regarding &#8230;<\/p>\n<blockquote><p>\n<a target=_blank href=https:\/\/www.enneagraminstitute.com\/type-descriptions>Enneagram Types<\/a>\n<\/p><\/blockquote>\n<p> &#8230; of human personalities, and we found a webpage <a target=_blank href=https:\/\/www.psychologyjunkie.com\/enneagram-famous-people\/>linking these categorizations to Hollywood Movie Stars<\/a> for you to get the gist of the ideas.  We also thank <a target=_blank href=https:\/\/wikipedia.org>Wikipedia<\/a> as our source for Movie Star images.<\/p>\n<p>It being a topic &#8230;<\/p>\n<ol>\n<li>beyond our ken<\/li>\n<li>outside our usual subject matter<\/li>\n<\/ol>\n<p> &#8230; you may be wondering how we stumbled upon the idea?  We let <a target=_blank title=Google href='https:\/\/google.com'>Google<\/a> autocomplete our &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgKOZ3R9OfKPslQyEVW_q0hC8SvzA%3A1690497285559&#038;ei=BfHCZJfpIcahseMPu5al8AE&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQLhiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARImp4BUABY2DlwAHgBkAEAmAHYAaABoBSqAQYwLjEyLjK4AQHIAQD4AQHCAgcQIxiKBRgnwgIEECMYJ8ICCxAuGIoFGNQCGJECwgIIEAAYigUYkQLCAgsQLhiABBixAxiDAcICCxAAGIAEGLEDGIMBwgIREC4YgAQYsQMYgwEYxwEY0QPCAggQLhiKBRiRAsICExAuGIoFGLEDGIMBGMcBGNEDGEPCAgcQABiKBRhDwgIHEC4YigUYQ8ICDRAAGIoFGLEDGIMBGEPCAgoQABiKBRixAxhDwgIIEAAYgAQYsQPCAgsQLhiKBRixAxiRAsICCBAuGLEDGIAEwgIOEC4YgAQYsQMYgwEY1ALCAhcQLhixAxiABBiXBRjcBBjeBBjgBNgBAeIDBBgAIEGIBgG6BgYIARABGBQ&#038;sclient=gws-wiz-serp'>nine types of <\/a><br \/>\n<\/code><\/p>\n<p> &#8230; search textbox typing, fully expecting &#8220;Carol&#8221;<sub title='Well, you had to be there ...'>?<\/sub> to be at the top of the list when we saw &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title=? href='https:\/\/www.google.com\/search?q=nine+types+of+enneagram&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=AB5stBgcETOXMtG8UFv6DDlokZCzMcVm-A%3A1690514138499&#038;ei=2jLDZJyAHsXQ2roP6b2vuA0&#038;oq=nine+types+of+&#038;gs_lp=Egxnd3Mtd2l6LXNlcnAiDm5pbmUgdHlwZXMgb2YgKgIIATIHECMYigUYJzIHECMYigUYJzIHECMYigUYJzIHEAAYigUYQzIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAuGIAEMgUQABiABEjQrgZQuQZYuQZwAXgBkAEAmAHZAaAB2QGqAQMyLTG4AQHIAQD4AQHCAgoQABhHGNYEGLADwgIUEC4YgAQYlwUY3AQY3gQY4ATYAQHiAwQYACBBiAYBkAYIugYGCAEQARgU&#038;sclient=gws-wiz-serp'>nine types of enneagram<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; to flesh out a family of &#8220;game interest&#8221;, we hope?!<\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php-GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1200px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/enneagram_type_game.php\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/enneagram-type-game-tutorial\/'>Enneagram Type Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='astgt'>Previous relevant <a target=_blank title='Australian Street Type Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/australian-street-type-game-tutorial\/'>Australian Street Type Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Australian Street Type Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.jpg\" title=\"Australian Street Type Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Australian Street Type Game Tutorial<\/p><\/div>\n<p>The experimental drag and drop theme continues on today, after <a title='Experimental Drag and Drop Game Tutorial' href='#eddgt'>Experimental Drag and Drop Game Tutorial<\/a>&#8216;s debut game application, with a <a target=_blank href=https:\/\/en.wikipedia.org\/wiki\/Street_suffix>Wikipedia<\/a> inspired &#8220;Australian Street Type&#8221; game today.<\/p>\n<p>Huh?!  Well, you know those street names that baffle?  Or are we easily baffleable?!  Anyway, you had to be there.  And if you ever feel you&#8217;re alone with an interest, just look it up in <a target=_blank href=https:\/\/en.wikipedia.org>Wikipedia<\/a> or <a target=_blank href=https:\/\/google.com>Google<\/a> and you&#8217;re almost sure to find out &#8230;<\/p>\n<blockquote><p>\nyou are not alone\n<\/p><\/blockquote>\n<p>Yes, our Wikipedia page mentioned Australian Street Type Designations with their lawyerly Australian Street Type Descriptions.  Who could ask for more?  <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=kTcRRaXV-fg'>Well?!<\/a><\/p>\n<p>To make this happen we wrote some PHP, which leans on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">a changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html---GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> basis, or template, to mould and bend towards our purpose <font size=1>&#8230; nga ha ha!<\/font><\/p>\n<p>Our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php_GETME\">first draft<\/a> PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\">game<\/a> is also playable below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/street_type_game.php\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-experimental-drag-and-drop-game-tutorial\/'>New Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddgt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop_game.jpg\" title=\"Experimental Drag and Drop Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Game Tutorial<\/p><\/div>\n<p>It can be interesting turning a &#8220;concept&#8221; (or even a &#8220;proof of concept&#8221; web application) into an, on the side, &#8220;game&#8221; web application, and that way, learn what&#8217;s possible via user action.  This is how we felt about yesterday&#8217;s <a title='Experimental Drag and Drop Primer Tutorial' href='#eddpt'>Experimental Drag and Drop Primer Tutorial<\/a> and that teamed with the wonder about how we could add some useful complexity to our &#8220;Experimental Drag and Drop&#8221; web application&#8217;s &#8230;<\/p>\n<blockquote><p>\nDrop Zone\n<\/p><\/blockquote>\n<p>Can &#8220;inheritance&#8221; be harnessed to make it work for some complexity of nested HTML elements inside that &#8220;Drop Zone&#8221; element when the document.body&#8217;s onload event happens?  We wondered whether a Brady Bunch style 3&#215;3 table could be the go?   And whether the nine cells could have a &#8220;score&#8221; associated with them, and that set of scores be changing over time to make the game more challenging and interesting?  Well &#8230;<\/p>\n<blockquote><p>\nYes\n<\/p><\/blockquote>\n<p> &#8230; is the answer <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">regarding making a game out of a proof of concept<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html--GETME\">experimental_drag_and_drop.html<\/a> HTML and Javascript and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm\" title=\"Click picture\">game web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:600px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.htm'><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-game-tutorial\/'>Experimental Drag and Drop Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eddpt'>Previous relevant <a target=_blank title='Experimental Drag and Drop Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/experimental-drag-and-drop-primer-tutorial\/'>Experimental Drag and Drop Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Experimental Drag and Drop Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.jpg\" title=\"Experimental Drag and Drop Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Experimental Drag and Drop Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve added the word <i>experimental<\/i> into today&#8217;s blog posting title, mainly because our <a target=_blank title='DataTransfer object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'>first of two inspirational webpage sources<\/a> (last modified on 23\/02\/2023) regarding <font size=1>somewhat<\/font> alternative <a target=_blank title='Drag and Drop information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Drag_and_drop'>&#8220;Drag and Drop&#8221;<\/a> functionalities told us, regarding the <i>DataTransfer<\/i> object informational &#8220;DataTransfer&#8221; webpage &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer'><p>\nExperimental: This is an experimental technology<br \/>\nCheck the Browser compatibility table carefully before using this in production.\n<\/p><\/blockquote>\n<p> &#8230; but our testing of the methodologies on various platforms hasn&#8217;t totally failed yet on any of the several desktop and mobile platform scenarios we&#8217;ve tried.  On mobile, we just held on for a sustained touch (down) to make it possible.  So maybe the industry has caught up with the ideas?  We&#8217;re hoping so, because &#8220;drag and drop&#8221; is a kind of natural thing online users think of to do, and people associate it with &#8220;getting things done&#8221; we reckon.<\/p>\n<p>Anyway, we relied on the great source code of the second of two inspirational webpages <a target=_blank title='DataTransfer: setData() method' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'>DataTransfer: setData() method<\/a>, thanks &#8230;<\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'><p>\nThe DataTransfer.setData() method sets the drag operation&#8217;s drag data to the specified data and type. If data for the given type does not exist, it is added at the end of the drag data store, such that the last item in the types list will be the new type. If data for the given type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.\n<\/p><\/blockquote>\n<p> &#8230; to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">get us going<\/a> with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html\" title=\"Click picture\">web application<\/a> (also shown below) using these techniques, about which we think some of you readers will be interested?!<\/p>\n<p><iframe style=width:100%;height:500px; src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html'><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60044' onclick='var dv=document.getElementById(\"d60044\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/drag-and-drop\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60044' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60054' onclick='var dv=document.getElementById(\"d60054\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60054' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60254' onclick='var dv=document.getElementById(\"d60254\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wikipedia\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60254' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60263' onclick='var dv=document.getElementById(\"d60263\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60263' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60270' onclick='var dv=document.getElementById(\"d60270\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/planet\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60270' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d60469' onclick='var dv=document.getElementById(\"d60469\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d60469' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63289' onclick='var dv=document.getElementById(\"d63289\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63289' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63310' onclick='var dv=document.getElementById(\"d63310\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dragover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63310' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d63315' onclick='var dv=document.getElementById(\"d63315\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63315' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Onto the start for our Colouring In web application via yesterday&#8217;s Colouring In Canvas Clone of Numbers Guessing Game Tutorial we&#8217;re starting to enhance, on top of that &#8220;clone level&#8221; functionality, via two new settings with two approaches to the &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-settings-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1885,1835,161,1580,230,327,2237,364,4717,4385,385,3539,476,477,2718,1533,2298,3922,557,3961,2658,652,2169,830,2394,4713,3434,932,997,1986,1200,1238,1581,1319,4718],"class_list":["post-63315","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-argument","tag-arguments","tag-border","tag-cell","tag-column","tag-did-you-know","tag-drag","tag-drag-and-drop","tag-dragover","tag-drop","tag-emoji","tag-entity","tag-game","tag-games-2","tag-genericize","tag-get","tag-grid","tag-guess","tag-hashtag","tag-hashtagging","tag-html-entity","tag-javascript","tag-location-hash","tag-navigation","tag-number","tag-ondragover","tag-palette","tag-php","tag-programming","tag-proof-of-concept","tag-stop-press","tag-table","tag-table-cell","tag-tutorial","tag-value-add"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63315"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=63315"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63315\/revisions"}],"predecessor-version":[{"id":63337,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63315\/revisions\/63337"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}