{"id":61140,"date":"2023-10-13T03:01:34","date_gmt":"2023-10-12T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61140"},"modified":"2023-10-13T14:24:47","modified_gmt":"2023-10-13T04:24:47","slug":"javascript-lazy-evaluation-game-scroll-into-view-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-game-scroll-into-view-tutorial\/","title":{"rendered":"Javascript Lazy Evaluation Game Scroll Into View Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Game Scroll Into View Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game_scale.jpg\" title=\"Javascript Lazy Evaluation Game Scroll Into View Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Game Scroll Into View Tutorial<\/p><\/div>\n<p>Within the changes involved in the recent <a title='Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial' href='#jleihgdst'>Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial<\/a> you may have seen <font color=blue>the change<\/font> &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>if (window.self !== window.top) { answer=answer; } else { <\/font> document.getElementById('source').scrollIntoView(); <\/font color=blue>}<\/font><br \/>\n<\/code><\/p>\n<p>What is the motivation for that change?  Well, if a blog posting contains an HTML iframe pointing at our latest <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html\">Country Capital or In the Hour Game<\/a> web application, it would annoyingly scroll down to the webpage position of element <i>document.getElementById(&#8216;source&#8217;)<\/i> in that iframe without the user having clicked any buttons.  Dead annoying!<\/p>\n<p>But then, can this same idea, or a similar scrolling equivalence help us out sometimes, on the other side of the coin?  Well, yes, and that ability, encapulated in the logic of two clonish dropdowns &#8230;<\/p>\n<ul>\n<li>one dropdown up the top of the webpage &#8230; and another &#8220;clone&#8221; &#8230;<\/li>\n<li>dropdown to right in the middle of the table height<sub>wise<\/sub>, roughly, as a <i>position:fixed<\/i> &#8230;<br \/>\n<code><br \/>\n function overtoright(inspano) {<br \/>\n   if (window.self !== window.top) { answer=answer; } else {<br \/>\n   var rectxo=document.getElementById('mytable').getBoundingClientRect();<br \/>\n   inspano.style.position='fixed';<br \/>\n   inspano.style.left='' + eval(10 + eval('' + rectxo.right)) + 'px'; \/\/'' + eval(-20 + screen.width) + 'px';<br \/>\n   inspano.style.top='' + Math.floor(eval(rectxo.top + rectxo.bottom) \/ 2) + 'px';<br \/>\n   inspano.style.zIndex='99';<br \/>\n   inspano.style.display='inline-block';<br \/>\n   }<br \/>\n   return inspano;<br \/>\n }<br \/>\n<\/code><br \/>\n &#8230; element, so as to be within view more often<\/li>\n<\/ul>\n<p> &#8230; helping to offer &#8230;<\/p>\n<ul>\n<li>scrolling positional possibilities, as above &#8230; is timely way to be able to help out &#8230;<\/li>\n<li><a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> iframe scaling of itself and its contents &#8230;<br \/>\n<code><br \/>\n function siv(selo) {<br \/>\n   var ijk=0, ifsz=[], newishw=0, newishh=0;<br \/>\n   if (('' + selo.value).trim() != '') {<br \/>\n     if (('' + selo.value).trim() == '0') {<br \/>\n     window.scrollTo(0,0);<br \/>\n     } else if (('' + selo.value).trim() == '++') {<br \/>\n     ifsz=document.getElementsByTagName('iframe');<br \/>\n     for (ijk=0; ijk&lt;ifsz.length; ijk++) {<br \/>\n       if (ifsz[ijk].src.indexOf('title=') != -1) {<br \/>\n       if (('' + ifsz[ijk].style.width).trim() == '') { ifsz[ijk].style.width='' + ifsz[ijk].getBoundingClientRect().width + 'px';  }<br \/>\n       ifsz[ijk].style.width='' + Math.floor(eval(eval(('' + ifsz[ijk].style.width.replace('100%','834px')).replace('px','')) * 1.1)) + 'px';<br \/>\n       ifsz[ijk].style.height='' + Math.floor(eval(eval(('' + ifsz[ijk].style.height).replace('px','')) * 1.1)) + 'px';<br \/>\n       newishw=ifsz[ijk].src.split('width=')[1].split('&')[0];<br \/>\n       newishh=ifsz[ijk].src.split('height=')[1].split('&')[0];<br \/>\n       ifsz[ijk].src=ifsz[ijk].src.replace('width=' + newishw, 'width=' + Math.floor(eval(1.1 * eval('' + newishw)))).replace('height=' + newishh, 'height=' + Math.floor(eval(1.1 * eval('' + newishh))));<br \/>\n       }<br \/>\n     }<br \/>\n     } else  if (('' + selo.value).trim() == '--') {<br \/>\n     ifsz=document.getElementsByTagName('iframe');<br \/>\n     for (ijk=0; ijk&lt;ifsz.length; ijk++) {<br \/>\n       if (ifsz[ijk].src.indexOf('title=') != -1) {<br \/>\n       if (('' + ifsz[ijk].style.width).trim() == '') { ifsz[ijk].style.width='' + ifsz[ijk].getBoundingClientRect().width + 'px';   }<br \/>\n       ifsz[ijk].style.width='' + Math.floor(eval(eval(('' + ifsz[ijk].style.width.replace('100%','834px')).replace('px','')) \/ 1.1)) + 'px';<br \/>\n       ifsz[ijk].style.height='' + Math.floor(eval(eval(('' + ifsz[ijk].style.height).replace('px','')) \/ 1.1)) + 'px';<br \/>\n       newishw=ifsz[ijk].src.split('width=')[1].split('&')[0];<br \/>\n       newishh=ifsz[ijk].src.split('height=')[1].split('&')[0];<br \/>\n       ifsz[ijk].src=ifsz[ijk].src.replace('width=' + newishw, 'width=' + Math.floor(eval(eval('' + newishw) \/ 1.1))).replace('height=' + newishh, 'height=' + Math.floor(eval(eval('' + newishh) \/ 1.1)));<br \/>\n       }<br \/>\n     }<br \/>\n     } else if (('' + selo.value).trim() == '+') {<br \/>\n     ifsz=document.getElementsByTagName('iframe');<br \/>\n     for (ijk=0; ijk&lt;ifsz.length; ijk++) {<br \/>\n       if (ifsz[ijk].src.indexOf('title=') != -1) {<br \/>\n       if (('' + ifsz[ijk].style.width).trim() == '') { ifsz[ijk].style.width='' + ifsz[ijk].getBoundingClientRect().width + 'px';   }<br \/>\n       ifsz[ijk].style.width='' + Math.floor(eval(eval(('' + ifsz[ijk].style.width.replace('100%','834px')).replace('px','')) * 1.1)) + 'px';<br \/>\n       ifsz[ijk].style.height='' + Math.floor(eval(eval(('' + ifsz[ijk].style.height).replace('px','')) * 1.1)) + 'px';<br \/>\n       }<br \/>\n     }<br \/>\n     } else  if (('' + selo.value).trim() == '-') {<br \/>\n     ifsz=document.getElementsByTagName('iframe');<br \/>\n     for (ijk=0; ijk&lt;ifsz.length; ijk++) {<br \/>\n       if (ifsz[ijk].src.indexOf('title=') != -1) {<br \/>\n       if (('' + ifsz[ijk].style.width).trim() == '') { ifsz[ijk].style.width='' + ifsz[ijk].getBoundingClientRect().width + 'px';  }<br \/>\n       ifsz[ijk].style.width='' + Math.floor(eval(eval(('' + ifsz[ijk].style.width.replace('100%','834px')).replace('px','')) \/ 1.1)) + 'px';<br \/>\n       ifsz[ijk].style.height='' + Math.floor(eval(eval(('' + ifsz[ijk].style.height).replace('px','')) \/ 1.1)) + 'px';<br \/>\n       }<br \/>\n     }<br \/>\n     } else {<br \/>\n     window.scrollTo(stoisleft[eval(-1 + eval('' + selo.value))], stoistop[eval(-1 + eval('' + selo.value))]);<br \/>\n     stos[eval(-1 + eval('' + selo.value))].scrollIntoView();<br \/>\n     }<br \/>\n   }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Behind the scenes, we won&#8217;t say here exactly, but there is another Hint piece of logic activated.  We&#8217;ll just say <span style=text-decoration:underline;>Map<\/span> as an element to look for, as a first idea in a two part Hint mechanism?!<\/p>\n<p>Yet again, we hope you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html-----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html-----GETME\">gradual_reveal_country_game.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y\">Country Capital and\/or In the Hour Game<\/a> web application, <a data-onclick=\"document.getElementById('ifgrcg').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html';\" href='#ifgrcg'>below too<\/a>, yourself?!<\/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\/javascript-lazy-evaluation-game-scroll-into-view-tutorial\/'>Javascript Lazy Evaluation Game Scroll Into View Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jleihgdst'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-in-the-hour-game-daylight-saving-tutorial\/'>Javascript Lazy Evaluation In the Hour Game Daylight Saving 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\/gradual_reveal_country_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game_hints_regions.jpg\" title=\"Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial<\/p><\/div>\n<p>Regarding yesterday&#8217;s <a title='Javascript Lazy Evaluation Country Game Hints Tutorial' href='#jlecght'>Javascript Lazy Evaluation Country Game Hints Tutorial<\/a> progress with the &#8220;In the Hour&#8221; mode of game play, we thought there would only be the rare annoyance regarding Daylight Saving alterations to the default timezone offsets to GMT time, but there were more than we realized, prompting us to start using codelines like &#8230;<\/p>\n<p><code><br \/>\n    var newd = new Date(new Date().toLocaleString(\"en-US\", {timeZone: yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('&gt;')[1].split('&lt;')[0]}));<br \/>\n<\/code><\/p>\n<p> &#8230; to start working out timezone offsets in the client world (as you may remember us discussing with <a target=_blank title='SVG Network Clock Minimize Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/svg-network-clock-minimize-tutorial\/'>SVG Network Clock Minimize Tutorial<\/a> in recent times) checking on those PHP timezone derivations we default to, but might be wrong by an hour, regarding Daylight Saving timezone arrangements in place for certain times of the year in some countries &#8230;<\/p>\n<p><code><br \/>\n    var cinthehourspush=(('0' + eval(eval(eval(eval(yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0].replace('+','')) + uhour) + 24) % 24)).slice(-2) + ':' + ('0' + umin).slice(-2));<br \/>\n    var newd = new Date(new Date().toLocaleString(\"en-US\", {timeZone: yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('&gt;')[1].split('&lt;')[0]}));<br \/>\n    var newh=eval(('' + newd).split(':')[0].split(' ')[eval(-1 + ('' + newd).split(':')[0].split(' ').length)]);<br \/>\n    if (cinthehourspush.indexOf('' + ('0' + newh).slice(-2)) != 0) {<br \/>\n      var oldh=eval('' + cinthehourspush.split(':')[0]);<br \/>\n      if (oldh != newh) {<br \/>\n        \/\/alert('uhour=' + uhour + ' and oldh=' + oldh + cinthehourspush.substring(2) + ' goes with ' + yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0] + ' and newh=' + newh + cinthehourspush.substring(2));<br \/>\n        if (newh &lt; uhour && newh == 0 && uhour == 23) {<br \/>\n          sofarhrs+='+' + eval(24 - uhour) + ' ';<br \/>\n        } else if (newh &gt; uhour && newh == 23 && uhour == 0) {<br \/>\n          sofarhrs+='-' + eval(24 - newh) + ' ';<br \/>\n        } else if (oldh &gt; uhour) {<br \/>\n          sofarhrs+=yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0].replace('' + eval(oldh - uhour), '' + eval(newh - uhour)) + ' ';<br \/>\n        } else if (oldh &lt; uhour) {<br \/>\n          sofarhrs+=yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0].replace('' + eval(uhour - oldh), '' + eval(uhour - newh)) + ' ';<br \/>\n        } else if (newh &gt; uhour) {<br \/>\n          sofarhrs+='+' + eval(newh - uhour) + ' ';<br \/>\n        } else if (newh &lt; uhour) {<br \/>\n          sofarhrs+='-' + eval(uhour - newh) + ' ';<br \/>\n        }<br \/>\n      }<br \/>\n      gcinthehourspush='' + ('0' + newh).slice(-2) + cinthehourspush.substring(2);<br \/>\n    }<br \/>\n<\/code><\/p>\n<p>We&#8217;ve also added in more linking that adds on to yesterday&#8217;s existant &#8230;<\/p>\n<ul>\n<li>Placename links to Wikipedia &#8230; so that now we also have &#8230;<\/li>\n<li>Country links to Wikipedia &#8230; and &#8230;<\/li>\n<li>TimeZone information links added to the &#8220;just after&#8221; times shown<\/li>\n<\/ul>\n<p>Also added, today, is another hint, we&#8217;ve called &#8220;Regions&#8221;, which colour codes <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Charts<\/a> (albeit in a subtle way) according to those Regional first words in a TimeZone name like &#8230;<\/p>\n<p><code><br \/>\nAsia\/Singapore<br \/>\n<\/code><\/p>\n<p> &#8230; where that &#8220;Asia&#8221; is differentiated via our new arrays &#8230;<\/p>\n<p><code><br \/>\n var rcolmaps=['Africa','Asia','Europe','GMT','America','Pacific','Arctic','Atlantic','Indian','Australia','Antarctica'];<br \/>\n var rcolmapred=['15','45','55','55','75','85','95','a5','b5','d5','e5'];<br \/>\n<\/code><\/p>\n<p>We also thought &#8220;right now&#8221; was a bit of a waste of time, when we could show the user <font size=1>(a phrase like)<\/font> &#8220;on Monday&#8221; (ie. on <i>day of the week<\/i>).<\/p>\n<p>And so, yet again, we hope you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html----GETME\">gradual_reveal_country_game.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y\">Country Capital and\/or In the Hour Game<\/a> web application, <a data-onclick=\"document.getElementById('ifgrcg').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y';\" href='#ifgrcg'>below too<\/a>, yourself?!<\/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\/javascript-lazy-evaluation-in-the-hour-game-daylight-saving-tutorial\/'>Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlecght'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Country Game Hints Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-country-game-hints-tutorial\/'>Javascript Lazy Evaluation Country Game Hints 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\/gradual_reveal_country_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Country Game Hints Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game_hints.jpg\" title=\"Javascript Lazy Evaluation Country Game Hints Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Country Game Hints Tutorial<\/p><\/div>\n<p>Ideally, yesterday&#8217;s <a title='Javascript Lazy Evaluation Country In the Hour Game Tutorial' href='#jlecihgt'>Javascript Lazy Evaluation Country In the Hour Game Tutorial<\/a> suits &#8230;<\/p>\n<ul>\n<li>geography buffs &#8230; all the way through to &#8230;<\/li>\n<li>geography students<\/li>\n<\/ul>\n<p> &#8230; alike.  Or at least we&#8217;d like to help this be so, and in that respect we decided to offer two modes of Hints for the Country Game (whether that be Capitals Game or In the Hour Game) play &#8230;<\/p>\n<ul>\n<li>show country flags (ie. those &#8220;combination emojis&#8221; for the country flags, <font color=blue>derivable from that country&#8217;s ISO 2 letter country code<\/font>) &#8230;<br \/>\n<code><br \/>\n var useflags=location.search.split('flags=')[1] ? true : false;<br \/>\n useflags=location.search.split('wimgs=')[1] ? true : useflags;<br \/>\n<br \/>\n function checkflags(cbo, cbochecked) {<br \/>\n   if (cbochecked || document.getElementById('wimgs').checked) {<br \/>\n   useflags=true;<br \/>\n   } else {<br \/>\n   useflags=false;<br \/>\n   }<br \/>\n   applyhints('');<br \/>\n }<br \/>\n <br \/>\n  <font color=blue>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  }<\/font><br \/>\n<br \/>\n function applyhints(towhat) {<br \/>\n   var yt='', nnyt='';<br \/>\n   if (useflags) {<br \/>\n     if (document.getElementById('flags').checked) {<br \/>\n     myflag=orflag(ccodes[eval(-1 + answer)]);<br \/>\n     document.getElementById('source').style.backgroundImage='URL(\"' + svgtemp.replace('48','96').replace('30%','49%').replace('&gt;1 +', '&gt;' + myflag) + '\")';<br \/>\n     document.getElementById('source').style.backgroundPosition='right center';<br \/>\n     document.getElementById('source').style.backgroundRepeat='no-repeat';<br \/>\n     }<br \/>\n     if (document.getElementById('wimgs').checked) {<br \/>\n     if (yourtzlist.indexOf(',' + ccodes[eval(-1 + answer)] + ',') != -1) {<br \/>\n     yt=yourtzlist.split(',' + ccodes[eval(-1 + answer)] + ',')[1].split('&gt;')[1].split('&lt;')[0];<br \/>\n     nnyt=yt.replace(yt.split('\/')[0] + '\/','');<br \/>\n     \/\/alert(document.getElementById('tzi').src.split('?')[0].split('#')[0] + '?tzexact=' + encodeURIComponent(yt.replace(\/\\ \/g,'_')) + '&tznickname=' + encodeURIComponent( nnyt.replace(\/\\ \/g,'_') ));<br \/>\n     document.getElementById('tzi').src=document.getElementById('tzi').src.split('?')[0].split('#')[0] + '?tzexact=' + encodeURIComponent(yt.replace(\/\\ \/g,'_')) + '&tznickname=' + encodeURIComponent( nnyt.replace(\/\\ \/g,'_') );<br \/>\n     }<br \/>\n     }<br \/>\n   } else {<br \/>\n     document.getElementById('source').style.backgroundImage='';<br \/>\n     document.getElementById('source').style.backgroundRepeat='no-repeat';<br \/>\n     document.getElementById('ourcanvas').style.backgroundImage='';<br \/>\n     document.getElementById('ourcanvas').style.backgroundRepeat='no-repeat';<br \/>\n   }<br \/>\n   return towhat;<br \/>\n }<br \/>\n<\/code><br \/>\n &#8230;and\/or &#8230;<\/li>\n<li><a target=_blank title='Wikipedia ... thanks' href='\/\/wikipedia.org'>Wikipedia<\/a> images &#8230;<br \/>\n<code><br \/>\n function checkwimgs(cbo, cbochecked) {<br \/>\n   if (cbochecked || document.getElementById('flags').checked) {<br \/>\n   useflags=true;<br \/>\n   } else {<br \/>\n   useflags=false;<br \/>\n   }<br \/>\n   applyhints('');<br \/>\n }<br \/>\n<br \/>\n function fgcit(iois) {<br \/>\n  var outof=[\"left top\",\"left center\",\"left bottom\",\"right top\",\"right center\",\"right bottom\",\"center top\",\"center center\",\"center bottom\"];<br \/>\n  var startwith='', endwith='', imglist=[];<br \/>\n  if (iois != null) {<br \/>\n   if (iois.src.indexOf('tzexact=') != -1) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n        if (aconto.body.outerHTML.replace(\/\\&quot\\;\/g,\"'\").indexOf(\"document.getElementById('ourcanvas').style.background\") != -1) {<br \/>\n          \/\/document.getElementById('ourcanvas').style.backgroundRepeat='no-repeat';<br \/>\n          startwith=\"document.getElementById['ourcanvas'].style.background\" + aconto.body.outerHTML.replace(\/\\&amp\\;\/g,\"&\").replace(\/\\&quot\\;\/g,\"'\").split(\"document.getElementById('ourcanvas').style.background\")[1].split(';')[0] + ';';<br \/>\n          imglist=startwith.split(',');<br \/>\n          for (var jiu=0; jiu&lt;imglist.length; jiu++) {<br \/>\n            if (jiu == 0) {<br \/>\n              endwith=imglist[jiu].trim().replace(\/\\)\/g, ') ' + outof[0] + ' no-repeat').replace('URL(', 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),URL(');<br \/>\n            } else {<br \/>\n              endwith+=',' + imglist[jiu].replace(')', ') ' + outof[eval(jiu % outof.length)] + ' no-repeat')<br \/>\n            }<br \/>\n          }<br \/>\n          eval(endwith.replace(\"document.getElementById['ourcanvas'].\", \"document.getElementById('ourcanvas').\"));<br \/>\n        }<br \/>\n       }<br \/>\n    }<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>After all, most of us are not destined to visit or travel or tour all these countries, alas!<\/p>\n<p>And so, again, hope you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html---GETME\">gradual_reveal_country_game.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y\">Country Capital and\/or In the Hour Game<\/a> web application, <a data-onclick=\"document.getElementById('ifgrcg').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y';\" href='#ifgrcg'>below too<\/a>, yourself?!<\/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\/javascript-lazy-evaluation-country-game-hints-tutorial\/'>Javascript Lazy Evaluation Country Game Hints Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlecihgt'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Country In the Hour Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-country-in-the-hour-game-tutorial\/'>Javascript Lazy Evaluation Country In the Hour 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\/gradual_reveal_country_game.html?simple=y\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Country In the Hour Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_timegame.gif\" title=\"Javascript Lazy Evaluation Country In the Hour Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Country In the Hour Game Tutorial<\/p><\/div>\n<p>The &#8220;genericization drive&#8221; regarding &#8220;country map iframe <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> content&#8221; has passed us now, as last discussed in yesterday&#8217;s <a title='Javascript Lazy Evaluation Country Capital Game Context Tutorial' href='#jleccgct'>Javascript Lazy Evaluation Country Capital Game Context Tutorial<\/a>, about our &#8230;<\/p>\n<ul>\n<li>Country Capital Game &#8230; and today we start down the road to other game types that could involve &#8220;country map iframe Geo Chart content&#8221; and came up with a &#8230;<\/li>\n<li>Country &#8220;In the Hour&#8221; Game<\/li>\n<\/ul>\n<p> &#8230; whereby a user matches &#8230;<\/p>\n<ul>\n<li>a &#8220;draggable&#8221; <i>source<\/i> time in some country &#8230; with &#8230;<\/li>\n<li>a &#8220;droppable into<sub>able<\/sub>&#8221; <i>target<\/i> &#8220;country map iframe Geo Chart content&#8221; table cell<\/li>\n<\/ul>\n<p> &#8230; the correct selection of which scores for the game player.  You could think of it as a TimeZone Game, perhaps?!<\/p>\n<p>The PHP <a target=_blank title='PHP TimeZone list' href='http:\/\/php.net\/manual\/en\/timezones.php'>TimeZone<\/a> smarts helped derive the huge Javascript var<font size=1>iable<\/font> we now define in the game, <font color=blue>and used<\/font> &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>var ud = new Date();<br \/>\n var uhour = ud.getUTCHours();<br \/>\n var umin = ud.getUTCMinutes();<br \/>\n var chours=[], cinthehours=[], sofarhrs=' ';<\/font><br \/>\n<br \/> <br \/>\n <font color=blue>var yourtzlist=\"&lt;option value=\\\"GMT\\\" data-geo=\\\"51.4934,0.0098,GMT,GB,+0\\\"&gt;GMT&lt;\/option&gt;&lt;option value=\\\"Africa\/Abidjan\\\" data-geo=\\\"5.31666,-4.03334,GMT,CI,+0\\\"&gt;Africa\/Abidjan&lt;\/option&gt;&lt;option value=\\\"Africa\/Accra\\\" data-geo=\\\"5.55,-0.21667,GMT,GH,+0\\\"&gt;Africa\/Accra&lt;\/option&gt;&lt;option value=\\\"Africa\/Addis_Ababa\\\" data-geo=\\\"9.03333,38.7,EAT,ET,+3\\\"&gt;Africa\/Addis_Ababa&lt;\/option&gt;&lt;option value=\\\"Africa\/Algiers\\\" data-geo=\\\"36.78333,3.05,CET,DZ,+1\\\"&gt;Africa\/Algiers&lt;\/option&gt;\";<\/font> \/\/ etcetera etcetera etcetera<br \/>\n<br \/>\n<font color=blue>function choosejusttheone(thes, thiscc) {<br \/>\n  if (!thes) {  return false; }<br \/>\n  if (eval('' + yourtzlist.split(',' + thiscc + ',').length) != 2) { return true;  }<br \/>\n  if (yourtzlist.split(',' + thiscc + ',')[1].split('\"')[0].indexOf('.') != -1) { return true; }<br \/>\n  if (sofarhrs.indexOf(' ' + yourtzlist.split(',' + thiscc + ',')[1].split('\"')[0] + ' ') != -1) { return true;   }<br \/>\n  return false;<br \/>\n}<\/font><br \/>\n<br \/>\nfunction getnextcountrycode() {<br \/>\n  if (eval('' + ccodes.length) &lt; 9) {<br \/>\n  var mycc=document.getElementById('myctable').innerHTML;<br \/>\n  var opts=document.getElementsByTagName('option');<br \/>\n  var ths=document.getElementsByTagName('th');<br \/>\n  var atry=Math.floor(Math.random() * eval('' + opts.length));<br \/>\n  while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK'<font color=blue> || choosejusttheone(simple, opts[eval('' + atry)].value)<\/font>) {<br \/>\n     atry=Math.floor(Math.random() * eval('' + opts.length));<br \/>\n  }<br \/>\n  while (mycc.indexOf('&gt;' + opts[eval('' + atry)].innerText + '&lt;') == -1 || opts[eval('' + atry)].value == 'MK'<font color=blue> || choosejusttheone(simple, opts[eval('' + atry)].value)<\/font>) {<br \/>\n     atry=Math.floor(Math.random() * eval('' + opts.length));<br \/>\n     if (mycc.indexOf('&gt;' + opts[eval('' + atry)].innerText + '&lt;') != -1) {<br \/>\n     while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK'<font color=blue> || choosejusttheone(simple, opts[eval('' + atry)].value)<\/font>) {<br \/>\n       atry=Math.floor(Math.random() * eval('' + opts.length));<br \/>\n     }<br \/>\n     }<br \/>\n  }<br \/>\n  optfinds+=opts[eval('' + atry)].value + ' ';<br \/>\n  ccodes.push(opts[eval('' + atry)].value);<br \/>\n  cnames.push(opts[eval('' + atry)].innerText);<br \/>\n  ccapitals.push(mycc.split(\"&lt;th&gt;\" + opts[eval('' + atry)].innerText + \"&lt;\/th&gt;&lt;th&gt;\")[1].split(\"&lt;\")[0]);<br \/>\n  <font color=blue>if (!simple) {<br \/>\n    chours.push(-99);<br \/>\n    cinthehours.push(\"\");<br \/>\n  } else {<br \/>\n    sofarhrs+=yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0] + ' ';<br \/>\n    cinthehours.push(('0' + eval(eval(eval(eval(yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0].replace('+','')) + uhour) + 24) % 24)).slice(-2) + ':' + ('0' + umin).slice(-2));<br \/>\n  }<\/font><br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; as required.  The user can toggle between the two game modes by clicking that top button.<\/p>\n<p>We, again, hope you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html--GETME\">gradual_reveal_country_game.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y\">Country Capital and In the Hour Game<\/a> web application, <a onclick=\"document.getElementById('ifgrcg').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y';\" href='#ifgrcg'>below too<\/a>, yourself?!<\/p>\n<p><!--iframe id=iflgrcg style='width:100%;height:1600px;' src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html?simple=y\"><\/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-javascript-lazy-evaluation-country-capital-game-context-tutorial\/'>New Javascript Lazy Evaluation Country Capital Game Context Tutorial<\/a>.<\/p-->\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>We wanted to start involving Wikipedia links and update Geo Charts in either mode of play for the games above, and as a result &#8220;function getnextcountrycode&#8221; became &#8230;<\/p>\n<p><code><br \/>\nfunction getnextcountrycode() {<br \/>\n  if (eval('' + ccodes.length) &lt; 9) {<br \/>\n  var mycc=document.getElementById('myctable').innerHTML;<br \/>\n  var opts=document.getElementsByTagName('option'), longis='', latis='';<br \/>\n  var ths=document.getElementsByTagName('th');<br \/>\n  if (optslength &lt; 0) {<br \/>\n     for (iii=0; iii&lt;opts.length; iii++) {<br \/>\n       if (('' + opts[iii].value).indexOf(',') != -1 && optslength &lt; 0) { optslength=eval(-1 + iii);  }<br \/>\n     }<br \/>\n     if (optslength &lt; 0) { optslength=eval('' + opts.length); }<br \/>\n  }<br \/>\n  var atry=Math.floor(Math.random() * eval('' + optslength));<br \/>\n  while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK' || choosejusttheone(simple, opts[eval('' + atry)].value)) {<br \/>\n     atry=Math.floor(Math.random() * eval('' + opts.length));<br \/>\n  }<br \/>\n  while (mycc.indexOf('&lt;th&gt;' + opts[eval('' + atry)].innerText + '&lt;\/th&gt;&lt;th&gt;') == -1 || opts[eval('' + atry)].value == 'MK' || choosejusttheone(simple, opts[eval('' + atry)].value)) {<br \/>\n     atry=Math.floor(Math.random() * eval('' + optslength));<br \/>\n     if (mycc.indexOf('&lt;th&gt;' + opts[eval('' + atry)].innerText + '&lt;\/th&gt;&lt;th&gt;') != -1) {<br \/>\n     while (optfinds.indexOf(' ' + opts[eval('' + atry)].value + ' ') != -1 || opts[eval('' + atry)].value == 'MK' || choosejusttheone(simple, opts[eval('' + atry)].value)) {<br \/>\n       atry=Math.floor(Math.random() * eval('' + optslength));<br \/>\n     }<br \/>\n     }<br \/>\n  }<br \/>\n  optfinds+=opts[eval('' + atry)].value + ' ';<br \/>\n  ccodes.push(opts[eval('' + atry)].value);<br \/>\n  cnames.push(opts[eval('' + atry)].innerText);<br \/>\n  ccapitals.push(mycc.split(\"&lt;th&gt;\" + opts[eval('' + atry)].innerText + \"&lt;\/th&gt;&lt;th&gt;\")[1].split(\"&lt;\")[0]);<br \/>\n  subfroms.push('[-89.0000|-88.0000|~From~,2]');<br \/>\n  if (!simple) {<br \/>\n    if (document.getElementById(ccapitals[eval(-1 + ccapitals.length)].replace(\/\\_\/g,'%20').replace(\/\\ \/g,'%20'))) {<br \/>\n    longis='' + document.getElementById(ccapitals[eval(-1 + ccapitals.length)].replace(\/\\_\/g,'%20').replace(\/\\ \/g,'%20')).value.split(',')[0].split('|')[0];<br \/>\n    latis='' + document.getElementById(ccapitals[eval(-1 + ccapitals.length)].replace(\/\\_\/g,'%20').replace(\/\\ \/g,'%20')).value.substring(eval(1 + eval('' + longis.length)));<br \/>\n    cplaces.push(latis + '|' + longis);<br \/>\n    subtos.push('[' + cplaces[eval(-1 + cplaces.length)] + '|~' + ccapitals[eval(-1 + ccapitals.length)].replace(\/\\_\/g,'%20') + '~,2]');<br \/>\n    } else {<br \/>\n    cplaces.push('');<br \/>\n    subtos.push('[-89.0000|-88.0000|~From~,2]');<br \/>\n    }<br \/>\n    chours.push(-99);<br \/>\n    cinthehours.push(\"\");<br \/>\n  } else {<br \/>\n    sofarhrs+=yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0] + ' ';<br \/>\n    cinthehours.push(('0' + eval(eval(eval(eval(yourtzlist.split(',' + opts[eval('' + atry)].value + ',')[1].split('\"')[0].replace('+','')) + uhour) + 24) % 24)).slice(-2) + ':' + ('0' + umin).slice(-2));<br \/>\n    subtos.push(lastsubtos);<br \/>\n    cplaces.push(decodeURIComponent(lastsubtos.split('~')[1]));<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<hr>\n<p id='jleccgct'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Country Capital Game Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-country-capital-game-context-tutorial\/'>Javascript Lazy Evaluation Country Capital Game Context 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\/gradual_reveal_country_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Country Capital Game Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game_context.jpg\" title=\"Javascript Lazy Evaluation Country Capital Game Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Country Capital Game Context Tutorial<\/p><\/div>\n<p>The improvements, today, onto yesterday&#8217;s <a title='Javascript Lazy Evaluation Country Capital Game Tutorial' href='#jleccgt'>Javascript Lazy Evaluation Country Capital Game Tutorial<\/a>&#8216;s &#8220;Country Capital Game&#8221; web application revolve around &#8220;context&#8221; &#8230;<\/p>\n<ul>\n<li>there&#8217;s the &#8220;context&#8221; between land masses and sea &#8230; as well as &#8230;<\/li>\n<li>there&#8217;s the &#8220;context&#8221; between country and world view<\/li>\n<\/ul>\n<p> &#8230; both of which take us further into the realms of <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> usage, even &#8220;unique usage for us&#8221;, as far as the first one above.<\/p>\n<p>Regarding <i>the &#8220;context&#8221; between land masses and sea<\/i>, wouldn&#8217;t it be good, on the map to colour the land with a greener tinge?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone, anyone<\/a>, is green the go?  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/3GPP'>3GPP<\/a>, or is that CP3O, disguised as R2D2 &#8230; anyway &#8230; yes, we could &#8230;<\/p>\n<ul>\n<li>isolate the inherent map contents in its <a target=_blank title='SVG information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG'>SVG<\/a> guise &#8230; <font size=1>but if we could just censure the content here just that teensy weensy bit, now<\/font> &#8230;<\/li>\n<li><strike>we could torture that SVG to reveal its fill colour<\/strike>we could do research and development, via a web browser web inspector, into that SVG&#8217;s path element fill colour &#8230; spoiler alert &#8230; #f5f5f5 (<font color=#f5f5f5>grey<\/font>) &#8230; and &#8230;<\/li>\n<li><strike>liquidate its assets<\/strike>gently coerce the map into thinking its SVG <a target=_blank title='SVG path element information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/SVG\/Tutorial\/Paths'>path<\/a> element fill colour should be #c5f5f5 (<font color=#c5f5f5>our greenish tinge<\/font>)<\/li>\n<\/ul>\n<blockquote><p>\nThanks, <font size=1>can I call you<\/font> <font color=blue>3<sup>o<\/sup><\/font>?\n<\/p><\/blockquote>\n<p><code><br \/>\n function hashit(iois) {<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n          aconto.getElementById('myh').style.display='none'; \/\/ aconto.getElementById('chart_div').scrollIntoView();<br \/>\n          \/\/ Thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/6088409\/svg-drop-shadow-using-css3' href='\/\/stackoverflow.com\/questions\/6088409\/svg-drop-shadow-using-css3'>https:\/\/stackoverflow.com\/questions\/6088409\/svg-drop-shadow-using-css3<\/a><br \/>\n          setTimeout(function(){ aconto.getElementById('chart_div').innerHTML=aconto.getElementById('chart_div').innerHTML<font color=blue>.replace('&lt;\/svg&gt;', '&lt;\/svg&gt;&lt;style&gt; .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } &lt;\/style&gt;').replace(\/\\#f5f5f5\\;\\\"\/g,'#c5f5f5;\" class=\"shadow\"')<\/font><font color=blue>.replace(\/\\#f5f5f5\\\"\/g,'#c5f5f5\" class=\"shadow\"')<\/font>; }, 4000);<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<blockquote><p>\nOh, okay then.  Sorry.  Thanks, 3GPP<sub>subsection III<\/sub>!  You do get straight to the point, there!\n<\/p><\/blockquote>\n<p>And then, regarding <i>the &#8220;context&#8221; between country and world view<\/i>, we have a two part improvement to matters here, we feel.  Firstly, we hope to help contextualize &#8220;where in the world&#8221; is a country, and secondly, we wanted to &#8220;value add&#8221; for these popup windows we might open as the user hovers over a &#8220;country map&#8221; cell (filled with iframe <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> content), otherwise such interventions can be annoying, and we hope we&#8217;re not making the game too easy by adding to &#8230;<\/p>\n<ul>\n<li>the existant <i>onmouseover<\/i> event creating popup window &#8230; now &#8230;<\/li>\n<li>identical #c5f5f5 fill<sub>ed<\/sub> land mass &#8220;country map&#8221; &#8230; our newly added &#8230;<\/li>\n<li>&#8220;world map&#8221; view of that same country, highlighted<\/li>\n<\/ul>\n<p> &#8230; <font color=blue>for context<\/font> &#8230;<\/p>\n<p><code><br \/>\n var wmapurl='&lt;iframe src=\"\/\/www.rjmprogramming.com.au\/PHP\/GeoChart\/geo_chart.php?title=World%20Map&width=834&height=520&country=Country&popularity=Popularity&data=%20[~IT~,2]\"&gt;&lt;\/iframe&gt;';<br \/>\n<br \/>\n var subfrom='~IT~';<br \/>\n var subto='~IT~';<br \/>\n<br \/>\nfunction woit(thissrc,thiso) {<br \/>\n  if (thissrc.indexOf(hastoinvolve.replace(' src=','\/\/')) != -1 && thissrc.replace('http:','').replace('https:','') != lastwosrc.replace('http:','').replace('https:','') && sowoa.replace(\/http\\:\/g,'').replace(\/https\\:\/g,'').indexOf(' ' + thissrc.replace('http:','').replace('https:','') + ' ') == -1) {<br \/>\n  lastwosrc=thissrc;<br \/>\n  var therect=thiso.getBoundingClientRect();<br \/>\n  if (wo) {<br \/>\n    if (!wo.closed) {<br \/>\n      wo.close();<br \/>\n    }<br \/>\n    wo=null;<br \/>\n    sowoa+=thissrc + ' ';<br \/>\n    subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';<br \/>\n    wo=window.open(thissrc,'_blank','top=' + therect.top + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));<br \/>\n    <font color=blue>\/\/wo.focus();<br \/>\n    wo.onload = function() {<br \/>\n      setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('&lt;\/svg&gt;', '&lt;\/svg&gt;&lt;style&gt; .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } &lt;\/style&gt;').replace(\/\\#f5f5f5\\;\\\"\/g,'#c5f5f5;\" class=\"shadow\"').replace(\/\\#f5f5f5\\\"\/g,'#c5f5f5\" class=\"shadow\"');   wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto);  }, 4000);<br \/>\n    };<\/font><br \/>\n  } else {<br \/>\n    sowoa+=thissrc + ' ';<br \/>\n    subto='~' + thissrc.split('?title=')[1].split(';')[0] + '~';<br \/>\n    wo=window.open(thissrc,'_blank','top=' + therect.top + ',left=' + therect.left + ',width=' + eval(2 * thewidth) + ',height=' + eval(2 * theheight));<br \/>\n    <font color=blue>\/\/wo.focus();<br \/>\n    wo.onload = function() {<br \/>\n      setTimeout(function(){ wo.document.getElementById('chart_div').innerHTML=wo.document.getElementById('chart_div').innerHTML.replace('&lt;\/svg&gt;', '&lt;\/svg&gt;&lt;style&gt; .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } &lt;\/style&gt;').replace(\/\\#f5f5f5\\;\\\"\/g,'#c5f5f5;\" class=\"shadow\"').replace(\/\\#f5f5f5\\\"\/g,'#c5f5f5\" class=\"shadow\"');    wo.document.getElementById('chart_div').innerHTML+=wmapurl.replace(subfrom,subto); }, 4000);<br \/>\n    };<\/font><br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; where element <i>chart_div<\/i> represents all the <a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> smarts, thanks!<\/p>\n<p>We hope you try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html-GETME\">gradual_reveal_country_game.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html\">Country Capital Game<\/a> web application, <a href='#ifgrcg'>below too<\/a>, yourself?!<\/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-javascript-lazy-evaluation-country-capital-game-tutorial\/'>New Javascript Lazy Evaluation Country Capital Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jleccgt'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Country Capital Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-country-capital-game-tutorial\/'>Javascript Lazy Evaluation Country Capital 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\/gradual_reveal_country_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Country Capital Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.jpg\" title=\"Javascript Lazy Evaluation Country Capital Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Country Capital Game Tutorial<\/p><\/div>\n<p>Just like with yesterday&#8217;s <a title='Javascript Lazy Evaluation Game Involvement Tutorial' href='#jlegit'>Javascript Lazy Evaluation Game Involvement Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>we have a game &#8230; again &#8230;<\/li>\n<li>using <a target=_blank title='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData' href='\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/DataTransfer\/setData'>Drag and Drop<\/a> modus operandi &#8230; and &#8230;<\/li>\n<li>using <a target=_blank href='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'>Lazy<\/a> Evaluation and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>async<\/a>  and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await'>await<\/a> and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise#thenables'>Promise<\/a> and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/setTimeout'>setTimeout<\/a> Javascript logic &#8230; to add to the game&#8217;s interest &#8230;<\/li>\n<\/ul>\n<p> &#8230; of recent times.  But this time, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html_GETME\">gradual_reveal_country_game.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html\">Drag and Drop Country Capital Game<\/a> we introduce to the <i>target<\/i> &#8220;Drop Zone&#8221; table cell content, for the first time, we have &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML iframe element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> &#8230; content, nested in &#8230;<\/li>\n<li><a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a>\/<a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a> &#8230; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts'>&#8220;reveal&#8221;<\/a> style layout, displaying &#8230;<\/li>\n<li><a title=\"Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.\" href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/index\" target=\"_blank\">Google Chart<\/a> <a target=_blank title='Google Chart Geo Chart information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/geochart'>Geo Chart<\/a> &#8230; world country maps<\/li>\n<\/ul>\n<p> &#8230; to match the associated <i>source<\/i> &#8220;Drag&#8221; element available for the user to drag and drop into the correct table cell below, to score in today&#8217;s geography game.<\/p>\n<p><iframe id=ifgrcg style='width:100%;height:1600px;' src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_country_game.html\"><\/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-javascript-lazy-evaluation-country-capital-game-tutorial\/'>New Javascript Lazy Evaluation Country Capital Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlegit'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Game Involvement Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-game-involvement-tutorial\/'>Javascript Lazy Evaluation Game Involvement 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\/gradual_reveal_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Game Involvement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/smallintegergame.jpg\" title=\"Javascript Lazy Evaluation Game Involvement Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Game Involvement Tutorial<\/p><\/div>\n<p>Yes, we&#8217;ve decided to involve the <a target=_blank href='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'>Lazy<\/a> Evaluation and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>async<\/a>  and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await'>await<\/a> and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise#thenables'>Promise<\/a> and <a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/setTimeout'>setTimeout<\/a> Javascript logic of yesterday&#8217;s <a title='Javascript Lazy Evaluation Promise Tutorial' href='#jlept'>Javascript Lazy Evaluation Promise Tutorial<\/a> into a Drag and Drop mathematics game for Small Integers from 1 to 9.  Can you hear Alice in the middle room?!<\/p>\n<p>Our &#8220;mathematical sentences&#8221; to solve in this game, where the <i>operators<\/i> can be + or &#8211; or \/ or * or %, and <i>integer<\/i> is number from 1 to 9, can be &#8230;<\/p>\n<ul>\n<li><i>hard<\/i> &#8230; made up of &#8230;<br \/>\n<table border=1 style=\"width:100%;\">\n<tr>\n<td style=\"width:33%;\"><i>integer<\/i> <i>operator<\/i><\/td>\n<td><i>integer<\/i> <i>operator<\/i><\/td>\n<\/td>\n<td style=\"width:33%;\"><i>integer<\/i> <i>operator<\/i><\/td>\n<\/tr>\n<tr>\n<td><i>integer<\/i> <i>operator<\/i><\/td>\n<td style=background-color:yellow;><i>integer<\/i> <i>operator<\/i><br \/><audio style=\"width:180px;\" title=\"Thanks to https:\/\/www.bradybunchshrine.com\/\" controls><source type=audio\/wav src='\/\/www.bradybunchshrine.com\/bradybunch\/Sounds1\/bbyatahi.wav'><\/source><\/audio><\/td>\n<td><i>integer<\/i> <i>operator<\/i><\/td>\n<\/tr>\n<tr>\n<td><i>integer<\/i> <i>operator<\/i><\/td>\n<td><i>integer<\/i> <i>operator<\/i><\/td>\n<td><i>integer<\/i><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; or &#8230;\n<\/li>\n<li><i>simple<\/i> &#8230; made up of &#8230;<br \/>\n<table border=1 style=\"width:100%;\">\n<tr>\n<td style=\"width:33%;\"><i>integer<\/i><\/td>\n<td><i>operator<\/i><\/td>\n<td style=\"width:33%;\"><i>integer<\/i><\/td>\n<\/tr>\n<tr>\n<td><i>operator<\/i><\/td>\n<td style=background-color:cyan;><i>integer<\/i><br \/><audio style=\"width:180px;\" title=\"Thanks to https:\/\/www.bradybunchshrine.com\/\" controls><source type=audio\/wav src='\/\/www.bradybunchshrine.com\/bradybunch\/Sounds1\/bbhula.wav'><\/source><\/audio><\/td>\n<td><i>operator<\/i><\/td>\n<\/tr>\n<tr>\n<td><i>integer<\/i><\/td>\n<td><i>operator<\/i><\/td>\n<td><i>integer<\/i><\/td>\n<\/tr>\n<\/table>\n<\/li>\n<\/ul>\n<p> &#8230; parts to the &#8220;mathematical sentence&#8221; revealed gradually, using those aforesaid mentioned Javascript techniques, the less revealed as the user answers, the bigger the score, if correct.<\/p>\n<p>The <font size=1>(non-mobile only)<\/font> cursor and cell background images are formed via data URI svg+xml formats &#8230;<\/p>\n<table style='width:100%;'>\n<tr>\n<th style='width:40%;'>Cursor<\/th>\n<th>Cell<\/th>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'>\n<code style='font-size:10px;'><br \/>\n&lt;style&gt;<br \/>\n* {<br \/>\n cursor: url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='48' width='126' viewport='0 0 100 100'&gt;&lt;polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' \/&gt;&lt;text y='90%'&gt;\\002753&lt;\/text&gt;&lt;ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' \/&gt;&lt;ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' \/&gt;&lt;ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' \/&gt;&lt;rect x='40' y='20' width='80' height='25' style='fill:blue'&gt;&lt;animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' \/&gt;&lt;\/rect&gt;Sorry, your browser does not support inline SVG.&lt;\/svg&gt;\") 16 16, crosshair;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/td>\n<td style='vertical-align:top;'>\n<code style='font-size:10px;'><br \/>\n<font size=1> var svgtemp=\"<\/font>data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' height='48' width='126' viewport='0 0 100 100'&gt;&lt;text x='20%' y='30%' stroke='blue'&gt;1 +&lt;\/text&gt;&lt;\/svg&gt;<font size=1>\";<\/font><br \/>\n      \/\/ ... used later regarding tdsos = document.getElementsByTagName('td'); \/\/ ... and nextanswer is ... next answer ...<br \/>\n      setTimeout(() => { tdsos[eval(-1 + nextanswer)].style.backgroundImage='URL(\"' + svgtemp.replace('&gt;1 +', '&gt;' + parts[eval(-1 + nextanswer)].trim()) + '\")'; getnextanswer(); }, 200);<br \/>\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n<p> &#8230; in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_game.html_GETME\">gradual_reveal_game.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_game.html\">Small Integer Game<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=ifsirg style=\"width:100%;height:900px;\"  src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/gradual_reveal_game.html\"><\/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\/javascript-lazy-evaluation-game-involvement-tutorial\/'>Javascript Lazy Evaluation Game Involvement Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlept'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Promise Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-promise-tutorial\/'>Javascript Lazy Evaluation Promise 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\/lazy_async.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Promise Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async_more.jpg\" title=\"Javascript Lazy Evaluation Promise Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Promise Tutorial<\/p><\/div>\n<p>Working on yesterday&#8217;s <a title='Javascript Lazy Evaluation Follow Up Tutorial' href='#jlefut'>Javascript Lazy Evaluation Follow Up Tutorial<\/a> subject matter further today, we&#8217;d like to introduce a glossary of terms for beginners here &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>async<\/a><br \/>\n<font size=2>function<\/font><\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'><p>\nThe async function declaration creates a binding of a new async function to a given name. The await keyword is permitted within the function body, enabling asynchronous, promise-based behavior to be written in a cleaner style and avoiding the need to explicitly configure promise chains.\n<\/p><\/blockquote>\n<\/li>\n<li><a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await'>await<\/a><br \/>\n<font size=2>operator<\/font><\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/await'><p>\nThe await operator is used to wait for a Promise and get its fulfillment value. It can only be used inside an async function or at the top level of a module.\n<\/p><\/blockquote>\n<\/li>\n<li><a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise#thenables'>Promise<\/a><br \/>\n<font size=2>object<\/font> <font size=1>(thenable)<\/font><\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Promise#thenables'><p>\nThe Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.\n<\/p><\/blockquote>\n<\/li>\n<li><a target=_blank href='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'>Lazy<\/a><br \/>\n<font size=2>syntax<\/font> <font size=1>(function)<\/font><\/p>\n<blockquote cite='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'><p>\nLazy evaluation means to delay the evaluation of an expression until it\u2019s needed. Lazy evaluation is sometimes referred to as call-by-need.<br \/>\n<br \/>\nThe opposite of lazy evaluation is an eager evaluation. It\u2019s an evaluation strategy used in most programming languages.<br \/>\n<br \/>\nLazy evaluation makes it possible to:<br \/>\n<br \/>\ndefine potentially infinite data structures<br \/>\nincrease performance by avoiding needless computations<br \/>\ncustomize iteration behavior for data structures that want its elements accessible to the public\n<\/p><\/blockquote>\n<\/li>\n<li><a target=_blank href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/setTimeout'>setTimeout<\/a><br \/>\n<font size=2>function<\/font> <font size=1>(global)<\/font><\/p>\n<blockquote cite='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/setTimeout'><p>\nThe global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>Meanwhile you can (re-)try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.html-GETME\">our Javascript modified<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.html-GETME\">lazy_async.htm<\/a> web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.htm\">in a new tab<\/a> or below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.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\/javascript-lazy-evaluation-promise-tutorial\/'>Javascript Lazy Evaluation Promise Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlefut'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Follow Up Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-follow-up-tutorial\/'>Javascript Lazy Evaluation Follow Up 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\/lazy_async.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.gif\" title=\"Javascript Lazy Evaluation Follow Up Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Follow Up Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Javascript Lazy Evaluation Primer Tutorial' href='#jlept'>Javascript Lazy Evaluation Primer Tutorial<\/a>&#8216;s subject matter regarding Lazy Evaluations and Javascript <a target=_blank title='Javascript async function information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>async<\/a> functions, we&#8217;ve stumbled upon <a target=_blank title='Great website, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>another great resource<\/a>, thanks, from which we can base, to develop a web application, we&#8217;re hoping.<\/p>\n<p>Within this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.html_GETME\" title=\"lazy_async.html\">&#8220;proof of concept&#8221; code basis<\/a> you will find setTimeout (timer) references to <a target=_blank title='Javascript Lazy Evaluation information' href='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'>Lazy Evaluations<\/a> like &#8230;<\/p>\n<p><code><br \/>\n    setTimeout(() => {<br \/>\n      aminterested='Just';<br \/>\n      resolve(\"fast\");<br \/>\n      consolelog(\"fast promise is done\");<br \/>\n      aminterested='';<br \/>\n    }, 1000);<br \/>\n<\/code><\/p>\n<p> &#8230; as a function that &#8230;<\/p>\n<ul>\n<li>attempts to start in one second&#8217;s time &#8230;<\/li>\n<li>as needed that function is performed<\/li>\n<\/ul>\n<p>The possibilities here are multifaceted, and varied, and definitely worth experimenting with, within Javascript client work.<\/p>\n<p>So our starting web application can be tried <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.html\">in a new tab<\/a> or below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:900px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_async.html\"><\/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\/javascript-lazy-evaluation-follow-up-tutorial\/'>Javascript Lazy Evaluation Follow Up Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jlept'>Previous relevant <a target=_blank title='Javascript Lazy Evaluation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-primer-tutorial\/'>Javascript Lazy Evaluation 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\/clipboard_api_test.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Lazy Evaluation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/lazy_evaluation.gif\" title=\"Javascript Lazy Evaluation Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Lazy Evaluation Primer Tutorial<\/p><\/div>\n<p>Do you remember, with the presentation of &#8230;<\/p>\n<ul>\n<li><a title='Promise Object Sleeping and Doing Primer Tutorial' href='#posdpt'>Promise Object Sleeping and Doing Primer Tutorial<\/a> we talked about the Javascript Promise object?  Well today, in that similar line of thinking, we wanted to touch on &#8230;<\/li>\n<li><a target=_blank title='Javascript Lazy Evaluation information' href='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'>Lazy Evaluation<\/a> in Javascript &#8230;<br \/>\n<blockquote cite='https:\/\/javascript.plainenglish.io\/javascript-lazy-evaluation-iterables-iterators-e0770a5de96f'><p>\nLazy evaluation means to delay the evaluation of an expression until it\u2019s needed. Lazy evaluation is sometimes referred to as call-by-need.<br \/>\n<br \/>\nThe opposite of lazy evaluation is an eager evaluation. It\u2019s an evaluation strategy used in most programming languages.<br \/>\n<br \/>\nLazy evaluation makes it possible to:<br \/>\n<br \/>\ndefine potentially infinite data structures<br \/>\nincrease performance by avoiding needless computations<br \/>\ncustomize iteration behavior for data structures that want its elements accessible to the public\n<\/p><\/blockquote>\n<\/ul>\n<p>Personally, we&#8217;re more your &#8220;eager&#8221; types, but we&#8217;ve had help in the past from <i>brilliant<\/i> &#8220;lazy&#8221; types too, especially when we presented <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/selection-api-and-clipboard-api-tutorial\/' title='Selection API and Clipboard API Tutorial'>Selection API and Clipboard API Tutorial<\/a>, and so, we honed in on some Javascript &#8220;Lazy Evaluation&#8221; code, and put together some status information shown regarding timings and calls with respect to Javascript &#8230;<\/p>\n<ul>\n<li>&#8220;Lazy Evaluation&#8221; <font size=1>in Javascript<\/font> &#8230; classical syntax goes &#8230;<br \/>\n<code><br \/>\nf = () =&gt; expression;<br \/>\n<\/code><br \/>\n &#8230; and &#8230;\n<\/li>\n<li><a target=_blank title='Javascript async function information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/async_function'>async<\/a> <font size=1>function in Javascript<\/font> &#8230; classical syntax example goes &#8230;<br \/>\n<code><br \/>\nfunction resolveAfter2Seconds() {<br \/>\n  return new Promise((resolve) => {<br \/>\n    setTimeout(() => {<br \/>\n      resolve('resolved');<br \/>\n    }, 2000);<br \/>\n  });<br \/>\n}<br \/>\n<br \/>\nasync function asyncCall() {<br \/>\n  console.log('calling');<br \/>\n  const result = await resolveAfter2Seconds();<br \/>\n  console.log(result);<br \/>\n  \/\/ Expected output: \"resolved\"<br \/>\n}<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; into <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html---GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.html---GETME\" title=\"clipboard_api_test.html\">clipboard_api_test.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clipboard_api_test.htm\">Selection and Clipboard API usage web application<\/a> for you to try yourself with some image or text clipboard usages.<\/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\/javascript-lazy-evaluation-primer-tutorial\/'>Javascript Lazy Evaluation Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='posdpt'>Previous relevant <a target=_blank title='Promise Object Sleeping and Doing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/promise-object-sleeping-and-doing-primer-tutorial\/'>Promise Object Sleeping and Doing 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\/await.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Promise Object Sleeping and Doing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/full_of_promise.jpg\" title=\"Promise Object Sleeping and Doing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Promise Object Sleeping and Doing Primer Tutorial<\/p><\/div>\n<p>We&#8217;re here today to fulfil yesterday&#8217;s <a title='Web Application Controlled Progress Cursor Primer Tutorial' href='#wacpcpt'>Web Application Controlled Progress Cursor Primer Tutorial<\/a>&#8216;s pledge &#8230;<\/p>\n<blockquote cite=''><p>\n &#8230; which reminded me that we need to learn some more about the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a>\n<\/p><\/blockquote>\n<p> &#8230; and were happy to discover the Promise object talents of &#8230;<\/p>\n<ul>\n<li>sleeping &#8230; allowing for &#8230;<\/li>\n<li>multitasking<\/li>\n<li>doing &#8230; all using clientside Javascript<\/li>\n<\/ul>\n<p> &#8230; very interesting.  The serverside languages such as PHP make it a doddle to multitask (via sleep) but Javascript sleep has not always been a straightforward proposition, until we could <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise<\/a>, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>that is<\/a>!<\/p>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/await.html\">await.html<\/a>&#8216;s use of it to sleep and in between show &#8230;<\/p>\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/analogue_clock.htm\">analogue clock<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html\" title=\"Click picture\">Dams of the USA<\/a> (via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html-------GETME\" title=\"dams_usa.html\">dams_usa.html<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dams_usa.html-------GETME\" title=\"dams_usa.html\">this way<\/a>)<\/li>\n<\/ol>\n<p> &#8230; asynchronously both doing their own thing while the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/await.html\">await.html<\/a> works away in the background too, feeding off &#8220;child 2&#8221; clicks of &#8220;child 1&#8221; above to know when to say how long the dams took to load.  Yes, the &#8220;child 2&#8221; &#8220;onload&#8221; event, alone, cannot help determine this, but more &#8220;drilling into&#8221; the inner workings of the code behind &#8220;child 2&#8243;&#8216;s progress element, via &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\nvar numsleeps=700000;<br \/>\nvar ix=0;<br \/>\nvar d=new Date();<br \/>\nvar marks=[new Date(), new Date()];<br \/>\nvar imark=0;<br \/>\n<br \/>\nfunction sleep(ms) {  \/\/ thanks to <a target=_blank title='https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep' href='https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep'>https:\/\/stackoverflow.com\/questions\/951021\/what-is-the-javascript-version-of-sleep<\/a><br \/>\n  return new Promise(resolve =&gt; setTimeout(resolve, ms));<br \/>\n}<br \/>\n<br \/>\nasync function demo() {<br \/>\n  console.log(numsleeps + ' Taking a break...' + d);<br \/>\n  await sleep(2000);<br \/>\n  d=new Date();<br \/>\n  console.log(numsleeps + ' Two seconds later, showing sleep in a loop...' + d);<br \/>\n<br \/>\n  \/\/ Sleep in loop<br \/>\n  for (let i = 0; i &lt; 5; i++) {<br \/>\n    if (i === 3) {<br \/>\n      await sleep(2000);<br \/>\n  d=new Date();<br \/>\n    console.log(numsleeps + ' ' + d);<br \/>\n<br \/> <br \/>\n    }<br \/>\n  }<br \/>\n  numsleeps--;<br \/>\n  if (('' + numsleeps) != '0' && ('' + numsleeps).indexOf('-') == -1) { setTimeout(demo, 1); }<br \/>\n}<br \/>\n<br \/>\nfunction betw() {<br \/>\n  var seconds = (marks[1].getTime() - marks[0].getTime()) \/ 1000;<br \/>\n  document.getElementById('sh1').innerHTML='It took ' + seconds + ' seconds (from ' + marks[0] + ' to ' + marks[1] + ') to load the dams.';<br \/>\n  numsleeps=0;<br \/>\n}<br \/>\n<br \/>\nfunction markit() {<br \/>\n  marks[imark]=d;<br \/>\n  imark++;<br \/>\n  console.log('mark ' + imark + ': ' + d);<br \/>\n  if (imark == 2) { setTimeout(betw, 800);  imark=0;  }<br \/>\n}<br \/>\n<br \/>\ndemo();<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;h1&gt;Sleeping and Doing via Promise Object - RJM Programming - July, 2021 &lt;span id=sh1&gt;&lt;\/span&gt;&lt;\/h1&gt;<br \/>\n&lt;table style=width:100%;height:90%;&gt;&lt;tr&gt;&lt;td&gt;&lt;iframe onclick=\"markit();\" id=lif src=.\/analogue_clock.htm style=width:100%;height:100%;&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;td&gt;&lt;iframe id=rif src=.\/dams_usa.html?rand=7564675 style=width:100%;height:100%;&gt;&lt;\/iframe&gt;&lt;\/td&gt;&lt;\/tr&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<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\/promise-object-sleeping-and-doing-primer-tutorial\/'>Promise Object Sleeping and Doing Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wacpcpt'>Previous relevant <a target=_blank title='Web Application Controlled Progress Cursor Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/web-application-controlled-progress-cursor-primer-tutorial\/'>Web Application Controlled Progress Cursor 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\/cards_usefocus.html?card_memories=04.1:ara\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Application Controlled Progress Cursor Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cursor_progress_between_a_first_and_second_javascript_prompt_popup_window.gif\" title=\"Web Application Controlled Progress Cursor Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Application Controlled Progress Cursor Primer Tutorial<\/p><\/div>\n<p>We had occasion to revisit the card game (and more) recent web application exploits highlighted in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-cursor-tutorial\/' title='Just Javascript Card Game Cursor Tutorial'>Just Javascript Card Game Cursor Tutorial<\/a> thread of blog postings and shaped to play Bridge via &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara'>https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and was &#8220;personally relatively&#8221; happy up to the first Javascript prompt popup window.   Huh?!  What&#8217;s with &#8220;personally relatively&#8221;?   Can I be serious?  Well, I&#8217;m insulted!<\/p>\n<p>The thing is, I don&#8217;t mind, when I&#8217;m writing the code <font size=1>(funny about that?!)<\/font> very complex and convoluted prompt window instructions and options. But &#8230;<\/p>\n<ul>\n<li>not everybody is willing to read such long diatribes<\/li>\n<li>actions can speak louder than words, so we figure between those first two prompt windows in a Bridge or 500 card game, it would be beneficial to show a &#8220;progress cursor&#8221; (ie. usually associated with the user waiting for a process to finish) between the first and second prompt windows to help show the players there could be waiting and irrelevant players turning away should all four players want to play fairly in their game<\/li>\n<\/ul>\n<p>It was an interesting Javascript coding exercise &#8230;<\/p>\n<ol>\n<li>(sort of) overload the &#8220;prompt&#8221; function with our inhouse &#8220;superprompt&#8221; function via &#8230;\n<ul>\n<li>globally replace &#8221; prompt(&#8221; with &#8221; superprompt(&#8220;<\/li>\n<li>globally replace &#8220;=prompt(&#8221; with &#8220;=superprompt(&#8220;<\/li>\n<\/ul>\n<\/li>\n<li>add the following Javascript code &#8230;<br \/>\n<code><br \/>\n  var aheadoffirst=(('' + document.URL.replace('?', '&').indexOf('&card_') != -1) ? trueize() : 0);<br \/>\n<br \/>\n  function dbcpp() {<br \/>\n    if (aheadoffirst == 2) {<br \/>\n      document.body.style.cursor='progress';  \/\/ between first and second prompt windows<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    } else if (aheadoffirst == 0) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n    } else {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function trueize() {  \/\/ bit like a promise<br \/>\n    setTimeout(dbcpp, 1000);<br \/>\n    return 1;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function superprompt(opone, optwo) {<br \/>\n    if (aheadoffirst == 3) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      aheadoffirst=0;<br \/>\n    } else if (aheadoffirst != 0) {<br \/>\n      aheadoffirst++;<br \/>\n      if (aheadoffirst == 3) {<br \/>\n        document.body.style.cursor='progress'; \/\/ between first and second prompt windows<br \/>\n      }<br \/>\n    }<br \/>\n    return prompt(opone, optwo);<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; which reminded me that we need to learn some more about the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a>.<\/p>\n<p>See this in action with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=y\" title=\"Click picture\">Memories Card Game<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?onewindow=y\" title=\"Click picture\">live run with single window (good for mobile)<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">default live run<\/a> (for your platform, and if non-mobile it will try child popup windows).<\/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='#d52808' onclick='var dv=document.getElementById(\"d52808\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52808' 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='#d52815' onclick='var dv=document.getElementById(\"d52815\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/promise\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52815' 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='#d61006' onclick='var dv=document.getElementById(\"d61006\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/async\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61006' 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='#d61010' onclick='var dv=document.getElementById(\"d61010\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/setTimeout\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61010' 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='#d61013' onclick='var dv=document.getElementById(\"d61013\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/promise\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61013' 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='#d61015' onclick='var dv=document.getElementById(\"d61015\"); 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='d61015' 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='#d61035' onclick='var dv=document.getElementById(\"d61035\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61035' 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='#d61079' onclick='var dv=document.getElementById(\"d61079\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61079' 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='#d61088' onclick='var dv=document.getElementById(\"d61088\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timezone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61088' 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='#d61100' onclick='var dv=document.getElementById(\"d61100\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61100' 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='#d61115' onclick='var dv=document.getElementById(\"d61115\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/daylight-saving\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61115' 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='#d61140' onclick='var dv=document.getElementById(\"d61140\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scale\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61140' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Within the changes involved in the recent Javascript Lazy Evaluation In the Hour Game Daylight Saving Tutorial you may have seen the change &#8230; if (window.self !== window.top) { answer=answer; } else { document.getElementById(&#8216;source&#8217;).scrollIntoView(); } What is the motivation for &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-lazy-evaluation-game-scroll-into-view-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,15,37],"tags":[2360,1614,126,4163,4501,3349,2620,218,4499,224,4506,2105,2081,2247,3668,2652,367,4494,385,3192,392,4496,3037,2242,471,476,1619,482,2708,518,2728,1608,587,590,2991,3172,2395,3636,652,4495,4497,1807,745,2126,4500,752,4504,849,2921,870,871,2120,967,1988,997,998,2357,3719,1063,1094,3896,1866,1119,1126,1200,1226,4502,2386,1279,1282,1693,4503,1721,2579,2580,1431,1433,2811],"class_list":["post-61140","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-async","tag-asynchronous","tag-background","tag-capital","tag-capital-city","tag-client-pre-emptive-iframe","tag-clue","tag-code","tag-code-syntax","tag-colour","tag-colour-code","tag-context","tag-country","tag-country-code","tag-day-of-week","tag-daylight-saving","tag-dropdown","tag-eager","tag-emoji","tag-emoji-flag","tag-equation","tag-evaluation","tag-fixed","tag-flag","tag-function","tag-game","tag-geo-chart","tag-geography","tag-gmt","tag-google-chart","tag-hint","tag-hover","tag-iframe","tag-image","tag-integer","tag-intl","tag-iso","tag-iso-639-2","tag-javascript","tag-lazy","tag-lazy-evaluation","tag-link","tag-map","tag-map-chart","tag-mathematical-sentence","tag-mathematics","tag-now","tag-object","tag-offset","tag-onload","tag-onmouseover","tag-path","tag-popup","tag-position","tag-programming","tag-programming-tutorial","tag-promise","tag-promise-object","tag-reveal","tag-scale","tag-scrollintoview","tag-select","tag-sentence","tag-settimeout","tag-stop-press","tag-svg","tag-svg-path","tag-syntax","tag-time","tag-timer","tag-timezone","tag-utl","tag-variable","tag-when","tag-where","tag-wikipedia","tag-window-open","tag-world"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61140"}],"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=61140"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61140\/revisions"}],"predecessor-version":[{"id":61148,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61140\/revisions\/61148"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}