{"id":43965,"date":"2019-03-06T03:01:42","date_gmt":"2019-03-05T17:01:42","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43965"},"modified":"2019-03-06T11:09:03","modified_gmt":"2019-03-06T01:09:03","slug":"html-square-horizontal-rule-image-map-jigsaw-timesheet-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-timesheet-tutorial\/","title":{"rendered":"HTML Square Horizontal Rule Image Map Jigsaw Timesheet 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#reveal#hangman\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/t_sheet.jpg\" title=\"HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Image Map Jigsaw Timesheet Tutorial<\/p><\/div>\n<p>If you are a regular reader at this blog, you may know that over some time now, several years in fact, we&#8217;ve longed to write code to help with Timesheets, and have come at this from &#8230;<\/p>\n<ul>\n<li>HTML5 canvas usage with signatures<\/li>\n<li>Speech to Text thinking &#8230; and introducing today &#8230; da da, da da, da da da da, da da da &#8230;<\/li>\n<li>Image Map and Timesheet Image along with Image Map area special properties<\/li>\n<\/ul>\n<p> &#8230; and we think we are getting closer, and we think, as far as signatures go, we can integrate that first &#8220;push&#8221; above later.  However, even today, we have an alternative collaborative or sharing idea at the end of proceedings today.  On Google Chrome web browser today, we reach a stage where &#8230;<\/p>\n<ol>\n<li>(Mac OS X) Google Chrome File-&gt;Print&#8230;<\/li>\n<li>has an &#8220;Open PDF in Preview&#8221; option (no doubt others link to Adobe Acrobat) &#8230;<\/li>\n<li>and in Preview (and probably Adobe Acrobat) these days there are (albeit quite awkward) ways to digitally sign into PDF documents &#8230;<\/li>\n<li>and from this application&#8217;s File-&gt;Share you can email off your Timesheet as required<\/li>\n<\/ol>\n<p>For now, as we start out on Timesheet Help Image Map Jigsaw functionality read <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--------------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--------------------GETME\">square_hr_tracing.htm<\/a> new &#8220;Timesheet Helper&#8221; blurb &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm'><p>\n  var timesheet_blurb=&#8221; Some Timesheet helpers are that within area properties to add non-default class=tick will add &#8221; + String.fromCodePoint(10004) + &#8221; into shape=rect and to end a title property with starting or ending assumes a date DD\/MM\/YYYY regime and other titles with that same title +\/- a number of days fills those calculated dates into place in DD\/MM\/YYYY format.&#8221;;\n<\/p><\/blockquote>\n<p>We hope this, and perhaps a viewing of a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/t_sheet.pdf\" title=\"PDF slideshow\">PDF slideshow<\/a> (and\/or perusing our new external Javascript <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/tsheet.js_GETME\">tsheet.js<\/a>) where we start with a timesheet image (or <a href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm?wording=Hangman%20Game&#038;jigsawurl=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/t_sheet.jpeg&#038;question=%20#hangman#hangman#hangman' target=_blank>you can start with that same image<\/a>) &#8230;<\/p>\n<p><img decoding=\"async\" style=\"width:100%;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/t_sheet.jpeg\" title=\"Start timesheet image\"><\/img><\/p>\n<p> &#8230; can have its &#8220;Period Ending&#8221; date be set to &#8220;08\/03\/2019&#8221; as shown below (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tsheet_eg.html-GETME\" title=\"tsheet_eg.htm\">baked<\/a> <a target=_blank  href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tsheet_eg.htm?period_ending=08\/03\/2019\" title=\"Period ending 08\/03\/2019\">already<\/a>) &#8230;<\/p>\n<div style=\"width:100%;height:1800px;-webkit-overflow-scrolling:touch;overflow:scroll;\"><iframe name=\"itsheet\" id=\"itsheet\"   style=\"width:100%;height:1800px;\"  src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tsheet_eg.htm?period_ending=08\/03\/2019\" title=\"Period ending 08\/03\/2019\"><\/iframe><\/div>\n<p> &#8230; or as an emailee downloading an email attachment (of such a reworked timesheet image and shared via the &#128231; button) and then clicking that HTML file would see it (ie. being asked for their &#8220;Period Ending&#8221; and then rest of their Timesheet (but not signature yet)) <a target=\"itsheet\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tsheet_eg.htm\" title=\"Emailee simulation\">as above<\/a>.<\/p>\n<p>Get where we&#8217;re going now with Timesheet Help via Image Map Jigsaw methodologies?   Can you see it paperless with these ideas?   Well, perhaps reading yesterday&#8217;s <a title='HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial' href='#htmlshrimjpt'>HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial<\/a> sets the scene more fully.<\/p>\n<hr>\n<p id='htmlshrimjpt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-polygon-tutorial\/'>HTML Square Horizontal Rule Image Map Jigsaw Polygon 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 Image Map Jigsaw Polygon Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rectpolycircle.jpg\" title=\"HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Image Map Jigsaw Polygon Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial' href='#htmlshrimjjt'>HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial<\/a> had us at a point where &#8230;<\/p>\n<ul>\n<li>image map area shape=rect elements could form a jigsaw of overlay navigational functionality aided and abetted by &#8220;snap to&#8221; methodologies &#8230; and today we add &#8230;<\/li>\n<li>image map area shape=circle element functionality &#8230; and the reason we decided not to introduce a new button for &#8220;snap off&#8221; &#8230;<\/li>\n<li>image map area shape=poly element functionality that does not use &#8220;snap to&#8221; methodologies<\/li>\n<\/ul>\n<p> &#8230; and because shape=rect is just a special form of shape=poly means the user can choose between &#8220;snap on&#8221; or &#8220;snap off&#8221; work via the value they choose from a new &#8220;shape&#8221; <a target=_blank title='HTML select information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element (dropdown).<\/p>\n<p>The use of a dropdown allowed us to offer the three &#8220;shape&#8221; choices as well as a &#8220;made to lowercase from differently configured uppercase and lowercase combination&#8221; option values so as to define &#8230;<\/p>\n<ul>\n<li>shape=circle radius<\/li>\n<li>shape=poly number of vertices (or not known)<\/li>\n<\/ul>\n<p> &#8230; pieces of information.  Salutary, we think, in how flexible and space saving the use of dropdowns can be in web design.<\/p>\n<p>Today, <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-------------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-------------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link&#8217;s logic we allow for this full spectrum of HTML area element <a target=_blank title='HTML area element shape attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_area_shape.asp'>shape attributes<\/a> we encourage you to try, be maintainable in  many more places, those being &#8230;<\/p>\n<hr>\n<p id='htmlshrimjjt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-javascript-tutorial\/'>HTML Square Horizontal Rule Image Map Jigsaw Javascript 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 Image Map Jigsaw Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/jsshare.jpg\" title=\"HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Image Map Jigsaw Javascript Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial' href='#htmlshrimjet'>HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial<\/a> helped us establish a methodology by which our Image Map creator might be a collaboration tool.  Today, though, we try to improve the automated features about what might be useful about the Image Map webpages (that you can now share via email) can do, in the sense of event driven logic.<\/p>\n<p>Without event driven logic of any kind, an Image Map can still be useful via the use of its <a target=_blank title='HTML area information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> subelement <a target=_blank title='HTML area href attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_area_href.asp'><i>href<\/i><\/a> attributes.  With these, on clicking that area subelement you could navigate to a URL (relative or absolute) or hashtag (local) place.  Depending on the <a target=_blank title='HTML area target attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_area_target.asp'><i>target<\/i><\/a> value determines where to open the linked document, and here we often plump for <i>_blank<\/i> for new window or <i>_self<\/i> for current window or perhaps <i>_top<\/i> for topmost window or a name of an HTML iframe element.  All good.  But, believe it or not, as you get more and more into HTML design with CSS styling and most importantly Javascript (DOM) event logic, you&#8217;ll gravitate more and more to the events such as (the most vital) <a target=_blank title='Javascript onclick event information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/event_onclick.asp'><i>onclick<\/i><\/a> event.  We&#8217;re here today primarily urging you to see this Image Map dynamic creation tool as a pretty safe place to experiment with some Javascript (DOM) event logic.  To write Javascript event logic you can &#8230;<\/p>\n<ul>\n<li>write it into the HTML via inline HTML Javascript &#8230; <b>like<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;area title=\"Area 1\" <b> onclick=\" if (1 == 1) { alert('We clicked ' + this.title); }\"<\/b> &gt;&lt;\/area&gt;<br \/>\n<\/code>\n<\/li>\n<li>(and, as of today, we write the logic to enable you to) write it into blocks of Javascript, usually in the head section but also, like with today, within the body section HTML &#8230; <b>like<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;area title=\"Area 1\" <b> onclick=\" areaclick(this); \"<\/b> &gt;&lt;\/area&gt;<br \/>\n<b>&lt;script type='text\/javascript'&gt;<br \/>\nfunction areaclick(oarea) {<br \/>\n  if (1 == 1) { alert('We clicked ' + oarea.title); }<br \/>\n}<br \/>\n&lt;\/script&gt;<\/b><br \/>\n<\/code><br \/>\n &#8230; amounting to the same end result event driven logic wise\n<\/li>\n<li>(and, as of today, we write the logic to enable you to) write it into external file of Javascript &#8230; <b>like<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;area title=\"Area 1\" <b> onclick=\" areaclick(this); \"<\/b> &gt;&lt;\/area&gt;<br \/>\n<b>&lt;script type='text\/javascript' src='ourjs.js'&gt;&lt;\/script&gt;<\/b><br \/>\n<\/code><br \/>\n &#8230; the aforesaid mentioned ourjs.js being a file containing &#8230;<br \/>\n<code><br \/>\n<b>function areaclick(oarea) {<br \/>\n  if (1 == 1) { alert('We clicked ' + oarea.title); }<br \/>\n}<\/b><br \/>\n<\/code><br \/>\n &#8230; amounting to the same end result event driven logic wise\n<\/li>\n<\/ul>\n<p>Today, in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link&#8217;s logic we allow for this Javascript we encourage you to try, be maintainable in  many more places, those being &#8230;<\/p>\n<ul>\n<li>as a sort of &#8220;standing order&#8221; image map area subelement properties maintaining new prompt &#8265; button &#8230; which can both &#8230;\n<ol>\n<li>set a default area property written to the image map &#8230; and\/or &#8230;<\/li>\n<li>affect the default area property presented should the user decide to use &#8230;<\/li>\n<\/ol>\n<\/li>\n<li>a new &#10067; button prompts the user for area properties each time one is added (and you can enter Javascript here too, as well as above) &#8230; and enhanced as of today is that &#8230;<\/li>\n<li>the HTML div contenteditable=true accepts Javascript as well via a click within it &#8230; or &#8230;<\/li>\n<li>clicking the &#8220;editable version&#8221; link up the top right flows through the same logic as the step above<\/li>\n<\/ul>\n<p>In the &#8220;standing order&#8221; definition above we allow for user entries containing &#8220;%i&#8221; have that substituted by the current area subelement count, so that any Javascript or even Javascript function names can benefit (and differentiate) from each other using this feature, if you like.<\/p>\n<p>We got a bit sick of the awkwardness of the styling to do with this Image Map work, too, and we hope we&#8217;ve improved this a little, though we suspect there is more to try to do as far as that goes.<\/p>\n<p>If you do involve Javascript and you do collaborate via email you may run into the realm of email clients not liking the idea of action code being contained in attached data.  The emailee may need to be informed of this, and they can take action at their end to avoid these problems, as necessary.<\/p>\n<p>Feel like trying some Javascript then?  We think the obvious visual and action aspects to Image Maps are the perfect place to learn about aspects of Web Design, especially as far as navigation issues goes.  And Image Maps are pretty benign really, being more HTML elements that read, analyze and navigate you off somewhere, unless of course you get better and better with your Javascript, that is!<\/p>\n<hr>\n<p id='htmlshrimjet'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-email-tutorial\/'>HTML Square Horizontal Rule Image Map Jigsaw Email 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 Image Map Jigsaw Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/imeshare.jpg\" title=\"HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Image Map Jigsaw Email Tutorial<\/p><\/div>\n<p>Online collaboration depends on a communication mechanism for your web applications.   This amounts to a situation where a user can break out of the relative URL scenario within most web applications, where navigation is controlled to designated places, or to stay within the same domain via relative URLs.   Our favourite means of achieving this is via email.  We do this a lot, but looking through our PHP mail means of doing this, we&#8217;d never written a generic &#8220;HTML Attachment&#8221; email.  The web uses HTML web pages, so what could be a more useful generic communication tool than this.  Today, we&#8217;ve upped the ante on genericity we hope by boiling our requirement, as far as an &#8220;HTML Attachment Email&#8221; goes, as it needing &#8230;<\/p>\n<ol>\n<li>To email address &#8230; mandatory<\/li>\n<li>Body HTML becomes an email attachment &#8230; mandatory (for today&#8217;s generic PHP communication tool) &#8230; we can make up any body text needed<\/li>\n<li>Subject line &#8230; optional (as we can make one up otherwise)<\/li>\n<li>CC email address &#8230; optional<\/li>\n<li>BCC email address &#8230; optional<\/li>\n<\/ol>\n<p> &#8230; and considering this list above, realized that data (that we make the rules up for) &#8230;<\/p>\n<ul>\n<li>containing &lt; and &gt; can be considered &#8220;Body HTML&#8221; data &#8230; and that, consecutively data &#8230;<\/li>\n<li>containing @ can be considered, respectively, To then CC then BCC email addresses &#8230; and so that leaves other data &#8230;<\/li>\n<li>containing none of &lt; nor &gt; nor @ can be considered as a user defined Subject line<\/li>\n<\/ul>\n<p>What is the implication of being able to tie down the data this way?  It means we can remove the names of parent form fields as a thing that matters.   We just &#8230;<\/p>\n<p><code><br \/>\n$phpcont=\"\";<br \/>\n$to=\"\";<br \/>\n$cc=\"\";<br \/>\n$bcc=\"\";<br \/>\n$subj=\"\";<br \/>\n$getpostfound=false;<br \/>\nforeach( $_POST as  $name=&gt;$val ) {<br \/>\n  $getpostfound=true;<br \/>\n  if (strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"&lt;\") !== false &amp;&amp;^ strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"&gt;\") !== false) {<br \/>\n    $phpcont=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    $pbits=explode('\"data:', $phpcont);<br \/>\n    for ($ii=1; $ii&lt;sizeof($pbits); $ii++) {  $phpcont=str_replace(explode('\"',$pbits[$ii])[0],str_replace(\" \",\"+\",explode('\"',$pbits[$ii])[0]),$phpcont);      }<br \/>\n  } else if (strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"@\") !== false) {<br \/>\n    if ($to == \"\") {<br \/>\n    $to=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    } else if ($cc == \"\") {<br \/>\n    $cc=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    } else {<br \/>\n    $bcc=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    }<br \/>\n  } else {<br \/>\n    $subj=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n  }<br \/>\n}<br \/>\nforeach( $_GET as $name=&gt;$val ) {<br \/>\n  $getpostfound=true;<br \/>\n  if (strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"&lt;\") !== false &amp;&amp; strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"&gt;\") !== false) {<br \/>\n    $phpcont=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    $pbits=explode('\"data:', $phpcont);<br \/>\n    for ($ii=1; $ii&lt;sizeof($pbits); $ii++) {  $phpcont=str_replace(explode('\"',$pbits[$ii])[0],str_replace(\" \",\"+\",explode('\"',$pbits[$ii])[0]),$phpcont);      }<br \/>\n  } else if (strpos(str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",strtolower(urldecode($val))))), \"@\") !== false) {<br \/>\n    if ($to == \"\") {<br \/>\n    $to=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    } else if ($cc == \"\") {<br \/>\n    $cc=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    } else {<br \/>\n    $bcc=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n    }<br \/>\n  } else {<br \/>\n    $subj=str_replace(\"+\",\" \",str_replace(\"&amp;lt;\",\"&lt;\",str_replace(\"&amp;gt;\",\"&gt;\",urldecode($val))));<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to see whether we have been passed the wherewithal to email an emailee an email with an HTML attachment.<\/p>\n<p>And so we have this new PHP communication emailing tool <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php_GETME\" title=\"emailhtml.php\">emailhtml.php<\/a> used with our Image Map creator you can try for yourself, via the top yellow button click, with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link, with its extra sharing email capabilities, for your perusal, and last talked about with yesterday&#8217;s <a title='HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial' href='#htmlshrmimjt'>HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial<\/a>.<\/p>\n<hr>\n<p id='htmlshrmimjt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-mobile-image-map-jigsaw-tutorial\/'>HTML Square Horizontal Rule Mobile Image Map Jigsaw 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 Mobile Image Map Jigsaw Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/clockbit.jpg\" title=\"HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Mobile Image Map Jigsaw Tutorial<\/p><\/div>\n<p>The recent <a title='HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial' href='#htmlshreimjt'>HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial<\/a> left us with an Image Map creator in its early days, not very good at handling a mobile platform&#8217;s needs to &#8230;<\/p>\n<ul>\n<li>apply inline CSS HTML styling to the parent HTML div element encasing the img element as per &#8230;<br \/>\noverflow:scroll;<a target=_blank title='Useful link, thanks' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/-webkit-overflow-scrolling'>-webkit-overflow-scrolling<\/a>:touch;<\/li>\n<li>to allow the image be panned within a parent HTML div element staying still to enable the user to reach to anywhere in the image<\/li>\n<\/ul>\n<p> &#8230; that had us needing to trap an element&#8217;s [element].scrollLeft and [element].scrollTop that we found available during the ontouchmove event, that we scrutinized via (where gscrollLeft and gscrollTop and gleft and gtop are global variables) &#8230;<\/p>\n<p><code><br \/>\n       var qrect=evt.target.<a target=_blank title='getBoundingClientRect' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>();<br \/>\n       if (('' + ('' + qrect.left).replace('px','') + ':' + ('' + qrect.top).replace('px','')) != '0;0') {<br \/>\n         if (gtop == 0 &amp;&amp; gleft == 0) {<br \/>\n           gtop=eval(('' + ttable.top).replace('px',''));<br \/>\n           gleft=eval(('' + ttable.left).replace('px',''));<br \/>\n         }<br \/>\n         gscrollLeft=gleft<br \/>\n         gscrollLeft-=eval(('' + qrect.left).replace('px',''));<br \/>\n         gscrollTop=gtop;<br \/>\n         gscrollTop-=eval(('' + qrect.top).replace('px',''));<br \/>\n       }<br \/>\n<\/code><\/p>\n<p> &#8230; and where ttable.left and ttable.top are the co-ordinates of the parent HTML div element of the image being panned.  This gscrollLeft and gscrollTop were offsets needed to plot the dashed rectangle Image Map area element indicators.  And in practice this can mean the user may see a dashed rectangle happening below where they click, because they have been panning around a bit.  It is like you are writing dashed rectangles onto a non-moving pane of glass in front of the image.  Pan it back to its original position and you see how those dashed rectangles with the image as far as how the image map will work it.<\/p>\n<p>We&#8217;ve also started down the road of trying to improve the image map editing functionalities, but we are not there yet.<\/p>\n<p>So please, again, try for yourself, via the top yellow button click, with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link, for your perusal.<\/p>\n<hr>\n<p id='htmlshreimjt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-editable-image-map-jigsaw-tutorial\/'>HTML Square Horizontal Rule Editable Image Map Jigsaw 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 Editable Image Map Jigsaw Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/img_guillotine_more.jpg\" title=\"HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Editable Image Map Jigsaw Tutorial<\/p><\/div>\n<p>Adding to yesterday&#8217;s <a title='HTML Square Horizontal Rule Image Map Jigsaw Tutorial' href='#htmlshrimjt'>HTML Square Horizontal Rule Image Map Jigsaw Tutorial<\/a>, today we add logic to be able to &#8230;<\/p>\n<ul>\n<li>Edit the image map via an HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true element showing the image map&#8217;s <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> representation &#8230; as well as &#8230;<\/li>\n<li>Execute a new window of that image map in action, via an <i>onclick<\/i> event on the HTML <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'>textarea<\/a> captured entire HTML for a working image map (that you could Copy and Paste and work on yourself separately should you prefer to work it that way, too)<\/li>\n<\/ul>\n<p> &#8230; as well as &#8220;rubberbanding&#8221; for non-mobile platforms (alas, more work for mobile platforms here), which is achieved by coding event logic for the <i>onmousemove<\/i> event (and readying the mobile platform <i>ontouchmove<\/i> event).  &#8220;Rubberbanding&#8221; is the prediction of one of your image map (shape=&#8221;rect&#8221;) area subelements ahead of it being written to the image map that happens after your top left click and proceeding to temporarily define the proposed area as a dashed HTML div element overlayed over your image.  It is the scrolling of that image to reach other parts and requires scrolling that needs more thought soon regarding mobile platform improvements.  Why &#8220;rubberband&#8221;?  Well, if we are expecting you to create an entire &#8220;jigsaw&#8221; of area subelements, you&#8217;ll need some &#8220;lining up&#8221; mechanisms to assist you, we figure.<\/p>\n<p>So please try for yourself, via the top yellow button click, with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link, for your perusal.<\/p>\n<hr>\n<p id='htmlshrimjt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Image Map Jigsaw Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-tutorial\/'>HTML Square Horizontal Rule Image Map Jigsaw 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 Image Map Jigsaw Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/img_guillotine.jpg\" title=\"HTML Square Horizontal Rule Image Map Jigsaw Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Image Map Jigsaw Tutorial<\/p><\/div>\n<p>We like the image editor GIMP&#8217;s Guillotine functionality we last talked about at <a target=_blank title='Gimp Guillotine Follow Up Memory Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-guillotine-follow-up-memory-tutorial\/'>Gimp Guillotine Follow Up Memory Tutorial<\/a> and wanted to start out creating image maps in a similar vein, and remembering back to hard copy digitizing days and incorporating the idea of &#8220;snap&#8221; onto an existant co-ordinate, so that we felt like swapping &#8220;Guillotine&#8221; with &#8220;:Jigsaw&#8221; in the title of today&#8217;s tutorial.<\/p>\n<p>It is early days on this project, but we found a good place to launch from, namely 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> where we worked with background images, whereas today we work with &#8230;<\/p>\n<ul>\n<li>HTML img elements underpinning the &#8230;<\/li>\n<li>HTML map element we help the user create full of HTML area shape=&#8221;rect&#8221; elements<\/li>\n<\/ul>\n<p> &#8230; as you may recall GIMP Guillotine functionality also has as one of its functionality features.<\/p>\n<p>Please try for yourself, via the top yellow button click, with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#reveal#hangman\">Image Map Jigsaw Guillotine live run<\/a> link.<\/p>\n<p>And you may want to follow back through recent &#8220;&#8221;HTML Square Horizontal Rule&#8221; blog thread postings from <a title='HTML Square Horizontal Rule Memories Card Game Tutorial' href='#htmlshrmcgt'>HTML Square Horizontal Rule Memories Card Game Tutorial<\/a> below.<\/p>\n<hr>\n<p id='htmlshrmcgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Memories Card Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-memories-card-game-tutorial\/'>HTML Square Horizontal Rule Memories Card 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#blank\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Memories Card Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/memories_card_game.jpg\" title=\"HTML Square Horizontal Rule Memories Card Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Memories Card Game Tutorial<\/p><\/div>\n<p>Back to the grid and line and vertex work of the recent <a title='HTML Square Horizontal Rule Graph Multiple Numerics Tutorial' href='#htmlshrgmnt'>HTML Square Horizontal Rule Graph Multiple Numerics Tutorial<\/a>, today we add on some functionality to its underlying web application&#8217;s grid underpinnings which is a card game called Memories, where two players take turns trying to find matching pairs from cards turned face down, but shown during each player&#8217;s turn.<\/p>\n<p>As you&#8217;d expect with game work in Javascript we have codelines like &#8230;<\/p>\n<p><code><br \/>\nmm = <a target=_blank title='Javascript Math.floor() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>(<a target=_blank title='Javascript Math.random() information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random()<\/a> * 52);<br \/>\n<\/code><\/p>\n<p> &#8230; to put into <i>mm<\/i> an index for an array of 52 members of a card deck array, as the Memories game uses one card deck.<\/p>\n<p>And so, to start the Memories game in Javascript below, a call of <i>memories(&#8221;);<\/i> &#8230;<\/p>\n<p><code><br \/>\n  var memnames = [\"Player 1\", \"Player 2\"];<br \/>\n  var memcard = [\"\", \"\"];<br \/>\n  var memcardio = [null, null];<br \/>\n  var thispicture = 0, memplayer = 1, memturn = 1;<br \/>\n  var memtricks = [0, 0];<br \/>\n  var memscores = [0, 0];<br \/>\n  var memgoes = [0, 0];<br \/>\n  var usedcards = [];<br \/>\n  var deckcards = [];<br \/>\n  var of100 = [];<br \/>\n  var sdeckcards = [];<br \/>\n  var defcard = \"images\/back01.gif\";<br \/>\n  var mypictures = new Array(\"images\/01c.gif\",<br \/>\n                           \"images\/01d.gif\",<br \/>\n                           \"images\/01h.gif\",<br \/>\n                           \"images\/01s.gif\",<br \/>\n                           \"images\/02c.gif\",<br \/>\n                           \"images\/02d.gif\",<br \/>\n                           \"images\/02h.gif\",<br \/>\n                           \"images\/02s.gif\",<br \/>\n                           \"images\/03c.gif\",<br \/>\n                           \"images\/03d.gif\",<br \/>\n                           \"images\/03h.gif\",<br \/>\n                           \"images\/03s.gif\",<br \/>\n                           \"images\/04c.gif\",<br \/>\n                           \"images\/04d.gif\",<br \/>\n                           \"images\/04h.gif\",<br \/>\n                           \"images\/04s.gif\",<br \/>\n                           \"images\/05c.gif\",<br \/>\n                           \"images\/05d.gif\",<br \/>\n                           \"images\/05h.gif\",<br \/>\n                           \"images\/05s.gif\",<br \/>\n                           \"images\/06c.gif\",<br \/>\n                           \"images\/06d.gif\",<br \/>\n                           \"images\/06h.gif\",<br \/>\n                           \"images\/06s.gif\",<br \/>\n                           \"images\/07c.gif\",<br \/>\n                           \"images\/07d.gif\",<br \/>\n                           \"images\/07h.gif\",<br \/>\n                           \"images\/07s.gif\",<br \/>\n                           \"images\/08c.gif\",<br \/>\n                           \"images\/08d.gif\",<br \/>\n                           \"images\/08h.gif\",<br \/>\n                           \"images\/08s.gif\",<br \/>\n                           \"images\/09c.gif\",<br \/>\n                           \"images\/09d.gif\",<br \/>\n                           \"images\/09h.gif\",<br \/>\n                           \"images\/09s.gif\",<br \/>\n                           \"images\/10c.gif\",<br \/>\n                           \"images\/10d.gif\",<br \/>\n                           \"images\/10h.gif\",<br \/>\n                           \"images\/10s.gif\",<br \/>\n                           \"images\/11c.gif\",<br \/>\n                           \"images\/11d.gif\",<br \/>\n                           \"images\/11h.gif\",<br \/>\n                           \"images\/11s.gif\",<br \/>\n                           \"images\/12c.gif\",<br \/>\n                           \"images\/12d.gif\",<br \/>\n                           \"images\/12h.gif\",<br \/>\n                           \"images\/12s.gif\",<br \/>\n                           \"images\/13c.gif\",<br \/>\n                           \"images\/13d.gif\",<br \/>\n                           \"images\/13h.gif\",<br \/>\n                           \"images\/13s.gif\"<br \/>\n);<br \/>\n<br \/>\nfunction latersrc() {   \/\/ delayed scoring allowing for peek at second card picked by player<br \/>\n  memcardio[1].src=memcard[1];<br \/>\n  memcard[1]=memcard[1].split('\/')[eval(-1 + memcard[1].split('\/').length)];<br \/>\n  if (memcard[0].substring(0,2) == memcard[1].substring(0,2)) {<br \/>\n  memcardio[0].style.visibility='hidden';<br \/>\n  memcardio[1].style.visibility='hidden';<br \/>\n  memscores[eval(-1 + memplayer)]++;<br \/>\n  memgoes[eval(-1 + memplayer)]++;<br \/>\n  document.getElementById('qh4').innerHTML=preqh4 + 'Yay! &amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(-1 + memplayer)] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(-1 + memplayer)] + '\/' + memgoes[eval(-1 + memplayer)] + '&amp;lt;\/sup&amp;gt; (vs ' + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(1 - eval(memplayer - 1))] + '\/' + memgoes[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/sup&amp;gt;) continue to try to pick pair(s)';<br \/>\n  memturn=1;<br \/>\n  if (eval(eval('' + memscores[0]) + eval('' + memscores[1])) &amp;gt;= 26) {  alert(document.getElementById('qh4').textContent.split(' continue to try to pick pair(s)')[0] + ' ... ready for new game?').replace('Vertex Pointing or SOS (for two) or ',''); memories('');  }<br \/>\n  } else {<br \/>\n  memcardio[0].src=defcard;<br \/>\n  memcardio[1].src=defcard;<br \/>\n  memgoes[eval(-1 + memplayer)]++;<br \/>\n  memplayer=eval(3 - memplayer);<br \/>\n  document.getElementById('qh4').innerHTML=preqh4 + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(-1 + memplayer)] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(-1 + memplayer)] + '\/' + memgoes[eval(-1 + memplayer)] + '&amp;lt;\/sup&amp;gt; (vs ' + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(1 - eval(memplayer - 1))] + '\/' + memgoes[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/sup&amp;gt;) to try to pick pair(s)';<br \/>\n  memturn=1;<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction thissrc(imgio, cardurl) {  \/\/ on a player click of a card<br \/>\n  if (memturn == 1) {<br \/>\n  memcardio[0]=imgio;<br \/>\n  memcard[0]=cardurl.split('\/')[eval(-1 + cardurl.split('\/').length)];<br \/>\n  imgio.src=cardurl;<br \/>\n  memturn++;<br \/>\n  } else {<br \/>\n  memcardio[1]=imgio;<br \/>\n  memcard[1]=cardurl; \/\/.split('\/')[eval(-1 + cardurl.split('\/').length)];<br \/>\n  imgio.src=cardurl;<br \/>\n  if (1 == 1) {<br \/>\n  setTimeout(latersrc, 1500);<br \/>\n  } else {<br \/>\n  if (memcard[0].substring(0,2) == cardurl.split('\/')[eval(-1 + cardurl.split('\/').length)].substring(0,2)) {<br \/>\n  memcardio[0].style.visibility='hidden';<br \/>\n  memcardio[1].style.visibility='hidden';<br \/>\n  memscores[eval(-1 + memplayer)]++;<br \/>\n  memgoes[eval(-1 + memplayer)]++;<br \/>\n  document.getElementById('qh4').innerHTML=preqh4 + 'Yay! &amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(-1 + memplayer)] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(-1 + memplayer)] + '\/' + memgoes[eval(-1 + memplayer)] + '&amp;lt;\/sup&amp;gt; (vs ' + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(1 - eval(memplayer - 1))] + '\/' + memgoes[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/sup&amp;gt;) continue to try to pick pair(s)';<br \/>\n  memturn=1;<br \/>\n  } else {<br \/>\n  memcardio[0].src=defcard;<br \/>\n  memcardio[1].src=defcard;<br \/>\n  memgoes[eval(-1 + memplayer)]++;<br \/>\n  memplayer=eval(3 - memplayer);<br \/>\n  document.getElementById('qh4').innerHTML=preqh4 + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(-1 + memplayer) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(-1 + memplayer)] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(-1 + memplayer)] + '\/' + memgoes[eval(-1 + memplayer)] + '&amp;lt;\/sup&amp;gt; (vs ' + '&amp;lt;div style=\"display:inline-block;\" contenteditable=true onchange=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\" onblur=\"memnames[' + eval(1 - eval(memplayer - 1)) + ']=this.innerHTML;\"&amp;gt;' + memnames[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/div&amp;gt; &amp;lt;sup&amp;gt;' + memscores[eval(1 - eval(memplayer - 1))] + '\/' + memgoes[eval(1 - eval(memplayer - 1))] + '&amp;lt;\/sup&amp;gt;) to try to pick pair(s)';<br \/>\n  memturn=1;<br \/>\n  }<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction memories(inim) { \/\/ draw memories card 52 cards into 10 x 10 grid<br \/>\n    \/\/alert(osft);<br \/>\n    var itds=0; tds=document.getElementsByTagName('td');<br \/>\n    var sqsi=0, ioffset=0, bextras='', s1=0, s2=0, ainim=inim;<br \/>\n    var ii, jj, mm, kk=0, nn=0, found=false, sqc=',-1,';<br \/>\n    var beenhere=false;<br \/>\n<br \/> <br \/>\n    if (inim == '') {<br \/>\n    memplayer=1;<br \/>\n    memturn=1;<br \/>\n    memscores = [0, 0];<br \/>\n    memgoes = [0, 0];<br \/>\n    usedcards = [];<br \/>\n    deckcards = [];<br \/>\n    of100 = [];<br \/>\n    if (preqh4 == '') {<br \/>\n    document.getElementById('myh1').innerHTML='Memories Card Game';<br \/>\n    document.getElementById('myh4').innerHTML='&amp;nbsp;';<br \/>\n    document.getElementById('daxes').innerHTML+='&amp;lt;style&amp;gt; hr.vertex { visibility:hidden; } &amp;lt;\/style&amp;gt;';<br \/>\n    document.getElementById('qh4').innerHTML=document.getElementById('qh4').innerHTML.replace('On Each Set of 4 a Bezier Curve is Shown',memnames[0] + ' (vs ' + memnames[1] + ') go to find pair(s)');<br \/>\n    preqh4=document.getElementById('qh4').innerHTML.split(memnames[0] + ' (vs ' + memnames[1] + ') go to find pair(s)')[0];<br \/>\n    } else {<br \/>\n    beenhere=true;<br \/>\n    document.getElementById('qh4').innerHTML=preqh4 + memnames[0] + ' (vs ' + memnames[1] + ') go to find pair(s)';<br \/>\n    }<br \/>\n  for (ii=0; ii&amp;lt;52; ii++) {<br \/>\n  found = true;<br \/>\n  mm=-1;<br \/>\n  while (sqc.indexOf(',' + mm + ',') != -1) {<br \/>\n    mm = Math.floor((Math.random()*100)+0);<br \/>\n  }<br \/>\n  sqc+='' + mm + ',';<br \/>\n  while (found) {<br \/>\n   mm = Math.floor((Math.random()*52)+0);<br \/>\n   found = false;<br \/>\n   for (jj=0; jj&amp;lt;usedcards.length; jj++) {<br \/>\n    if (usedcards[jj] == mypictures[mm]) found = true;<br \/>\n   }<br \/>\n  }<br \/>\n  deckcards[kk] = mypictures[mm];<br \/>\n  usedcards[kk] = mypictures[mm];<br \/>\n  kk = kk+1;<br \/>\n  }<br \/>\n  usedcards = [];<br \/>\n  of100=sqc.replace(',-1,','').split(',');<br \/>\n  }<br \/>\n<br \/> <br \/>\n    var typicalrect=tds[0].getBoundingClientRect();<br \/>\n<br \/> <br \/>\n    for (var itrs=0; itrs&amp;lt;5; itrs++) {<br \/>\n    for (var itds=eval(5 * itrs); itds&amp;lt;eval(5 + eval(5 * itrs)); itds++) {<br \/>\n      thisrect=tds[itds].getBoundingClientRect();<br \/>\n      if (beenhere) { tds[itds].innerHTML='';  }<br \/>\n<br \/> <br \/>\n      tds[itds].style.verticalAlign='top';<br \/>\n      sqsi=eval(2 * itds + ioffset);<br \/>\n      if (inim == '') {<br \/>\n      if (sqc.indexOf(',' + nn + ',') != -1) {<br \/>\n        mm=eval(-1 + sqc.split(',' + nn + ',')[0].replace('-1,','').split(',').length);<br \/>\n        tds[itds].innerHTML+='&amp;lt;img style=\"' + 'height:' + eval(eval('' + typicalrect.height) \/ 2) + 'px;width:' + eval(eval('' + typicalrect.width) \/ 2) + 'px;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;' + '\" onclick=\"thissrc(this,' + \"'\" + deckcards[mm] + \"'\" + ');\" data-title=\"' + deckcards[mm] + '\" src=\"' + defcard + '\"&amp;gt;&amp;lt;\/img&amp;gt;';<br \/>\n      }<br \/>\n      nn++;<br \/>\n      if (sqc.indexOf(',' + nn + ',') != -1) {<br \/>\n        mm=eval(-1 + sqc.split(',' + nn + ',')[0].replace('-1,','').split(',').length);<br \/>\n        tds[itds].innerHTML+='&amp;lt;img style=\"' + 'height:' + eval(eval('' + typicalrect.height) \/ 2) + 'px;width:' + eval(eval('' + typicalrect.width) \/ 2) + 'px;top:' + thisrect.top + 'px;left:' + eval(eval('' + thisrect.left) + eval('' + typicalrect.width) \/ 2) + 'px;' + '\" onclick=\"thissrc(this,' + \"'\" + deckcards[mm] + \"'\" + ');\" data-title=\"' + deckcards[mm] + '\" src=\"' + defcard + '\"&amp;gt;&amp;lt;\/img&amp;gt;';<br \/>\n      }<br \/>\n      nn++;<br \/>\n      if (sqc.indexOf(',' + nn + ',') != -1) {<br \/>\n        mm=eval(-1 + sqc.split(',' + nn + ',')[0].replace('-1,','').split(',').length);<br \/>\n        tds[itds].innerHTML+='&amp;lt;img style=\"' + 'height:' + eval(eval('' + typicalrect.height) \/ 2) + 'px;width:' + eval(eval('' + typicalrect.width) \/ 2) + 'px;top:' + eval(eval('' + thisrect.top) + eval('' + typicalrect.height) \/ 2) + 'px;left:' + thisrect.left + 'px;' + '\" onclick=\"thissrc(this,' + \"'\" + deckcards[mm] + \"'\" + ');\" data-title=\"' + deckcards[mm] + '\" src=\"' + defcard + '\"&amp;gt;&amp;lt;\/img&amp;gt;';<br \/>\n      }<br \/>\n      nn++;<br \/>\n      if (sqc.indexOf(',' + nn + ',') != -1) {<br \/>\n        mm=eval(-1 + sqc.split(',' + nn + ',')[0].replace('-1,','').split(',').length);<br \/>\n        tds[itds].innerHTML+='&amp;lt;img style=\"' + 'height:' + eval(eval('' + typicalrect.height) \/ 2) + 'px;width:' + eval(eval('' + typicalrect.width) \/ 2) + 'px;top:' + eval(eval('' + thisrect.top) + eval('' + typicalrect.height) \/ 2) + 'px;left:' + eval(eval('' + thisrect.left) + eval('' + typicalrect.width) \/ 2) + 'px;' + '\" onclick=\"thissrc(this,' + \"'\" + deckcards[mm] + \"'\" + ');\" data-title=\"' + deckcards[mm] + '\" src=\"' + defcard + '\"&amp;gt;&amp;lt;\/img&amp;gt;';<br \/>\n      }<br \/>\n      nn++;<br \/>\n      }<br \/>\n    }<br \/>\n    ioffset+=10;<br \/>\n    }<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; shows that card dealing and subsequent player guessing code to play the game.<\/p>\n<p>We decided on the use of &#8230;<\/p>\n<ul>\n<li><i>img<\/i> elements sized to suit their parent (td) cells &#8230; but perhaps you may prefer the design idea to &#8230;<\/li>\n<li>use that same image URL as a background image to the relevant parent (td) cells<\/li>\n<\/ul>\n<p> &#8230; the latter of which we think is possible, but thought the scaling of those background images would be a more convoluted and complex approach.<\/p>\n<p>Note, too, how carefree the use of an HTML div element <i>contenteditable=true<\/i> is, to quietly allow the players to change their default names, should they tweak that this is possible.  You might want to see this for yourself with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank\">Memories Card Game via link live run<\/a> link.<\/p>\n<hr>\n<p id='htmlshrgmnt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Graph Multiple Numerics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-graph-multiple-numerics-tutorial\/'>HTML Square Horizontal Rule Graph Multiple Numerics 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#blank=column|Area|\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Graph Multiple Numerics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/area_graph.jpg\" title=\"HTML Square Horizontal Rule Graph Multiple Numerics Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Graph Multiple Numerics Tutorial<\/p><\/div>\n<p>We feel an &#8220;<a target=_blank title='onions' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onions'>onions<\/a> of the 4th dimension&#8221; <strike>sneeze<\/strike> moment coming on.   Yes, yesterday&#8217;s <a title='HTML Square Horizontal Rule Four Graphs Tutorial' href='#htmlshrfgt'>HTML Square Horizontal Rule Four Graphs Tutorial<\/a> &#8220;Four Graphs&#8221; were all fine and good, but as of yesterday, their data was restricted to one numerical dimension and another dimension that could be a string or numerical, but what if you have an interest in <a target=_blank title='The Three Degrees' href='https:\/\/www.youtube.com\/watch?v=T6fVDAjs9f0'>BArts and BScience and BLaw<\/a>, just say, well, what do you say?! <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>? &#8230; yes, Efrem Zimbalist Jr &#8230; we allow for &#8230;<\/p>\n<ul>\n<li>one character or numerical standalone field (perhaps for our budding BCows) &#8230; and, as of today, allow for &#8230;<\/li>\n<li>one or more numerical fields<\/li>\n<\/ul>\n<p> &#8230; the only hint for which you get &#8220;running <a target=_blank title='Bugs Bunny' href='https:\/\/www.youtube.com\/watch?v=aFTTB6gOAJA'>this show<\/a>&#8221; is that a Javascript var<font size=1>iable<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var origphsuffix=\" (and optionally keep the semicolon delimitation going for more numerical field Labels)\";<br \/>\n<\/code><\/p>\n<p> &#8230; is now appended onto the textbox placeholder property when asking its second Graphs question about the labelling.<\/p>\n<p>Such a small thing for such pain over a day!  But rest assured <a target=_blank title='Daffy Duck' href='https:\/\/www.youtube.com\/watch?v=tJBeih6JZrs'>Daffy Duck<\/a> is put to work making the code work properly.<\/p>\n<p>To see the four graphs (with onions on the side) in action please don&#8217;t be shy trying <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html------------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Bar|\">Bar Graph live run<\/a> or <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Area|\">Area Graph live run<\/a> or <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Line|\">Line Graph live run<\/a> or  <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Column|\">Column Graph live run<\/a> link.<\/p>\n<p>We&#8217;ll leave you with a <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Area|Company%20Performance,4,300,1200||Year;Sales;Expenses|2004;1000;400|2005;1170;460|2006;660;1120|2007;1030;540|\">this worked example<\/a> also shown below &#8230;<\/p>\n<p><iframe style='width:100%;height:900px;' src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Area|Company%20Performance,4,300,1200||Year;Sales;Expenses|2004;1000;400|2005;1170;460|2006;660;1120|2007;1030;540|\"><\/iframe><\/p>\n<hr>\n<p id='htmlshrfgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Four Graphs Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-four-graphs-tutorial\/'>HTML Square Horizontal Rule Four Graphs 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#blank=column|Bar|\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Four Graphs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/bar_graph.jpg\" title=\"HTML Square Horizontal Rule Four Graphs Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Four Graphs Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <i>Mathematical Induction<\/i> <i>n + 1<\/i> feeling <a title='HTML Square Horizontal Rule Line Graph Tutorial' href='#htmlshrlgt'>HTML Square Horizontal Rule Line Graph Tutorial<\/a> dealt with the simpler two &#8230;<\/p>\n<ol>\n<li>Column Graph<\/li>\n<li>Line Graph &#8230; the scaffolding needed for today&#8217;s harder work to add functionality for &#8230;<\/li>\n<li>Area Graph<\/li>\n<li>Bar Graph<\/li>\n<\/ol>\n<p> &#8230; where &#8230;<\/p>\n<ul>\n<li>Area Graph challenge primarily revolved around how to create polygonal backgrounds, and here we got great help from both <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/41988955\/absolute-positioning-of-svg-element-not-working'>encasing SVG within an absolutely positioned HTML div in order to control SVG positioning<\/a> (thanks heaps) and <a target=_blank title='Useful link' href='https:\/\/datavizcatalogue.com\/methods\/area_graph.html'>regarding Area Chart looks<\/a> to end up with some <i>Area Graph only<\/i> Javascript &#8230;<br \/>\n<code><br \/>\n      if (document.getElementById('h1column').innerHTML == 'Area') { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/41988955\/absolute-positioning-of-svg-element-not-working and https:\/\/datavizcatalogue.com\/methods\/area_graph.html<br \/>\n        var mintop=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')),  eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')));<br \/>\n        var minleft=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')),  eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));<br \/>\n        var thisheight=Math.abs(zerozeroy - mintop);<br \/>\n        var thiswidth=Math.abs(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));<br \/>\n        var az='&amp;lt;div class=\"svg-container\" style=\"opacity:0.5;position:absolute;top:' + Math.floor(eval(14 + mintop)) + 'px;left:' + Math.floor(minleft) + 'px;width:' + Math.floor(thiswidth) + 'px;height:' + Math.floor(thisheight) + 'px;\"&amp;gt;&amp;lt;svg height=\"100%\" width=\"100%\"&amp;gt;&amp;lt;polygon points=\"'; \/\/0,0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) \/ 2)) + ',0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) \/ 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + ' ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) \/ 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + '\" style=\"fill:lime;stroke:purple;stroke-width:1\" \/&amp;gt;&amp;lt;\/svg&amp;gt;&amp;lt;\/div&amp;gt;';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ',';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')) - mintop) + ' ';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ',';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')) - mintop) + ' ';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ',';<br \/>\n        az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' ';<br \/>\n        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ',';<br \/>\n        az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' ';<br \/>\n        az+='\" style=\"fill:' + acol + ';stroke:purple;stroke-width:1\" \/&amp;gt;&amp;lt;\/svg&amp;gt;&amp;lt;\/div&amp;gt;';<br \/>\n        document.getElementById('daxes').innerHTML+=az;<br \/>\n      }<br \/>\n<\/code><br \/>\n &#8230; <font size=1>half the day gone<\/font> &#8230; while &#8230;\n<\/li>\n<li>Bar Graph challenge was the posterior-about-visage way X is Y and Y is X about it, and deciding on a messaging strategy, that being in broad brush terms &#8230;\n<ol>\n<li>sending out a URL into an email link URL the order of first and second items in any semicolon separated data is reversed (so as to fit in with the other 3 graph types) &#8230; meaning that &#8230;<\/li>\n<li>as you get into the web application an email link to a Bar Graph and before it is &#8220;fed&#8221; to our one hard working textbox (in order &#8230; doh!) you re-reverse the message first and second items of a semicolon separated record (to fit back in with Bar Graph thinking)<\/li>\n<\/ol>\n<p> &#8230; <font size=1>another half day gone<\/font> &#8230; getting the X is Y and Y is X display aspects correct\n<\/ul>\n<p>Well, at least yesterday paved the way for &#8220;where&#8221; we plugged in these changes <font size=1> &#8230; phew<\/font>!<\/p>\n<p>To see the four graphs in action please don&#8217;t be shy trying <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-----------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Bar|\">Bar Graph live run<\/a> or <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Area|\">Area Graph live run<\/a> or <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Line|\">Line Graph live run<\/a> or  <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Column|\">Column Graph live run<\/a> link.<\/p>\n<hr>\n<p id='htmlshrlgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Line Graph Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-line-graph-tutorial\/'>HTML Square Horizontal Rule Line Graph 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#blank=column|Line|\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Line Graph Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/line_graph.jpg\" title=\"HTML Square Horizontal Rule Line Graph Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Line Graph Tutorial<\/p><\/div>\n<p>Software integration work, whether it be internally in amongst your own code, or externally, integrating with APIs and our software sharing arrangements, needs to be approached systematically, and not in a rush.  As such, we find the general idea of <a target=_blank title='Mathematical induction information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Mathematical_induction'>mathematical induction<\/a>, as we first came across in high school mathematics &#8230;<\/p>\n<blockquote cite='https:\/\/en.wikipedia.org\/wiki\/Mathematical_induction'><p>\nThe method of induction requires two cases to be proved. The first case, called the base case (or, sometimes, the basis), proves that the property holds for the number 0. The second case, called the induction step, proves that, if the property holds for one natural number n, then it holds for the next natural number n + 1. These two steps establish the property P(n) for every natural number n = 0, 1, 2, 3, &#8230; The base step need not begin with zero. Often it begins with the number one, and it can begin with any natural number, establishing the truth of the property for all natural numbers greater than or equal to the starting number.\n<\/p><\/blockquote>\n<p> &#8230; both a useful way to approach many of these software integration jobs, as well as almost forcing calm, and the absence of dangerous rushing, with the coding tasks at hand.  Yes, proving anything for one case, yesterday&#8217;s <a title='HTML Square Horizontal Rule Column Graph Tutorial' href='#htmlshrcgt'>HTML Square Horizontal Rule Column Graph Tutorial<\/a> one being Column Graphs, is all well and good, but it would be dangerous to step straight to integrate all four that we intend to do (those being Column, Line, Bar, Area Graphs), in one step.  As <i>mathematical induction<\/i> would tell us, prove it for <i>n + 1<\/i>, that being <i>Line Graphs<\/i> in today&#8217;s case.<\/p>\n<p>When you integrate for <i>n + 1<\/i> you almost invariably sort out &#8230;<\/p>\n<ul>\n<li>HTML element type requirements for your current integration drive<\/li>\n<li>sharing arrangement nuances, including those coming back from email links<\/li>\n<li>data and display code places for where to differentiate, and to come back to when we start integrating the other two Graph types later<\/li>\n<li>navigation requirements within the domain of the web application, for us with this work, mainly centering around manipulations of Javascript <a target=_blank title='Javascript window.location.hash information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_loc_hash.asp'>location.hash<\/a> containing the parts of a URL including and after the hash (ie. #) character<\/li>\n<\/ul>\n<p> &#8230; matters that should not be rushed when several options of functionality are flying about being integrated (<font size=1>no doubt on the &#8220;flying about being integrated&#8221; cycle<\/font>).<\/p>\n<p>And so, even though what differentiates a Column Graph from a Line Graph is more a &#8220;display th<strike>a<\/strike>ing&#8221; (as you might have surmised with the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' 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.'>Google Charts<\/a> integration work we&#8217;ve done here <a target=_blank title='Google Charts blog postings here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-charts'>in the past<\/a>), as the same data set can be represented by either Graph, from what we&#8217;ve seen, you end up spending most of the time coding for such a change readying yourself for the arrival of three new graphs, rather than the Line Graph per se.  Doesn&#8217;t mean you&#8217;re wasting time, quite the contrary.  Testing on two functionality parts that are similar but different can have you testing all this integration work in a systematic, ticking the boxes, way to pave the way for faster work later with integration of Graph types that do need more &#8220;display difference&#8221; thinking.  Where having ground away at <i>n + 1<\/i> <i>Mathematical Induction<\/i> helps again here, will be that thought processes can concentrate on those more tricky &#8220;display differences&#8221; without being clouded out by the &#8220;administration&#8221; issues of that list above we have gone towards roboticizing for the next stage of integration.<\/p>\n<p>Again, we&#8217;d like to thank <a target=_blank href=\"https:\/\/www.mathsisfun.com\/data\/bar-graphs.html\" title=\"Useful link\">this useful link<\/a> for the inspiration with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/line_graph.jpg\">tutorial picture<\/a> of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Line|Nicest%20Fruit,6,0,45||Fruit;Number%20of%20People|Apple;35|Orange;30|Banana;10|Kiwifruit;25|Blueberry;40|Grapes;5|\">this worked example<\/a> also shown below &#8230;<\/p>\n<p><iframe style='width:100%;height:900px;' src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Line|Nicest%20Fruit,6,0,45||Fruit;Number%20of%20People|Apple;35|Orange;30|Banana;10|Kiwifruit;25|Blueberry;40|Grapes;5|\"><\/iframe><\/p>\n<p>Please don&#8217;t be shy trying <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html----------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Line|\">Line Graph live run<\/a> link.<\/p>\n<hr>\n<p id='htmlshrcgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Column Graph Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-column-graph-tutorial\/'>HTML Square Horizontal Rule Column Graph 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#blank=column\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Column Graph Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/column_graph.jpg\" title=\"HTML Square Horizontal Rule Column Graph Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Column Graph Tutorial<\/p><\/div>\n<p>We follow up yesterday&#8217;s <a title='HTML Square Horizontal Rule Plot Polynomial Tutorial' href='#htmlshrppt'>HTML Square Horizontal Rule Plot Polynomial Tutorial<\/a> mathematical theme with a mathematics meets statistics theme, today, writing some functionality to create Column Graphs.  Like with the Plot functionalities we like having the vertices there, but that little bit different is that we make those vertex helpers disappear once the Column Graph has been created, and perhaps, shared, via similar Email sharing logic to that introduced yesterday.<\/p>\n<p><strike>Identical to<\/strike> Like yesterday we have 3 parts to user input involving that one textbox again &#8230;<\/p>\n<ol>\n<li>four comma separated fields involves a <strike>plot range entry<\/strike> (Column Graph) Title, Number of data sets, Minimum Y (numerical), Maximum Y &#8230; whereas &#8230;<\/li>\n<li><strike>three comma<\/strike> two semicolon separated fields involves a <strike>polynomial equation entry<\/strike> X-Axis label; Y-Axis label (for numerical) &#8230; whereas &#8230;<\/li>\n<li>two <strike>comma<\/strike> semicolon separated fields involve<strike>s<\/strike> a <strike>linear equation<\/strike> X value; Y value ask for each of the (Number of) data sets<\/li>\n<\/ol>\n<p>As you would know if you think about a Column Graph it is debatable on the X-Axis (non-numerical) labelling if you &#8230;<\/p>\n<ul>\n<li>try to fit the X-Axis labels in below the column (that we randomly colour with opacity 0.5) &#8230; or &#8230;<\/li>\n<li>create a legend<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;ve decided on the former, but may reserve final judgement on this over time, perhaps writing code later to determine which approach would look better, and use that approach when apt.  We&#8217;ll see.<\/p>\n<p>We&#8217;d like to thank <a target=_blank href=\"https:\/\/www.mathsisfun.com\/data\/bar-graphs.html\" title=\"Useful link\">this useful link<\/a> for the inspiration with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/column_graph.jpg\">tutorial picture<\/a> of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Nicest%20Fruit,6,0,45||Fruit;Number%20of%20People|Apple;35|Orange;30|Banana;10|Kiwifruit;25|Blueberry;40|Grapes;5|\">this worked example<\/a> (where a trap for young players sees us setting the Maximum Y value from 40 to 45 (as a multiple of 9 (Y-axis segments left for graph (after surrounds)) to avoid &#8220;decimal fractions of people&#8221;) also shown below &#8230;<\/p>\n<p><iframe style='width:100%;height:900px;' src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column|Nicest%20Fruit,6,0,45||Fruit;Number%20of%20People|Apple;35|Orange;30|Banana;10|Kiwifruit;25|Blueberry;40|Grapes;5|\"><\/iframe><\/p>\n<p>Early days, but interesting days, and it goes without saying, we would listen to your feedback on trying <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html---------GETME\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=column\">Column Graph live run<\/a> link.<\/p>\n<hr>\n<p id='htmlshrppt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Plot Polynomial Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-polynomial-tutorial\/'>HTML Square Horizontal Rule Plot Polynomial 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#blank=plot\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Plot Polynomial Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/plot_axes_polynomial.jpg\" title=\"HTML Square Horizontal Rule Plot Axes Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Plot Polynomial Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Plot Axes Tutorial' href='#htmlshrpat'>HTML Square Horizontal Rule Plot Axes Tutorial<\/a> start with &#8230;<\/p>\n<ul>\n<li>linear equation plotting &#8230; has been extended today (by one dimension) to &#8230;<\/li>\n<li><a target=_blank title='Polynomial equations information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Polynomial_equation'>polynomial equation<\/a><\/li>\n<\/ul>\n<p> &#8230; and along the way we &#8230;<\/p>\n<ul>\n<li>highlight Y axis intercepts and X axis intercepts<\/li>\n<li>limit the plotting range to the range the user selected first off<\/li>\n<li>label the axes &#8230; and sharing wise we allow &#8230;<\/li>\n<li>email link collaboration<\/li>\n<\/ul>\n<p>What else is new to us, and perhaps to you, today?  It&#8217;s the &#8220;Eat at Joes&#8221; type of idea to effectively animate an HTML input type=text textbox.  Why, pray tell.  Two reasons occur to us &#8230;<\/p>\n<ul>\n<li>as we do more and more web application coding we find the labelling of HTML input type=textbox textboxes &#8220;externally&#8221; (ie. creating another different HTML element of some sort sitting adjacent to textbox) annoying in the sense of easily making it look good &#8230; but more and more &#8230;<\/li>\n<li>as we do more and more web application coding we find the use of the &#8220;placeholder&#8221; attribute of  HTML input type=textbox textboxes useful and easy &#8230; and today we do some inhouse animation, because we have two bits of functionality available and decipherable from the one textbox because an entry with &#8230;\n<ol>\n<li>four comma separated fields involves a plot range entry &#8230; whereas &#8230;<\/li>\n<li>three comma separated fields involves a polynomial equation entry &#8230; whereas &#8230;<\/li>\n<li>two comma separated fields involves a linear equation &#8230; so, that being the case &#8230;\n<\/ol>\n<p> &#8230; we get that first one above as information off the user and immediately animate via a setTimeout invocation (ie. <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a>(toggleplaceholder, 5000); ) via the textbox &#8220;placeholder&#8221; attribute via &#8230;<br \/>\n<code><br \/>\n  function toggleplaceholder() {<br \/>\n    if (oiois != null) {<br \/>\n      if (oiois.value == '') {<br \/>\n         if (oiois.placeholder != 'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O') {<br \/>\n           oiois.placeholder='Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O';<br \/>\n         } else {<br \/>\n           oiois.placeholder='Polynomial formula y=A*x*x + B*x + C ... please comma separate A,B,C';<br \/>\n         }<br \/>\n         setTimeout(toggleplaceholder, 5000);<br \/>\n      } else {<br \/>\n         oiois=null;<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>The email link collaboration work has meant that we can show you below some equations <a style=\"text-decoration:underline;cursor:pointer;\" onclick=\" document.getElementById('imacarthurpark').style.display='block'; document.getElementById('imacarthurpark').src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html?youtubeid=CPMpeNDIGdk&amp;youtube_duration=449.0&amp;c0=on&amp;i0=0&amp;j0=60&amp;c1=on&amp;i1=80&amp;j1=124&amp;c2=on&amp;i2=144&amp;j2=396&amp;c3=on&amp;i3=416&amp;j3=449&amp;i4=&amp;j4=&amp;i5=&amp;j5=&amp;i6=&amp;j6=&amp;i7=&amp;j7=&amp;i8=&amp;j8=&amp;i9=&amp;j9='; \">&#8220;baked&#8221;<\/a> ahead of time &#8230;<\/p>\n<p><iframe id='imacarthurpark' title='Macarthur Park karaoke' style='display:none;height:740px; width:100%;' src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html'><\/iframe><\/p>\n<p><code><br \/>\nExample of <a target=_blank title='Two Linear Equations' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot%7C-20,-20,20,20%7C2,12%7C-2,-8%7C'>2 Linear Equations<\/a>:<br \/>\ny = 2x + 12<br \/>\ny = -2x - 8<br \/>\n<\/code><\/p>\n<p><iframe style='width:100%;height:900px;' src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot%7C-20,-20,20,20%7C2,12%7C-2,-8%7C\"><\/iframe><\/p>\n<p> &#8230; and thanks to <a target=_blank title='Useful; link' href='http:\/\/www.biology.arizona.edu\/biomath\/tutorials\/quadratic\/roots.html'>this very useful link<\/a> for methodologies to discover X axis intercepts for polynomial equations &#8230;<\/p>\n<p><code><br \/>\nExample of <a target=_blank title='Two Linear Equations' href='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot%7C-30,-30,30,30%7C2,-11,5%7C-4,12,-9%7C2,24%7C'>2 Polynomial Equations and 1 Linear Equation<\/a>:<br \/>\ny = 2x<sup>2<\/sup> - 11x + 5<br \/>\ny = -4x<sup>2<\/sup> + 12x - 9<br \/>\ny = 2x + 24<br \/>\n<\/code><\/p>\n<p><iframe style='width:100%;height:900px;' src=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm#blank=plot%7C-30,-30,30,30%7C2,-11,5%7C-4,12,-9%7C2,24%7C\"><\/iframe><\/p>\n<p>Feel free to peruse the HTML and Javascript and CSS code of <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--------GETME\" title=\"square_hr_tracing.htm\">the changed<\/a>  <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='htmlshrpat'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Plot Axes Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-plot-axes-tutorial\/'>HTML Square Horizontal Rule Plot Axes 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#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 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;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&amp;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&amp;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&amp;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&amp;lt;5; itrs++) {<br \/>\n    for (var itds=eval(5 * itrs); itds&amp;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='&amp;lt;select title=\"\" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + sqsi + ' onchange=sosmove(this);&amp;gt;&amp;lt;option value=\" \"&amp;gt; &amp;lt;\/option&amp;gt;&amp;lt;option value=\"S\"&amp;gt;S&amp;lt;\/option&amp;gt;&amp;lt;option value=\"O\"&amp;gt;O&amp;lt;\/option&amp;gt;&amp;lt;\/select&amp;gt;';<br \/>\n      tds[itds].innerHTML+='&amp;lt;select title=\"\" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(1 + sqsi) + ' onchange=sosmove(this);&amp;gt;&amp;lt;option value=\" \"&amp;gt; &amp;lt;\/option&amp;gt;&amp;lt;option value=\"S\"&amp;gt;S&amp;lt;\/option&amp;gt;&amp;lt;option value=\"O\"&amp;gt;O&amp;lt;\/option&amp;gt;&amp;lt;\/select&amp;gt;';<br \/>\n      tds[itds].innerHTML+='&amp;lt;br&amp;gt;&amp;lt;select title=\"\" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(10 + sqsi) + ' onchange=sosmove(this);&amp;gt;&amp;lt;option value=\" \"&amp;gt; &amp;lt;\/option&amp;gt;&amp;lt;option value=\"S\"&amp;gt;S&amp;lt;\/option&amp;gt;&amp;lt;option value=\"O\"&amp;gt;O&amp;lt;\/option&amp;gt;&amp;lt;\/select&amp;gt;';<br \/>\n      tds[itds].innerHTML+='&amp;lt;select title=\"\" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(11 + sqsi) + ' onchange=sosmove(this);&amp;gt;&amp;lt;option value=\" \"&amp;gt; &amp;lt;\/option&amp;gt;&amp;lt;option value=\"S\"&amp;gt;S&amp;lt;\/option&amp;gt;&amp;lt;option value=\"O\"&amp;gt;O&amp;lt;\/option&amp;gt;&amp;lt;\/select&amp;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 &amp;gt;= 0 &amp;&amp; t1 &amp;lt; 100 &amp;&amp; t2 &amp;gt;= 0 &amp;&amp; t2 &amp;lt; 100 &amp;&amp; t3 &amp;gt;= 0 &amp;&amp; t3 &amp;lt; 100) {<br \/>\n     if (document.getElementById('sqsi' + t1).value == 'S' &amp;&amp; document.getElementById('sqsi' + t2).value == 'O' &amp;&amp; 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='&amp;lt;option value=' + cosel + '&amp;gt;' + cosel + '&amp;lt;\/option&amp;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) &amp;gt; 0 &amp;&amp; eval(thistile % 10) &amp;lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-1 + thistile), thistile, eval(1 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;gt; 1) {<br \/>\n     anothergo|=checkifsos(eval(-2 + thistile), eval(-1 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(1 + thistile), eval(2 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile \/ 10) &amp;gt; 0 &amp;&amp; eval(thistile \/ 10) &amp;lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-10 + thistile), thistile, eval(10 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile \/ 10) &amp;gt; 1) {<br \/>\n     anothergo|=checkifsos(eval(-20 + thistile), eval(-10 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile \/ 10) &amp;lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(10 + thistile), eval(20 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile % 10) &amp;gt; 0 &amp;&amp; eval(thistile % 10) &amp;lt; 9 &amp;&amp; eval(thistile \/ 10) &amp;gt; 0 &amp;&amp; eval(thistile \/ 10) &amp;lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-11 + thistile), thistile, eval(11 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;gt; 1 &amp;&amp; eval(thistile \/ 10) &amp;gt; 2) {<br \/>\n     anothergo|=checkifsos(eval(-22 + thistile), eval(-11 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;lt; 8 &amp;&amp; eval(thistile \/ 10) &amp;lt; 8 ) {<br \/>\n     anothergo|=checkifsos(thistile, eval(11 + thistile), eval(22 + thistile));<br \/>\n     }<br \/>\n<br \/> <br \/>\n     if (eval(thistile % 10) &amp;gt; 0 &amp;&amp; eval(thistile % 10) &amp;lt; 9 &amp;&amp; eval(thistile \/ 10) &amp;gt; 0 &amp;&amp; eval(thistile \/ 10) &amp;lt; 9) {<br \/>\n     anothergo|=checkifsos(eval(-9 + thistile), thistile, eval(9 + thistile));<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;gt;= 0 &amp;&amp; eval(thistile \/ 10) &amp;lt; 8 ) {<br \/>\n     anothergo|=checkifsos(eval(-18 + thistile), eval(-9 + thistile), thistile);<br \/>\n     }<br \/>\n     if (eval(thistile % 10) &amp;gt; 2 &amp;&amp; eval(thistile \/ 10) &amp;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&amp;lt;style&amp;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&amp;lt;\/style&amp;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='&amp;nbsp;';<br \/>\n       document.getElementById('myh3').innerHTML='&amp;nbsp;';<br \/>\n       document.getElementById('myh4').innerHTML='&amp;nbsp;';<br \/>\n       <b>document.getElementById('dhangman').innerHTML+=\"&amp;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) + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\";<br \/>\n       document.getElementById('dhangman').innerHTML+=\"&amp;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&amp;gt;&amp;lt;\/iframe&amp;gt;\";<\/b><br \/>\n       document.getElementById('dhangman').innerHTML+=\"&amp;lt;div id=dback title='' style='background-color:transparent;z-index:24;position:absolute;top:200px;left:580px;'&amp;gt;&amp;lt;\/div&amp;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;&amp;amp; (' ' + location.hash).split('#').length &amp;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=\"&amp;lt;img style='z-index:24;border:2px solid orange;' id=imgback src='\" + imgd + \"'&amp;gt;&amp;lt;\/img&amp;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=\"&amp;lt;canvas style=z-index:24; width='\" + Math.round(eval(x2 - x1)) + \"' height='\" + Math.round(eval(y2 - y1)) + \"' id=cback&amp;gt;&amp;lt;\/canvas&amp;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 &amp;#128578; and noose &amp;#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+='&amp;lt;p id=phead class=face style=z-index:90;position:absolute;top:248px;left:142px;font-size:56px;&amp;gt;&amp;amp;#128578;&amp;lt;\/p&amp;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;amp;#129314;'; document.getElementById('dhangman').innerHTML+='&amp;lt;p id=pnoose class=face style=background-color:blank;z-index:95;position:absolute;top:195px;left:168px;font-size:6px;&amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;amp;lt;br&amp;amp;gt;&amp;amp;#127872;&amp;lt;\/p&amp;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&amp;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 &amp;gt;= hangmanc.length) {<br \/>\n     goes++;<br \/>\n     newval='';<br \/>\n   for (ifnd=0; ifnd&amp;lt;vocabulary[0].length; ifnd++) {<br \/>\n     if (document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd)).toLowerCase() == \"_\") {<br \/>\n       newval+='&amp;lt;font color=red&amp;gt;' + vocabulary[0].substring(ifnd,eval(1 + ifnd)) + '&amp;lt;\/font&amp;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&amp;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&amp;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;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&amp;lt;style&amp;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&amp;lt;\/style&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/propogation\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/hashtag\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/linear-gradient\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&amp;gt;&amp;lt;\/iframe&amp;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 = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/geometry\" + \"&amp;gt;&amp;lt;\/iframe&amp;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<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='#d43362' onclick='var dv=document.getElementById(\"d43362\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/polynomial\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43362' 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='#d43376' onclick='var dv=document.getElementById(\"d43376\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/graph\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43376' 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='#d43393' onclick='var dv=document.getElementById(\"d43393\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/induction\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43393' 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='#d43407' onclick='var dv=document.getElementById(\"d43407\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43407' 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='#d43426' onclick='var dv=document.getElementById(\"d43426\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43426' 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='#d43556' onclick='var dv=document.getElementById(\"d43556\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43556' 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='#d43851' onclick='var dv=document.getElementById(\"d43851\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/jigsaw\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43851' 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='#d43859' onclick='var dv=document.getElementById(\"d43859\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43859' 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='#d43899' onclick='var dv=document.getElementById(\"d43899\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43899' 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='#d43903' onclick='var dv=document.getElementById(\"d43903\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43903' 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='#d43929' onclick='var dv=document.getElementById(\"d43929\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43929' 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='#d43951' onclick='var dv=document.getElementById(\"d43951\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43951' 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='#d43965' onclick='var dv=document.getElementById(\"d43965\"); dv.innerHTML = \"&amp;lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/timesheet\" + \"&amp;gt;&amp;lt;\/iframe&amp;gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43965' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>If you are a regular reader at this blog, you may know that over some time now, several years in fact, we&#8217;ve longed to write code to help with Timesheets, and have come at this from &#8230; HTML5 canvas usage &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-image-map-jigsaw-timesheet-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":[99,103,142,1993,174,184,2798,187,1580,199,2525,208,1604,230,1709,2442,265,281,2826,326,342,354,367,380,385,392,399,400,418,476,477,484,2208,2800,519,538,541,2298,2670,2558,2229,557,2803,2804,2770,576,584,587,590,592,2459,1525,614,626,630,2796,652,658,2598,700,2823,2020,2169,745,2772,752,766,795,796,2092,2797,830,1631,2428,2219,2723,894,897,2411,932,2643,962,1731,1988,997,1761,1986,2617,2799,1021,2047,2132,1063,1071,2849,1105,1866,1133,1168,2771,1226,1238,1262,2225,1298,1300,1319,1345,1583,1452,1453,1493,1496],"class_list":["post-43965","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-area","tag-array","tag-bezier-curves","tag-browse","tag-button","tag-canvas","tag-canvas-background","tag-cards","tag-cell","tag-chart","tag-child","tag-circle","tag-collaboration","tag-column","tag-communication","tag-contenteditable","tag-copy","tag-css","tag-deck","tag-dictionary","tag-div","tag-dom","tag-dropdown","tag-email","tag-emoji","tag-equation","tag-eval","tag-event","tag-file","tag-game","tag-games-2","tag-geometry","tag-getboundingclientrect","tag-getimagedata","tag-google-charts","tag-graph","tag-graphics","tag-grid","tag-guillotine","tag-hangman","tag-hash","tag-hashtag","tag-home","tag-home-screen","tag-horizontal-rule","tag-html","tag-icon","tag-iframe","tag-image","tag-image-map","tag-induction","tag-innerhtml","tag-integration","tag-ios","tag-ipad","tag-ispell","tag-javascript","tag-jigsaw","tag-line","tag-line-graph","tag-linear-equation","tag-linear-gradient","tag-location-hash","tag-map","tag-match","tag-mathematics","tag-memories","tag-mobile","tag-mobile-app","tag-multiple","tag-multiple-hashtag","tag-navigation","tag-onchange","tag-onion","tag-onmousemove","tag-ontouchmove","tag-overlay","tag-pan","tag-parent","tag-php","tag-placeholder","tag-polygon","tag-polynomial","tag-position","tag-programming","tag-prompt","tag-proof-of-concept","tag-propogation","tag-putimagedata","tag-quicktime-player","tag-random","tag-rectangle","tag-reveal","tag-rotate","tag-rubberband","tag-script","tag-select","tag-share","tag-software-integration","tag-square","tag-svg","tag-table","tag-textarea","tag-timesheet","tag-transform","tag-translate","tag-tutorial","tag-url","tag-window","tag-word","tag-word-game","tag-youtube","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43965"}],"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=43965"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43965\/revisions"}],"predecessor-version":[{"id":43985,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43965\/revisions\/43985"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}