{"id":43334,"date":"2019-02-01T03:01:34","date_gmt":"2019-01-31T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43334"},"modified":"2019-02-01T05:26:51","modified_gmt":"2019-01-31T19:26:51","slug":"html-square-horizontal-rule-plot-axes-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-axes-tutorial\/","title":{"rendered":"HTML Square Horizontal Rule Plot Axes Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Plot Axes Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plot_axes.jpg\" title=\"HTML Square Horizontal Rule Plot Axes Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Plot Axes Tutorial<\/p><\/div>\n<p>A lot of us have a goodly amount of &#8220;visual learner&#8221; in us, and the study of geometry or algebra or calculus in mathematics is full of opportunities for &#8220;visual cues&#8221; to topics that look a bit &#8220;dry&#8221; on paper.  Take <a target=_blank title='Linear equations information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Linear_equation'>linear equations<\/a> for instance <font size=1>&#8230; and I hear that the circus is a popular winner here<\/font>.  If we were to offer you &#8230;<\/p>\n<p><code><br \/>\ny = <i>[Gradient]<\/i>x + <i>[Y-Offset]<\/i> = 2x + 189<br \/>\n<\/code><\/p>\n<p> &#8230; as a linear equation to contemplate, can you imagine it in your mind as easily as to use the &#8220;visual cue&#8221; of today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plot_axes.jpg\" title=\"Tutorial picture\">tutorial picture<\/a>?  It asks this of the user information wise &#8230;<\/p>\n<ul>\n<li>user enters minimumX,minimumY,maximumX,maximumY for a range of interest for the plotting of the axes &#8230; perhaps a bit tricky &#8230; in today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plot_axes.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> we entered -200,-200,200,200 &#8230; then &#8230;<\/li>\n<li>user enters gradient,y-offset &#8230; in today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plot_axes.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> we entered 2,189 (for that linear equation above)<\/li>\n<\/ul>\n<p>Onto the recent <a title='HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial' href='#htmlshrtirgt'>HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial<\/a> we added the one new dropdown menu option &#8220;Plot Axes&#8221; to get to this functionality, so why not peruse the HTML and Javascript and CSS code of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-------GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot\">live run<\/a> link.<\/p>\n<hr>\n<p id='htmlshrtirgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-image-reveal-game-tutorial\/'>HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/reveal_image_game.jpg\" title=\"HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Image Reveal Game Tutorial<\/p><\/div>\n<p>Rest assured all of yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial' href='#htmlshrtosmat'>HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial<\/a> thoughts will continue on with any extended functionality with our &#8220;HTML Square Horizontal Rule Tracing&#8221; inspired web application&#8217;s dropdown list of games and puzzles.   With that in mind, today&#8217;s extended functionality is an Image Revealing Game.  Are you a regular, and know about our design belief in categorizing (a lot of) web design ideas into one of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Overlay postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> &#8230; and\/or &#8230;<\/li>\n<li><a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>reveal<\/a><\/li>\n<\/ul>\n<p> &#8230; concepts?  Well, today, our Image Revealing Game uses a bit of both to create its workings.<\/p>\n<p>What&#8217;s the gist of the game?  It&#8217;s a game for two players and the players take it in turns, with &#8230;<\/p>\n<ul>\n<li>One player picking an image via either &#8230;\n<ol>\n<li>image URL &#8230; or <\/li>\n<li>browsed for image <a target=_blank title='File API' href='https:\/\/davidwalsh.name\/file-api'>file<\/a> on disk<\/li>\n<\/ol>\n<p> &#8230; and this image is the background image for the table element consisting of that 5&#215;5 grid of the earliest days (still) of this project&#8217;s concepts &#8230; and &#8230;\n<\/li>\n<li>the other player is clicking on <b>overlayed<\/b> buttons placed on top of this image to <b>reveal<\/b> 1\/100th (as each table cell has four such buttons) of the image, and at any time, via the &#8220;guess&#8221; HTML &#8220;a&#8221; link means of guessing what the image contains, a correct guess, as judged by the first (image choosing) player scores that guessing player (100 &#8211; number of clicked buttons) points<\/li>\n<\/ul>\n<p>To test this new game out, you could try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\" title=\"Click picture\">Image Revealing Game live run<\/a>.<\/p>\n<hr>\n<p id='htmlshrtosmat'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-ios-mobile-app-tutorial\/'>HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/iPad\/sos_game_etc.jpg\" title=\"HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial<\/p><\/div>\n<p>The design of our recent &#8220;HTML Square Horizontal Rule Tracing&#8221; suite of functionalities, with their navigational arrangements using &#8230;<\/p>\n<ul>\n<li>web browser (address bar) URL involving ? and &amp; arguments &#8230; and &#8230;<\/li>\n<li>hashtags (using #)<\/li>\n<\/ul>\n<p> &#8230; all possible, because the amounts of passed data is small (and so we don&#8217;t need to post to a serverside piece of code written in a language like PHP or Perl or Python (the three &#8220;P&#8221;&#8216;s)), lends itself to (iOS) &#8230;<\/p>\n<ul>\n<li>on the iPad or iPhone in a web browser such as Safari &#8230;<\/li>\n<li>arrange navigation to a web application &#8220;snapshot&#8221; of the (game or puzzle or whatever) functionality of interest at its instigation &#8230;<\/li>\n<li>touch the Share link up near the top right &#8230;<\/li>\n<li>touch the &#8220;Add to Home Screen&#8221; button &#8230;<\/li>\n<li>fill in a suitable name (you can &#8220;long touch&#8221; Select All to effectively highlight what&#8217;s there already, ready) for the &#8230;<\/li>\n<li>icon you create in the Home Screen by touching the Add link at the top right<\/li>\n<\/ul>\n<p>Then, from then on, those icons you create in the Home Screen could be your instant access method of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/slideshow.html\" title=\"Cut to the Chase\">&#8220;Cutting to the Chase&#8221;<\/a>.<\/p>\n<p>To show this, we used <a title=\"QuickTime information from Apple\" href=\"https:\/\/support.apple.com\/downloads\/quicktime\" target=\"_blank\">QuickTime Player<\/a> on a MacBook Pro connected to an iPad by the (ubiquitous) Apple white lead via its New Movie Recording dropdown to &#8220;Robert&#8217;s iPad&#8221; option, to create a video called &#8220;iOS Mobile App and Web Application Nexus via Share&#8217;s Add to Home&#8221; uploaded to <a target=_blank title='YouTube' href='https:\/\/www.youtube.com'>YouTube<\/a>, and with the &#8220;blurb&#8221; &#8230;<\/p>\n<blockquote cite='https:\/\/www.youtube.com\/embed\/oSVPZHJuJ4E'><p>\nWe demonstrate some web applications that use the one HTML and Javascript and CSS codeset partitioned off to many functionalities (such as games and puzzles) visited by a Safari web browser user the once, and at instigation, are hived off to iPad Home screen icons as iOS Mobile Apps to a large degree, via the Share link&#8217;s Add to Home.\n<\/p><\/blockquote>\n<p> &#8230; that you can play for yourself below &#8230;<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/oSVPZHJuJ4E\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p> &#8230; resulting in the (best part of, but nobody&#8217;s saying &#8220;totally&#8221;) iOS Mobile App looking icons pointing at &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Hangman%20Game&#038;question=%20#hangman\" title=\"Hangman Game\">Hangman Game<\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Change%20the%20L%20shape%20pattern%20into%204%20equal%20sized%20squares%20by%20moving%204%20matches.%20%20Which%204%3F&#038;question=12%2C72%2C71%2C70%2C83%2C139%2C11%2C10%2C9%2C149%2C94%2C126%2C128%2C127%2C139%2C138%2C150%2C-71%2C%2B25%2C%2B37%2C-70%2C%2B25%2C%2B84%2C-83%2C%2B84%2C%2B95%2C-139%2C%2B95%2C%2B37\" title=\"Chinese Brain Twisters\">Chinese Brain Twisters<\/a><\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Hangman%20Game&#038;question=%20#hangman#hangman\" title=\"Maths Grid Paper\">Maths Grid Paper<\/a> <font size=1>(sorry, but missed off in video, and done later via same methodology)<\/font><\/li>\n<li><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank500\" title=\"SOS Game\">SOS Game<\/a> <font size=1>(as of day before yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing SOS Game Tutorial' href='#htmlshrtsosgt'>HTML Square Horizontal Rule Tracing SOS Game Tutorial<\/a>)<\/font><\/li>\n<\/ul>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-ios-mobile-app-tutorial\/'>HTML Square Horizontal Rule Tracing iOS Mobile App Tutorial<\/a>.<\/p>\n<hr>\n<p id='htmlshrtsosgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing SOS Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-sos-game-tutorial\/'>HTML Square Horizontal Rule Tracing SOS 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\/square_hr_tracing.htm#blank500\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing SOS Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sos_game.jpg\" title=\"HTML Square Horizontal Rule Tracing SOS Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing SOS Game Tutorial<\/p><\/div>\n<p>The new development today on top of yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial' href='#htmlshrtmgpt'>HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial<\/a> is the coding for a game we used to play at school called the <a target=_blank title='SOS Game information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/SOS_(game)'>SOS Game<\/a>.<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/SOS_(game)'><p>\nIf the grid is filled up and the number of SOSs for each player is the same, then the game is a draw. The game can also be played where the player who creates an SOS is the winner and if no SOSs are created the game is a draw.\n<\/p><\/blockquote>\n<p>A technique that came into play with this as far as user interaction is concerned was to involve select (dropdown) elements <font size=1>(surprise, surprise)<\/font> with &#8220;size=3&#8243; for the three choices &#8221; &#8221; (initially) or &#8220;S&#8221; or &#8220;O&#8221;.  Once the user makes a non-blank choice we adjust that select (dropdown) element&#8217;s innerHTML to still be a dropdown but just with your selected value, nullifying any duplicate &#8220;onchange&#8221; event logics, on the understanding that the &#8220;onchange&#8221; event can&#8217;t be fired from a select (dropdown) element with only one option subelement.<\/p>\n<p>This is a game designed for more than one player so we organize two players to play the game in turns.<\/p>\n<p>Here is the initial drawing of the SOS Game grid &#8230;<\/p>\n<p><code><br \/>\nfunction sosize() {<br \/>\n    var itds=0; tds=document.getElementsByTagName('td');<br \/>\n    var sqsi=0, ioffset=0;<br \/>\n    document.getElementById('myh4').innerHTML+=' ... turn of Player1' + score1 + ' versus Player2' + score2;<br \/>\n    for (var itrs=0; itrs&lt;5; itrs++) {<br \/>\n    for (var itds=eval(5 * itrs); itds&lt;eval(5 + eval(5 * itrs)); itds++) {<br \/>\n      thisrect=tds[itds].getBoundingClientRect();<br \/>\n      tds[itds].style.verticalAlign='top';<br \/>\n      sqsi=eval(2 * itds + ioffset);<br \/>\n      tds[itds].innerHTML='&lt;select title=\"\" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + sqsi + ' onchange=sosmove(this);&gt;&lt;option value=\" \"&gt; &lt;\/option&gt;&lt;option value=\"S\"&gt;S&lt;\/option&gt;&lt;option value=\"O\"&gt;O&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n      tds[itds].innerHTML+='&lt;select title=\"\" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(1 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=\" \"&gt; &lt;\/option&gt;&lt;option value=\"S\"&gt;S&lt;\/option&gt;&lt;option value=\"O\"&gt;O&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n      tds[itds].innerHTML+='&lt;br&gt;&lt;select title=\"\" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(10 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=\" \"&gt; &lt;\/option&gt;&lt;option value=\"S\"&gt;S&lt;\/option&gt;&lt;option value=\"O\"&gt;O&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n      tds[itds].innerHTML+='&lt;select title=\"\" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(11 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=\" \"&gt; &lt;\/option&gt;&lt;option value=\"S\"&gt;S&lt;\/option&gt;&lt;option value=\"O\"&gt;O&lt;\/option&gt;&lt;\/select&gt;';<br \/>\n    }<br \/>\n    ioffset+=10;<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Here is the analysis of a player&#8217;s SOS Game select (dropdown) element interaction &#8230;<\/p>\n<p><code><br \/>\nfunction checkifsos(t1, t2, t3) { \/\/, camv) {<br \/>\n  \/\/var score1=' (0)', score2=' (0)';<br \/>\n  \/\/var amv=camv.split('.')[0];<br \/>\n  var retv=false;<br \/>\n  if (t1 &gt;= 0 && t1 &lt; 100 && t2 &gt;= 0 && t2 &lt; 100 && t3 &gt;= 0 && t3 &lt; 100) {<br \/>\n     if (document.getElementById('sqsi' + t1).value == 'S' && document.getElementById('sqsi' + t2).value == 'O' && document.getElementById('sqsi' + t3).value == 'S') {<br \/>\n       if (thisplayer == 1) {<br \/>\n       document.getElementById('sqsi' + t1).style.border='1px inset red';<br \/>\n       document.getElementById('sqsi' + t2).style.border='1px inset red';<br \/>\n       document.getElementById('sqsi' + t3).style.border='1px inset red';<br \/>\n<br \/> <br \/>\n       if (document.getElementById('sqsi' + t1).title.indexOf('2') != -1) {<br \/>\n       document.getElementById('sqsi' + t1).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t1).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t1).style.backgroundColor='pink';<br \/>\n       }<br \/>\n       if (document.getElementById('sqsi' + t2).title.indexOf('2') != -1) {<br \/>\n       document.getElementById('sqsi' + t2).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t2).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t2).style.backgroundColor='pink';<br \/>\n       }<br \/>\n       if (document.getElementById('sqsi' + t3).title.indexOf('2') != -1) {<br \/>\n       document.getElementById('sqsi' + t3).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t3).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t3).style.backgroundColor='pink';<br \/>\n       }<br \/>\n       document.getElementById('sqsi' + t1).title+='1';<br \/>\n       document.getElementById('sqsi' + t2).title+='1';<br \/>\n       document.getElementById('sqsi' + t3).title+='1';<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t1).style.border='1px inset olive';<br \/>\n       document.getElementById('sqsi' + t2).style.border='1px inset olive';<br \/>\n       document.getElementById('sqsi' + t3).style.border='1px inset olive';<br \/>\n       if (document.getElementById('sqsi' + t1).title.indexOf('1') != -1) {<br \/>\n       document.getElementById('sqsi' + t1).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t1).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t1).style.backgroundColor='yellow';<br \/>\n       }<br \/>\n       if (document.getElementById('sqsi' + t2).title.indexOf('1') != -1) {<br \/>\n       document.getElementById('sqsi' + t2).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t2).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t2).style.backgroundColor='yellow';<br \/>\n       }<br \/>\n       if (document.getElementById('sqsi' + t3).title.indexOf('1') != -1) {<br \/>\n       document.getElementById('sqsi' + t3).style.backgroundColor='';<br \/>\n       document.getElementById('sqsi' + t3).className='bicol'; \/\/style.backgroundColor=\"linear-gradient(top, pink, yellow)\";<br \/>\n       } else {<br \/>\n       document.getElementById('sqsi' + t3).style.backgroundColor='yellow';<br \/>\n       }<br \/>\n       document.getElementById('sqsi' + t1).title+='2';<br \/>\n       document.getElementById('sqsi' + t2).title+='2';<br \/>\n       document.getElementById('sqsi' + t3).title+='2';<br \/>\n       }<br \/>\n       retv=true;<br \/>\n       if (thisplayer == 1) {<br \/>\n         score1=' (' + eval(eval(score1.split('(')[1].split(')')[0]) + 1) + ')';<br \/>\n       } else {<br \/>\n         score2=' (' + eval(eval(score2.split('(')[1].split(')')[0]) + 1) + ')';<br \/>\n       }<br \/>\n     }<br \/>\n  }<br \/>\n  return retv;<br \/>\n}<br \/>\n<br \/>\nfunction sosmove(osel) {<br \/>\n  var cosel=osel.value, anothergo=false, prevplayer=thisplayer;<br \/>\n  var thistile=eval(osel.id.replace('sqsi',''));<br \/>\n  var surrounds='';<br \/>\n  var prevscore1=score1;<br \/>\n  var prevscore2=score2;<br \/>\n  if (cosel.trim() != '') {<br \/>\n   osel.size=1;<br \/>\n   osel.style.border='1px inset blue';<br \/>\n   osel.innerHTML='&lt;option value=' + cosel + '&gt;' + cosel + '&lt;\/option&gt;';<br \/>\n   document.getElementById('myh4').innerHTML=document.getElementById('myh4').innerHTML.replace(' Player1' + score1 + ' versus Player2' + score2,' Player02' + score2 + ' versus Player01' + score1).replace(' Player2' + score2 + ' versus Player1' + score1,' Player01' + score1 + ' versus Player02' + score2).replace(' Player0',' Player').replace(' Player0',' Player');<br \/>\n   \/\/ hmiddle -1 me +1<br \/>\n   \/\/ hend -2 -1 me<br \/>\n   \/\/ hstart me +1 +2<br \/>\n   \/\/ vmiddle -10 me +10<br \/>\n   \/\/ vend -20 -10 me<br \/>\n   \/\/ vstart me +10 +20<br \/>\n   \/\/ ddmiddle -11 me +11<br \/>\n   \/\/ ddend -22 -11 me<br \/>\n   \/\/ ddstart me +11 +22<br \/>\n   \/\/ udmiddle -9 me +9<br \/>\n   \/\/ udend -18 -9 me<br \/>\n   \/\/ udstart me +9 +18<br \/>\n     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-1 + thistile), thistile, eval(1 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &gt; 1) {<br \/>\n     anothergo|=checkifsos(eval(-2 + thistile), eval(-1 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(1 + thistile), eval(2 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile \/ 10) &gt; 0 && eval(thistile \/ 10) &lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-10 + thistile), thistile, eval(10 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile \/ 10) &gt; 1) {<br \/>\n     anothergo|=checkifsos(eval(-20 + thistile), eval(-10 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile \/ 10) &lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(10 + thistile), eval(20 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9 && eval(thistile \/ 10) &gt; 0 && eval(thistile \/ 10) &lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-11 + thistile), thistile, eval(11 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &gt; 1 && eval(thistile \/ 10) &gt; 2) {<br \/>\n     anothergo|=checkifsos(eval(-22 + thistile), eval(-11 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &lt; 8 && eval(thistile \/ 10) &lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(11 + thistile), eval(22 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9 && eval(thistile \/ 10) &gt; 0 && eval(thistile \/ 10) &lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-9 + thistile), thistile, eval(9 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &gt;= 0 && eval(thistile \/ 10) &lt; 8 ) {<br \/>\n     anothergo|=checkifsos(eval(-18 + thistile), eval(-9 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &gt; 2 && eval(thistile \/ 10) &lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(9 + thistile), eval(18 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n   if (!anothergo) {  thisplayer=eval(eval('' + 3) - eval('' + prevplayer));   } else {   document.getElementById('myh4').innerHTML=document.getElementById('myh4').innerHTML.replace(' Player1' + prevscore1 + ' versus Player2' + prevscore2,' Player02' + score2 + ' versus Player01' + score1).replace(' Player2' + prevscore2 + ' versus Player1' + prevscore1,' Player01' + score1 + ' versus Player02' + score2).replace(' Player0',' Player').replace(' Player0',' Player');  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; being simplified, considerably, via the advice of <a title='Useful link' href='https:\/\/stackoverflow.com\/questions\/35335226\/two-different-colors-with-linear-gradient-effect'>this great link<\/a>, thanks, regarding CSS <a target=_blank title='CSS3 linear gradient information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_gradients.asp'>linear-gradient<\/a> usage &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  .bicol {<br \/>\nbackground: rgb(255,255,255); \/* Old browsers *\/<br \/>\nbackground: -moz-linear-gradient(top,  pink 0%, pink 50%, yellow 51%, yellow 100%); \/* FF3.6-15 *\/<br \/>\nbackground: -webkit-linear-gradient(top,  pink 0%,pink 50%,yellow 51%,yellow 100%); \/* Chrome10-25,Safari5.1-6 *\/<br \/>\nbackground: linear-gradient(to bottom,  pink 0%,pink 50%,yellow 51%,yellow 100%); \/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *\/<br \/>\nfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr=pink, endColorstr=yellow,GradientType=0 ); \/* IE6-9 *\/<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>You could try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank500\" title=\"Click picture\">SOS Game live run<\/a>.<\/p>\n<hr>\n<p id='htmlshrtmgpt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-maths-grid-paper-tutorial\/'>HTML Square Horizontal Rule Tracing Maths Grid Paper 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\/square_hr_tracing.htm#mathsgrid#hangman\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_grid_paper.jpg\" title=\"HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Maths Grid Paper Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Hangman Game Tutorial' href='#htmlshrthgt'>HTML Square Horizontal Rule Tracing Hangman Game Tutorial<\/a> set us up for today&#8217;s Maths Grid Paper web application part that involves &#8230;<\/p>\n<ul>\n<li>Hangman Game background is the look we want, as we want the vertices as guides for today&#8217;s grid paper work &#8230; teamed with a new idea that is &#8230;<\/li>\n<li>the top.document parent of two children that are &#8230;\n<ol>\n<li>specially (hashtag #hangman-0.0) called child iframe Hangman Game peered with other child x,y positionally but <i>slightly behind on z-index<\/i> to &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------GETME\" title=\"user_of_signature_signature.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------GETME\" title=\"user_of_signature_signature.html\">user_of_signature_signature.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">User of Signature Signature live run<\/a> (last changed with <a target=_blank title='Email Subject Line Emojis Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/email-subject-line-emojis-primer-tutorial\/'>Email Subject Line Emojis Primer Tutorial<\/a>) child iframe featuring an HTML5 canvas element overlaying the vertices &#8230; <b>by way of<\/b> (square_hr_tracing.htm&#8217;s) &#8230;<br \/>\n<code><br \/>\n       document.getElementById('myh1').innerHTML='&nbsp;';<br \/>\n       document.getElementById('myh3').innerHTML='&nbsp;';<br \/>\n       document.getElementById('myh4').innerHTML='&nbsp;';<br \/>\n       <b>document.getElementById('dhangman').innerHTML+=\"&lt;iframe name=iback id=iback style='background-color:transparent;z-index:23;position:absolute;top:200px;left:0px;width:580px;height:100vh;' src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html?rand=\" + Math.floor(Math.random() * 123456) + \"&gt;&lt;\/iframe&gt;\";<br \/>\n       document.getElementById('dhangman').innerHTML+=\"&lt;iframe name=ifront id=ifront style='background-color:transparent;z-index:22;position:absolute;top:0px;left:0px;width:100%;height:100vh;' src=\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#hangman-0.0&gt;&lt;\/iframe&gt;\";<\/b><br \/>\n       document.getElementById('dhangman').innerHTML+=\"&lt;div id=dback title='' style='background-color:transparent;z-index:24;position:absolute;top:200px;left:580px;'&gt;&lt;\/div&gt;\";<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; and along the way to get this all timed so that a child iframe (canvas) can be like a background image (that is clickably intelligent) &#8230;\n<\/li>\n<li>multiple hashtagging in that top.document parent is used &#8230; #mathsgrid#hangman &#8230;<br \/>\n<code><br \/>\n   if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br \/>\n       document.getElementById('myh1').innerHTML='Maths Grid Paper';<br \/>\n   }<br \/>\n   \/\/ ...<br \/>\n   if (bpointsx.length >= 4 &amp;&amp; (' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br \/>\n          if (parent.document.getElementById('dback')) {<br \/>\n                 parent.document.getElementById('dback').title='' + bpointsx[0] +',' + eval(-200 + bpointsy[0]) + ',' + bpointsx[1] +',' + eval(-200 + bpointsy[1]) + ',' + bpointsx[2] + ',' + eval(-200 + bpointsy[2]) + ',' + bpointsx[3] +',' + eval(-200 + bpointsy[3]);<br \/>\n                 bpointsx=[];<br \/>\n                 bpointsy=[];<br \/>\n          }<br \/>\n   }<br \/>\n<\/code><br \/>\n &#8230; to get the best of both worlds<\/li>\n<\/ul>\n<p>That&#8217;s a discussion more with the focus on looks.  Doing this, we found it to be that one stage better than (just) &#8220;looks&#8221; though, as we discovered even though the child iframe Hangman Game was &#8220;slightly behind on z-index&#8221; we could still differentiate the &#8230;<\/p>\n<ul>\n<li>specially (hashtag #hangman-0.0) called child iframe Hangman Game discrete vertex clicks and touches &#8230; from &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------GETME\" title=\"user_of_signature_signature.html\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html------------GETME\" title=\"user_of_signature_signature.html\">user_of_signature_signature.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.html\" title=\"Click picture\">User of Signature Signature live run<\/a> child iframe featuring an HTML5 canvas element (onmousemove and ontouchmove) scribbling &#8230;<br \/>\n<code><br \/>\n function checkdback() {<br \/>\n   var rco='', rcos=[];<br \/>\n   if (parent.document.getElementById('dback')) {<br \/>\n     if (imgd != '') {<br \/>\n       if (parent.document.getElementById('cback')) {<br \/>\n           parent.document.getElementById('cback').getContext('2d').<a target=_blank title='Canvas putImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_putimagedata.asp'>putImageData<\/a>(imgd,0,0);<br \/>\n           imgd=parent.document.getElementById('cback').<a target=_blank title='HTML5 canvas element toDataURL method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLCanvasElement\/toDataURL'>toDataURL<\/a>();<br \/>\n           parent.document.getElementById('dback').innerHTML=\"&lt;img style='z-index:24;border:2px solid orange;' id=imgback src='\" + imgd + \"'&gt;&lt;\/img&gt;\";<br \/>\n           imgd='';<br \/>\n       }<br \/>\n     }<br \/>\n     if (parent.document.getElementById('dback').title != '') {<br \/>\n       rco=parent.document.getElementById('dback').title;<br \/>\n       parent.document.getElementById('dback').title='';<br \/>\n       setTimeout(checkdback, 2000);<br \/>\n     } else {<br \/>\n       setTimeout(checkdback, 2000);<br \/>\n     }<br \/>\n   }<br \/>\n   if (rco != '') {<br \/>\n     rcos=rco.split(',');<br \/>\n     var x1=eval('' + rcos[0]);<br \/>\n     x1=Math.min(x1, eval('' + rcos[2]));<br \/>\n     x1=Math.min(x1, eval('' + rcos[4]));<br \/>\n     x1=Math.min(x1, eval('' + rcos[6]));<br \/>\n     var y1=eval('' + rcos[1]);<br \/>\n     y1=Math.min(y1, eval('' + rcos[3]));<br \/>\n     y1=Math.min(y1, eval('' + rcos[5]));<br \/>\n     y1=Math.min(y1, eval('' + rcos[7]));<br \/>\n     var x2=eval('' + rcos[0]);<br \/>\n     x2=Math.max(x2, eval('' + rcos[2]));<br \/>\n     x2=Math.max(x2, eval('' + rcos[4]));<br \/>\n     x2=Math.max(x2, eval('' + rcos[6]));<br \/>\n     var y2=eval('' + rcos[1]);<br \/>\n     y2=Math.max(y2, eval('' + rcos[3]));<br \/>\n     y2=Math.max(y2, eval('' + rcos[5]));<br \/>\n     y2=Math.max(y2, eval('' + rcos[7]));<br \/>\n     imgd=document.getElementById('topcanvas').getContext('2d').<a target=_blank title='Canvas getImageData method information from w3schools' href='https:\/\/www.w3schools.com\/tags\/canvas_getimagedata.asp'>getImageData<\/a>(x1,y1,x2,y2);<br \/>\n     parent.document.getElementById('dback').style.width='' + Math.round(eval(x2 - x1)) + 'px';<br \/>\n     parent.document.getElementById('dback').style.height='' + Math.round(eval(y2 - y1)) + 'px';<br \/>\n     parent.document.getElementById('dback').innerHTML=\"&lt;canvas style=z-index:24; width='\" + Math.round(eval(x2 - x1)) + \"' height='\" + Math.round(eval(y2 - y1)) + \"' id=cback&gt;&lt;\/canvas&gt;\";<br \/>\n   }<br \/>\n }<br \/>\n<br \/>\n setTimeout(checkdback,2000);<br \/>\n<\/code><br \/>\n &#8230; so &#8230;<\/li>\n<\/ul>\n<p> &#8230; could also allow the user to do some Math Grid Paper scribbling and then click\/touch four vertices to define a window of extraction from which a sharable image is created, ready for an email attachment or some other purpose.  We weren&#8217;t sure that both data capture methods above could live in the one interfacing arrangement, so we were happy to see this working, especially as this opens the door to sharing and collaboration possibilities with this new Maths Grid Paper functionality.<\/p>\n<p>Again, try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#mathsgrid#hangman\" title=\"Click picture\">Maths Grid Paper live run<\/a> tool.<\/p>\n<hr>\n<p id='htmlshrthgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Hangman Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-hangman-game-tutorial\/'>HTML Square Horizontal Rule Tracing Hangman 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\/square_hr_tracing.htm#hangman\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Hangman Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/hangman.jpg\" title=\"HTML Square Horizontal Rule Tracing Hangman Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Hangman Game Tutorial<\/p><\/div>\n<p>Our new Hangman Game extension to functionality (on top of <a title='HTML Square Horizontal Rule Tracing Propogation Tutorial' href='#htmlshrtpt'>HTML Square Horizontal Rule Tracing Propogation Tutorial<\/a>) makes use of both &#8230;<\/p>\n<ul>\n<li>HTML Square Horizontal Rule Tracing &#8230; and &#8230;<\/li>\n<li>Emoji overlay &#8230;  two of our usual suspect &#8230;\n<ol>\n<li><a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property<\/li>\n<li><a target=_blank title='CSS z-index information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp'>z-index<\/a><\/li>\n<\/ol>\n<p> &#8230; ideas<\/li>\n<\/ul>\n<p> &#8230; the latter of which aids us with the head &#128578; and noose &#127872; drawing requirements &#8230; but still no purpose built imagery is required.  We hope you can see how these emojis can help we graphically challenged ones &#8230; both &#8230;<\/p>\n<ul>\n<li>get on with projects despite that lack of image based work &#8230; and &#8230;<\/li>\n<li>work with a more and more accepted form of communication that is more Internationally understood<\/li>\n<\/ul>\n<p>Of interest as far as the Javascript code for this goes is our approach of setting up some static array records consisting of multiple Javascript lines of code (separated by ; (semicolon)) that are executed via Javascript <a target=_blank href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp' title='Javascript eval'>eval<\/a> functionality as per &#8230;<\/p>\n<p><code><br \/>\n  var ihangman=0;<br \/>\n  var hangmanc=[<br \/>\n  \"   document.getElementById('dhangman').innerHTML+='&lt;p id=phead class=face style=z-index:90;position:absolute;top:248px;left:142px;font-size:56px;&gt;&amp;#128578;&lt;\/p&gt;'; \",<br \/>\n  \"   document.getElementById('hr77').click(); document.getElementById('hr137').click(); \",<br \/>\n  \"   document.getElementById('hr119').click(); document.getElementById('hr77').click(); \",<br \/>\n  \"   document.getElementById('hr131').click(); document.getElementById('hr77').click(); \",<br \/>\n  \"   document.getElementById('hr137').click(); document.getElementById('hr234').click(); \",<br \/>\n  \"   document.getElementById('hr137').click(); document.getElementById('hr246').click(); \",<br \/>\n  \"   document.getElementById('hr235').click(); document.getElementById('hr256').click(); \",<br \/>\n  \"   document.getElementById('hr260').click(); document.getElementById('hr256').click(); \",<br \/>\n  \"   document.getElementById('hr230').click(); document.getElementById('hr235').click(); \",<br \/>\n  \"   document.getElementById('hr235').click(); document.getElementById('hr20').click(); \",<br \/>\n  \"   document.getElementById('hr290').style.display='none';   document.getElementById('hr260').click(); document.getElementById('hr235').click();  document.getElementById('phead').innerHTML='&amp;#129314;'; document.getElementById('dhangman').innerHTML+='&lt;p id=pnoose class=face style=background-color:blank;z-index:95;position:absolute;top:195px;left:168px;font-size:6px;&gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&amp;lt;br&amp;gt;&amp;#127872;&lt;\/p&gt;'; \"<br \/>\n  ];<br \/>\n<br \/> <br \/>\n function hguess(gthis,othis) {<br \/>\n   var ifnd=0, fnd=false, newval='';<br \/>\n   for (ifnd=0; ifnd&lt;vocabulary[0].length; ifnd++) {<br \/>\n     if (vocabulary[0].substring(ifnd,eval(1 + ifnd)).toLowerCase() == gthis.toLowerCase()) {<br \/>\n       fnd=true;<br \/>\n       newval+=gthis;<br \/>\n     } else {<br \/>\n       newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));<br \/>\n     }<br \/>\n   }<br \/>\n   document.getElementById('sletters').innerHTML=newval;<br \/>\n   document.getElementById('sletters').title=newval;<br \/>\n   othis.style.visibility='hidden';<br \/>\n<br \/> <br \/>\n   if (!fnd) {<br \/>\n    eval(hangmanc[ihangman]);<br \/>\n    ihangman++;<br \/>\n   }<br \/>\n   if (ihangman &gt;= hangmanc.length) {<br \/>\n     goes++;<br \/>\n     newval='';<br \/>\n   for (ifnd=0; ifnd&lt;vocabulary[0].length; ifnd++) {<br \/>\n     if (document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd)).toLowerCase() == \"_\") {<br \/>\n       newval+='&lt;font color=red&gt;' + vocabulary[0].substring(ifnd,eval(1 + ifnd)) + '&lt;\/font&gt;';<br \/>\n     } else {<br \/>\n       newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));<br \/>\n     }<br \/>\n   }<br \/>\n   document.getElementById('sletters').innerHTML=newval;<br \/>\n   document.getElementById('sletters').title=vocabulary[0];<br \/>\n     setTimeout(handon, 5000);<br \/>\n   } else if (document.getElementById('sletters').innerHTML.indexOf('_') != -1) {<br \/>\n   } else {<br \/>\n     score+=document.getElementById('sletters').innerHTML.length;<br \/>\n     goes++;<br \/>\n     setTimeout(handon, 5000);<br \/>\n   }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>And where do we get our English words to challenge you?  We get them from the server&#8217;s English <a target=_blank title='Ispell dictionary information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Ispell'>Ispell dictionary<\/a>.  Other servers would have other language Ispell dictionaries.  Either way, you will find these dictionaries invaluable for word games.<\/p>\n<p>Try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#hangman\" title=\"Click picture\">Hangman live run<\/a> game to test your English vocabulary skills.  You may find the <a target=_blank title='Speech to Text Hangman Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/speech-to-text-hangman-game-tutorial\/'>Speech to Text Speech to Text Hangman Game Tutorial<\/a>&#8216;s Hangman Game of interest too.<\/p>\n<hr>\n<p id='htmlshrtpt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Propogation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-propogation-tutorial\/'>HTML Square Horizontal Rule Tracing Propogation 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\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Propogation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brain_twisters_more.jpg\" title=\"HTML Square Horizontal Rule Tracing Propogation Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Propogation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Game Tutorial' href='#htmlshrtgt'>HTML Square Horizontal Rule Tracing Game Tutorial<\/a> continued on with the &#8230;<\/p>\n<ul>\n<li>HTML hr and div elements made up to be &#8230;\n<ol>\n<li>lines<\/li>\n<li>vertices<\/li>\n<\/ol>\n<p> &#8230; only needing the underlying &#8230;\n<\/li>\n<li>table cell elements as graphical position markers only (made to have intelligence derived via use of Javascript <a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>()), but pretty &#8220;dumb&#8221; markers at that<\/li>\n<\/ul>\n<p> &#8230; but HTML and Javascript are capable of very sophisticated event propogation, and there is no reason you have to have those underlying table cell elements remaining &#8220;dumb&#8221; that way.  You can, amongst many things, in Javascript, dynamically add &#8230;<\/p>\n<ul>\n<li>ID <b>on the fly<\/b> &#8230;<br \/>\n<code><br \/>\n    var tds=document.getElementsByTagName('td');<br \/>\n    for (var itds=0; itds&lt;tds.length; itds++) {<br \/>\n      <b>tds[itds].id='td' + eval(1 + itds);<\/b><br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<li>onclick event logic <b>on the fly<\/b> &#8230;<br \/>\n<code><br \/>\n    var lastsquare=-1;<br \/>\n    var tds=document.getElementsByTagName('td');<br \/>\n    for (var itds=0; itds&lt;tds.length; itds++) {<br \/>\n      tds[itds].id='td' + eval(1 + itds);<br \/>\n      <b>tds[itds].onclick=function(event) { lastsquare=eval(('' + this.id).replace('td','')); goes++; if (lastsquare == sqchoice) { score++; }  if (('' + location.hash).indexOf('square') != -1) { picksq(); } else if (('' + location.hash).indexOf('grid') != -1) {  gridinfo(' in square number ' + lastsquare);  }  };<\/b><br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>We&#8217;ve started with some other game ideas using event propogation, with the last one, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\" title=\"Click picture\">live run<\/a> game, that now has game options &#8230;<\/p>\n<ul>\n<li>Chinese Brain Twisters<\/li>\n<li>Vertex Pointing Game &#8230; just shows vertices and on a set of 4 clicks or touches, will plot a Bezier Curve (thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/16227300\/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto'>this useful link<\/a>, thanks)<\/li>\n<li>Square Pointing Game &#8230; just shows the table and its numbered cells &#8230; with a number quiz<\/li>\n<li>Grid Pointing Game &#8230; shows border lines, and vertices and table cells with their thinner borders &#8230; where information is presented, relying on event propogation orders to show information from two hierarchies of event propogation<\/li>\n<\/ul>\n<p>To differentiate between these forms of game (selected via a new HTML select (dropdown) element) we did not choose to use our usual address bar URL argument (via ? and &amp;) navigation method, but rather use hashtag (via #) address bar URL methods, and in the Javascript (DOM) examine location.hash to know which &#8220;game&#8221; is applicable to a web application session.<\/p>\n<p>Food for thought, we hope!<\/p>\n<hr>\n<p id='htmlshrtgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-game-tutorial\/'>HTML Square Horizontal Rule Tracing 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\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brain_twisters.jpg\" title=\"HTML Square Horizontal Rule Tracing Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Game Tutorial<\/p><\/div>\n<p>The first application of the (online web application) line drawing we started with yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Primer Tutorial' href='#htmlshrtpt'>HTML Square Horizontal Rule Tracing Primer Tutorial<\/a> is today&#8217;s online (web application) game version of some of the excellent puzzles in the book &#8220;Chinese Brain Twisters&#8221; by Baifang (ISBN: 0-471-59505-5).  It was the &#8220;stick&#8221; rearrangement puzzles in this excellent book that were the inspiration to getting together a display and user interaction set of HTML and CSS and Javascript code logics to turn a hardcopy concept into an online game.<\/p>\n<p>Of course, when you start with a &#8220;proof of concept&#8221; it can need quite a bit of &#8220;tweaking&#8221; (in this case, fitting it into those concept paradigms we talk about a couple of paragraphs on) when the reality of making it practical for the user comes into play with a project like this.  We, at first thought, that &#8230;<\/p>\n<ul>\n<li>we would display a question (about matches, rather than sticks, because we remember many a holiday game that involved the use of matches (<font size=1>&#8230; no, not that way<\/font>) regarding patterns and counting, and because a match gives us an excuse to add some red colour as per <b>CSS<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  hr {<br \/>\n       height: 4px;<br \/>\n       border: 2px solid black;<br \/>\n       <b>background: linear-gradient(to right, yellow 80%, rgba(255,0,0,1) 20%); <\/b><br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n) and then with a button controlled by the user, &#8220;slap on&#8221; the screen the answer &#8230; then we had a mild epiphany (<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=tel2qskyMPw'><font size=1>you had to be there<\/font><\/a>) &#8230;<\/li>\n<li>we would display a question and then animate the answer &#8230; which can be achieved by &#8220;slapping on&#8221; that same question, and click\/touch the actions of a successful user after 2 second delays between the clicks\/touches (via a <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer controlled set of Javascript calls)<\/li>\n<\/ul>\n<p>We hope it gives the game a more interactive feel, and a better way to learn perhaps, because geometry can be an &#8220;ahhhh haaa&#8221; type of thing to learn, when you see graphically the steps involved.<\/p>\n<p>As with many a game we&#8217;ve written we again fall back to two tried and true (and very simple) concepts &#8230;<\/p>\n<ul>\n<li>gather question data into simple (single dimension) arrays, additional complexity controlled within members by web application specific delimitation rules (or more singular dimensioned arrays (such as today, where there are two)) &#8230;<\/li>\n<li>get the user a randomized question for the game via Javascript code like (where &#8220;inquestions&#8221; var<font size=1>iable<\/font> below is just such an array) &#8230;<br \/>\n<code><br \/>\n    var choice=Math.floor(Math.random() * inquestions.length);<br \/>\n<\/code><br \/>\n &#8230; leading to &#8220;&#8221;inquestions[choice]&#8221; containing the data required to piece together the question &#8230; along with the &#8220;inwordings[choice]&#8221; of the other such array &#8220;inwordings&#8221; that contains &#8220;Chinese Brain Twisters&#8221; instructional text\n<\/li>\n<\/ul>\n<p>Another &#8220;game chestnut&#8221; concept for us is to have some sort of scoring mechanism, which we may attend to in upcoming posts.  For now, we&#8217;ll let you &#8220;cheat in the comfort of your own conscience&#8221; when bragging about your &#8220;Chinese Brain Twisters&#8221; prowess!<\/p>\n<p>Feel free to try out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-GETME\" title=\"square_hr_tracing.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\" title=\"Click picture\">live run<\/a> game, and challenge yourself!<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-game-tutorial\/'>HTML Square Horizontal Rule Tracing Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='htmlshrtpt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-primer-tutorial\/'>HTML Square Horizontal Rule Tracing 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\/square_hr_tracing.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.jpg\" title=\"HTML Square Horizontal Rule Tracing Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Primer Tutorial<\/p><\/div>\n<p>One sad thing about today&#8217;s blog posting title is it gives the game away.   We&#8217;re tackling a proof of concept web application for a future venture.  We want to be able to draw a grid of lines (or you could see them as matches) and we&#8217;ll want to &#8230;<\/p>\n<ul>\n<li>graphically present them (ie. grid square border lines (or matches)) around the edges of each grid square &#8230; and &#8230;<\/li>\n<li>graphically present vertices at match end points and half way between, and well as in the middle of squares &#8230; then let the user &#8230;<\/li>\n<li>click\/touch a match &#8230; then &#8230;<\/li>\n<li>click\/touch two vertices to reposition that match to the clicked vertex positioning<\/li>\n<\/ul>\n<p>Now, it seems to me, off the top of the head, you could proceed along the lines of &#8230;<\/p>\n<ul>\n<li>HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element graphics &#8230; or <\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> graphics &#8230; but we prefer <font size=1> &#8230; you guessed it<\/font> &#8230; <\/li>\n<li><a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>HR<\/a> (Horizontal Rule) HTML elements, transformed as required, to suit our purposes<\/li>\n<\/ul>\n<p>Interested?!  Why not try the HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html_GETME\">square_hr_tracing.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html\" title=\"Click picture\">live run<\/a> to see what we mean here.<\/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='#d42471' onclick='var dv=document.getElementById(\"d42471\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42471' 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='#d42490' onclick='var dv=document.getElementById(\"d42490\"); 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='d42490' 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='#d42512' onclick='var dv=document.getElementById(\"d42512\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/propogation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42512' 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='#d42861' onclick='var dv=document.getElementById(\"d42861\"); 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='d42861' 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='#d42882' onclick='var dv=document.getElementById(\"d42882\"); 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='d42882' 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='#d42908' onclick='var dv=document.getElementById(\"d42908\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42908' 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='#d42945' onclick='var dv=document.getElementById(\"d42945\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42945' 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='#d42970' onclick='var dv=document.getElementById(\"d42970\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42970' 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='#d43334' onclick='var dv=document.getElementById(\"d43334\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geometry\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43334' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A lot of us have a goodly amount of &#8220;visual learner&#8221; in us, and the study of geometry or algebra or calculus in mathematics is full of opportunities for &#8220;visual cues&#8221; to topics that look a bit &#8220;dry&#8221; on paper. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-axes-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":[103,142,1993,184,2798,1580,2525,265,281,326,354,385,399,400,418,476,477,484,2208,2800,541,2298,2558,2229,557,2803,2804,2770,576,584,587,1525,626,630,2796,652,2598,2823,2020,2169,2772,752,795,796,2797,1631,894,2411,1988,997,1986,2617,2799,1021,1063,1071,1133,2771,1238,1298,1300,1319,1345,1452,1453,1493,1496],"class_list":["post-43334","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-array","tag-bezier-curves","tag-browse","tag-canvas","tag-canvas-background","tag-cell","tag-child","tag-copy","tag-css","tag-dictionary","tag-dom","tag-emoji","tag-eval","tag-event","tag-file","tag-game","tag-games-2","tag-geometry","tag-getboundingclientrect","tag-getimagedata","tag-graphics","tag-grid","tag-hangman","tag-hash","tag-hashtag","tag-home","tag-home-screen","tag-horizontal-rule","tag-html","tag-icon","tag-iframe","tag-innerhtml","tag-ios","tag-ipad","tag-ispell","tag-javascript","tag-line","tag-linear-equation","tag-linear-gradient","tag-location-hash","tag-match","tag-mathematics","tag-mobile","tag-mobile-app","tag-multiple-hashtag","tag-onchange","tag-overlay","tag-parent","tag-position","tag-programming","tag-proof-of-concept","tag-propogation","tag-putimagedata","tag-quicktime-player","tag-reveal","tag-rotate","tag-share","tag-square","tag-table","tag-transform","tag-translate","tag-tutorial","tag-url","tag-word","tag-word-game","tag-youtube","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43334"}],"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=43334"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43334\/revisions"}],"predecessor-version":[{"id":43344,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43334\/revisions\/43344"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}