{"id":63472,"date":"2024-04-27T03:01:13","date_gmt":"2024-04-26T17:01:13","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63472"},"modified":"2024-04-27T12:03:41","modified_gmt":"2024-04-27T02:03:41","slug":"colouring-in-drag-and-drop-waterfall-reveal-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-waterfall-reveal-tutorial\/","title":{"rendered":"Colouring In Drag and Drop Waterfall Reveal 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#WaterfallReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Waterfall Reveal Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_waterfall.jpg\" title=\"Colouring In Drag and Drop Waterfall Reveal Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Waterfall Reveal Tutorial<\/p><\/div>\n<p>As far as the Reveal options go with our current Colouring In web application project&#8217;s &#8230;<\/p>\n<ul>\n<li>World Reveal game &#8230; and &#8230;<\/li>\n<li>Rivers Reveal game &#8230; and &#8230;<\/li>\n<li>Mountains Reveal game &#8230; today we&#8217;re presenting &#8230;<\/li>\n<li>Waterfalls Reveal game<\/li>\n<\/ul>\n<p> &#8230; as another <a target=_blank href='https:\/\/wikipedia.org'>Wikipedia<\/a> inspired addition to the functionality.  Thanks.<\/p>\n<p>And then there was the matter of the lesser River Reveal on double click display, and we fixed that, via writing a new &#8220;function plotariver(indexIntoRiversArray)&#8221; as below &#8230;<\/p>\n<p><code><br \/>\nfunction plotariver(jriv) {<br \/>\n var rivmaxx=0, rivmaxy=0, rivarr=[], rivarrco=[], newx=0, newy=0, lotsofspans='', rtitle='', ijk=0, kji=0;<br \/>\n var polyline='&lt;span onclick=\"window.open(' + \"'\" + '\/\/wikipedia.org\/wiki\/Ohio_River' + \"'\" + ',' + \"'\" + '_blank' + \"'\" + ',' + \"'\" + 'top=50,left=50,width=800,height=800' + \"'\" + ');\" ondragover=enact(this,String.fromCharCode(32)); id=rplacecross style=\"cursor:pointer;font-color:rgba(0,0,255,1.0);color:rgba(0,0,255,1.0);position:absolute;left:0px;top:0px;z-index:1001;\"&gt;&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"48\" width=\"126\" viewport=\"0 0 100 100\"&gt;&lt;polyline fill=\"none\" stroke=\"blue\" points=\"\" \/&gt;&lt;\/svg&gt;&lt;\/span&gt;';<br \/>\n var xsriveridq=jriv;<br \/>\n var xrivarr=document.getElementById('drivers').innerHTML.split(' id=river');<br \/>\n var xsrivernameq=xrivarr[jriv].split('\/option')[0].split('?')[0].split(\"\u2019\")[0];<br \/>\n var xrivarrco=xrivarr[-1 + jriv].split('option value=')[eval(-1 + xrivarr[-1 + jriv].split('option value=').length)].split(' ')[0].split(',');<br \/>\n if (xsrivernameq.indexOf('(') != -1 && xsrivernameq.indexOf(')') != -1) {<br \/>\n   polyline=polyline.replace('\/Ohio_River', '\/' + xsrivernameq.split('(')[1].split(')')[0].split('?')[0].replace(\/\\ \/g,'_') + '_River');<br \/>\n } else {<br \/>\n   polyline=polyline.replace('\/Ohio_River', '\/' + xsrivernameq.split('?')[0].replace(\/\\ \/g,'_') + '_River');<br \/>\n }<br \/>\n var xrtitle=' onclick=\"' + polyline.split(' onclick=\"')[1].split('\"')[0] + '\" title=\"' + xsrivernameq + ' River' + '\"';<br \/>\n   for (ijk=0; ijk&lt;xrivarrco.length; ijk+=2) {<br \/>\n   newy=eval(eval(eval(eval(90 - eval('' + xrivarrco[eval(1 + ijk)])) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n   newx=eval(eval(eval(eval(180 + eval('' + xrivarrco[ijk])) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n   if (ijk == 0) {<br \/>\n   rivminx=newx;<br \/>\n   rivminy=newy;<br \/>\n   rivmaxx=newx;<br \/>\n   rivmaxy=newy;<br \/>\n   } else {<br \/>\n   if (newx &lt; rivminx) { rivminx=newx; }<br \/>\n   if (newy &lt; rivminy) { rivminy=newy; }<br \/>\n   if (newx &gt; rivmaxx) { rivmaxx=newx; }<br \/>\n   if (newy &gt; rivmaxy) { rivmaxy=newy; }<br \/>\n   }<br \/>\n   if (lotsofspans == '') {<br \/>\n   lotsofspans='&lt;span data-ondragover=enact(this,String.fromCharCode(32)); name=r' + ijk + 'placecross' + xrtitle + ' style=\"font-color:rgba(0,0,0,1.0);color:rgba(0,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;.&lt;\/span&gt;';<br \/>\n   } else {<br \/>\n   lotsofspans+='&lt;span data-ondragover=enact(this,String.fromCharCode(32)); name=r' + ijk + 'placecross' + xrtitle + ' style=\"font-color:rgba(0,0,0,1.0);color:rgba(0,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;.&lt;\/span&gt;';<br \/>\n   }<br \/>\n   if (eval(2 + ijk) &gt;= eval('' + xrivarrco.length)) {<br \/>\n   polyline=polyline.replace('height=\"48\" width=\"126\"', 'height=\"' + Math.round(eval(rivmaxy - rivminy)) + '\" width=\"' + Math.round(eval(rivmaxx - rivminx)) + '\"');<br \/>\n   polyline=polyline.replace('rplacecross', 'r' + eval(2 + ijk) + 'placecross');<br \/>\n   polyline=polyline.replace('left:0px;top:0px;','left:' + Math.round(rivminx) + 'px;top:' + Math.round(rivminy) + 'px;');<br \/>\n   for (kji=0; kji&lt;xrivarrco.length; kji+=2) {<br \/>\n   newy=eval(eval(eval(eval(90 - eval('' + xrivarrco[eval(1 + kji)])) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n   newx=eval(eval(eval(eval(180 + eval('' + xrivarrco[kji])) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n   }<br \/>\n   if (polyline.indexOf('\"\"') != -1) {<br \/>\n   polyline=polyline.replace('\" \/&gt;', '' + Math.round(eval(newx - rivminx)) + ',' + Math.round(eval(newy - rivminy)) + '\" \/&gt;');<br \/>\n   } else {<br \/>\n   polyline=polyline.replace('\" \/&gt;', ' ' + Math.round(eval(newx - rivminx)) + ',' + Math.round(eval(newy - rivminy)) + '\" \/&gt;');<br \/>\n   }<br \/>\n   }<br \/>\n   xrtitle='';<br \/>\n   }<br \/>\n   \/\/if (firsttentimestwo != '' && secondtentimestwo == '') {<br \/>\n   \/\/xrtitle=xrtitle;<br \/>\n   \/\/} else {<br \/>\n   document.getElementById('placecross').innerHTML+=lotsofspans + polyline;<br \/>\n   \/\/}<br \/>\n   \/\/ startlookingforriver();<br \/>\n   \/\/}<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; helping out with that SVG overlay riving linework plotting methodologies.<\/p>\n<p>And so, further to yesterday&#8217;s <a title='Colouring In Drag and Drop Reveal Right Click Tutorial' href='#ciddrrct'>Colouring In Drag and Drop Reveal Right Click Tutorial<\/a> &#8230;<\/p>\n<p>Codewise, this involved &#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 helped 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\">the 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#RiverReveal\" title=\"Click picture\">Colouring In River Reveal Game<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#MountainReveal\" title=\"Click picture\">Colouring In Mountain Reveal Game<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WaterfallReveal\" title=\"Click picture\">Colouring In Waterfall Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\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-waterfall-reveal-tutorial\/'>Colouring In Drag and Drop Waterfall Reveal Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddrrct'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Reveal Right Click Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-reveal-right-click-tutorial\/'>Colouring In Drag and Drop Reveal Right Click 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#MountainReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Reveal Right Click Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game_map_right_click.jpg\" title=\"Colouring In Drag and Drop Reveal Right Click Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Reveal Right Click Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Colouring In Drag and Drop Mountain Reveal Game Tutorial' href='#ciddmrgt'>Colouring In Drag and Drop Mountain Reveal Game Tutorial<\/a> showed us &#8230;<\/p>\n<ul>\n<li>a whole new woooorrrrlllddd of event functionality &#8230; via &#8230; ondblclick &#8230; and today we have &#8230;<\/li>\n<li>a non-mobile new woooorrrrlllddd of event functionality &#8230; via &#8230; oncontextmenu &#8230; right click<\/li>\n<\/ul>\n<p> &#8230; as we introduce code for &#8220;what might have been&#8221; the &#8220;ondblcontextmenu&#8221; event &#8230; ie. <font color=blue>right clicking<\/font> twice, quickly, in succession.<\/p>\n<p><code><br \/>\nfunction mwr(ininvl) {<br \/>\n  var invl=Math.abs(ininvl);<br \/>\n  <font color=blue>if (eval('' + invl) > 127000) {<br \/>\n      if (document.getElementById('mytable').title.indexOf('Right click ') == -1) {<br \/>\n      document.getElementById('mytable').title+=String.fromCharCode(10) + String.fromCharCode(10) + 'Right click to display Google Earth view near where you right click.  Another right click in quick succession shows a Google Maps webpage relevant to where you right clicked.';<br \/>\n      }<br \/>\n   document.getElementById('mytable').oncontextmenu=function(e){<br \/>\n     orc(e);<br \/>\n   };<br \/>\n  }<\/font><br \/>\n  \/\/ rest of mwr() follows<br \/>\n}<br \/>\n<br \/>\n<font color=blue>function orc(e) {<br \/>\n       var thatlong=0, thatlat=0, newx=0, newy=0;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (prevlat &lt; -990 && prevlong &lt; -990) {<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n       }<br \/>\n       <br \/>\n      document.getElementById('mytable').style.cursor='progress';<br \/>\n      thatlat=eval(90.0 - eval(eval(pos4 - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      thatlong=eval(-180 + eval(eval(pos3 - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + thatlat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + thatlong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span title=\"Your Position\" style=\"font-color:rgba(255,0,0,1.0);color:rgba(255,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\" oncontextmenu=orc(event);&gt;X&lt;\/span&gt;';<br \/>\n      document.getElementById('mytable').style.cursor='pointer';<br \/>\n      if (document.getElementById('mytable').title.indexOf('Right click ') == -1) {<br \/>\n      document.getElementById('mytable').title+=String.fromCharCode(10) + String.fromCharCode(10) + 'Right click to display Google Earth view near where you right click.  Another right click in quick succession shows a Google Maps webpage relevant to where you right clicked.';<br \/>\n      }<br \/>\n      if (prevlat &lt; -990 && prevlong &lt; -990) {<br \/>\n      prevlat=thatlat;<br \/>\n      prevlong=thatlong;<br \/>\n      setTimeout(function(){ prevlat=-999; prevlong=-999; }, 8000);<br \/>\n      setTimeout(function(){ window.open('\/\/earth.google.com\/web\/@' + ('+' + thatlat).replace('+-','-') + (',+' + thatlong).replace('+-','-') + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r','_blank','top=180,left=180,width=600,height=600'); }, 3500);<br \/>\n      } else {<br \/>\n      if (eval(Math.abs(thatlat - prevlat) + Math.abs(thatlong - prevlong)) &lt; 1.0001) {<br \/>\n      if (eval(Math.abs(thatlat - prevlat) + Math.abs(thatlong - prevlong)) &lt; 0.0001) {<br \/>\n      setTimeout(function(){ window.open('\/\/maps.google.com\/maps?z=9&t=m&q=loc:' + ('+' + thatlat).replace('+-','-') + ('+' + thatlong).replace('+-','-').replace('-',',-'), '_blank','top=210,left=210,width=600,height=600'); }, 3600);<br \/>\n      prevlat+=0.0002;<br \/>\n      } else if (eval(Math.abs(thatlat - prevlat) + Math.abs(thatlong - prevlong)) &lt; 0.0003) {<br \/>\n      prevlong+=0.0002;<br \/>\n      setTimeout(function(){ window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?place=&latitude=' + thatlat + '&longitude=' + thatlong, '_blank','top=230,left=230,width=600,height=600'); }, 3700);<br \/>\n      } else {<br \/>\n      prevlong+=0.0002;<br \/>\n      setTimeout(function(){ window.open('\/\/www.rjmprogramming.com.au\/HTMLCSS\/earth_scanner.html?latitude=' + thatlat + '&longitude=' + thatlong + '&port=y', '_blank','top=250,left=250,width=600,height=600'); }, 3700);<br \/>\n      }<br \/>\n      }<br \/>\n      }<br \/>\n      e.stopPropagation();<br \/>\n}<\/font><br \/>\n<\/code><\/p>\n<p>Again, we only needed <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\">to change<\/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 helping out our 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a> or  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#RiverReveal\" title=\"Click picture\">Colouring In River Reveal Game<\/a> or  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#MountainReveal\" title=\"Click picture\">Colouring In Mountain Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a>, to achieve these &#8220;right click improvements&#8221;.<\/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-colouring-in-drag-and-drop-reveal-right-click-tutorial\/'>Colouring In Drag and Drop Reveal Right Click Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddmrgt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Mountain Reveal Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mountain-reveal-game-tutorial\/'>Colouring In Drag and Drop Mountain Reveal 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#MountainReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop Mountain Reveal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mountain_reveal_game.gif\" title=\"Colouring In Drag and Drop River Mountain Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Mountain Reveal Game Tutorial<\/p><\/div>\n<p>Today&#8217;s blog posting has a <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=Wu9RsJnf_c8'>&#8220;theme song&#8221;<\/a> &#8230; <strike>high<\/strike>Hi!  Yes, onto yesterday&#8217;s <a title='Colouring In Drag and Drop World Reveal Sharing Tutorial' href='#ciddwrst'>Colouring In Drag and Drop World Reveal Sharing Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>World Reveal game &#8230; and &#8230;<\/li>\n<li>Rivers Reveal game &#8230; we use a lot of, what pans out to be the &#8220;World Reveal&#8221; ideas to present &#8230;<\/li>\n<li>Mountains Reveal game<\/li>\n<\/ul>\n<p> &#8230; we just have <a target=_blank href='https:\/\/wikipedia.org'>Wikipedia<\/a> to thank, regarding the content.  Wikipedia is full of geospatial information smarts from the myriad of contributors, who have each contributed worthy Mountain description websites &#8230; so, thanks, everybody who contributes, there.<\/p>\n<p>But we&#8217;re not just &#8220;making mountains out of molehills&#8221; today.  Yes, we&#8217;re on the &#8220;sidetrack road&#8221; on adding a new event layer of functionality on top of the &#8230;<\/p>\n<ul>\n<li>ondragover event logic of these &#8220;Reveal&#8221; pen options &#8230; to, today, extending that to &#8230;<\/li>\n<li>ondblclick (of the &#8220;drop<sub>ee<\/sub>&#8221; target element) event logic<\/li>\n<\/ul>\n<p> &#8230; for those three &#8220;Reveal&#8221; game scenarios above, starting the day unsure if this &#8220;ondblclick&#8221; idea was, indeed, an event layer, independent, separated from the drag and drop realm.  But, happily, separated, it is!  Yay!!!!<\/p>\n<p>Separatism can be a liberating th<strike>i<\/strike>ang for the web application programmer.  Less worry, less angst, about how one aspect to a web application project, might impact another.<\/p>\n<p>So, given that we can prove that &#8220;ondblclick&#8221; element id=mytable event logic is available to us &#8230; <\/p>\n<p><code><br \/>\n   if (('' + document.URL + location.hash).replace('WorldReveal','=128506').replace('World%20Reveal','=128506').indexOf('=128506') != -1) {<br \/>\n      selem=128506;<br \/>\n      yourtzl='';<br \/>\n      setTimeout(function(){<br \/>\n        mwr(-128506);<br \/>\n        document.getElementById('mytable').title+=String.fromCharCode(10) + String.fromCharCode(10) + 'Double click to display nearest TimeZone places and associated country list.';<br \/>\n        document.getElementById('mytable').ondblclick=function(event){ nearestcountry(event); };<br \/>\n      }, 10000);<br \/>\n   } else if (('' + document.URL + location.hash).replace('RiverReveal','=127754').replace('River%20Reveal','=127754').indexOf('=127754') != -1) {<br \/>\n      setTimeout(function(){<br \/>\n        mwr(127754);<br \/>\n        document.getElementById('mytable').title+=String.fromCharCode(10) + String.fromCharCode(10) + 'Double click to display nearest River mouth and nearest River source.';<br \/>\n        document.getElementById('mytable').ondblclick=function(event){ nearestriver(event); };<br \/>\n      }, 10000);<br \/>\n   } else if (('' + document.URL + location.hash).replace('MountainReveal','=127956').replace('Mountain%20Reveal','=127956').indexOf('=127956') != -1) {<br \/>\n      selem=127956;<br \/>\n      yourtzl='';<br \/>\n      setTimeout(function(){<br \/>\n        mwr(-127956);<br \/>\n        document.getElementById('mytable').title+=String.fromCharCode(10) + String.fromCharCode(10) + 'Double click to display nearest Mountain.';<br \/>\n        document.getElementById('mytable').ondblclick=function(event){ nearestmountain(event); };<br \/>\n      }, 10000);<br \/>\n   }<br \/>\n<\/code><\/p>\n<p> &#8230; what can we achieve?<\/p>\n<ul>\n<li>World Reveal game &#8230; show 3 nearest TimeZone places to double clicked place in a popup window &#8230;<\/li>\n<li>Rivers Reveal game &#8230; show a nearest River for the start (the river mouth?) of the River co-ordinate string and a nearest River for the end of the River co-ordinate string (the river source?), if different, relative to double clicked position &#8230;<\/li>\n<li>Mountains Reveal game &#8230; show a nearest Mountain relative to double clicked position<\/li>\n<\/ul>\n<p> &#8230; as per &#8230;<\/p>\n<p><code><br \/>\nfunction nearestcountry(e) {<br \/>\n  var thatlat=0, thatlong=0, newx=0, newy=0;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n  <br \/> <br \/>\n      document.getElementById('mytable').style.cursor='progress';<br \/>\n      thatlat=eval(90.0 - eval(eval(pos4 - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      thatlong=eval(-180 + eval(eval(pos3 - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + thatlat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + thatlong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span title=\"Your Position\" style=\"font-color:rgba(255,0,0,1.0);color:rgba(255,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;X&lt;\/span&gt;';<br \/>\n      document.getElementById('mytable').style.cursor='pointer';<br \/>\n      window.open('\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php?place=&latitude=' + encodeURIComponent('' + thatlat) + '&longitude=' + encodeURIComponent('' + thatlong) + '&ntztontz=y', '_blank', 'top=50,left=50,width=600,height=600');<br \/>\n}<br \/>\n<br \/>\nfunction nearestriver(e) {<br \/>\n  var jcc=0, icc=0, thatlat=0, thatlong=0, vslat=0, vslong=0, closelat=0, closelong=0, newx=0, newy=0, diffsofar=0.0, nearestidx=-1, oe='sup', oec='&amp;#128068;';<br \/>\n  var rivmaxx=0, rivmaxy=0, rivarr=[], jriv=0, rivarrco=[], lotsofspans='', rtitle='', ijk=0, kji=0;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n <br \/> <br \/>\n   srivers=document.getElementById('drivers').innerHTML; \/\/, sriveridq=0, srivernameq='', sriversofar=',';<br \/>\n   rivarr=srivers.split(' id=river');<br \/>\n      srivers='';<br \/>\n<br \/> <br \/>\n      document.getElementById('mytable').style.cursor='progress';<br \/>\n      thatlat=eval(90.0 - eval(eval(pos4 - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      thatlong=eval(-180 + eval(eval(pos3 - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + thatlat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + thatlong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span title=\"Your Position\" style=\"font-color:rgba(255,0,0,1.0);color:rgba(255,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;X&lt;\/span&gt;';<br \/>\n<br \/>\n      for (jcc=0; jcc&lt;2; jcc++) {<br \/>\n      for (icc=1; icc&lt;rivarr.length; icc++) {<br \/>\n          if (nearestidx &lt; 0) {<br \/>\n            nearestidx=icc;<br \/>\n            rivarrco=rivarr[-1 + icc].split('option value=')[eval(-1 + rivarr[-1 + icc].split('option value=').length)].split(' ')[0].split(',');<br \/>\n            \/\/alert(rivarr[-1 + icc].split('option value=')[eval(-1 + rivarr[-1 + icc].split('option value=').length)].split(' ')[0]);<br \/>\n            if (jcc == 1) {<br \/>\n            closelat=eval('' + rivarrco[eval(-1 + rivarrco.length)]);<br \/>\n            closelong=eval('' + rivarrco[eval(-2 + rivarrco.length)]);<br \/>\n            } else {<br \/>\n            closelat=eval('' + rivarrco[1]);<br \/>\n            closelong=eval('' + rivarrco[0]);<br \/>\n            }<br \/>\n            diffsofar=eval(Math.abs(closelat - thatlat) + Math.abs(closelong - thatlong));<br \/>\n          } else {<br \/>\n            rivarrco=rivarr[-1 + icc].split('option value=')[eval(-1 + rivarr[-1 + icc].split('option value=').length)].split(' ')[0].split(',');<br \/>\n            if (jcc == 1) {<br \/>\n            vslat=eval('' + rivarrco[eval(-1 + rivarrco.length)]);<br \/>\n            vslong=eval('' + rivarrco[eval(-2 + rivarrco.length)]);<br \/>\n            } else {<br \/>\n            vslat=eval('' + rivarrco[1]);<br \/>\n            vslong=eval('' + rivarrco[0]);<br \/>\n            }<br \/>\n            if (diffsofar &gt; eval(Math.abs(vslat - thatlat) + Math.abs(vslong - thatlong))) {<br \/>\n            nearestidx=icc;<br \/>\n            closelat=vslat;<br \/>\n            closelong=vslong;<br \/>\n            diffsofar=eval(Math.abs(vslat - thatlat) + Math.abs(vslong - thatlong));<br \/>\n            }<br \/>\n          }<br \/>\n      }<br \/>\n<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + closelat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + closelong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('mytable').style.cursor='pointer';<br \/>\n      if (document.getElementById('placecross').innerHTML.indexOf('&gt;' + rivarr[eval(0 + nearestidx)].split('\/option')[0] + '&lt;') == -1) {<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span onclick=\"window.open(' + \"'\/\/wikipedia.org\/wiki\/\" + encodeURIComponent(rivarr[eval(0 + nearestidx)].split('\/option')[0].replace(\/\\ \/g,'_')) + \"','_blank','top=100,left=100,height=600,width=600'\" + ');\" title=\"' + rivarr[eval(0 + nearestidx)].split('\/option')[0] + '\" style=\"cursor:pointer;font-color:rgba(0,0,255,1.0);color:rgba(0,0,255,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;' + oec + '&lt;' + oe + '&gt;' + rivarr[eval(0 + nearestidx)].split('\/option')[0] + '&lt;\/' + oe + '&gt;&lt;\/span&gt;';<br \/>\n      }<br \/>\n      nearestidx=-1;<br \/>\n      diffsofar=0.0;<br \/>\n      oe='sub';<br \/>\n      oec='&amp;#8505;';<br \/>\n      }<br \/>\n<br \/> <br \/>\n}<br \/>\n<br \/>\nfunction nearestmountain(e) {<br \/>\n  var thatlat=0, thatlong=0, vslat=0, vslong=0, closelat=0, closelong=0, newx=0, newy=0, diffsofar=0.0, nearestidx=-1;<br \/>\n       e.preventDefault();<br \/>\n<br \/>\n       if (e.touches) {<br \/>\n       if (e.touches[0].pageX) {<br \/>\n       pos3 = e.touches[0].pageX;<br \/>\n       pos4 = e.touches[0].pageY;<br \/>\n       } else {<br \/>\n       pos3 = e.touches[0].clientX;<br \/>\n       pos4 = e.touches[0].clientY;<br \/>\n       }<br \/>\n       \/\/console.log('pos3=' + pos3 + ',pos4=' + pos4);<br \/>\n       } else if (e.clientX || e.clientY) {<br \/>\n        pos3 = e.clientX;<br \/>\n        pos4 = e.clientY;<br \/>\n       } else {<br \/>\n        pos3 = e.pageX;<br \/>\n        pos4 = e.pageY;<br \/>\n       }<br \/>\n  <br \/> <br \/>\n      document.getElementById('mytable').style.cursor='progress';<br \/>\n      thatlat=eval(90.0 - eval(eval(pos4 - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      thatlong=eval(-180 + eval(eval(pos3 - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + thatlat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + thatlong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span title=\"Your Position\" style=\"font-color:rgba(255,0,0,1.0);color:rgba(255,0,0,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;X&lt;\/span&gt;';<br \/>\n<br \/>\n      for (var icc=0; icc&lt;codethenname.length; icc++) {<br \/>\n        if (codethenname[icc].replace(\/[0-9]\/g, '.').indexOf('.,') != -1) {<br \/>\n          if (nearestidx &lt; 0) {<br \/>\n            nearestidx=icc;<br \/>\n            closelat=eval('' + codethenname[icc].split(',')[0]);<br \/>\n            closelong=eval('' + codethenname[icc].split(',')[1]);<br \/>\n            diffsofar=eval(Math.abs(closelat - thatlat) + Math.abs(closelong - thatlong));<br \/>\n          } else {<br \/>\n            vslat=eval('' + codethenname[icc].split(',')[0]);<br \/>\n            vslong=eval('' + codethenname[icc].split(',')[1]);<br \/>\n            if (diffsofar &gt; eval(Math.abs(vslat - thatlat) + Math.abs(vslong - thatlong))) {<br \/>\n            nearestidx=icc;<br \/>\n            closelat=vslat;<br \/>\n            closelong=vslong;<br \/>\n            diffsofar=eval(Math.abs(vslat - thatlat) + Math.abs(vslong - thatlong));<br \/>\n            }<br \/>\n          }<br \/>\n        }<br \/>\n      }<br \/>\n<br \/>\n      newy=eval(eval(eval(eval(90 - eval('' + closelat)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      newx=eval(eval(eval(eval(180 + eval('' + closelong)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('mytable').style.cursor='pointer';<br \/>\n      document.getElementById('placecross').innerHTML+='&lt;span onclick=\"window.open(' + \"'\/\/wikipedia.org\/wiki\/\" + encodeURIComponent(codethenname[eval(-1 + nearestidx)].replace(\/\\ \/g,'_')) + \"','_blank','top=100,left=100,height=600,width=600'\" + ');\" title=\"' + codethenname[eval(-1 + nearestidx)] + '\" style=\"cursor:pointer;font-color:rgba(0,0,255,1.0);color:rgba(0,0,255,1.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;x&lt;br&gt;' + codethenname[eval(-1 + nearestidx)] + '&lt;\/span&gt;';<br \/>\n    <br \/> <br \/>\n}<br \/>\n<\/code><\/p>\n<p>We only needed <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 helping out our 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a> or  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#RiverReveal\" title=\"Click picture\">Colouring In River Reveal Game<\/a> or  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#MountainReveal\" title=\"Click picture\">Colouring In Mountain Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a>, to achieve these &#8220;steep improvements&#8221;.<\/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-mountain-reveal-game-tutorial\/'>Colouring In Drag and Drop Mountain Reveal Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddrrgt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop River Reveal Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-river-reveal-game-tutorial\/'>Colouring In Drag and Drop River Reveal 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#RiverReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop River Reveal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/river_reveal_game.gif\" title=\"Colouring In Drag and Drop River Reveal Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop River Reveal Game Tutorial<\/p><\/div>\n<p>Today&#8217;s blog posting has a <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=Wu9RsJnf_c8'>&#8220;theme song&#8221;<\/a> &#8230; deep.  Yes, onto yesterday&#8217;s <a title='Colouring In Drag and Drop World Reveal Sharing Tutorial' href='#ciddwrst'>Colouring In Drag and Drop World Reveal Sharing Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>World Reveal game &#8230; we use a lot of it&#8217;s ideas to present &#8230;<\/li>\n<li>Rivers Reveal game<\/li>\n<\/ul>\n<p> &#8230; today, thanks to the data from <a target=_blank title='HTTP:\/\/geojson.xyz rivers lake centerlines' href='https:\/\/d2ad6b4ur7yvpq.cloudfront.net\/naturalearth-3.3.0\/ne_50m_rivers_lake_centerlines.geojson'>HTTP:\/\/geojson.xyz rivers lake centerlines<\/a>.<\/p>\n<p>The interesting difference between these two functionalities, that share a World Map background image, is that to plot a river, no single cross is going to suffice.  We need to do some grandparent innerHTML element nesting a &#8230;<\/p>\n<ul>\n<li>parent innerHTML element using &#8230;\n<ol>\n<li>position:absolute;<\/li>\n<li>left:[minimumXco-ordinate]px;<\/li>\n<li>top:[minimumYco-ordinate]px;<\/li>\n<li>z-index:[large];\n<\/ol>\n<p> &#8230; nesting &#8230;<\/li>\n<li>SVG &#8230; width=&#8221;[maximumXco-ordinate &#8211; minimumXco-ordinate]&#8221; height=&#8221;[maximumYco-ordinate &#8211; minimumYco-ordinate]&#8221;<\/li>\n<li>polyline &#8230; attribute &#8220;points&#8221; X,Y co-ordinate sets such that minumum X one will be 0 and minimum Y one will be 0<\/li>\n<li>initially invisible &#8230; becoming visible &#8230;<\/li>\n<li>if correct dragging or at the end of the dragging<\/li>\n<\/ul>\n<p> &#8230; though those last two apply to the World Reveal game, as well.  You might recall a lot of this going on when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-svg-overlay-tutorial\/' title='Australian Indigenous Language SVG Overlay Tutorial'>Australian Indigenous Language SVG Overlay Tutorial<\/a>.  These SVG overlay ideas can be extremely useful, on occasions!  The other choice was HTML div elements between the &#8220;dot&#8221; span ones and apply &#8220;diagonally across line&#8221; linear gradient style CSS we talked about at <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/earth-scanner-linear-gradient-leg-tutorial\/' title='Earth Scanner Linear Gradient Leg Tutorial'>Earth Scanner Linear Gradient Leg Tutorial<\/a>.  All this diagon<a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=PjgJZCKaVdI'>ali<\/a>ty can be fun to achieve!<\/p>\n<p>Also added into the mix are lots of ways to click the plot elements to navigate to useful <a target=_blank href='https:\/\/wikipedia.org'>Wikipedia<\/a> webpages, thanks.<\/p>\n<p>It&#8217;s a semi-cloning scenario today, so the &#8220;level playing field&#8221; collaboration ideas have also been brought across &#8230;<\/p>\n<p><code><br \/>\nvar firsttentimestwo='', jsecq=-1, secondarrq=[], secondtentimestwo='', ctyplaceq='', gaclist='', gac=false, selem=128396, yourtzl='', ctyqrect=null, ctyidq=-1, ctycodeq='', ctynameq='', ctylatq=0, ctylongq=0, ctyqscore=0, ctyqgoes=0, ctysofarq=',', ctyqfirst=true, ctyqfound=false;<br \/>\nvar srivers='', sriveridq=0, srivernameq='', sriversofar=',', rivminx=0, rivminy=0;<br \/>\n<br \/>\nfunction aize(spo) {<br \/>\n  var tspo=spo.title;<br \/>\n  var isot=spo.getAttribute('data-iso');<br \/>\n  var partsare=tspo.split(' is in ');<br \/>\n  if (eval('' + partsare.length) &gt; 1) {<br \/>\n    tspo='&lt;a title=\"Thanks to Wikipedia ...\" onclick=\"window.open(' +  \"'\/\/wikipedia.org\/wiki\/\" + encodeURIComponent(partsare[0].replace(\/\\ \/g,'_')) + \"','_blank','top=100,left=100,width=600,height=600'\" + ');\" style=cursor:pointer;text-decoration:underline;&gt;' + partsare[0] + '&lt;\/a&gt; is in ' + orflag(isot) + ' &lt;a title=\"Thanks to Wikipedia ...\" onclick=\"window.open(' +  \"'\/\/wikipedia.org\/wiki\/ISO_3166-2:\" + encodeURIComponent(isot.replace(\/\\ \/g,'_')) + \"','_blank','top=100,left=100,width=600,height=600'\" + ');\" style=cursor:pointer;text-decoration:underline;&gt;' + partsare[1] + '&lt;\/a&gt;';<br \/>\n  }<br \/>\n  return tspo;<br \/>\n}<br \/>\n    <br \/>\n  function orflag(thiscc) {<br \/>\n      var ccchar='', ccsuff='';<br \/>\n      var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';<br \/>\n      var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+=String.fromCodePoint(eval('' + dri[eval('' + lri.indexOf(ccchar))])); \/\/'&amp;#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n      }<br \/>\n      return ccsuff;<br \/>\n  }<br \/>\n<br \/>\nfunction postgeta() {<br \/>\n if (gaclist != '') {<br \/>\n   var gacs=gaclist.split(',');<br \/>\n   \/\/alert(gaclist);<br \/>\n   for (var igac=0; igac&lt;gacs.length; igac++) {<br \/>\n    if (document.getElementById(gacs[igac])) {<br \/>\n     document.getElementById(gacs[igac]).style.backgroundColor='rgba(255,255,255,0.8)';<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    } else if (gacs[igac] != '') {<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    }<br \/>\n   }<br \/>\n   if (gaclist != '' && gaclist.replace(\/\\,\/g,'') == '') {<br \/>\n      gaclist='';<br \/>\n   }<br \/>\n   \/\/alert(gaclist);<br \/>\n   \/\/gaclist='';<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction atworldrevealstart() {<br \/>\n  var lsec=0, msec=0;<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  }<br \/>\n  if (firsttentimestwo == '' && secondtentimestwo == '') {<br \/>\n    var pwr=location.search.split('WorldReveal=')[1] ? decodeURIComponent(location.search.split('WorldReveal=')[1].split('&')[0].split('#')[0]) : '';<br \/>\n    if (pwr == '') {<br \/>\n      if (('' + location.hash).indexOf('WorldReveal=') != -1) {<br \/>\n        pwr=decodeURIComponent(('' + location.hash).split('WorldReveal=')[1].split('&')[0].split('#')[0]);<br \/>\n      }<br \/>\n    }<br \/>\n    if (pwr != '') {<br \/>\n      firsttentimestwo=pwr.toUpperCase();<br \/>\n      secondtentimestwo=firsttentimestwo.substring(2);<br \/>\n      for (lsec=0; lsec&lt;firsttentimestwo.length; lsec+=2) {<br \/>\n       for (msec=0; msec&lt;codethenname.length; msec+=2) {<br \/>\n         if (codethenname[msec].toUpperCase() == firsttentimestwo.substring(lsec).substring(0,2).toUpperCase()) {<br \/>\n           secondarrq.push(msec);<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n      ctysofarq=',';<br \/>\n    }<br \/>\n    pwr=location.search.split('RiverReveal=')[1] ? decodeURIComponent(location.search.split('RiverReveal=')[1].split('&')[0].split('#')[0]) : '';<br \/>\n    if (pwr == '') {<br \/>\n      if (('' + location.hash).indexOf('RiverReveal=') != -1) {<br \/>\n        pwr=decodeURIComponent(('' + location.hash).split('RiverReveal=')[1].split('&')[0].split('#')[0]);<br \/>\n      }<br \/>\n    }<br \/>\n    if (pwr != '') {<br \/>\n      firsttentimestwo=pwr.toUpperCase();<br \/>\n      secondtentimestwo=('~' + firsttentimestwo).replace('~' + firsttentimestwo.split(',')[0] + ',','').replace('~' + firsttentimestwo.split(',')[0],'').replace('~','');<br \/>\n      secondarrq=firsttentimestwo.split(',');<br \/>\n      sriversofar=',';<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction getsomemore(inrivernameq, inriveridq) {<br \/>\n  var rval='';<br \/>\n  firsttentimestwo='' + inriveridq;<br \/>\n  for (var ioc=1; ioc&lt;(location.search.split('qnum=')[1] ? eval(location.search.split('qnum=')[1].split('&')[0]) : 10); ioc++) {<br \/>\n     rval='' + getariver();<br \/>\n     firsttentimestwo+=',' + rval.split('.')[0];<br \/>\n     secondarrq.push(eval(rval.split('.')[1]));<br \/>\n  }<br \/>\n  secondtentimestwo=firsttentimestwo.replace(firsttentimestwo.split(',')[0] + ',', '');<br \/>\n  sriversofar=',';<br \/>\n  srivernameq=inrivernameq;<br \/>\n  sriveridq=eval('' + inriveridq);<br \/>\n  sriver='';<br \/>\n  \/\/alert(srivernameq + ' ' + eval(0 + sriveridq));<br \/>\n  document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of river ' + inrivernameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n  return inrivernameq;<br \/>\n}<br \/>\n<br \/>\nfunction getninemore(inctynameq, inctycodeq, inctyidq, tylatq, tylongq, typlaceq) {<br \/>\n  var rval='';<br \/>\n  firsttentimestwo=inctycodeq;<br \/>\n  for (var ioc=1; ioc&lt;(location.search.split('qnum=')[1] ? eval(location.search.split('qnum=')[1].split('&')[0]) : 10); ioc++) {<br \/>\n     rval='' + getacountry();<br \/>\n     firsttentimestwo+=rval.split('.')[0];<br \/>\n     secondarrq.push(eval(rval.split('.')[1]));<br \/>\n  }<br \/>\n  secondtentimestwo=firsttentimestwo.substring(2);<br \/>\n  ctysofarq=',';<br \/>\n  \/\/alert(firsttentimestwo);<br \/>\n  ctylatq=tylatq;<br \/>\n  ctylongq=tylongq;<br \/>\n  ctyplaceq=typlaceq;<br \/>\n  ctynameq=inctynameq;<br \/>\n  ctycodeq=inctycodeq;<br \/>\n  ctyidq=eval('' + inctyidq);<br \/>\n  return inctynameq;<br \/>\n}<br \/>\n<br \/>\nfunction getariver() {<br \/>\n var rivmaxx=0, rivmaxy=0, rivarr=[], jriv=0, rivarrco=[], newx=0, newy=0, lotsofspans='', rtitle='', ijk=0, kji=0;<br \/>\n var polyline='&lt;span onclick=\"window.open(' + \"'\" + '\/\/wikipedia.org\/wiki\/Ohio_River' + \"'\" + ',' + \"'\" + '_blank' + \"'\" + ',' + \"'\" + 'top=50,left=50,width=800,height=800' + \"'\" + ');\" ondragover=enact(this,String.fromCharCode(32)); id=rplacecross style=\"cursor:pointer;font-color:rgba(0,0,0,0.0);color:rgba(0,0,0,0.0);position:absolute;left:0px;top:0px;z-index:1001;\"&gt;&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"48\" width=\"126\" viewport=\"0 0 100 100\"&gt;&lt;polyline fill=\"none\" stroke=\"blue\" points=\"\" \/&gt;&lt;\/svg&gt;&lt;\/span&gt;';<br \/>\n if (eval('' + evs.length) &gt; 0) {<br \/>\n for (ijk=0; ijk&lt;evs.length; ijk++) {<br \/>\n   evs[ijk].style.backgroundColor='rgba(255,255,255,0.8)';<br \/>\n }<br \/>\n }<br \/>\n evs=[];<br \/>\n if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { jsecq++; if (jsecq &gt;= eval('' + secondarrq.length)) { secondtentimestwo=' ';  }  }<br \/>\n if (eval('' + screen.width) &gt; 800) {<br \/>\n   polyline='&lt;span onclick=\"window.open(' + \"'\" + '\/\/wikipedia.org\/wiki\/Ohio_River' + \"'\" + ',' + \"'\" + '_blank' + \"'\" + ',' + \"'\" + 'top=' + eval(-800 + screen.height) + ',left=' + eval(-800 + screen.width) + ',width=800,height=800' + \"'\" + ');\" ondragover=enact(this,String.fromCharCode(32)); id=rplacecross style=\"cursor:pointer;font-color:rgba(0,0,0,0.0);color:rgba(0,0,0,0.0);position:absolute;left:0px;top:0px;z-index:1001;\"&gt;&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"48\" width=\"126\" viewport=\"0 0 100 100\"&gt;&lt;polyline fill=\"none\" stroke=\"blue\" points=\"\" \/&gt;&lt;\/svg&gt;&lt;\/span&gt;';<br \/>\n }<br \/>\n if (document.getElementById('drivers')) {<br \/>\n  if (srivers == '') {<br \/>\n   srivers=document.getElementById('drivers').innerHTML; \/\/, sriveridq=0, srivernameq='', sriversofar=',';<br \/>\n   rivarr=srivers.split(' id=river');<br \/>\n   jriv=eval(Math.floor(Math.random() * eval(-1 + rivarr.length)) + 1);<br \/>\n   while (sriversofar.indexOf(',' + jriv + ',') != -1) {<br \/>\n   jriv=eval(Math.floor(Math.random() * eval(-1 + rivarr.length)) + 1);<br \/>\n   }<br \/>\n   if (firsttentimestwo != '' && secondtentimestwo.trim() != '') {  jriv=eval('' + secondarrq[jsecq]); }<br \/>\n   sriveridq=jriv;<br \/>\n   if (sriversofar.indexOf(',' + jriv + ',') == -1) {<br \/>\n   srivernameq=rivarr[jriv].split('\/option')[0].split('?')[0];<br \/>\n   sriversofar+='' + jriv + ',';<br \/>\n   rivarrco=rivarr[-1 + jriv].split('option value=')[eval(-1 + rivarr[-1 + jriv].split('option value=').length)].split(' ')[0].split(',');<br \/>\n   if (srivernameq.indexOf('(') != -1 && srivernameq.indexOf(')') != -1) {<br \/>\n   polyline=polyline.replace('\/Ohio_River', '\/' + srivernameq.split('(')[1].split(')')[0].split('?')[0].replace(\/\\ \/g,'_') + '_River');<br \/>\n   } else {<br \/>\n   polyline=polyline.replace('\/Ohio_River', '\/' + srivernameq.split('?')[0].replace(\/\\ \/g,'_') + '_River');<br \/>\n   }<br \/>\n   rtitle=' onclick=\"' + polyline.split(' onclick=\"')[1].split('\"')[0] + '\" title=\"' + srivernameq + ' River' + '\"';<br \/>\n   for (ijk=0; ijk&lt;rivarrco.length; ijk+=2) {<br \/>\n   newy=eval(eval(eval(eval(90 - eval('' + rivarrco[eval(1 + ijk)])) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n   newx=eval(eval(eval(eval(180 + eval('' + rivarrco[ijk])) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n   if (ijk == 0) {<br \/>\n   rivminx=newx;<br \/>\n   rivminy=newy;<br \/>\n   rivmaxx=newx;<br \/>\n   rivmaxy=newy;<br \/>\n   } else {<br \/>\n   if (newx &lt; rivminx) { rivminx=newx; }<br \/>\n   if (newy &lt; rivminy) { rivminy=newy; }<br \/>\n   if (newx &gt; rivmaxx) { rivmaxx=newx; }<br \/>\n   if (newy &gt; rivmaxy) { rivmaxy=newy; }<br \/>\n   }<br \/>\n   if (lotsofspans == '') {<br \/>\n   lotsofspans='&lt;span ondragover=enact(this,String.fromCharCode(32)); id=r' + ijk + 'placecross' + rtitle + ' style=\"font-color:rgba(0,0,0,0.0);color:rgba(0,0,0,0.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;.&lt;\/span&gt;';<br \/>\n   } else {<br \/>\n   lotsofspans+='&lt;span ondragover=enact(this,String.fromCharCode(32)); id=r' + ijk + 'placecross' + rtitle + ' style=\"font-color:rgba(0,0,0,0.0);color:rgba(0,0,0,0.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;.&lt;\/span&gt;';<br \/>\n   }<br \/>\n   if (eval(2 + ijk) &gt;= eval('' + rivarrco.length)) {<br \/>\n   polyline=polyline.replace('height=\"48\" width=\"126\"', 'height=\"' + Math.round(eval(rivmaxy - rivminy)) + '\" width=\"' + Math.round(eval(rivmaxx - rivminx)) + '\"');<br \/>\n   polyline=polyline.replace('rplacecross', 'r' + eval(2 + ijk) + 'placecross');<br \/>\n   polyline=polyline.replace('left:0px;top:0px;','left:' + Math.round(rivminx) + 'px;top:' + Math.round(rivminy) + 'px;');<br \/>\n   for (kji=0; kji&lt;rivarrco.length; kji+=2) {<br \/>\n   newy=eval(eval(eval(eval(90 - eval('' + rivarrco[eval(1 + kji)])) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n   newx=eval(eval(eval(eval(180 + eval('' + rivarrco[kji])) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n   }<br \/>\n   if (polyline.indexOf('\"\"') != -1) {<br \/>\n   polyline=polyline.replace('\" \/&gt;', '' + Math.round(eval(newx - rivminx)) + ',' + Math.round(eval(newy - rivminy)) + '\" \/&gt;');<br \/>\n   } else {<br \/>\n   polyline=polyline.replace('\" \/&gt;', ' ' + Math.round(eval(newx - rivminx)) + ',' + Math.round(eval(newy - rivminy)) + '\" \/&gt;');<br \/>\n   }<br \/>\n   }<br \/>\n   rtitle='';<br \/>\n   }<br \/>\n   if (firsttentimestwo != '' && secondtentimestwo == '') {<br \/>\n   rtitle=rtitle;<br \/>\n   } else {<br \/>\n   document.getElementById('placecross').innerHTML=lotsofspans + polyline;<br \/>\n   }<br \/>\n   \/\/ startlookingforriver();<br \/>\n   }<br \/>\n }<br \/>\n }<br \/>\n srivers='';<br \/>\n document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + srivernameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n if (firsttentimestwo == '' && secondtentimestwo == '') { return getsomemore(srivernameq, eval(0 + sriveridq));  }<br \/>\n if (firsttentimestwo != '' && secondtentimestwo == '') {  return '' + eval(0 + sriveridq) + '.' + eval(0 + sriveridq);  }<br \/>\n return srivernameq;<br \/>\n}<br \/>\n<br \/>\nfunction getacountry() {<br \/>\n var wrong=true;<br \/>\n if (eval('' + evs.length) &gt; 0) {<br \/>\n for (var ijk=0; ijk&lt;evs.length; ijk++) {<br \/>\n   evs[ijk].style.backgroundColor='rgba(255,255,255,0.8)';<br \/>\n }<br \/>\n }<br \/>\n evs=[];<br \/>\n ctynameq='';<br \/>\n if (document.getElementById('splacecross')) {<br \/>\n      document.getElementById('splacecross').style.zIndex='999';<br \/>\n      document.getElementById('splacecross').style.color='black';<br \/>\n      document.getElementById('splacecross').style.fontColor='black';<br \/>\n      if (document.getElementById('splacecross').innerHTML.indexOf('&lt;br&gt;') == -1) {<br \/>\n      document.getElementById('splacecross').innerHTML+='&lt;br&gt;' + aize(document.getElementById('splacecross'));<br \/>\n      }<br \/>\n }<br \/>\n setTimeout(postgeta, 2000);<br \/>\n if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { jsecq++; if (jsecq &gt;= eval('' + secondarrq.length)) { secondtentimestwo=' ';  } }<br \/>\n if (document.getElementById('ctylist')) {<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  }<br \/>\n  var dohm=0;<br \/>\n  ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n  if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  \/\/alert(ctyidq)<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') == -1) {<br \/>\n    wrong=true;<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  }<br \/>\n  while (ctysofarq.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1 || wrong) {<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1) {<br \/>\n    if (eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) &gt; 2) {<br \/>\n      if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'PjunkT') {<br \/>\n      dohm=2;<br \/>\n      } else if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'AjunkU') {<br \/>\n      dohm=Math.floor(eval(eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) \/ 2));<br \/>\n      }<br \/>\n      \/\/alert('' + dohm + ' ' + codethenname[eval(0 + ctyidq)] + ' ' + codethenname[eval(1 + ctyidq)]);<br \/>\n    }<br \/>\n    wrong=false;<br \/>\n    \/\/ctyplaceq=('' + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/').length)]);<br \/>\n    ctyplaceq=document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/').length)].replace(\/\\_\/g,' ');<br \/>\n    ctylatq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[0]).toPrecision(6);<br \/>\n    ctylongq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[1]).toPrecision(6);<br \/>\n    \/\/alert('' + ctyplaceq);<br \/>\n    \/\/alert(codethenname[eval(0 + ctyidq)].toUpperCase() + ' ' + dohm + ' ' + ctylatq + ';' + ctylongq + ' ' + codethenname[eval(0 + ctyidq)].toUpperCase());<br \/>\n ctyqfirst=false;<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfound=false;<br \/>\n document.getElementById('source').innerHTML=orflag(codethenname[eval(0 + ctyidq)]);<br \/>\n if (firsttentimestwo == '' && secondtentimestwo == '') {  return getninemore(ctynameq, ctycodeq, eval(0 + ctyidq), ctylatq, ctylongq, ctyplaceq);  }<br \/>\n if (firsttentimestwo != '' && secondtentimestwo == '') {  return '' + ctycodeq + '.' + eval(0 + ctyidq);  }<br \/>\n return ctynameq;<br \/>\n  } else {<br \/>\n    wrong=true;<br \/>\n    ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  }<br \/>\n  }<br \/>\n  ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n  ctyqfound=false;<br \/>\n }<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfirst=false;<br \/>\n gac=true;<br \/>\n document.getElementById('source').innerHTML=orflag(codethenname[eval(0 + ctyidq)]);<br \/>\n if (firsttentimestwo == '' && secondtentimestwo == '') {  return getninemore(ctynameq, ctycodeq, eval(0 + ctyidq), ctylatq, ctylongq, ctyplaceq);  }<br \/>\n if (firsttentimestwo != '' && secondtentimestwo == '') {  return '' + ctycodeq + '.' + eval(0 + ctyidq);  }<br \/>\n return ctynameq;<br \/>\n}<br \/>\n<br \/>\nfunction mwr(invl) {<br \/>\n  if (eval('' + invl) == 127754) {<br \/>\n    if (selem == 128506) {<br \/>\n      location.href=document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19878675) + '#RiverReveal';<br \/>\n  selem=eval('' + invl);<br \/>\n  return invl;<br \/>\n    }<br \/>\n     document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n     document.getElementsByTagName('h3')[1].style.display='none';<br \/>\n     document.getElementsByTagName('h4')[0].style.display='none';<br \/>\n    document.getElementsByTagName('select')[0].value='127754';<br \/>\n    document.getElementById('source').innerHTML='&amp;#127754;';<br \/>\n    document.getElementById('dmil').style.display='none';<br \/>\n    document.getElementById('dmiltwo').style.display='none';<br \/>\n    document.getElementById('dimageb').style.display='none'; \/\/visibility='hidden';<br \/>\n    var rct=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('xmwr').style.position='absolute';<br \/>\n    document.getElementById('xmwr').style.left='' + rct.left + 'px';<br \/>\n    document.getElementById('xmwr').style.top='' + rct.top + 'px';<br \/>\n    document.getElementById('xmwr').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('xmwr').style.height='' + rct.height + 'px';<br \/>\n    document.getElementById('xmwr').style.backgroundImage='url(\/HTMLCSS\/HYP_50M_SR_W.jpg)';<br \/>\n    document.getElementById('xmwr').style.backgroundRepeat='no-repeat';<br \/>\n    document.getElementById('xmwr').style.backgroundSize='contain';<br \/>\n    document.getElementById('xmwr').style.zIndex='-4';<br \/>\n    document.getElementById('xmwr').style.display='block';<br \/>\n    document.getElementById('mytable').style.borderRight='1px solid transparent';<br \/>\n    document.getElementById('mytable').style.borderBottom='1px solid transparent';<br \/>\n    document.getElementById('xmwr').innerHTML='&lt;sty' + 'le&gt; .tdone { background-color: rgba(255,255,255,0.8); } &lt;\/sty' + 'le&gt;';<br \/>\n    if (selem != 127754) {<br \/>\n    rct=document.getElementById('xmwr').getBoundingClientRect();<br \/>\n    document.getElementById('mytable').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('mytable').style.height='' + rct.height + 'px';<br \/>\n    }<br \/>\n    ctyqrect=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of river ' + getariver() + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of river ' + getariver() + '? ... &lt;font id=wscore&gt;Score: 0\/0&lt;\/font&gt; ... ';<br \/>\n  } else if (eval('' + invl) == 128506) {<br \/>\n    if (selem == 127754) {<br \/>\n      location.href=document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19878675) + '#WorldReveal';<br \/>\n  selem=eval('' + invl);<br \/>\n  return invl;<br \/>\n    }<br \/>\n     document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n     document.getElementsByTagName('h3')[1].style.display='none';<br \/>\n     document.getElementsByTagName('h4')[0].style.display='none';<br \/>\n    document.getElementsByTagName('select')[0].value='128506';<br \/>\n    document.getElementById('source').innerHTML='&amp;#128506;';<br \/>\n    document.getElementById('dmil').style.display='none';<br \/>\n    document.getElementById('dmiltwo').style.display='none';<br \/>\n    document.getElementById('dimageb').style.display='none'; \/\/visibility='hidden';<br \/>\n    var rct=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('xmwr').style.position='absolute';<br \/>\n    document.getElementById('xmwr').style.left='' + rct.left + 'px';<br \/>\n    document.getElementById('xmwr').style.top='' + rct.top + 'px';<br \/>\n    document.getElementById('xmwr').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('xmwr').style.height='' + rct.height + 'px';<br \/>\n    document.getElementById('xmwr').style.backgroundImage='url(\/HTMLCSS\/HYP_50M_SR_W.jpg)';<br \/>\n    document.getElementById('xmwr').style.backgroundRepeat='no-repeat';<br \/>\n    document.getElementById('xmwr').style.backgroundSize='contain';<br \/>\n    document.getElementById('xmwr').style.zIndex='-4';<br \/>\n    document.getElementById('xmwr').style.display='block';<br \/>\n    document.getElementById('mytable').style.borderRight='1px solid transparent';<br \/>\n    document.getElementById('mytable').style.borderBottom='1px solid transparent';<br \/>\n    document.getElementById('xmwr').innerHTML='&lt;sty' + 'le&gt; .tdone { background-color: rgba(255,255,255,0.8); } &lt;\/sty' + 'le&gt;';<br \/>\n    if (selem != 128506) {<br \/>\n    rct=document.getElementById('xmwr').getBoundingClientRect();<br \/>\n    document.getElementById('mytable').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('mytable').style.height='' + rct.height + 'px';<br \/>\n    }<br \/>\n    ctyqrect=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + getacountry() + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + getacountry() + '? ... &lt;font id=wscore&gt;Score: 0\/0&lt;\/font&gt; ... ';<br \/>\n  } else {<br \/>\n    document.getElementById('dmil').style.display='inline-block';<br \/>\n    document.getElementById('dmiltwo').style.display='inline-block';<br \/>\n    document.getElementById('dimageb').style.display='inline-block'; \/\/visibility='visible';<br \/>\n  }<br \/>\n  selem=eval('' + invl);<br \/>\n  return invl;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Codewise, this involved &#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 helped 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\">the 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a> or  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#RiverReveal\" title=\"Click picture\">Colouring In River Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\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-river-reveal-game-tutorial\/'>Colouring In Drag and Drop River Reveal Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddwrst'>Previous relevant <a target=_blank title='Colouring In Drag and Drop World Reveal Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-world-reveal-sharing-tutorial\/'>Colouring In Drag and Drop World Reveal Sharing 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#WorldReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop World Reveal Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_reveal_sharing.jpg\" title=\"Colouring In Drag and Drop World Reveal Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop World Reveal Sharing Tutorial<\/p><\/div>\n<p>When a lot of us think of games or quizzes, we think &#8220;level playing field&#8221;, at least at the start of a game.   In other words, the way the game starts the players are faced with the same or similar conditions to play the game under.  And so, onto the logic for the World Reveal game subsection of functionality of our Colouring In web application, as of yesterday&#8217;s <a title='Colouring In Drag and Drop World Reveal Geography Tutorial' href='#ciddwrggt'>Colouring In Drag and Drop World Reveal Geography Tutorial<\/a>, today, we&#8217;ve added in logic so that &#8230;<\/p>\n<ul>\n<li>a World Reveal incarnation of the Colouring In web application can be shared via &#8230;\n<ol>\n<li>email<\/li>\n<li>SMS<\/i>\n<\/ol>\n<p> &#8230; and &#8230;<\/li>\n<li>the first ten (as a default, and can be changed via a ?qnum=55 style of argument or #qnum=67 style of hashtag) questions are the same for the originator as the recipient<\/li>\n<\/ul>\n<p>Encryption wise the simplest to share is alpha data and here it is with this.   Country ISO-2 character code sharing needs no delimitation, just for us, looping through two characters (also used, along with <i>function orflag<\/i> below to make the draggable element into a Country flag emoji) at a time!<\/p>\n<p><code><br \/>\nvar firsttentimestwo='', jsecq=-1, secondarrq=[], secondtentimestwo='', ctyplaceq='', gaclist='', gac=false, selem=128396, yourtzl='', ctyqrect=null, ctyidq=-1, ctycodeq='', ctynameq='', ctylatq=0, ctylongq=0, ctyqscore=0, ctyqgoes=0, ctysofarq=',', ctyqfirst=true, ctyqfound=false;<br \/>\n<br \/>\n  function orflag(thiscc) {<br \/>\n      var ccchar='', ccsuff='';<br \/>\n      var lri='ABCDEFGHIJKLMNOPQRSTUVWXYZ';<br \/>\n      var dri=['127462','127463','127464','127465','127466','127467','127468','127469','127470','127471','127472','127473','127474','127475','127476','127477','127478','127479','127480','127481','127482','127483','127484','127485','127486','127487'];<br \/>\n      for (var iccsuff=0; iccsuff&lt;thiscc.length; iccsuff++) {<br \/>\n        ccchar=thiscc.substring(iccsuff, eval(1 + eval('' + iccsuff))).toUpperCase();<br \/>\n        ccsuff+=String.fromCodePoint(eval('' + dri[eval('' + lri.indexOf(ccchar))])); \/\/'&#' + dri[eval('' + lri.indexOf(ccchar))] + ';';<br \/>\n      }<br \/>\n      return ccsuff;<br \/>\n  }<br \/>\n<br \/>\nfunction postgeta() {<br \/>\n if (gaclist != '') {<br \/>\n   var gacs=gaclist.split(',');<br \/>\n   \/\/alert(gaclist);<br \/>\n   for (var igac=0; igac&lt;gacs.length; igac++) {<br \/>\n    if (document.getElementById(gacs[igac])) {<br \/>\n     document.getElementById(gacs[igac]).style.backgroundColor='rgba(255,255,255,0.8)';<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    } else if (gacs[igac] != '') {<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    }<br \/>\n   }<br \/>\n   if (gaclist != '' && gaclist.replace(\/\\,\/g,'') == '') {<br \/>\n      gaclist='';<br \/>\n   }<br \/>\n   \/\/alert(gaclist);<br \/>\n   \/\/gaclist='';<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction atworldrevealstart() {<br \/>\n  var lsec=0, msec=0;<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  }<br \/>\n  if (firsttentimestwo == '' && secondtentimestwo == '') {<br \/>\n    var pwr=location.search.split('WorldReveal=')[1] ? decodeURIComponent(location.search.split('WorldReveal=')[1].split('&')[0].split('#')[0]) : '';<br \/>\n    if (pwr == '') {<br \/>\n      if (('' + location.hash).indexOf('WorldReveal=') != -1) {<br \/>\n        pwr=decodeURIComponent(('' + location.hash).split('WorldReveal=')[1].split('&')[0].split('#')[0]);<br \/>\n      }<br \/>\n    }<br \/>\n    if (pwr != '') {<br \/>\n      firsttentimestwo=pwr.toUpperCase();<br \/>\n      secondtentimestwo=firsttentimestwo.substring(2);<br \/>\n      for (lsec=0; lsec&lt;firsttentimestwo.length; lsec+=2) {<br \/>\n       for (msec=0; msec&lt;codethenname.length; msec+=2) {<br \/>\n         if (codethenname[msec].toUpperCase() == firsttentimestwo.substring(lsec).substring(0,2).toUpperCase()) {<br \/>\n           secondarrq.push(msec);<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n      ctysofarq=',';<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\nfunction getninemore(inctynameq, inctycodeq, inctyidq, tylatq, tylongq, typlaceq) {<br \/>\n  var rval='';<br \/>\n  firsttentimestwo=inctycodeq;<br \/>\n  for (var ioc=1; ioc&lt;(location.search.split('qnum=')[1] ? eval(location.search.split('qnum=')[1].split('&')[0]) : 10); ioc++) {<br \/>\n     rval='' + getacountry();<br \/>\n     firsttentimestwo+=rval.split('.')[0];<br \/>\n     secondarrq.push(eval(rval.split('.')[1]));<br \/>\n  }<br \/>\n  secondtentimestwo=firsttentimestwo.substring(2);<br \/>\n  ctysofarq=',';<br \/>\n  \/\/alert(firsttentimestwo);<br \/>\n  ctylatq=tylatq;<br \/>\n  ctylongq=tylongq;<br \/>\n  ctyplaceq=typlaceq;<br \/>\n  ctynameq=inctynameq;<br \/>\n  return inctynameq;<br \/>\n}<br \/>\n<br \/>\nfunction getacountry() {<br \/>\n var wrong=true;<br \/>\n evs=[];<br \/>\n ctynameq='';<br \/>\n if (document.getElementById('splacecross')) {<br \/>\n      document.getElementById('splacecross').style.zIndex='999';<br \/>\n      document.getElementById('splacecross').style.color='black';<br \/>\n      document.getElementById('splacecross').style.fontColor='black';<br \/>\n      if (document.getElementById('splacecross').innerHTML.indexOf('&lt;br&gt;') == -1) {<br \/>\n      document.getElementById('splacecross').innerHTML+='&lt;br&gt;' + document.getElementById('splacecross').title;<br \/>\n      }<br \/>\n }<br \/>\n setTimeout(postgeta, 2000);<br \/>\n if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { jsecq++; if (jsecq &gt;= eval('' + secondarrq.length)) { secondtentimestwo=' ';  } }<br \/>\n if (document.getElementById('ctylist')) {<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  }<br \/>\n  var dohm=0;<br \/>\n  ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n  if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  \/\/alert(ctyidq)<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') == -1) {<br \/>\n    wrong=true;<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  }<br \/>\n  while (ctysofarq.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1 || wrong) {<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1) {<br \/>\n    if (eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) &gt; 2) {<br \/>\n      if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'PjunkT') {<br \/>\n      dohm=2;<br \/>\n      } else if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'AjunkU') {<br \/>\n      dohm=Math.floor(eval(eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) \/ 2));<br \/>\n      }<br \/>\n      \/\/alert('' + dohm + ' ' + codethenname[eval(0 + ctyidq)] + ' ' + codethenname[eval(1 + ctyidq)]);<br \/>\n    }<br \/>\n    wrong=false;<br \/>\n    \/\/ctyplaceq=('' + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/').length)]);<br \/>\n    ctyplaceq=document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/').length)].replace(\/\\_\/g,' ');<br \/>\n    ctylatq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[0]).toPrecision(6);<br \/>\n    ctylongq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[1]).toPrecision(6);<br \/>\n    \/\/alert('' + ctyplaceq);<br \/>\n    \/\/alert(codethenname[eval(0 + ctyidq)].toUpperCase() + ' ' + dohm + ' ' + ctylatq + ';' + ctylongq + ' ' + codethenname[eval(0 + ctyidq)].toUpperCase());<br \/>\n ctyqfirst=false;<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfound=false;<br \/>\n document.getElementById('source').innerHTML=orflag(codethenname[eval(0 + ctyidq)]);<br \/>\n if (firsttentimestwo == '' && secondtentimestwo == '') {  return getninemore(ctynameq, ctycodeq, eval(0 + ctyidq), ctylatq, ctylongq, ctyplaceq);  }<br \/>\n if (firsttentimestwo != '' && secondtentimestwo == '') {  return '' + ctycodeq + '.' + eval(0 + ctyidq);  }<br \/>\n return ctynameq;<br \/>\n  } else {<br \/>\n    wrong=true;<br \/>\n    ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  if (firsttentimestwo != '' && secondtentimestwo.trim() != '') { ctyidq=secondarrq[jsecq]; }<br \/>\n  ctycodeq=codethenname[eval(0 + ctyidq)].toUpperCase();<br \/>\n  }<br \/>\n  }<br \/>\n  ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n  ctyqfound=false;<br \/>\n }<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfirst=false;<br \/>\n gac=true;<br \/>\n document.getElementById('source').innerHTML=orflag(codethenname[eval(0 + ctyidq)]);<br \/>\n if (firsttentimestwo == '' && secondtentimestwo == '') {  return getninemore(ctynameq, ctycodeq, eval(0 + ctyidq), ctylatq, ctylongq, ctyplaceq);  }<br \/>\n if (firsttentimestwo != '' && secondtentimestwo == '') {  return '' + ctycodeq + '.' + eval(0 + ctyidq);  }<br \/>\n return ctynameq;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Codewise, this involved &#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 helped 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\">the 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\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-world-reveal-sharing-tutorial\/'>Colouring In Drag and Drop World Reveal Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddwrggt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop World Reveal Geography Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-world-reveal-geography-tutorial\/'>Colouring In Drag and Drop World Reveal Geography 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#WorldReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop World Reveal Geography Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/world_reveal_more.jpg\" title=\"Colouring In Drag and Drop World Reveal Geography Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop World Reveal Geography Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Colouring In Drag and Drop World Reveal Game Tutorial' href='#ciddwrgt'>Colouring In Drag and Drop World Reveal Game Tutorial<\/a>&#8216;s Colouring In web application&#8217;s &#8230;<\/p>\n<ul>\n<li>World Reveal subsection of functionality &#8230; could do with &#8230;<\/li>\n<li>more <i>education<\/i> &#8230;<\/li>\n<li>less computer labour dependence<\/li>\n<\/ul>\n<p> &#8230; that last one we determined as necessary, by the sporadic results we were getting, so that a redesign depended less on table cell &#8220;ondragover&#8221; event logic, rather &#8230;<\/p>\n<ul>\n<li>also helping out with geography <i>education<\/i> (as needed) &#8230; we started &#8230;<\/li>\n<li>at first, invisibly, plotting a country&#8217;s first TimeZone placename (with its <font color=blue>&#8220;ondragover&#8221; event clause<\/font>) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    $newih='&lt;table border=1 cellpadding=0 cellspacing=0 style=\"width: 90%; height: 53%;\" id=\"mytable\"&gt;&lt;tbody id=mytbody&gt;&lt;\/tbody&gt;&lt;\/table&gt;&lt;div <font color=blue>ondragover=enact(this,String.fromCharCode(32));<\/font> id=\"placecross\"&gt;&lt;\/div&gt;';<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; but having a large enough CSS z-index property value so that if the user &#8220;ondragover&#8221; passes over &#8230;<\/li>\n<li>\n<ol>the web application, <font color=blue>now<\/font> &#8230;<\/p>\n<li>asks for only one eventuality to get a result (and so far more efficient, and more likely to respond in a timely fashion) &#8230; while at the same time &#8230;<\/li>\n<li>via taking away the invisibility of this TimeZone placename while passing over we show and update the score (for users scoring) &#8230; and &#8230;<\/li>\n<li>for users with no clue who abandoned dragging early on, shows them where that TimeZone placename (and roughly where the Country asked about) is placed in the world<\/li>\n<\/ol>\n<p><code><br \/>\n<font color=blue>function postgeta() {<br \/>\n if (gaclist != '') {<br \/>\n   var gacs=gaclist.split(',');<br \/>\n   \/\/alert(gaclist);<br \/>\n   for (var igac=0; igac&lt;gacs.length; igac++) {<br \/>\n    if (document.getElementById(gacs[igac])) {<br \/>\n     document.getElementById(gacs[igac]).style.backgroundColor='rgba(255,255,255,0.8)';<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    } else if (gacs[igac] != '') {<br \/>\n     gaclist=gaclist.replace(',' + gacs[igac] + ',', ',').replace(',' + gacs[igac], '').replace(gacs[igac] + ',', '').replace(gacs[igac], '');<br \/>\n    }<br \/>\n   }<br \/>\n   if (gaclist != '' && gaclist.replace(\/\\,\/g,'') == '') {<br \/>\n      gaclist='';<br \/>\n   }<br \/>\n   \/\/alert(gaclist);<br \/>\n   \/\/gaclist='';<br \/>\n }<br \/>\n}<br \/>\n<br \/>\nfunction getacountry() {<br \/>\n var wrong=true;<br \/>\n evs=[];<br \/>\n ctynameq='';<br \/>\n if (document.getElementById('splacecross')) {<br \/>\n      document.getElementById('splacecross').style.zIndex='999';<br \/>\n      document.getElementById('splacecross').style.color='black';<br \/>\n      document.getElementById('splacecross').style.fontColor='black';<br \/>\n      if (document.getElementById('splacecross').innerHTML.indexOf('&lt;br&gt;') == -1) {<br \/>\n      document.getElementById('splacecross').innerHTML+='&lt;br&gt;' + document.getElementById('splacecross').title;<br \/>\n      }<br \/>\n }<br \/>\n setTimeout(postgeta, 2000);<br \/>\n if (document.getElementById('ctylist')) {<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  }<br \/>\n  var dohm=0;<br \/>\n  ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n  if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  \/\/alert(ctyidq)<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') == -1) {<br \/>\n    wrong=true;<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  }<br \/>\n  while (ctysofarq.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1 || wrong) {<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1) {<br \/>\n    if (eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) &gt; 2) {<br \/>\n      if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'PjunkT') {<br \/>\n      dohm=2;<br \/>\n      } else if (codethenname[eval(0 + ctyidq)].toUpperCase() == 'AjunkU') {<br \/>\n      dohm=Math.floor(eval(eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) \/ 2));<br \/>\n      }<br \/>\n      \/\/alert('' + dohm + ' ' + codethenname[eval(0 + ctyidq)] + ' ' + codethenname[eval(1 + ctyidq)]);<br \/>\n    }<br \/>\n    wrong=false;<br \/>\n    \/\/ctyplaceq=('' + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' data-geo=').length)].substring(1).split('\/option')[0].split('\/').length)]);<br \/>\n    ctyplaceq=document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/')[eval(-1 + document.getElementById('tzlist').innerHTML.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[eval(1 + dohm)].split('\/option')[0].split('\/').length)].replace(\/\\_\/g,' ');<br \/>\n    ctylatq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[0]).toPrecision(6);<br \/>\n    ctylongq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[1]).toPrecision(6);<br \/>\n    \/\/alert('' + ctyplaceq);<br \/>\n    \/\/alert(codethenname[eval(0 + ctyidq)].toUpperCase() + ' ' + dohm + ' ' + ctylatq + ';' + ctylongq + ' ' + codethenname[eval(0 + ctyidq)].toUpperCase());<br \/>\n ctyqfirst=false;<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfound=false;<br \/>\n return ctynameq;<br \/>\n  } else {<br \/>\n    wrong=true;<br \/>\n    ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n    ctyidq=eval(Math.floor(Math.random() * eval('' + codethenname.length)));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  }<br \/>\n  }<br \/>\n  ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n  ctyqfound=false;<br \/>\n }<br \/>\n if (!ctyqfirst) {<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + ' ' + ctylatq + ',' + ctylongq + '!? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfirst=false;<br \/>\n gac=true;<br \/>\n return ctynameq;<br \/>\n}<br \/>\n<br \/>\nfunction mwr(invl) {<br \/>\n  if (eval('' + invl) == 128506) {<br \/>\n     document.getElementsByTagName('h3')[0].style.display='none';<br \/>\n     document.getElementsByTagName('h3')[1].style.display='none';<br \/>\n     document.getElementsByTagName('h4')[0].style.display='none';<br \/>\n    document.getElementsByTagName('select')[0].value='128506';<br \/>\n    document.getElementById('source').innerHTML='&#128506;';<br \/>\n    document.getElementById('dmil').style.display='none';<br \/>\n    document.getElementById('dmiltwo').style.display='none';<br \/>\n    document.getElementById('dimageb').style.display='none'; \/\/visibility='hidden';<br \/>\n    var rct=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('xmwr').style.position='absolute';<br \/>\n    document.getElementById('xmwr').style.left='' + rct.left + 'px';<br \/>\n    document.getElementById('xmwr').style.top='' + rct.top + 'px';<br \/>\n    document.getElementById('xmwr').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('xmwr').style.height='' + rct.height + 'px';<br \/>\n    document.getElementById('xmwr').style.backgroundImage='url(\/HTMLCSS\/HYP_50M_SR_W.jpg)';<br \/>\n    document.getElementById('xmwr').style.backgroundRepeat='no-repeat';<br \/>\n    document.getElementById('xmwr').style.backgroundSize='contain';<br \/>\n    document.getElementById('xmwr').style.zIndex='-4';<br \/>\n    document.getElementById('xmwr').style.display='block';<br \/>\n    document.getElementById('mytable').style.borderRight='1px solid transparent';<br \/>\n    document.getElementById('mytable').style.borderBottom='1px solid transparent';<br \/>\n    document.getElementById('xmwr').innerHTML='&lt;sty' + 'le&gt; .tdone { background-color: rgba(255,255,255,0.8); } &lt;\/sty' + 'le&gt;';<br \/>\n    if (selem != 128506) {<br \/>\n    rct=document.getElementById('xmwr').getBoundingClientRect();<br \/>\n    document.getElementById('mytable').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('mytable').style.height='' + rct.height + 'px';<br \/>\n    }<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + getacountry() + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n    \/\/document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + getacountry() + '? ... &lt;font id=wscore&gt;Score: 0\/0&lt;\/font&gt; ... ';<br \/>\n    ctyqrect=document.getElementById('mytable').getBoundingClientRect();<br \/>\n  } else {<br \/>\n    document.getElementById('dmil').style.display='inline-block';<br \/>\n    document.getElementById('dmiltwo').style.display='inline-block';<br \/>\n    document.getElementById('dimageb').style.display='inline-block'; \/\/visibility='visible';<br \/>\n  }<br \/>\n  selem=eval('' + invl);<br \/>\n  return invl;<br \/>\n}<\/font><br \/>\n<br \/>\nfunction enact(onto, withc) {<br \/>\n    var lastf='', lastfs=[], comprect=null;<br \/>\n    <font color=blue>if (onto.id.indexOf('placecross') != -1) {<br \/>\n      if (!ctyqfound) {<br \/>\n      ctyqfound=true;<br \/>\n      ctyqscore++;<br \/>\n      document.getElementById('splacecross').style.zIndex='999';<br \/>\n      document.getElementById('splacecross').style.color='black';<br \/>\n      document.getElementById('splacecross').style.fontColor='black';<br \/>\n      if (document.getElementById('splacecross').innerHTML.indexOf('&lt;br&gt;') == -1) {<br \/>\n      document.getElementById('splacecross').innerHTML+='&lt;br&gt;' + document.getElementById('splacecross').title;<br \/>\n      }<br \/>\n      document.getElementById('wscore').innerHTML='Score: ' + ctyqscore + '\/' + ctyqgoes;<br \/>\n      }<br \/>\n      return '';<br \/>\n    }<br \/>\n    if (withc.indexOf('(') != -1) {<\/font><br \/>\n    lastfs= withc.split('(')[1].split(')')[0].split(',');<br \/>\n    lastf=',' + withc.split(',')[eval(-1 + withc.split(',').length)];<br \/>\n    <font color=blue>}<\/font><br \/>\n    if (document.getElementById('pensel')) {<br \/>\n    if (document.getElementById('pensel').value == '128506') {<br \/>\n    <font color=blue>if (gaclist.indexOf('' + onto.id) == -1) {<br \/>\n    evs.push(onto);<br \/>\n    }<\/font><br \/>\n    onto.style.backgroundColor='transparent';<br \/>\n    gac=false;<br \/>\n    if (!ctyqfound) {  \/\/ vs ctyqrect is map considering ctylatq and ctylongq<br \/>\n    <font color=blue>if (gaclist == '') {<br \/>\n      gaclist='' + onto.id;<br \/>\n      var newy=eval(eval(eval(eval(90 - eval('' + ctylatq)) \/ 180.0) * eval(ctyqrect.width \/ 2.0)) + ctyqrect.top);   \/\/=eval(eval(eval(rectcomptop - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      var newx=eval(eval(eval(eval(180 + eval('' + ctylongq)) \/ 360.0) * eval(ctyqrect.width \/ 1.0)) + ctyqrect.left);   \/\/=eval(eval(eval(rectcompleft - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      document.getElementById('placecross').innerHTML='&lt;span ondragover=enact(this,String.fromCharCode(32)); id=splacecross title=\"' + ctyplaceq + ' is in ' + ctynameq + '\" style=\"font-color:rgba(0,0,0,0.0);color:rgba(0,0,0,0.0);position:absolute;top:' + newy + 'px;z-index:1000;left:' + newx + 'px;\"&gt;x&lt;\/span&gt;';<br \/>\n      setTimeout(startlooking, 500);<br \/>\n    } else if (gaclist.indexOf('' + onto.id) == -1) {<br \/>\n      gaclist+=',' + onto.id;<br \/>\n    }<\/font><br \/>\n    if (4 == 6) {<br \/>\n      comprect=onto.getBoundingClientRect();<br \/>\n      var latoftl=eval(90.0 - eval(eval(comprect.top - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));           \/\/ 180.0));<br \/>\n      var latofbr=eval(90.0 - eval(eval(comprect.bottom - ctyqrect.top) \/ eval(ctyqrect.width \/ 360.0)));<br \/>\n      var longoftl=eval(-180 + eval(eval(comprect.left - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));        \/\/ 360.0));<br \/>\n      var longofbr=eval(-180 + eval(eval(comprect.right - ctyqrect.left) \/ eval(ctyqrect.width \/ 360.0)));<br \/>\n      if (document.getElementById('spancb').innerHTML.indexOf('!') != -1) {<br \/>\n        document.getElementById('spancb').innerHTML=document.getElementById('spancb').innerHTML.replace('!' + document.getElementById('spancb').innerHTML.split('!')[1].split('?')[0] + '?', '! vs ' + latoftl.toPrecision(6) + ',' + longoftl.toPrecision(6) + ' - ' + latofbr.toPrecision(6) + ',' + longofbr.toPrecision(6) + '?');<br \/>\n      }<br \/>\n      if (eval('' + ctylatq) &lt;= eval('' + latoftl) && eval('' + ctylatq) &gt;= eval('' + latofbr)) {<br \/>\n       if (eval('' + ctylongq) &gt;= eval('' + longoftl) && eval('' + ctylatq) &lt;= eval('' + longofbr)) {<br \/>\n         ctyqfound=true;<br \/>\n       }<br \/>\n      }<br \/>\n      if (ctyqfound) { ctyqscore++;  document.getElementById('wscore').innerHTML='Score: ' + ctyqscore + '\/' + ctyqgoes; } else if (1 == 11) { document.title=' ' + ctylatq + ';' + ctylongq + ' ' + latoftl.toPrecision(6) + ',' + longoftl.toPrecision(6) + ' - ' + latofbr.toPrecision(6) + ',' + longofbr.toPrecision(6);  }<br \/>\n    }<br \/>\n    }<br \/>\n    } else if (document.getElementById('pensel').value == '128396') {<br \/>\n    onto.style.backgroundColor=withc;<br \/>\n    } else if (document.getElementById('pensel').value == '8627') {<br \/>\n    onto.style.border='1px solid transparent';<br \/>\n    onto.style.borderBottom='1px solid ' + withc;<br \/>\n    onto.style.borderLeft='1px solid ' + withc;<br \/>\n    } else if (document.getElementById('pensel').value == '8626') {<br \/>\n    onto.style.border='1px solid transparent';<br \/>\n    onto.style.borderBottom='1px solid ' + withc;<br \/>\n    onto.style.borderRight='1px solid ' + withc;<br \/>\n    } else if (document.getElementById('pensel').value == '8625') {<br \/>\n    onto.style.border='1px solid transparent';<br \/>\n    onto.style.borderTop='1px solid ' + withc;<br \/>\n    onto.style.borderLeft='1px solid ' + withc;<br \/>\n    } else if (document.getElementById('pensel').value == '8624') {<br \/>\n    onto.style.border='1px solid transparent';<br \/>\n    onto.style.borderTop='1px solid ' + withc;<br \/>\n    onto.style.borderRight='1px solid ' + withc;<br \/>\n    } else if (document.getElementById('pensel').value == '9999') {<br \/>\n    onto.style.border='1px solid ' + withc;<br \/>\n    } else if (document.getElementById('pensel').value == '8599') {<br \/>\n    onto.style.background='linear-gradient(to top left, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) 0%, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) calc(50% - 0.8px), rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',1) 50%, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) calc(50% + 0.8px), rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) 100%)';<br \/>\n    } else if (document.getElementById('pensel').value == '8598') {<br \/>\n    onto.style.background='linear-gradient(to top right, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) 0%, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) calc(50% - 0.8px), rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',1) 50%, rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) calc(50% + 0.8px), rgba(' + lastfs[0] + ',' + lastfs[1] + ',' + lastfs[2] + ',0) 100%)';<br \/>\n    } else if (document.getElementById('pensel').value == '128397') {<br \/>\n    onto.style.backgroundColor=withc;<br \/>\n    \/\/document.title='?' + withc;<br \/>\n    if (withc.indexOf('rgba(') != -1 && lastf.indexOf(',1.') != -1) {<br \/>\n    \/\/document.title='1px solid ' + '1px solid rgba(' + eval(127 - lastfs[0]) + ',' + eval(127 - lastfs[1]) + ',' + eval(127 - lastfs[2] + ',0.5'); \/\/ + withc.replace(lastf,',0.5)');<br \/>\n    onto.style.border='1px solid rgba(' + eval(127 - lastfs[0]) + ',' + eval(127 - lastfs[1]) + ',' + eval(127 - lastfs[2] + ',0.5'); \/\/ + withc.replace(lastf,',0.5)');<br \/>\n    } else if (withc.indexOf('rgba(') != -1) {<br \/>\n    onto.style.border='1px solid ' + withc.replace('rgba(','rgb(').replace(lastf,')');<br \/>\n    } else if (withc.indexOf('rgb(') != -1) {<br \/>\n    \/\/document.title='1px solid ' + withc.replace('rgb(','rgba(').replace(')',',0.5)');<br \/>\n    onto.style.border='1px solid ' + withc.replace('rgb(','rgba(').replace(')',',0.5)');<br \/>\n    } else {<br \/>\n    onto.style.border='1px solid ' + withc;<br \/>\n    }<br \/>\n    } else {<br \/>\n    onto.style.backgroundColor=withc;<br \/>\n    }<br \/>\n    } else {<br \/>\n    onto.style.backgroundColor=withc;<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<\/li>\n<\/ul>\n<p>Codewise, this involved &#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 helped 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\">the 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\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-world-reveal-geography-tutorial\/'>Colouring In Drag and Drop World Reveal Geography Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddwrgt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop World Reveal Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-world-reveal-game-tutorial\/'>Colouring In Drag and Drop World Reveal 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#WorldReveal\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Colouring In Drag and Drop World Reveal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_world_reveal.gif\" title=\"Colouring In Drag and Drop World Reveal Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop World Reveal Game Tutorial<\/p><\/div>\n<p>As of yesterday&#8217;s <a title='Colouring In Drag and Drop Text Placement Tutorial' href='#ciddtpt'>Colouring In Drag and Drop Text Placement Tutorial<\/a>, as far as our Colouring In web application capabilities goes &#8230;<\/p>\n<ul>\n<li>it has intelligence regarding a &#8220;pen&#8221; type emoji element being dragged over a table full of cells<\/li>\n<li>it can handle background images<\/li>\n<li>it can involve text<\/li>\n<li>it can colour table cell background colours (and\/or border part(s))<\/li>\n<\/ul>\n<p> &#8230; and this is functionality allowing us to add a new &#8220;pen&#8221; drag type called &#8220;World Reveal&#8221; where a semi-transparent Mercator projection World Map image is underlayed beneath semi-transparent table cells, creating a &#8220;cloudy world effect&#8221;.  The user is asked to reveal a country of choice to score in the game, those table cells dragged over becoming fully transparent, showing &#8220;uncloudy world&#8221; beneath &#8230;<\/p>\n<p><code><br \/>\n var selem=128396, yourtzl='', ctyqrect=null, ctyidq=-1, ctynameq='', ctylatq=0, ctylongq=0, ctyqscore=0, ctyqgoes=0, ctysofarq=',', ctyqfirst=true, ctyqfound=false;<br \/>\n <br \/>\nfunction getacountry() {<br \/>\n var wrong=true;<br \/>\n ctynameq='';<br \/>\n if (document.getElementById('ctylist')) {<br \/>\n  if (yourtzl == '') {<br \/>\n  yourtzl=document.getElementById('tzlist').innerHTML.toUpperCase();<br \/>\n  }<br \/>\n  var clistarris=document.getElementById('ctylist').innerHTML;<br \/>\n  var dohm=0;<br \/>\n  var codethenname=clistarris.replace(\/\\'\/g,'').replace(\/\\\"\/g,'').split(',');<br \/>\n  ctyidq=eval(Math.floor(Math.random() * codethenname.length));<br \/>\n  if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  \/\/alert(ctyidq)<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') == -1) {<br \/>\n    wrong=true;<br \/>\n    ctyidq=eval(Math.floor(Math.random() * codethenname.length));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  }<br \/>\n  while (ctysofarq.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1 || wrong) {<br \/>\n  if (yourtzl.indexOf(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',') != -1) {<br \/>\n    if (eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) &gt; 2) {<br \/>\n      dohm=Math.floor(eval(eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',').length) \/ 2));<br \/>\n    }<br \/>\n    wrong=false;<br \/>\n    ctylatq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[0]).toPrecision(6);<br \/>\n    ctylongq=eval('' + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=')[eval(-1 + yourtzl.split(',' + codethenname[eval(0 + ctyidq)].toUpperCase() + ',')[dohm].split(' DATA-GEO=').length)].substring(1).split(',')[1]).toPrecision(6);<br \/>\n    \/\/alert('' + dohm + ' ' + ctylatq + ';' + ctylongq + ' ' + codethenname[eval(0 + ctyidq)].toUpperCase());<br \/>\n ctyqfirst=false;<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n if (!ctyqfirst) {<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n return ctynameq;<br \/>\n  } else {<br \/>\n    wrong=true;<br \/>\n    ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n    ctyidq=eval(Math.floor(Math.random() * codethenname.length));<br \/>\n    if (eval(ctyidq % 2) == 1) { ctyidq--;  }<br \/>\n  }<br \/>\n  }<br \/>\n  ctysofarq+=codethenname[eval(0 + ctyidq)].toUpperCase() + ',';<br \/>\n  ctynameq='' + codethenname[eval(1 + ctyidq)];<br \/>\n  ctyqfound=false;<br \/>\n }<br \/>\n if (!ctyqfirst) {<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + ctynameq + '? ... &lt;font id=wscore&gt;Score: ' + ctyqscore + '\/' + ctyqgoes + '&lt;\/font&gt; ... ';<br \/>\n }<br \/>\n ctyqfirst=false;<br \/>\n return ctynameq;<br \/>\n}<br \/>\n<br \/>\nfunction mwr(invl) {  \/\/ \"pen\" dropdown onchange event \"wrapper\" also used near document.body onload event<br \/>\n  selem=eval('' + invl);<br \/>\n  if (eval('' + invl) == 128506) {<br \/>\n    document.getElementsByTagName('select')[0].value='128506';<br \/>\n    document.getElementById('source').innerHTML='&amp;#128506;';<br \/>\n    var rct=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    document.getElementById('xmwr').style.position='absolute';<br \/>\n    document.getElementById('xmwr').style.left='' + rct.left + 'px';<br \/>\n    document.getElementById('xmwr').style.top='' + rct.top + 'px';<br \/>\n    document.getElementById('xmwr').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('xmwr').style.height='' + rct.height + 'px';<br \/>\n    document.getElementById('xmwr').style.backgroundImage='url(\/HTMLCSS\/HYP_50M_SR_W.jpg)';<br \/>\n    document.getElementById('xmwr').style.backgroundRepeat='no-repeat';<br \/>\n    document.getElementById('xmwr').style.backgroundSize='contain';<br \/>\n    document.getElementById('xmwr').style.zIndex='-4';<br \/>\n    document.getElementById('xmwr').style.display='block';<br \/>\n    document.getElementById('mytable').style.borderRight='1px solid transparent';<br \/>\n    document.getElementById('mytable').style.borderBottom='1px solid transparent';<br \/>\n    document.getElementById('xmwr').innerHTML='&lt;sty' + 'le&gt; .tdone { background-color: rgba(255,255,255,0.8); } &lt;\/sty' + 'le&gt;';<br \/>\n    rct=document.getElementById('xmwr').getBoundingClientRect();<br \/>\n    document.getElementById('mytable').style.width='' + rct.width + 'px';<br \/>\n    document.getElementById('mytable').style.height='' + rct.height + 'px';<br \/>\n    document.getElementById('spancb').innerHTML='Map of World below ... can you reveal any of ' + getacountry() + '? ... &lt;font id=wscore&gt;Score: 0\/0&lt;\/font&gt; ... ';<br \/>\n    ctyqrect=document.getElementById('mytable').getBoundingClientRect();<br \/>\n  }<br \/>\n  return invl;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Codewise, this involved &#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 helped 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\">the 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> (and\/or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php#WorldReveal\" title=\"Click picture\">Colouring In World Reveal Game<\/a>) you can also try for yourself, <a href='#ciif'>below<\/a> &#8230;<\/li>\n<\/ul>\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-world-reveal-game-tutorial\/'>Colouring In Drag and Drop World Reveal Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddtpt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Text Placement Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-text-placement-tutorial\/'>Colouring In Drag and Drop Text Placement 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 Drag and Drop Text Placement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_text.gif\" title=\"Colouring In Drag and Drop Text Placement Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Text Placement Tutorial<\/p><\/div>\n<p>If you think in terms of &#8230;<\/p>\n<p><code><br \/>\nAnnotation functionalities<br \/>\n<\/code><\/p>\n<p> &#8230; available to the user of our current interest, the Colouring In web application, up until today, we relied on user scribbling means to involve any &#8220;textual feeling&#8221; in this project.<\/p>\n<p>But, today?!  Well!  That&#8217;s another kettle of fish!  We&#8217;re happy to say &#8230;<\/p>\n<blockquote><p>\nWe&#8217;re involving real text into the mix.\n<\/p><\/blockquote>\n<p> &#8230; regarding the ways you creatives out there want to express themselves.<\/p>\n<p>And so, onto yesterday&#8217;s <a title='Colouring In Drag and Drop Animated Background Images Tutorial' href='#ciddabit'>Colouring In Drag and Drop Animated Background Images Tutorial<\/a> we have some new involvement of &#8230;<\/p>\n<ul>\n<li><i>tr<\/i> (table row) elements given a new <i>id<\/i> attribute arrangement and some new event <i>onclick<\/i> logic &#8230; and also &#8230;<\/li>\n<li><i>tbody<\/i> (table body) element used as the creator&#8217;s palette (as far as positioning goes, though, as we go to air, we&#8217;re still using the tbody for co-ordinate positioning (and we wanted svg+xml text background imagery at first) but now <i>overlay<\/i> span element text over the table)<\/li>\n<\/ul>\n<p>Sad about the full involvement of <i>tbody<\/i> svg+xml background image text idea not happening, but we feel that we will return to this, on paper, satisfying, and cute, idea.  We have successfully applied svg+xml text ideas to tailored cursors, but we do remember a struggle and size limitations?!   The attempt is there in the code for another person to do better with, if they wish.<\/p>\n<p>Here is some relevant new Javascript code &#8230;<\/p>\n<p><code><br \/>\nvar textinplay='', textrect=null, textml=0;<br \/>\n<br \/>\nfunction plottext(tip) {<br \/>\n   var wasstyle='', origtip=tip;<br \/>\n   if (tip != '') {<br \/>\n     if (textrect) {<br \/>\n       var tbtextrect=document.getElementById('mytbody').getBoundingClientRect();<br \/>\n       tip=tip.replace(\/\\~\\~\/g, String.fromCharCode(10));<br \/>\n       var ourtip=tip;<br \/>\n       while (ourtip.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n         ourtip=ourtip.replace(String.fromCharCode(10), '&lt;br&gt;');<br \/>\n       }<br \/>\n       if (document.getElementById('tbodystyle').innerHTML == '') {<br \/>\n       if (1 == 1) {<br \/>\n       document.getElementById('tbodystyle').innerHTML='&lt;span style=\"z-index:178;position:absolute;left:' + eval(textrect.left + textml) + 'px;top:' + eval(textrect.top) + 'px;\"&gt;' + ourtip + '&lt;\/span&gt;';<br \/>\n       } else {<br \/>\n       document.getElementById('tbodystyle').innerHTML='&lt;sty' + 'le&gt; #mytbody { background-position: ' + eval(textrect.left + textml - tbtextrect.left) + ' ' + eval(textrect.top - tbtextrect.top) + '; background-repeat: no-repeat; background-image: url(\"data:image\/svg+xml;utf8,' + \"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'&gt;&lt;text&gt;\" + tip + '&lt;\/text&gt;&lt;\/svg&gt;\");   } &lt;\/sty' + 'le&gt;';<br \/>\n       }<br \/>\n       } else if (document.getElementById('tbodystyle').innerHTML.indexOf('&lt;span') != -1) {<br \/>\n       document.getElementById('tbodystyle').innerHTML+='&lt;span style=\"z-index:178;position:absolute;left:' + eval(textrect.left + textml) + 'px;top:' + eval(textrect.top) + 'px;\"&gt;' + ourtip + '&lt;\/span&gt;';<br \/>\n       } else {<br \/>\n       wasstyle=document.getElementById('tbodystyle').innerHTML;<br \/>\n       wasstyle=wasstyle.replace('no-repeat;', 'no-repeat,no-repeat;').replace('; ', ',' + eval(textrect.left + textml - tbtextrect.left) + ' ' + eval(textrect.top - tbtextrect.top) + '; ').replace('&lt;\/svg&gt;\"); ', '&lt;\/svg&gt;\"),' + 'url(\"data:image\/svg+xml;utf8,' + \"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'&gt;&lt;text&gt;\" + tip + '&lt;\/text&gt;&lt;\/svg&gt;\")' + '; ');<br \/>\n       document.getElementById('tbodystyle').innerHTML=wasstyle;<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   textinplay='';<br \/>\n   return origtip;<br \/>\n}<br \/>\n<br \/>\nfunction lookfortrtext() {<br \/>\n   var trarr=document.getElementsByTagName('tr');<br \/>\n   for (var jtr=0; jtr&lt;trarr.length; jtr++) {<br \/>\n      if (('' + trarr[jtr].title).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim() != '' && ('' + trarr[jtr].id).replace(\/^null\/g,'').replace(\/^undefined\/g,'').trim().indexOf('svg') == 0) {<br \/>\n        textrect=trarr[jtr].getBoundingClientRect();<br \/>\n        textml=eval('' + trarr[jtr].getAttribute('data-textml'));<br \/>\n        textinplay=trarr[jtr].title;<br \/>\n        plottext(textinplay);<br \/>\n      }<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction textready(thistext) {<br \/>\n       if (!textrect) {<br \/>\n       textrect=document.getElementById('mytbody').getBoundingClientRect();<br \/>\n       textml=0;<br \/>\n       document.getElementById('svgtr1').title=thistext;<br \/>\n       document.getElementById('svgtr1').setAttribute('data-textml', '' + textml);<br \/>\n       }<br \/>\n       return thistext;<br \/>\n}<br \/>\n<br \/>\nfunction textbthis(otr) {<br \/>\n   \/\/alert(otr.target.id);<br \/>\n   var trn=2;<br \/>\n   if (('' + otr.target.id).indexOf('td') == 0) {<br \/>\n       textrect=otr.target.getBoundingClientRect();<br \/>\n       while (('' + otr.target.id).substring(trn).substring(0,1) == '0') {<br \/>\n         trn++;<br \/>\n       }<br \/>\n       textml=0;<br \/>\n       document.getElementById('svgtr' + ('' + otr.target.id).substring(trn).split('_')[0]).setAttribute('data-textml', '' + eval('' + textrect.left));<br \/>\n       lasttextel=document.getElementById('svgtr' + ('' + otr.target.id).substring(trn).split('_')[0]);<br \/>\n       document.getElementById('svgtr' + ('' + otr.target.id).substring(trn).split('_')[0]).title=textinplay;<br \/>\n       if (textinplay.trim() != '') { plottext(textinplay); }<br \/>\n   } else if (('' + otr.target.id).indexOf('svg') == 0) {<br \/>\n       textrect=otr.target.getBoundingClientRect();<br \/>\n       otr.preventDefault();<br \/>\n       if (otr.touches) {<br \/>\n       if (otr.touches[0].pageX) {<br \/>\n       textml = otr.touches[0].pageX;<br \/>\n       } else {<br \/>\n       textml = otr.touches[0].clientX;<br \/>\n       }<br \/>\n       } else if (otr.clientX || otr.clientY) {<br \/>\n        textml = otr.clientX;<br \/>\n       } else {<br \/>\n        textml = otr.pageX;<br \/>\n       }<br \/>\n       document.getElementById(otr.target.id).setAttribute('data-textml', '' + textml);<br \/>\n       lasttextel=document.getElementById(otr.target.id);<br \/>\n       document.getElementById(otr.target.id).title=textinplay;<br \/>\n       if (textinplay.trim() != '') { plottext(textinplay); }<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 helped 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\">the 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>Stop Press<\/i><\/b><\/p>\n<p>A codewise revisit to allow for text CSS via {} appended means involved &#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 helped 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\">the 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><!--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-text-placement-tutorial\/'>Colouring In Drag and Drop Text Placement Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddabit'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Animated Background Images Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-animated-background-images-tutorial\/'>Colouring In Drag and Drop Animated Background Images 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 Drag and Drop Animated Background Images Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_animation.gif\" title=\"Colouring In Drag and Drop Animated Background Images Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Animated Background Images Tutorial<\/p><\/div>\n<p>One image can a background image make.<\/p>\n<p>More than one images can a moving picture make.<\/p>\n<p>And that is why, after yesterday&#8217;s <a title='Colouring In Drag and Drop Multiple Background Image Tutorial' href='#ciddmbit'>Colouring In Drag and Drop Multiple Background Image Tutorial<\/a>, we turn our attention to a first &#8230;<\/p>\n<p><code><br \/>\nanimated slides<br \/>\n<\/code><\/p>\n<p> &#8230; presentation idea, now that we understand and can share multiple images (or slides).<\/p>\n<p>This first incarnation just uses Javascript logic to simulate what an animated GIF can do.  In other words, we have &#8230;<\/p>\n<ul>\n<li>a set of images &#8230; presented via a &#8230;<\/li>\n<li>delay &#8230; we just hardcode for 4 seconds to start with<\/li>\n<\/ul>\n<p> &#8230; as with the table ondblclick (on double click) newly arranged &#8230;<\/p>\n<p><code><br \/>\n       document.getElementById('mytable').title+='Double click to toggle the display of an animated GIF presentation of your background images.';<br \/>\n       document.getElementById('mytable').ondblclick=function(){ popupanimation(); };<br \/>\n<\/code><\/p>\n<p>  &#8230; event logic calling &#8230;<\/p>\n<p><code><br \/>\nvar usual=true, imans=[], iusual=0, kdelay=4000;<br \/>\n<br \/>\nfunction popupanimation() {<br \/>\n   var splitthis='';<br \/>\n   if (usual && document.getElementById('xdstyle').innerHTML == '' && ('' + document.getElementById('dstyle').innerHTML).toLowerCase().indexOf('url(') != -1) {<br \/>\n     document.getElementById('xdstyle').innerHTML=encodeURIComponent(document.getElementById('dstyle').innerHTML);<br \/>\n     splitthis+=document.getElementById('dstyle').innerHTML;<br \/>\n   }<br \/>\n   if (document.getElementById('ddstyle')) {<br \/>\n   if (usual && document.getElementById('xddstyle').innerHTML == '' && ('' + document.getElementById('ddstyle').innerHTML).toLowerCase().indexOf('url(') != -1) {<br \/>\n     document.getElementById('xddstyle').innerHTML=encodeURIComponent(document.getElementById('ddstyle').innerHTML);<br \/>\n     splitthis+=document.getElementById('ddstyle').innerHTML;<br \/>\n   }<br \/>\n   }<br \/>\n   if (splitthis != '') {<br \/>\n     imans=splitthis.replace(\/URL\\(\/g, 'url(').split('url(');<br \/>\n     document.getElementById('dstyle').innerHTML='';<br \/>\n     if (document.getElementById('ddstyle')) {<br \/>\n     document.getElementById('ddstyle').innerHTML='';<br \/>\n     }<br \/>\n   }<br \/>\n   if (usual) {<br \/>\n     usual=!usual;<br \/>\n     setTimeout(showtheanim, kdelay);<br \/>\n   } else {<br \/>\n     usual=!usual;<br \/>\n     setTimeout(function(){<br \/>\n     if (document.getElementById('xdstyle').innerHTML != '') {<br \/>\n        document.getElementById('dstyle').innerHTML=decodeURIComponent(document.getElementById('xdstyle').innerHTML);<br \/>\n     }<br \/>\n     if (document.getElementById('ddstyle')) {<br \/>\n     if (document.getElementById('xddstyle').innerHTML != '') {<br \/>\n        document.getElementById('ddstyle').innerHTML=decodeURIComponent(document.getElementById('xddstyle').innerHTML);<br \/>\n     }<br \/>\n     }<br \/>\n     }, eval(100 + kdelay));<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction showtheanim() {<br \/>\n  if (iusual &gt;= eval('' + imans.length) || usual) { iusual=0; }<br \/>\n  if (!usual) {<br \/>\n  document.getElementById('dstyle').innerHTML='&lt;sty' + 'le&gt; #mytable { background:URL(' + imans[iusual].split(')')[0] + '); background-repeat:no-repeat; background-size: contain; &lt;\/sty' + 'le&gt;';<br \/>\n  iusual++;<br \/>\n  setTimeout(showtheanim, kdelay);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; making use of the two new static HTML div elements &#8230;<\/p>\n<p><code><br \/>\n&lt;div id=\"xddstyle\" style=\"display:none;\"&gt;&lt;\/div&gt;<br \/>\n&lt;div id=\"xdstyle\" style=\"display:none;\"&gt;&lt;\/div&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in <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.<\/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-animated-background-images-tutorial\/'>Colouring In Drag and Drop Animated Background Images Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddmbit'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Multiple Background Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-multiple-background-image-tutorial\/'>Colouring In Drag and Drop Multiple Background Image 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 Drag and Drop Multiple Background Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_multi_bi.jpg\" title=\"Colouring In Drag and Drop Multiple Background Image Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Multiple Background Image Tutorial<\/p><\/div>\n<p>The ability to add multiple background images in HTML and using CSS can be very useful.  We&#8217;ve done this in the past, and knew the important CSS properties to fill in were &#8230;<\/p>\n<ul>\n<li>background-image<\/li>\n<li>background-repeat<\/li>\n<li><a target=_blank title='CSS background-size property' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_background-size.php'>background-size<\/a><\/li>\n<li><a target=_blank title='CSS background-position property' href='http:\/\/www.w3schools.com\/cssref\/pr_background-position.asp'>background-position<\/a><\/li>\n<\/ul>\n<p> &#8230; which should be given comma separated list values for each background-image set member.<\/p>\n<p>Below, we drill down a bit &#8230;<\/p>\n<ul>\n<li>background-image &#8230; comma separated list of data-URIs and\/or image URLs (and perhaps, optionally, the one linear gradient prefixing opacity measure)<\/li>\n<li>background-repeat &#8230; easy &#8230; <i>no-repeat<\/i> comma separated list<\/li>\n<li>background-size &#8230; if one you might use <i>contain<\/i> but from there on, today we use a <i>width percentage<\/i> value and <i>auto<\/i> for the height component (eg. <i>33% auto<\/i>)<\/li>\n<li>background-position &#8230; top left, bottom right, top right, bottom left, center center, top center, bottom center, left center, right center &#8230; in rotation (and order is today&#8217;s thinking) &#8230; beyond 9 there will be overlaying (and maybe even before then, depending)<\/li>\n<\/ul>\n<p> &#8230; as used, in the new Javascript, further to yesterday&#8217;s <a title='Colouring In Drag and Drop Keyboard Events Tutorial' href='#ciddket'>Colouring In Drag and Drop Keyboard Events Tutorial<\/a> &#8230;<\/p>\n<p><code><br \/>\nvar multiresults=[], multistyle='';<\/p>\n<details>\n<summary>\/\/ Used to be \"function againwiththeimdu(newimdu) {}\" ...<\/summary>\n<p>function wasagainwiththeimdu(newimdu) {<br \/>\n  var ioff=0;<br \/>\n  var frombs='youllneverfindthis';<br \/>\n  var tobs='youllneverfindthis';<br \/>\n  var numthings=eval(1 + multiresults.length), knum=0;<br \/>\n  var bps=['top left', 'bottom right', 'top right', 'bottom left', 'center center', 'top center', 'bottom center', 'left center', 'right center'];<br \/>\n  var pcs=['100%',     '50%',          '50%',       '50%',         '33%',           '33%',        '33%',           '33%',         '33%'];<br \/>\n  while (eval(-1 + numthings) &gt;= eval('' + bps.length)) {<br \/>\n    bps.push(bps[eval(ioff)]);<br \/>\n    pcs.push('33%');<br \/>\n    ioff++;<br \/>\n  }<br \/>\n  if (eval('' + multiresults.length) &gt; 0 && multistyle != '') {<br \/>\n    if (multistyle.indexOf('background-position:') == -1) {<br \/>\n    multistyle=multistyle.replace('no-repeat;', 'no-repeat,no-repeat; background-position:top left,bottom right; ' + String.fromCharCode(10) + String.fromCharCode(10)).replace('contain;', '50% auto,50% auto;').replace('; }', (',linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),').substring(0,1) + String.fromCharCode(10) + 'URL(' + newimdu.replace(\/\\ \/g,'+') + '); }');<br \/>\n    } else {<br \/>\n    frombs=multistyle.split('background-size:')[1].split(';')[0];<br \/>\n    tobs='' + pcs[eval(-1 + numthings)] + ' auto';<br \/>\n    for (knums=1; knums&lt;numthings; knums++) {<br \/>\n       tobs+=',' +  pcs[eval(-1 + numthings)] + ' auto';<br \/>\n    }<br \/>\n    multistyle=multistyle.replace('no-repeat;', 'no-repeat,no-repeat;').replace('; ' + String.fromCharCode(10) + String.fromCharCode(10), ',' + bps[eval(-1 + numthings)] + '; ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(frombs, tobs).replace('; }', (',linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),').substring(0,1) + String.fromCharCode(10) + 'URL(' + newimdu.replace(\/\\ \/g,'+') + '); }');<br \/>\n    }<br \/>\n    \/\/multistyle=multistyle.replace('no-repeat;', 'no-repeat,no-repeat; background-position:top left,bottom right; ').replace('contain;', 'contain,contain;').replace('; }', (',linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),').substring(0,1) + String.fromCharCode(10) + 'URL(' + imdu.replace(\/\\ \/g,'+') + '); }');<br \/>\n    \/\/alert('' + multistyle.split('),').length);<br \/>\n    \/\/if (multistyle.split('),').length == 4) {<br \/>\n    \/\/   alert(multistyle.split('),')[3]);<br \/>\n    \/\/}<br \/>\n  }<br \/>\n  return newimdu;<br \/>\n}<br \/>\n<\/details>\n<p>\nfunction againwiththeimdu(newimdu) {<br \/>\n  var ioff=0, joff=0, dolast=true, lesslinear=false;<br \/>\n  var opbr=' { ', opbrtwo='no-repeat;', oprb=',';<br \/>\n  var frombsall='youllneverfindthis';<br \/>\n  var tobsall='youllneverfindthis';<\/p>\n<p>  var frombs='youllneverfindthis';<br \/>\n  var tobs='youllneverfindthis';<br \/>\n  var numthings=eval(1 + multiresults.length), knum=0;<br \/>\n  var pcs=['100%',     '50%',          '50%',       '50%',         '33%',           '33%',        '33%',           '33%',         '33%'];<br \/>\n  var bps=location.search.split('multichoice=')[1] ? decodeURIComponent(location.search.split('multichoice=')[1].split('&')[0]).replace(\/\\'\/g,'').replace(\/\\\"\/g,'').replace(\/\\[\/g,'').replace(\/\\]\/g,'').trim().split(',') : ['top left', 'bottom right', 'top right', 'bottom left', 'center center', 'top center', 'bottom center', 'left center', 'right center'];<br \/>\n  if (bps[0].trim().indexOf(' ') == -1) {<br \/>\n    pcs=['100%',    '100%',         '100%',      '100%',        '100%',          '100%',       '100%',          '100%',        '100%'];<br \/>\n    pcs=['20%',    '30%',         '40%',      '50%',        '60%',          '70%',       '80%',          '90%',        '100%'];<br \/>\n    bps[0]='top left';<br \/>\n    dolast=false;<br \/>\n  }<br \/>\n  while (eval('' + bps.length) &lt; eval('' + pcs.length)) {<br \/>\n    bps.push(bps[eval(joff)]);<br \/>\n    joff++;<br \/>\n  }<br \/>\n  while (eval('' + pcs.length) &lt; eval('' + bps.length)) {<br \/>\n    pcs.push(pcs[eval(-1 + pcs.length)]);<br \/>\n  }<br \/>\n  if (pcs[eval(-1 + pcs.length)].indexOf('100%') == -1) {<br \/>\n  switch (numthings) {<br \/>\n    case 1:<br \/>\n      break;<\/p>\n<p>    case 2:<br \/>\n      \/\/bps=['top left', 'bottom right', 'top right', 'bottom left', 'center center', 'top center', 'bottom center', 'left center', 'right center'];<br \/>\n      bps=['top left', 'bottom right', 'top right', 'bottom left', 'center center',   'top center', 'bottom center',         'left center', 'right center'];<br \/>\n      break;<\/p>\n<p>    case 3:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top right', 'bottom center', 'center center', 'bottom right',    'bottom left', 'top center', 'left center', 'right center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1];<br \/>\n      break;<\/p>\n<p>    case 4:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top right', 'bottom left', 'bottom right',    'center center', 'top center', 'left center', 'right center', 'bottom center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2];<br \/>\n      break;<\/p>\n<p>    case 5:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top right', 'center center', 'bottom left', 'bottom right',    'top center', 'left center', 'right center', 'bottom center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2] + ',' + bps[3];<br \/>\n      break;<\/p>\n<p>    case 6:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top center', 'top right', 'bottom left', 'bottom center', 'bottom right', 'left center', 'center center', 'right center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2] + ',' + bps[3] + ',' + bps[4];<br \/>\n      break;<\/p>\n<p>    case 7:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top center', 'top right', 'center center', 'bottom left', 'bottom center', 'bottom right', 'left center', 'right center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2] + ',' + bps[3] + ',' + bps[4] + ',' + bps[5];<br \/>\n      break;<\/p>\n<p>    case 8:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top center', 'top right', 'left center', 'right center', 'bottom left', 'bottom center', 'bottom right', 'center center'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2] + ',' + bps[3] + ',' + bps[4] + ',' + bps[5] + ',' + bps[6];<br \/>\n      break;<\/p>\n<p>    case 9:<br \/>\n      frombsall=multistyle.split('background-position:')[1].split(';')[0];<br \/>\n      bps=['top left', 'top center', 'top right', 'left center', 'center center', 'right center', 'bottom left', 'bottom center', 'bottom right'];<br \/>\n      tobsall=bps[0] + ',' + bps[1] + ',' + bps[2] + ',' + bps[3] + ',' + bps[4] + ',' + bps[5] + ',' + bps[6] + ',' + bps[7];<br \/>\n      break;<\/p>\n<p>    default:<br \/>\n      bps=['top left', 'top center', 'top right', 'left center', 'center center', 'right center', 'bottom left', 'bottom center', 'bottom right'];<br \/>\n      break;<br \/>\n  }<br \/>\n  }<br \/>\n  while (eval(-1 + numthings) &gt;= eval('' + bps.length)) {<br \/>\n    bps.push(bps[eval(ioff)]);<br \/>\n    pcs.push(pcs[eval(-1 + pcs.length)]);<br \/>\n    ioff++;<br \/>\n  }<br \/>\n  var thisprefix='';<br \/>\n  if (eval(1.0 - document.getElementById('opmeter').value) == 0.0) {<br \/>\n     opbr='youllnever@#^&findthis';<br \/>\n     opbrtwo='youllnever@#^&findthis';<br \/>\n  } else {<br \/>\n     if (numthings &gt;= 2) { lesslinear=true; }<br \/>\n     oprb=',linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),';<br \/>\n  }<br \/>\n  if (eval('' + multiresults.length) &gt; 0 && multistyle != '') {<br \/>\n    if (multistyle.indexOf('background-position:') == -1) {<br \/>\n    if (eval(1.0 - document.getElementById('opmeter').value) != 0.0 && multistyle.indexOf('linear-gradient') != -1) {<br \/>\n      thisprefix=' background-color:rgba(255,255,255,' + eval('' + document.getElementById('opmeter').value).toPrecision(2) + '); ';<br \/>\n      frombs='linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),';<br \/>\n      tobs='';<br \/>\n    }<br \/>\n    multistyle=('' + multistyle.replace('no-repeat;', 'no-repeat,no-repeat; ' + thisprefix.substring(0,1) + ' background-position:' + bps[0] + ',' + bps[1] + '; ' + String.fromCharCode(10) + String.fromCharCode(10)).replace('contain;', 'auto ' + pcs[1] + ',auto ' + pcs[1] + ';').replace('; }', (lesslinear ? oprb.substring(0,1) : oprb.substring(0)) + 'URL(' + newimdu.replace(\/\\ \/g,'+') + '); }')).replace(opbr, ' { background:' + 'linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),' + 'linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')); '); \/\/.replace(frombs,tobs));<br \/>\n    if (lesslinear) {<br \/>\n      multistyle=multistyle.replace(opbr.substring(1) + 'U', 'U').replace(opbr.substring(1) + 'U', 'U');<br \/>\n    }<br \/>\n\/\/alert(multistyle);<br \/>\n    } else {<br \/>\n    if (eval(1.0 - document.getElementById('opmeter').value) != 0.0 && 1 == 7) {<br \/>\n    var multius=multistyle.split('URL(');<br \/>\n    var igood=1;<br \/>\n    multistyle='&lt;sty' + 'le&gt; #mytable { background:' + oprb.replace(\/^\\,\/g,'') + 'URL(' + multius[igood].split(')')[0] + ') auto ' + pcs[0] + ' ' + bps[0] + ' no-repeat; } &lt;\/sty' + 'le&gt;';<br \/>\n    igood++;<br \/>\n    for (var iut=1; iut&lt;multiresults.length; iut++) {<br \/>\n    multistyle=multistyle.replace(opbrtwo, ('no-repeat,linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),').substring(0) + 'URL(' + multius[igood].split(')')[0] + ') auto ' + pcs[iut] + ' ' + bps[iut] + ' no-repeat;');<br \/>\n    igood++;<br \/>\n    }<br \/>\n    multistyle=multistyle.replace(opbrtwo, ('no-repeat,linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),').substring(0) + 'URL(' + newimdu + ') auto ' + pcs[eval(-1 + numthings)] + ' ' + bps[eval(-1 + numthings)] + ' no-repeat;');<br \/>\n    \/\/alert(multistyle.slice(-70));<br \/>\n    } else {<br \/>\n    frombs=multistyle.split('background-size:')[1].split(';')[0];<br \/>\n    \/\/tobs='' + pcs[eval(-1 + numthings)] + ' auto';<br \/>\n    if (!dolast) {<br \/>\n    tobs='auto ' + pcs[eval(9 - numthings)] + '';<br \/>\n    } else {<br \/>\n    tobs='auto ' + pcs[eval(-1 + numthings)] + '';<br \/>\n    }<br \/>\n    for (knums=1; knums&lt;numthings; knums++) {<br \/>\n       \/\/tobs+=',' +  pcs[eval(-1 + numthings)] + ' auto';<br \/>\n       if (!dolast) {<br \/>\n       tobs+=',auto ' +  pcs[eval(9 + knums - numthings)] + '';<br \/>\n       } else {<br \/>\n       tobs+=',auto ' +  pcs[eval(-1 + numthings)] + '';<br \/>\n       }<br \/>\n    }<br \/>\n    multistyle=multistyle.replace(frombsall, tobsall).replace('no-repeat;', 'no-repeat,no-repeat;').replace('; ' + String.fromCharCode(10) + String.fromCharCode(10), ',' + bps[eval(-1 + numthings)] + '; ' + String.fromCharCode(10) + String.fromCharCode(10)).replace(frombs, tobs).replace('; }', (lesslinear ? oprb.substring(0,1) : oprb.substring(0)).substring(0) + String.fromCharCode(10) + 'URL(' + newimdu.replace(\/\\ \/g,'+') + '); }').replace('background:', 'background:' + 'linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value).toPrecision(2) + ')),');<br \/>\n    if (lesslinear) {<br \/>\n      multistyle=multistyle.replace(opbr.substring(1) + 'U', 'U').replace(opbr.substring(1) + 'U', 'U');<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  return newimdu;<br \/>\n}<br \/>\n<br \/>\nfunction lastcheck() {<br \/>\n    if (document.getElementById('ddstyle')) {<br \/>\n    document.getElementById('ddstyle').innerHTML=multistyle; \/\/'&lt;sty' + 'le&gt; #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); ' + String.fromCharCode(10) + ' background-repeat:no-repeat; ' + String.fromCharCode(10) + ' background-size:contain; } &lt;\/sty' + 'le&gt;';<br \/>\n    } else {<br \/>\n    document.getElementById('dstyle').innerHTML+=multistyle; \/\/'&lt;sty' + 'le&gt; #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); ' + String.fromCharCode(10) + ' background-repeat:no-repeat; ' + String.fromCharCode(10) + ' background-size:contain; } &lt;\/sty' + 'le&gt;';<br \/>\n    }<br \/>\n    setTimeout(function(){<br \/>\n    multistyle='';<br \/>\n    multiresults=[];<br \/>\n    }, 8000);<br \/>\n}<br \/>\n<br \/>\nfunction onecheck() {<br \/>\n  if (document.getElementById('result').innerHTML.trim() != '') {<br \/>\n    imdu=document.getElementById('result').innerHTML.trim();<br \/>\n    document.getElementById('result').innerHTML='';<br \/>\n    if (multistyle == '') {<br \/>\n    multistyle='&lt;sty' + 'le&gt; #mytable {  background-repeat:no-repeat; ' + String.fromCharCode(10) + '   background-size:contain; ' + String.fromCharCode(10) + '   background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); ' + '} &lt;\/sty' + 'le&gt;';<br \/>\n    }<br \/>\n    multiresults.push(againwiththeimdu(imdu));<br \/>\n    if (eval('' + multiresults.length) == 1) {<br \/>\n    setTimeout(function(){ if (eval('' + multiresults.length) &gt; 1) {  lastcheck(); } else { lastcheck(); } document.getElementById('cbi').src='\/HTMLCSS\/client_browsing.htm?d=' + Math.floor(Math.random() * 1987867564) + '&wording=Allimages%20images%2E%20'; }, 10000);<br \/>\n    }<br \/>\n    \/\/alert('&lt;sty' + 'le&gt; #mytable { background:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+').substring(0,20) + '); background-repeat:no-repeat; background-size:contain; } &lt;\/sty' + 'le&gt;');<br \/>\n    \/\/if (document.getElementById('ddstyle')) {<br \/>\n    \/\/document.getElementById('ddstyle').innerHTML='&lt;sty' + 'le&gt; #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } &lt;\/sty' + 'le&gt;';<br \/>\n    \/\/} else {<br \/>\n    \/\/document.getElementById('dstyle').innerHTML+='&lt;sty' + 'le&gt; #mytable { background-image:linear-gradient(rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + '),rgba(255,255,255,' + eval(1.0 - document.getElementById('opmeter').value) + ')),URL(' + imdu.replace(\/\\ \/g,'+') + '); background-repeat:no-repeat; background-size:contain; } &lt;\/sty' + 'le&gt;';<br \/>\n    \/\/}<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; accessed via the PHP parent caller&#8217;s <font color=blue>&#8220;planted&#8221; new Javascript function<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $templategame=str_replace('&lt;\/sc' . 'ript&gt;', \"\\n\" . \" <font color=blue>function getduresult(inr) {  document.getElementById('result').innerHTML=inr; onecheck();  return inr;   }<\/font> \" . \"\\n\" . '&lt;\/sc' . 'ript&gt;', $templategame);<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; which is now <font color=blue>looked out for<\/font> by the Client Browsing inhouse tool we often turn to &#8230;<\/p>\n<p><code><br \/>\n            <font color=blue>if (('' + typeof parent.getduresult) == 'function') {<br \/>\n            parent.document.getElementById('result').innerHTML=parent.getduresult(evt.target.result.replace('application\/octet-stream', tomt).replace('application\/octet-stream', tomt).replace('data:;', 'data:' + mfile.type + ';').replace('data:application\/octet-stream;', 'data:' + tomt + ';'));<br \/>\n            } else {<\/font><br \/>\n            parent.document.getElementById('result').innerHTML=evt.target.result.replace('application\/octet-stream', tomt).replace('application\/octet-stream', tomt).replace('data:;', 'data:' + mfile.type + ';').replace('data:application\/octet-stream;', 'data:' + tomt + ';');<br \/>\n            <font color=blue>}<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; like we do in our new Colouring In web application.<\/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\/client_browsing.html-------------------------------------GETME\">inhouse tweaked<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html-------------------------------------GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">Client Browsing<\/a> FileReader API interfacer &#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\/experimental_drag_and_drop.html-----------------------------------GETME\">first day changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/experimental_drag_and_drop.html-----------------------------------GETME\">experimental_drag_and_drop.htm<\/a> and <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\">second day 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\">the   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><!--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-multiple-background-image-tutorial\/'>New Colouring In Drag and Drop Multiple Background Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddket'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Keyboard Events Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-keyboard-events-tutorial\/'>Colouring In Drag and Drop Keyboard Events 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 Drag and Drop Keyboard Events Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_keyboard_events.gif\" title=\"Colouring In Drag and Drop Keyboard Events Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Keyboard Events Tutorial<\/p><\/div>\n<p>Despite us <a target=_blank title='Region Picker Keyboard Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/region-picker-keyboard-tutorial\/'>having precedents<\/a> to turn to regarding &#8230;<\/p>\n<p><code><br \/>\nestablishing a layer of keyboard onkeydown event logic for a non-textbox HTML element<br \/>\n<\/code><\/p>\n<p> &#8230; we&#8217;ve had to look up so many websites for advice, thanks, that it must have been that &#8220;day of discovery&#8221; you should persevere with, for reference points into the future.<\/p>\n<p>Alas, little of it can be used on mobile platforms.  Their setup precludes these keyboard independency possibilities we really like about non-mobile keyboard event functionality.  It can set up a &#8220;whole new woooorrrrllllddd&#8221; for your web application designs!<\/p>\n<p>What was the motivation for our interest?  Well, we have a mouse with a mouse wheel, and it occurred to us how useful the wheel could be when dragging and some content is below the fold, and rather than lose the dragging, you can use the mouse wheel to navigate to those areas of the webpage, still dragging your draggable element, with our Colouring In web application.<\/p>\n<p>And so, onto yesterday&#8217;s <a title='Colouring In Drag and Drop Mixed Platform Collaboration Tutorial' href='#ciddmpct'>Colouring In Drag and Drop Mixed Platform Collaboration Tutorial<\/a> &#8230;<\/p>\n<table style=\"background-color:white;\">\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/www.a11yproject.com\/posts\/how-to-use-the-tabindex-attribute\/'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>When tabindex\u2019s value is set to a negative number, its element can be programmatically focused via JavaScript.<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/12758021\/preventing-page-from-scrolling-on-focus-switching'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>el.focus({preventScroll: true}); # can focus to element el without involving any programmatic scrolling<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/46474239\/can-i-simulate-mousewheel-up-or-down-with-javascript'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>Pondered &#8230; can i simulate mousewheel up or down with javascript &#8230; and our findings &#8230; no!  But interesting.<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/15683789\/drag-drop-and-mousewheel'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>Mused on &#8230; Drag, drop and mousewheel? &#8230; and our findings &#8230; yes for physical mouse wheel usage (hence today&#8217;s interest) &#8230; but no, regarding Javascript logic.  Again, very interesting.<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/17895141\/how-to-scroll-the-window-automatically-when-mouse-moves-bottom-of-the-page-using'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>We didn&#8217;t follow through on it but &#8230; How to scroll the window automatically when mouse moves bottom of the page using jquery &#8230; intimates you could use jQuery code to detect user scrolling towards &#8220;below the fold&#8221; and warn the user or perhaps take some action &#8230; interesting.<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/68472554\/how-to-scroll-to-the-bottom-of-an-element'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>element.scrollIntoView({block: &#8216;end&#8217;}); # scrolls into view to the bottom of element<\/td>\n<\/tr>\n<tr>\n<td><a target=_blank title='This excellent link ...' href='https:\/\/stackoverflow.com\/questions\/9404406\/trigger-dummy-mouse-wheel-event'>This excellent link<\/a> taught us &#8230;<\/td>\n<td>Setting up a timed Javascript functionality with codelines like &#8230; document.body.scrollTop = document.body.scrollTop + 200; &#8230; could get around the Drag and Drop API disallowing programmatical scrolling during dragging operations.<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; to arrive at &#8230;<\/p>\n<p><code><br \/>\n      document.getElementById('mytable').tabIndex = -1;<br \/>\n      document.getElementById('mytable').onkeydown = function(e) {<br \/>\n   var charx = e.which || e.keyCode;<br \/>\n   \/\/document.title=('' + e.keyCode);<br \/>\n   if (('' + e.keyCode) == '85') { \/\/ Undo<br \/>\n     document.getElementById('jsundo').click();<br \/>\n   } else if (('' + e.keyCode) == '82') { \/\/ Redo<br \/>\n     document.getElementById('jsredo').click();<br \/>\n   } else if (('' + e.keyCode) == '83') { \/\/ Scroll to source<br \/>\n     document.getElementById('source').scrollIntoView();<br \/>\n   } else if (('' + e.keyCode) == '84') { \/\/ Target scroll<br \/>\n     document.getElementById('target').scrollIntoView();<br \/>\n   } else if (('' + e.keyCode) == '72') { \/\/ Head<br \/>\n     window.scrollTo(0,0);<br \/>\n   } else if (('' + e.keyCode) == '66') { \/\/ Bottom<br \/>\n     document.getElementById('target').scrollIntoView({block: 'end'});<br \/>\n   } else if (('' + e.keyCode) == '78') { \/\/ Up is N<br \/>\n     if (1 == 7) {<br \/>\n     var ourevt = new WheelEvent('wheel', {<br \/>\n       deltaY: 120,<br \/>\n       deltaMode: 1<br \/>\n     });<br \/>\n     \/\/document.title=('here ' + e.keyCode);<br \/>\n     document.body.dispatchEvent(ourevt);<br \/>\n     }<br \/>\n     \/\/document.body.scrollTop = document.body.scrollTop + 20;<br \/>\n     igyl=-20;<br \/>\n     if (!gyl) {<br \/>\n       document.body.scrollTop += igyl; \/\/ eval(1 + eval('' + document.body.scrollTop));<br \/>\n       igyl=0;<br \/>\n     }<br \/>\n   } else if (('' + e.keyCode) == '68') { \/\/ Down<br \/>\n     igyl=20;<br \/>\n     if (!gyl) {<br \/>\n       document.body.scrollTop += igyl; \/\/ eval(1 + eval('' + document.body.scrollTop));<br \/>\n       igyl=0;<br \/>\n     }<br \/>\n   } else if (('' + e.keyCode) == '65') { \/\/ Across is A<br \/>\n     igyl=10;<br \/>\n     if (!gyl) {<br \/>\n       document.body.scrollLeft += igyl; \/\/ eval(1 + eval('' + document.body.scrollLeft));<br \/>\n       igyl=0;<br \/>\n     }<br \/>\n   } else if (('' + e.keyCode) == '76') { \/\/ Left<br \/>\n     igyl=-10;<br \/>\n     if (!gyl) {<br \/>\n       document.body.scrollLeft += igyl; \/\/ eval(1 + eval('' + document.body.scrollLeft));<br \/>\n       igyl=0;<br \/>\n     }<br \/>\n   }<br \/>\n   return true;<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> &#8230; helped with these non-mobile keyboard event &#8220;value add&#8221; add-ons.<\/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-keyboard-events-tutorial\/'>Colouring In Drag and Drop Keyboard Events Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddmpct'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Mixed Platform Collaboration Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mixed-platform-collaboration-tutorial\/'>Colouring In Drag and Drop Mixed Platform Collaboration 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 Drag and Drop Mixed Platform Collaboration Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_mixed_platform_collaboration.gif\" title=\"Colouring In Drag and Drop Mixed Platform Collaboration Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Mixed Platform Collaboration Tutorial<\/p><\/div>\n<p>The urging within a lot of Responsive Web Design online advice is to use &#8220;proportional&#8221; units such as &#8230;<\/p>\n<ul>\n<li>%<\/li>\n<li>vw and vh<\/li>\n<\/ul>\n<p> &#8230; as much as possible, and all that is true.  But the &#8220;px&#8221; unit is still relevant on occasions, and even needed on occasions, and we&#8217;d like to explain this a little in terms of an approach we took, on top of the work of yesterday&#8217;s <a title='Colouring In Drag and Drop Undo and Redo Tutorial' href='#ciddurt'>Colouring In Drag and Drop Undo and Redo Tutorial<\/a>, where we tried to improve the sharing qualities of &#8220;colouring in of a clip art background&#8221; scenario (fairly obviously insulting to the child who&#8217;s done their best but the computer&#8217;s let them down), where precision is so important with the sharing, and the collaboration occurs between devices of vastly different platform and device dimensions.  We started our &#8230;<\/p>\n<ul>\n<li>&#8220;canvas&#8221; table using happy Responsive Web Design &#8230;<br \/>\n<code><br \/>\n width: 90%; height: 53%;<br \/>\n<\/code><br \/>\n &#8230;<\/li>\n<li>and this is all okay for the capture side, where the background image and colouring in are done by an individual user at their own device &#8230; but then when &#8230;<\/li>\n<li>the user shapes to email off a snapshot of where they are at with the colouring in and we indicate in the body URL a &#8220;canvas&#8221; table whereby that <i> width: 90%; height: 53%;<\/i> is converted into a &#8220;px&#8221; equivalent, <font color=blue>via<\/font> &#8230;<br \/>\n<code><br \/>\nfunction doemail(inidea) {<br \/>\n  var changeanyfrom='width: 90%; height: 53%;'; \/\/ tableohprefix<br \/>\n  var changeanyto='width: 90%; height: 53%;';<br \/>\n  var tableohprefixbit='';<br \/>\n  var documentURL=document.URL;<br \/>\n  if (('' + location.hash).indexOf('inu' + 'rl=') != -1 && documentURL.indexOf('#') == -1) {<br \/>\n    documentURL+=('' + location.hash);<br \/>\n  }<br \/>\n  if (document.getElementById('mytable').outerHTML.indexOf(changeanyfrom) == -1 && document.getElementById('mytable').outerHTML.indexOf(changeanyfrom.replace(\/\\ \/g,'')) != -1) {<br \/>\n     changeanyfrom=changeanyfrom.replace(\/\\ \/g,'');<br \/>\n  }<br \/>\n  if (document.getElementById('mytable').outerHTML.indexOf(changeanyfrom) != -1) {<br \/>\n    <font color=blue>var mtcb=document.getElementById('mytable').getBoundingClientRect();<br \/>\n    changeanyto='width:' + mtcb.width + 'px;height:' + mtcb.height + 'px;';<\/font><br \/>\n    tableohprefixbit='?tableohprefix=' + encodeURIComponent(document.getElementById('mytable').outerHTML.split('&lt;table')[1].split('&gt;')[0].replace(changeanyfrom,changeanyto));<br \/>\n    if (documentURL.indexOf('?') != -1) {<br \/>\n      documentURL=documentURL.replace('?', tableohprefixbit + '&');<br \/>\n    } else if (documentURL.indexOf('.php') != -1) {<br \/>\n      documentURL=documentURL.replace('.php', '.php' + tableohprefixbit);<br \/>\n    } else if (documentURL.indexOf('#') != -1) {<br \/>\n      documentURL=documentURL.replace(documentURL.split('#')[0], documentURL.split('#')[0] + tableohprefixbit);<br \/>\n    } else {<br \/>\n      documentURL+=tableohprefixbit;<br \/>\n    }<br \/>\n     \/\/alert(documentURL);<br \/>\n  } \/\/else {<br \/>\n     \/\/alert('oops ' + document.getElementById('mytable').outerHTML.split('&gt;')[0]);<br \/>\n  \/\/}<br \/>\n  var bihbig='';<br \/>\n  var fromone='youllneverfindthis';<br \/>\n  var toone='youllneverfindthis';<br \/>\n  var azx=top.document.getElementById('xae' + 'mail');<br \/>\n  \/\/alert(33);<br \/>\n  if (!azx) {   azx=top.document.createElement(\"a\"); }<br \/>\n  \/\/alert(3333);<br \/>\n  \/\/if (1 == 1) {<br \/>\n  \/\/document.getElementById('divas').appendChild(azx);<br \/>\n  \/\/} else {<br \/>\n  top.document.body.appendChild(azx);<br \/>\n  \/\/}<br \/>\n  \/\/(334);<br \/>\n  azx.style = \"display: none\";<br \/>\n  \/\/alert(2334);<br \/>\n  azx.target = \"_top\";<br \/>\n  \/\/alert(6334);<br \/>\n  azx.id = 'xae' + 'mail';<br \/>\n  document.getElementById('result').innerHTML='';<br \/>\n  if (inidea.indexOf('@') == -1) {<br \/>\n  inidea=('' + prompt('Please enter Email address to send to.', defemail));<br \/>\n  if (inidea == null) { inidea='';  }<br \/>\n  }<br \/>\n  if (inidea.indexOf('@') == -1) { return ''; }<br \/>\n<br \/>\n  var documentbody=document.body;<br \/>\n  document.getElementById('inurl').value='';<br \/>\n  var therest='';<br \/>\n  if (document.URL.indexOf('#inurl=') != -1 || 1 == 1) {<br \/>\n     documentbody=document.getElementById('mytable');<br \/>\n     bihbig=documentbody.innerHTML;<br \/>\n  } else {<br \/>\n     bihbig=documentbody.innerHTML;<br \/>\n  }<br \/>\n  if (bihbig.indexOf('&lt;\/tab' + 'le&gt;') != -1 || documentbody.outerHTML.indexOf('&lt;tab') == 0) {<br \/>\n  if (documentbody.outerHTML.indexOf('&lt;tab') != 0) {<br \/>\n  therest=bihbig.split(bihbig.split('&lt;\/tab' + 'le&gt;')[0] + '&lt;\/tab' + 'le&gt;')[1];<br \/>\n  bihbig=bihbig.split('&lt;\/tab' + 'le&gt;')[0] + '&lt;\/tab' + 'le&gt;';<br \/>\n  }<br \/>\n  while (bihbig.indexOf(suffixfor) != -1) {<br \/>\n    bihbig=bihbig.replace(suffixfor, suffixnickchar);<br \/>\n    if (fromone == 'youllneverfindthis') {<br \/>\n       fromone='imageurl=';<br \/>\n       toone='urlimage=';<br \/>\n    }<br \/>\n  }<br \/>\n  while (bihbig.indexOf(prefixfor + 'td') != -1) {<br \/>\n    bihbig=bihbig.replace(prefixfor + 'td', prefixnickchar + 'td');<br \/>\n    if (fromone == 'youllneverfindthis') {<br \/>\n       fromone='imageurl=';<br \/>\n       toone='urlimage=';<br \/>\n    }<br \/>\n  }<br \/>\n  }<br \/>\n <br \/> <br \/>\n  \/\/if (1 == 6 && bihbig.indexOf('&lt;\/he' + 'ad&gt;') != -1 || bihbig.indexOf('&lt;b' + 'o' + 'dy') != -1 || bihbig.indexOf('&lt;h' + '1') == 0) {<br \/>\n  \/\/azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(documentURL.replace('php#', 'php?').replace('#', '&').replace('&inurl=','#inurl=').replace(fromone,toone) + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig + therest))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  \/\/} else {<br \/>\n  if (sparewes) {<br \/>\n  azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(sparewes.document.getElementsByTagName('h1')[0].innerText.split('Afrikaans')[0].split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(documentURL.replace('php#', 'php?').replace('#', '&').replace('&inurl=','#inurl=').replace(fromone,toone) + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig + therest))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + sparewes.document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  } else {<br \/>\n  azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('Afrikaans')[0].split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(documentURL.replace('php#', 'php?').replace('#', '&').replace('&inurl=','#inurl=').replace(fromone,toone) + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig + therest))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  }<br \/>\n  \/\/}<br \/>\n  azx.click();<br \/>\n  return '';<br \/>\n  }<br \/>\n<\/code><br \/>\n &#8230; style of intervention &#8230; because in this &#8220;overlay of information sources&#8221; scenario &#8230;<\/li>\n<li>the Responsive Web Design units are not as useful at the other &#8220;email recipient&#8221; end unless that &#8220;email recipient&#8221; end&#8217;s device dimensions (and\/or perhaps platform) matches the originator&#8217;s device dimensions (and\/or perhaps platform) &#8230; instead &#8230;<\/li>\n<li>here is a case where the use of &#8220;px&#8221; units helps put the webpage HTML data on a &#8220;level playing field&#8221; for all, awaiting Responsive Web Design aspects still useful regarding the table cell dimensions (for example)<\/li>\n<\/ul>\n<p>In other words, there is a place for &#8220;px&#8221; units, in this example, and others, and can be there sometimes not cruelling any Responsive Web Design critiques.<\/p>\n<p>Also, today, we added to the original pen type style with several others <select size=9 id=pensel><option value=128396>pen &#128396;<\/option><option value=9999>pencil &#9999;<\/option><option value=128397>crayon &#128397;<\/option><option value=8598>totopleft &#8598;<\/option><option value=8599>totopright &#8599;<\/option>8624><option value=8624>topandright &#8624;<\/option><option value=8625>topandleft &#8625;<\/option><option value=8626>bottomandright &#8626;<\/option><option value=8627>bottomandleft &#8627;<\/option><\/select><\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_pen_types.gif'><\/img><\/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> &#8230; helped with these improvements to collaboration usage. And thanks to <a target=_blank title='Thanks' href='https:\/\/www.google.com\/imgres?q=clip%20art%20linework%20suiting%20colouring%20in&#038;imgurl=https%3A%2F%2Fi.pinimg.com%2F736x%2F78%2Fab%2F3b%2F78ab3bc8e3435e8a7510ea08989e0235.jpg&#038;imgrefurl=https%3A%2F%2Fwww.pinterest.com%2Fpin%2F63754150944706238%2F&#038;docid=9kdy1MVEDMZMEM&#038;tbnid=-BKvL80Ovv4lzM&#038;vet=12ahUKEwjVm7q1ycGFAxWqqFYBHemuA1EQM3oECGoQAA..i&#038;w=354&#038;h=500&#038;hcb=2&#038;ved=2ahUKEwjVm7q1ycGFAxWqqFYBHemuA1EQM3oECGoQAA'>this link<\/a> regarding today&#8217;s clip art research and development.  You&#8217;ll notice lots of change.  Lots of issues came up for consideration, here, as you might expect.  Much of that was to do with the mobile platform web application user experience using the Colouring In web application.<\/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-colouring-in-drag-and-drop-undo-and-redo-tutorial\/'>Colouring In Drag and Drop Undo and Redo Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddurt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Undo and Redo Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-undo-and-redo-tutorial\/'>Colouring In Drag and Drop Undo and Redo 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 Drag and Drop Undo and Redo Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_clip_art.gif\" title=\"Colouring In Drag and Drop Undo and Redo Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Undo and Redo Tutorial<\/p><\/div>\n<p>We all make mistakes.  Especially with any colouring in of a Clip Art background image, which might be happening for users of our Colouring In web application we last talked about with yesterday&#8217;s <a title='Colouring In Drag and Drop Background Image Tutorial' href='#ciddbit'>Colouring In Drag and Drop Background Image Tutorial<\/a>.<\/p>\n<p>So we&#8217;ve decided to help out via &#8230;<\/p>\n<ul>\n<li>provide Undo and Redo button &#8230;<br \/>\n<code><br \/>\n var cursnap=0, snapshs=[''], cich=null, woca=null, lastundo='';<br \/>\n<br \/>\nfunction undosnapshot() {<br \/>\n   if (snapshs[0] != '') {<br \/>\n   \/\/alert('cursnap=' + cursnap + ' and jsundo att=' + document.getElementById('jsundo').getAttribute('data-ssn') + ' and length=' + snapshs[eval('' + document.getElementById('jsundo').getAttribute('data-ssn'))].length);<br \/>\n   lastundo=document.getElementById('mytable').innerHTML;<br \/>\n   document.getElementById('mytable').innerHTML=snapshs[eval('' + document.getElementById('jsundo').getAttribute('data-ssn'))];<br \/>\n   if (eval('' + document.getElementById('jsundo').getAttribute('data-ssn')) &gt; 0) {<br \/>\n   document.getElementById('jsredo').setAttribute('data-ssn', '' + eval(0 + eval('' + document.getElementById('jsundo').getAttribute('data-ssn'))));<br \/>\n   document.getElementById('jsundo').setAttribute('data-ssn', '' + eval(-1 + eval('' + document.getElementById('jsundo').getAttribute('data-ssn'))));<br \/>\n   }<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction redosnapshot() {<br \/>\n   if (snapshs[0] != '') {<br \/>\n   \/\/alert('Cursnap=' + cursnap + ' and jsredo att=' + document.getElementById('jsredo').getAttribute('data-ssn') + ' and length=' + snapshs[eval('' + document.getElementById('jsredo').getAttribute('data-ssn'))].length);<br \/>\n   if (lastundo != '') {<br \/>\n   document.getElementById('mytable').innerHTML=lastundo;<br \/>\n   lastundo='';<br \/>\n   } else {<br \/>\n   document.getElementById('mytable').innerHTML=snapshs[eval('' + document.getElementById('jsredo').getAttribute('data-ssn'))];<br \/>\n   }<br \/>\n   }<br \/>\n}<br \/>\n<br \/>\nfunction updatesnaps() {<br \/>\n   if (document.getElementById('mytable').innerHTML != snapshs[cursnap]) {<br \/>\n     if (eval('' + snapshs.length) &lt; 5) {<br \/>\n      lastundo='';<br \/>\n      cursnap++;<br \/>\n      snapshs.push(document.getElementById('mytable').innerHTML);<br \/>\n    document.getElementById('jsundo').setAttribute('data-ssn', '' + eval(-1 + cursnap));<br \/>\n    document.getElementById('jsredo').setAttribute('data-ssn', '' + cursnap);<br \/>\n     } else {<br \/>\n      lastundo='';<br \/>\n      cursnap=4;<br \/>\n      snapshs[1]=snapshs[2];<br \/>\n      snapshs[2]=snapshs[3];<br \/>\n      snapshs[3]=snapshs[4];<br \/>\n      snapshs[4]=document.getElementById('mytable').innerHTML;<br \/>\n    document.getElementById('jsundo').setAttribute('data-ssn', '' + eval(-1 + cursnap));<br \/>\n    document.getElementById('jsredo').setAttribute('data-ssn', '' + cursnap);<br \/>\n     }<br \/>\n  }<br \/>\n  setTimeout(updatesnaps, 15000);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; functionality &#8230; and &#8230;<\/li>\n<li>a click in the pink area allows a <a target=_blank title='Some clip art linework examples that a Copy Image Address copied clipboard result which could be the pasted input into the new Image URL textbox in our Colouring In web application near the top right.' href='https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&#038;sca_upv=1&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&#038;q=clip+art+linework+suiting+colouring+in&#038;udm=2&#038;source=univ&#038;fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&#038;usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&#038;biw=1417&#038;bih=746&#038;dpr=1'>Google clip art image search webpage<\/a> be displayed &#8230; and these &#8230;<\/li>\n<li>being right clicked might show a Copy Image Address option which copies into the clipboard &#8230;<\/li>\n<li>data suitable for pasting into the Image URL textbox we introduced yesterday<\/li>\n<\/ul>\n<p> &#8230; whether that be an image data URL or perhaps even an absolute image URL, to use as the &#8220;canvas&#8221; (ie. palette) background image.  In this scenario, if the default 99 (pixels across and down) is still happening we open a new window with an incarnation of the webpage for that setting being 200 (pixels across and down).<\/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> &#8230; helped with these improvements.<\/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-undo-and-redo-tutorial\/'>Colouring In Drag and Drop Undo and Redo Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddbit'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Background Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-background-image-tutorial\/'>Colouring In Drag and Drop Background Image 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 Drag and Drop Background Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_bimg.gif\" title=\"Colouring In Drag and Drop Background Image Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Background Image Tutorial<\/p><\/div>\n<p>So far it might have been hard for some users to visualize &#8220;colouring in&#8221; a blank canvas.   As such, today, onto yesterday&#8217;s <a title='Colouring In Drag and Drop Mobile Tutorial' href='#ciddmt'>Colouring In Drag and Drop Mobile Tutorial<\/a> we&#8217;re now offering &#8230;<\/p>\n<ul>\n<li>ability to define a tabular background image via a browsed for image &#8230; or &#8230;<\/li>\n<li>ability to define a tabular background image via a user defined image URL<\/li>\n<\/ul>\n<p> &#8230; and add a new &#8220;opacity&#8221; setting &#8230;<\/p>\n<p><code><br \/>\nfunction torgba(inc, opa) {<br \/>\n var i, j=0, csess=\"rgba(:::1.0)\", alp=\"0123456789abcdef\", factor=16;<br \/>\n for (i=0; i&lt;=inc.replace('#','').length; i++) {<br \/>\n  if (i == 1) {<br \/>\n    csess=csess.replace('rgba(:','rgba(' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');<br \/>\n    j=0;<br \/>\n  } else if (i == 3) {<br \/>\n    csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');<br \/>\n    j=0;<br \/>\n  } else if (i == 5) {<br \/>\n    csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');<br \/>\n    j=0;<br \/>\n  } else {<br \/>\n    j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1))));<br \/>\n  }<br \/>\n  csess = csess.replace(\":1.0)\",\":\" + opa + \")\");<br \/>\n }<br \/>\n return csess.replace(\/\\:\/g,',');<br \/>\n}<br \/>\n<br \/>\nfunction opit(ijval) {<br \/>\n  if (document.getElementById('opmeter')) {<br \/>\n     if (eval(1.00 - document.getElementById('opmeter').value) != 0.00) {<br \/>\n       return torgba(ijval, document.getElementById('opmeter').value);<br \/>\n     }<br \/>\n  }<br \/>\n  return ijval;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; all of which we can envisage could have users, at the very least, using this &#8220;Colouring In&#8221; web application for &#8230;<\/p>\n<ul>\n<li>a scribbling or doodling mechanism (on a blank canvas)<\/li>\n<li>colouring in via a background image with <a target=_blank title='Some clip art linework examples that a Copy Image Address copied clipboard result which could be the pasted input into the new Image URL textbox in our Colouring In web application near the top right.' href='https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&#038;sca_upv=1&#038;rlz=1C5CHFA_enAU973AU973&#038;sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&#038;q=clip+art+linework+suiting+colouring+in&#038;udm=2&#038;source=univ&#038;fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&#038;usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&#038;biw=1417&#038;bih=746&#038;dpr=1'>clip art linework<\/a>, perhaps &#8230;<\/li>\n<li>create a postcard (type of creation) via a background image, perhaps browsed for (or using the Take Photo or Video option for mobile) on your device, and overlay some scribbled (or doodled) wording<\/li>\n<\/ul>\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> &#8230; helped with these mobile platform tweaks.  We thank <a target=_blank  title='https:\/\/i.pinimg.com\/736x\/86\/98\/2d\/86982d9ee1582bb7a4e730f11ebed3f4.jpg' href='https:\/\/i.pinimg.com\/736x\/86\/98\/2d\/86982d9ee1582bb7a4e730f11ebed3f4.jpg'>https:\/\/i.pinimg.com\/736x\/86\/98\/2d\/86982d9ee1582bb7a4e730f11ebed3f4.jpg<\/a> for the background image used (and fed into that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_was_numbers_guessing_game.php?imageurl=https%3A%2F%2Fi.pinimg.com%2F736x%2F86%2F98%2F2d%2F86982d9ee1582bb7a4e730f11ebed3f4.jpg&#038;opacity=1.00\">image URL textbox<\/a> to make happen) in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_bimg.gif\">today&#8217;s tutorial animated GIF presentation<\/a>.<\/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-colouring-in-drag-and-drop-mobile-tutorial\/'>New Colouring In Drag and Drop Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddmt'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-mobile-tutorial\/'>Colouring In Drag and Drop Mobile 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 Drag and Drop Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_share_colouring_in.jpg\" title=\"Colouring In Drag and Drop Mobile Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Mobile Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Colouring In Drag and Drop Sharing Tutorial' href='#ciddst'>Colouring In Drag and Drop Sharing Tutorial<\/a> sharing and collaboration code for our latest Colouring In web application was tested on our MacBook Air laptop only.  As you can imagine, that can mean that code working there is not always going to work the same way on mobile touch devices, but it was not, as it panned out for us, regarding the reason we thought it would be about.  We thought &#8230;<\/p>\n<ul>\n<li>it&#8217;s bound to be an issue with dragging event workings regarding mobile &#8230; but it took us quite some time to stop burying our head in the sand and, instead, &#8220;keeping it simple, Se\u00f1or&#8221; (ie. the KISS principle, and yes, Se\u00f1or is not a spelling mistake, thank you very much for your concern) &#8230; and testing another &#8220;dumber sounding&#8221; but panning out to be true, in this case &#8230;<\/li>\n<li>issue was to do with table cell widths and heights for table cells with no content acts differently for mobile than non-mobile (effectively scrunching cells up)<\/li>\n<\/ul>\n<p> &#8230; the trigger for us being that the &#8220;drop&#8221; event.target.id kept on showing up as &#8220;mytable&#8221;.  That happened hours ago!  We beavered away with x,y proportional co-ordinate calculations and eventually after all that not helping (for 2 maybe 3 hours), started applying a table cell border, which gave crazy results, and then it tweaked?!   Sheeeeesssshhhhh!<\/p>\n<p>Can you teach yourself the KISS principle?  Maybe you get better over time.  Another opinion can be great, though, with that alternative view, you hadn&#8217;t even thought of, often the result of such conversations.<\/p>\n<p>Back to today, we &#8230;<\/p>\n<table>\n<tr>\n<th>Made sure table &#8220;tr&#8221; row elements were for a <font color=blue>better defined (proportionate <sub>to table<\/sub>) width<\/font> &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;?php<br \/>\n<code style=font-size:9px;><br \/>\n    for ($thisrow=1; $thisrow&lt;=$across; $thisrow++) {<br \/>\n      $cthisrow='0000000000' . $thisrow;<br \/>\n      $rowsofar='&lt;tr <font color=blue>style=\"width:100%;\" <\/font>id=tr' . substr($cthisrow, -$iacross, $iacross) . '&gt;&lt;\/tr&gt;';<br \/>\n      $thistdid='td' . substr($cthisrow, -$iacross, $iacross) . '_';<br \/>\n      for ($thiscol=1; $thiscol&lt;=$across; $thiscol++) {<br \/>\n        $cthiscol='0000000000' . $thiscol;<br \/>\n        $thistdidsuffix='' . substr($cthiscol, -$iacross, $iacross) . '';<br \/>\n        $rowsofar=str_replace('&gt;&lt;\/tr&gt;', '&gt;&lt;td class=\"tdone\" id=' . $thistdid . $thistdidsuffix . ' style=text-align:center; data-answer=' . $ttcnt . '&gt;&lt;\/td&gt;&lt;\/tr&gt;', $rowsofar);<br \/>\n      }<br \/>\n      $newih=str_replace('&lt;\/tbody&gt;', $rowsofar . '&lt;\/tbody&gt;', $newih);<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<th>Made sure table &#8220;td&#8221; cell elements were proportional &#8230; initially, expressed in &#8220;viewport&#8221; (percentage style) dimension terms &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n&lt;style&gt;<br \/>\n<code style=font-size:9px;><br \/>\n  td.tdone {<br \/>\n     width: 1vw;<br \/>\n     height: 1vh;<br \/>\n  }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;\n<\/td>\n<\/tr>\n<tr>\n<th> &#8230; and if <font color=blue>not the default number<\/font> of cells across and down &#8230;<\/th>\n<\/tr>\n<tr>\n<td>\n<code style=font-size:9px;><br \/>\nfunction overdover() {<br \/>\n  if (document.getElementById('dragoverdelay') && document.getElementById('dragovercountdown')) {<br \/>\n     <font color=blue>if (document.getElementById('numacross')) {<br \/>\n       if (('' + document.getElementById('numacross').value) != '99') {<br \/>\n         document.getElementById('dstyle').innerHTML+='&lt;st' + 'yle&gt; td { width: ' + eval(eval('' + document.getElementById('numacross').value) \/100) + 'vw; height: ' + eval(eval('' + document.getElementById('numacross').value) \/100) + 'vh; } &lt;\/st' + 'yle&gt;';<br \/>\n       }<br \/>\n     }<\/font><br \/>\n     if (Math.abs(doverd) != eval('' + document.getElementById('dragoverdelay').value)) {  doverd=eval('' + document.getElementById('dragoverdelay').value);  }<br \/>\n     if (doverc == 0 && eval('' + document.getElementById('dragovercountdown').value) == 0) {  doverc=doverd; document.getElementById('dragovercountdown').value='' + doverc; document.getElementById('dragovercountdown').style.display='inline-block';   }<br \/>\n  }<br \/>\n}<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\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> &#8230; helped with these mobile platform tweaks.<\/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-sharing-tutorial\/'>Colouring In Drag and Drop Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddst'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Sharing Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-sharing-tutorial\/'>Colouring In Drag and Drop Sharing 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 Drag and Drop Sharing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/colouring_in_sharing.gif\" title=\"Colouring In Drag and Drop Sharing Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Colouring In Drag and Drop Sharing Tutorial<\/p><\/div>\n<p>We&#8217;re hoping yesterday&#8217;s <a title='Colouring In Drag and Drop Settings Tutorial' href='#ciddst'>Colouring In Drag and Drop Settings Tutorial<\/a> new Colouring In web application is seen as a creative&#8217;s tool.   As such, you&#8217;re going to want to share and collaborate &#8230; some of you, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>?!<\/p>\n<p>You&#8217;re going to want to hashtag &#8230; oops &#8230; we&#8217;re going to want to hashtag.  Yes, there is lots of data to share, but it worries us even involving hashtagging, how much there is, underlying, regarding that table element acting a bit like a television&#8217;s pixels.  How do you effectively share even a snapshot of that?<\/p>\n<p>But the difference between us and the television is, at least for a lot of people&#8217;s creations, the table is likely to be untouched, so can&#8217;t we &#8220;nickname&#8221; these repeated table cell scenarios?  If you just said &#8220;indeed&#8221;, we&#8217;d concur!  Take a look at some global Javascript var<font size=1>iables<\/font> <font color=blue>we thought might help<\/font> &#8230;<\/p>\n<p><code><br \/>\n var defemail='';<br \/>\n var defsms='', snum=null, sparewes=null;<br \/>\n <font color=blue>var prefixnickchar='.';<br \/>\n var prefixfor='&lt;td class=\"tdone\" id=\"';<br \/>\n var suffixnickchar='-';<br \/>\n var suffixfor='\" class=\"tdone\" style=\"text-align:center;\" data-answer=\"1\"&gt;&lt;\/td&gt;';<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; and for those untouched cells you&#8217;re saving more than (because of encryption) the length difference between the &#8220;nickchars&#8221; above and their &#8220;fixfor&#8221; counterparts for each &#8220;boring&#8221; table cell encountered.   And all this eases our mind somewhat, as a design, realized, on the way to the emailee or smsee <font color=blue>this way<\/font> &#8230;<\/p>\n<p><code><br \/>\nfunction doemail(inidea) {<br \/>\n  var bihbig='';<br \/>\n  var azx=top.document.getElementById('xae' + 'mail');<br \/>\n  \/\/alert(33);<br \/>\n  if (!azx) {   azx=top.document.createElement(\"a\"); }<br \/>\n  \/\/alert(3333);<br \/>\n  \/\/if (1 == 1) {<br \/>\n  \/\/document.getElementById('divas').appendChild(azx);<br \/>\n  \/\/} else {<br \/>\n  top.document.body.appendChild(azx);<br \/>\n  \/\/}<br \/>\n  \/\/(334);<br \/>\n  azx.style = \"display: none\";<br \/>\n  \/\/alert(2334);<br \/>\n  azx.target = \"_top\";<br \/>\n  \/\/alert(6334);<br \/>\n  azx.id = 'xae' + 'mail';<br \/>\n  if (inidea.indexOf('@') == -1) {<br \/>\n  inidea=('' + prompt('Please enter Email address to send to.', defemail));<br \/>\n  if (inidea == null) { inidea='';  }<br \/>\n  }<br \/>\n  if (inidea.indexOf('@') == -1) { return ''; }<br \/>\n<font color=blue><br \/>\n  bihbig=document.body.innerHTML;<br \/>\n  while (bihbig.indexOf(suffixfor) != -1) {<br \/>\n    bihbig=bihbig.replace(suffixfor, suffixnickchar);<br \/>\n  }<br \/>\n  while (bihbig.indexOf(prefixfor + 'td') != -1) {<br \/>\n    bihbig=bihbig.replace(prefixfor + 'td', prefixnickchar + 'td');<br \/>\n  }<br \/>\n<\/font><br \/>\n  \/\/if (1 == 6 && bihbig.indexOf('&lt;\/he' + 'ad>') != -1 || bihbig.indexOf('&lt;b' + 'o' + 'dy') != -1 || bihbig.indexOf('&lt;h' + '1') == 0) {<br \/>\n  \/\/azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  \/\/} else {<br \/>\n  if (sparewes) {<br \/>\n  azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(sparewes.document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + sparewes.document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  } else {<br \/>\n  azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('&lt;')[0].replace(\/\\`\/g,'').replace(\/^Events\\ in\\ \/g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); \/\/encodeURIComponent(document.URL.split('#')[0] + '&lt;h2' + document.body.innerHTML.split('&lt;h2')[1]));<br \/>\n  }<br \/>\n  \/\/}<br \/>\n  azx.click();<br \/>\n  return '';<br \/>\n  }<br \/>\n <br \/>\n  function dosms() {<br \/>\n  var bihbig='';<br \/>\n  if (('' + window.localStorage.getItem('colouringincollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defemail=window.localStorage.getItem('colouringincollaboratoremailee');<br \/>\n  }<br \/>\n  if (('' + window.localStorage.getItem('colouringincollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         defsms=window.localStorage.removeItem('colouringincollaboratorsmsno');<br \/>\n  }<br \/>\n  if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#cibih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.  We suspect message is too long for an SMS and if you enter an email address here instead, we will try to send an email instead.  Append space(s) to remember, whatever you enter, for next time.', snum)).replace(\/^null\/g, (defemail.indexOf('@') != -1 ? defemail : (defsms != '' ? defsms : ''))   );<br \/>\n  } else {<br \/>\n  snum=('' + prompt('Please enter SMS number to send to.  Append space(s) to remember for next time.', snum)).replace(\/^null\/g, (defsms != '' ? defsms : (defemail.indexOf('@') != -1 ? defemail : '')));<br \/>\n  }<br \/>\n  if (snum == null) { snum='';  }<br \/>\n<br \/>\n  if (snum.indexOf('@') != -1) {<br \/>\n    if (snum.trim() != snum) {<br \/>\n      snum=snum.trim();<br \/>\n      if (('' + window.localStorage.getItem('colouringincollaboratoremailee')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         window.localStorage.removeItem('colouringincollaboratoremailee');<br \/>\n      }<br \/>\n      window.localStorage.setItem('colouringincollaboratoremailee', snum);<br \/>\n      defemail=snum;<br \/>\n    }<br \/>\n    return doemail(snum);<br \/>\n  } else if (snum.trim() != '' && snum.trim().replace(\/0\/g,'').replace(\/1\/g,'').replace(\/2\/g,'').replace(\/3\/g,'').replace(\/4\/g,'').replace(\/5\/g,'').replace(\/6\/g,'').replace(\/7\/g,'').replace(\/8\/g,'').replace(\/9\/g,'').trim() == '') {<br \/>\n  \/\/alert('Snum=' + snum + '?');<br \/>\n    if (snum.trim() != snum) {<br \/>\n      snum=snum.trim();<br \/>\n      if (('' + window.localStorage.getItem('colouringincollaboratorsmsno')).replace(\/^null\/g,'').replace(\/^undefined\/g,'') != '') {<br \/>\n         window.localStorage.removeItem('colouringincollaboratorsmsno');<br \/>\n      }<br \/>\n      window.localStorage.setItem('colouringincollaboratorsmsno', snum);<br \/>\n      defsms=snum;<br \/>\n    }<br \/>\n<font color=blue><br \/>\n  bihbig=document.body.innerHTML;<br \/>\n  while (bihbig.indexOf(suffixfor) != -1) {<br \/>\n    bihbig=bihbig.replace(suffixfor, suffixnickchar);<br \/>\n  }<br \/>\n  while (bihbig.indexOf(prefixfor + 'td') != -1) {<br \/>\n    bihbig=bihbig.replace(prefixfor + 'td', prefixnickchar + 'td');<br \/>\n  }<br \/>\n<\/font><br \/>\n    var azx=top.document.getElementById('xas' + 'ms');<br \/>\n    if (azx == null) { azx=top.document.createElement(\"a\"); }<br \/>\n    \/\/if (1 == 1) {<br \/>\n   \/\/ document.getElementById('divas').appendChild(azx);<br \/>\n    \/\/} else {<br \/>\n    top.document.body.appendChild(azx);<br \/>\n   \/\/ }<br \/>\n    azx.id = 'xas' + 'ms';<br \/>\n    azx.target = \"_top\";<br \/>\n    azx.style = \"display: none\";<br \/>\n    azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig)));<br \/>\n    azx.click();<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and <font color=blue>when arriving back<\/font> from an emailee&#8217;s or smsee&#8217;s link click &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>function cibihcheck() {<br \/>\n  var partslh=('' + location.hash).split('#ci' + 'bih=');<br \/>\n  if (eval('' + partslh.length) > 1) {<br \/>\n    var bihbig=decodeURIComponent(decodeURIComponent(partslh[1]));<br \/>\n<br \/>\n    bihbig=bihbig.replace(\/\\.td\/g, prefixfor + 'td');<br \/>\n    bihbig=bihbig.replace(\/0\\-\/g, '0' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/1\\-\/g, '1' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/2\\-\/g, '2' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/3\\-\/g, '3' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/4\\-\/g, '4' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/5\\-\/g, '5' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/6\\-\/g, '6' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/7\\-\/g, '7' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/8\\-\/g, '8' + suffixfor);<br \/>\n    bihbig=bihbig.replace(\/9\\-\/g, '9' + suffixfor);<br \/>\n<br \/>\n    document.body.innerHTML=bihbig;<br \/>\n  }<br \/>\n}<\/font><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> &#8230; helped with this sense of collaboration.<\/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-sharing-tutorial\/'>Colouring In Drag and Drop Sharing Tutorial<\/a>.<\/p-->\n<hr>\n<p id='ciddst'>Previous relevant <a target=_blank title='Colouring In Drag and Drop Settings Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-settings-tutorial\/'>Colouring In Drag and Drop Settings 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 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<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='#d63327' onclick='var dv=document.getElementById(\"d63327\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/collaboration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63327' 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='#d63340' onclick='var dv=document.getElementById(\"d63340\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/units\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63340' 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='#d63350' onclick='var dv=document.getElementById(\"d63350\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63350' 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='#d63359' onclick='var dv=document.getElementById(\"d63359\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/undo\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63359' 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='#d63371' onclick='var dv=document.getElementById(\"d63371\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63371' 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='#d63379' onclick='var dv=document.getElementById(\"d63379\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onkeydown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63379' 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='#d63393' onclick='var dv=document.getElementById(\"d63393\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-position\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63393' 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='#d63403' onclick='var dv=document.getElementById(\"d63403\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63403' 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='#d63419' onclick='var dv=document.getElementById(\"d63419\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63419' 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='#d63424' onclick='var dv=document.getElementById(\"d63424\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/underlay\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63424' 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='#d63429' onclick='var dv=document.getElementById(\"d63429\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geography\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63429' 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='#d63438' onclick='var dv=document.getElementById(\"d63438\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/flag\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63438' 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='#d63445' onclick='var dv=document.getElementById(\"d63445\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geojson\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63445' 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='#d63455' onclick='var dv=document.getElementById(\"d63455\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ondblclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63455' 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='#d63467' onclick='var dv=document.getElementById(\"d63467\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/oncontextmenu\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d63467' 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='#d63472' onclick='var dv=document.getElementById(\"d63472\"); 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='d63472' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As far as the Reveal options go with our current Colouring In web application project&#8217;s &#8230; World Reveal game &#8230; and &#8230; Rivers Reveal game &#8230; and &#8230; Mountains Reveal game &#8230; today we&#8217;re presenting &#8230; Waterfalls Reveal game &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-waterfall-reveal-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":[2824,84,2367,126,127,2471,2472,2379,161,1993,1580,4723,2503,1707,222,1604,230,2081,281,3197,4732,322,327,2365,4721,4722,359,2237,364,4717,4385,380,385,3192,2023,386,3539,2242,448,476,477,2718,482,4198,4733,2208,513,2298,3922,557,3961,2258,2658,590,4724,3554,4563,652,673,684,4730,2169,719,739,772,4727,795,4736,812,4301,2092,3357,830,4719,2394,3987,1666,4713,1705,894,3434,2255,932,1918,3666,950,4731,993,997,1986,4720,3665,2085,1022,2141,1843,2079,1991,4734,1063,4728,4737,4729,1075,1917,1133,1137,1159,1200,1209,1212,1226,1238,1581,1811,1254,1292,1302,1319,4351,1842,1899,1345,1350,1356,4718,4735,2257,1431,2811,4726],"class_list":["post-63472","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-animation-2","tag-answer","tag-background","tag-background-image","tag-background-position","tag-background-repeat","tag-background-size","tag-border","tag-browse","tag-cell","tag-clip-art","tag-clone","tag-co-ordinates","tag-collaborate","tag-collaboration","tag-column","tag-country","tag-css","tag-dataset","tag-dblclick","tag-device","tag-did-you-know","tag-dimensions","tag-doodle","tag-doodling","tag-double-click","tag-drag","tag-drag-and-drop","tag-dragover","tag-drop","tag-email","tag-emoji","tag-emoji-flag","tag-encoding","tag-encryption","tag-entity","tag-flag","tag-focus","tag-game","tag-games-2","tag-genericize","tag-geography","tag-geojson","tag-geospatial","tag-getboundingclientrect","tag-google","tag-grid","tag-guess","tag-hashtag","tag-hashtagging","tag-height","tag-html-entity","tag-image","tag-image-search","tag-image-url","tag-iso-3166-2","tag-javascript","tag-keyboard","tag-latitude","tag-left-width","tag-location-hash","tag-longitude","tag-mailto","tag-mercator","tag-mercator-projection-opacity","tag-mobile","tag-mountain","tag-mouse","tag-mouse-wheel","tag-multiple","tag-multiple-background","tag-navigation","tag-nickname","tag-number","tag-oncontextmenu","tag-ondblclick","tag-ondragover","tag-onkeydown","tag-overlay","tag-palette","tag-percentage","tag-php","tag-pixel","tag-pixels","tag-platform","tag-polyline","tag-processing","tag-programming","tag-proof-of-concept","tag-proportional","tag-px","tag-question","tag-quiz","tag-range","tag-redo","tag-resolution","tag-responsive-design","tag-revael","tag-reveal","tag-river","tag-river-world","tag-rivers","tag-row","tag-scroll","tag-share","tag-sharing","tag-sms","tag-stop-press","tag-style","tag-styling","tag-svg","tag-table","tag-table-cell","tag-television","tag-text","tag-top","tag-transparency","tag-tutorial","tag-underlay","tag-undo","tag-units","tag-url","tag-user-experience","tag-ux","tag-value-add","tag-warerfall","tag-width","tag-wikipedia","tag-world","tag-world-map"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63472"}],"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=63472"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63472\/revisions"}],"predecessor-version":[{"id":63478,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/63472\/revisions\/63478"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=63472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=63472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=63472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}