{"id":42512,"date":"2018-12-24T03:01:06","date_gmt":"2018-12-23T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42512"},"modified":"2018-12-23T20:43:36","modified_gmt":"2018-12-23T10:43:36","slug":"html-square-horizontal-rule-tracing-propogation-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-propogation-tutorial\/","title":{"rendered":"HTML Square Horizontal Rule Tracing Propogation Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Propogation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brain_twisters_more.jpg\" title=\"HTML Square Horizontal Rule Tracing Propogation Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Propogation Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Game Tutorial' href='#htmlshrtgt'>HTML Square Horizontal Rule Tracing Game Tutorial<\/a> continued on with the &#8230;<\/p>\n<ul>\n<li>HTML hr and div elements made up to be &#8230;\n<ol>\n<li>lines<\/li>\n<li>vertices<\/li>\n<\/ol>\n<p> &#8230; only needing the underlying &#8230;\n<\/li>\n<li>table cell elements as graphical position markers only (made to have intelligence derived via use of Javascript <a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect'>getBoundingClientRect<\/a>()), but pretty &#8220;dumb&#8221; markers at that<\/li>\n<\/ul>\n<p> &#8230; but HTML and Javascript are capable of very sophisticated event propogation, and there is no reason you have to have those underlying table cell elements remaining &#8220;dumb&#8221; that way.  You can, amongst many things, in Javascript, dynamically add &#8230;<\/p>\n<ul>\n<li>ID <b>on the fly<\/b> &#8230;<br \/>\n<code><br \/>\n    var tds=document.getElementsByTagName('td');<br \/>\n    for (var itds=0; itds&lt;tds.length; itds++) {<br \/>\n      <b>tds[itds].id='td' + eval(1 + itds);<\/b><br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<li>onclick event logic <b>on the fly<\/b> &#8230;<br \/>\n<code><br \/>\n    var lastsquare=-1;<br \/>\n    var tds=document.getElementsByTagName('td');<br \/>\n    for (var itds=0; itds&lt;tds.length; itds++) {<br \/>\n      tds[itds].id='td' + eval(1 + itds);<br \/>\n      <b>tds[itds].onclick=function(event) { lastsquare=eval(('' + this.id).replace('td','')); goes++; if (lastsquare == sqchoice) { score++; }  if (('' + location.hash).indexOf('square') != -1) { picksq(); } else if (('' + location.hash).indexOf('grid') != -1) {  gridinfo(' in square number ' + lastsquare);  }  };<\/b><br \/>\n    }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>We&#8217;ve started with some other game ideas using event propogation, with the last one, in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--GETME\" title=\"square_hr_tracing.htm\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html--GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\" title=\"Click picture\">live run<\/a> game, that now has game options &#8230;<\/p>\n<ul>\n<li>Chinese Brain Twisters<\/li>\n<li>Vertex Pointing Game &#8230; just shows vertices and on a set of 4 clicks or touches, will plot a Bezier Curve (thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/16227300\/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto'>this useful link<\/a>, thanks)<\/li>\n<li>Square Pointing Game &#8230; just shows the table and its numbered cells &#8230; with a number quiz<\/li>\n<li>Grid Pointing Game &#8230; shows border lines, and vertices and table cells with their thinner borders &#8230; where information is presented, relying on event propogation orders to show information from two hierarchies of event propogation<\/li>\n<\/ul>\n<p>To differentiate between these forms of game (selected via a new HTML select (dropdown) element) we did not choose to use our usual address bar URL argument (via ? and &amp;) navigation method, but rather use hashtag (via #) address bar URL methods, and in the Javascript (DOM) examine location.hash to know which &#8220;game&#8221; is applicable to a web application session.<\/p>\n<p>Food for thought, we hope!<\/p>\n<hr>\n<p id='htmlshrtgt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-game-tutorial\/'>HTML Square Horizontal Rule Tracing Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/brain_twisters.jpg\" title=\"HTML Square Horizontal Rule Tracing Game Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Game Tutorial<\/p><\/div>\n<p>The first application of the (online web application) line drawing we started with yesterday&#8217;s <a title='HTML Square Horizontal Rule Tracing Primer Tutorial' href='#htmlshrtpt'>HTML Square Horizontal Rule Tracing Primer Tutorial<\/a> is today&#8217;s online (web application) game version of some of the excellent puzzles in the book &#8220;Chinese Brain Twisters&#8221; by Baifang (ISBN: 0-471-59505-5).  It was the &#8220;stick&#8221; rearrangement puzzles in this excellent book that were the inspiration to getting together a display and user interaction set of HTML and CSS and Javascript code logics to turn a hardcopy concept into an online game.<\/p>\n<p>Of course, when you start with a &#8220;proof of concept&#8221; it can need quite a bit of &#8220;tweaking&#8221; (in this case, fitting it into those concept paradigms we talk about a couple of paragraphs on) when the reality of making it practical for the user comes into play with a project like this.  We, at first thought, that &#8230;<\/p>\n<ul>\n<li>we would display a question (about matches, rather than sticks, because we remember many a holiday game that involved the use of matches (<font size=1>&#8230; no, not that way<\/font>) regarding patterns and counting, and because a match gives us an excuse to add some red colour as per <b>CSS<\/b> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n  hr {<br \/>\n       height: 4px;<br \/>\n       border: 2px solid black;<br \/>\n       <b>background: linear-gradient(to right, yellow 80%, rgba(255,0,0,1) 20%); <\/b><br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n) and then with a button controlled by the user, &#8220;slap on&#8221; the screen the answer &#8230; then we had a mild epiphany (<a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=tel2qskyMPw'><font size=1>you had to be there<\/font><\/a>) &#8230;<\/li>\n<li>we would display a question and then animate the answer &#8230; which can be achieved by &#8220;slapping on&#8221; that same question, and click\/touch the actions of a successful user after 2 second delays between the clicks\/touches (via a <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer controlled set of Javascript calls)<\/li>\n<\/ul>\n<p>We hope it gives the game a more interactive feel, and a better way to learn perhaps, because geometry can be an &#8220;ahhhh haaa&#8221; type of thing to learn, when you see graphically the steps involved.<\/p>\n<p>As with many a game we&#8217;ve written we again fall back to two tried and true (and very simple) concepts &#8230;<\/p>\n<ul>\n<li>gather question data into simple (single dimension) arrays, additional complexity controlled within members by web application specific delimitation rules (or more singular dimensioned arrays (such as today, where there are two)) &#8230;<\/li>\n<li>get the user a randomized question for the game via Javascript code like (where &#8220;inquestions&#8221; var<font size=1>iable<\/font> below is just such an array) &#8230;<br \/>\n<code><br \/>\n    var choice=Math.floor(Math.random() * inquestions.length);<br \/>\n<\/code><br \/>\n &#8230; leading to &#8220;&#8221;inquestions[choice]&#8221; containing the data required to piece together the question &#8230; along with the &#8220;inwordings[choice]&#8221; of the other such array &#8220;inwordings&#8221; that contains &#8220;Chinese Brain Twisters&#8221; instructional text\n<\/li>\n<\/ul>\n<p>Another &#8220;game chestnut&#8221; concept for us is to have some sort of scoring mechanism, which we may attend to in upcoming posts.  For now, we&#8217;ll let you &#8220;cheat in the comfort of your own conscience&#8221; when bragging about your &#8220;Chinese Brain Twisters&#8221; prowess!<\/p>\n<p>Feel free to try out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-GETME\" title=\"square_hr_tracing.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html-GETME\" title=\"square_hr_tracing.htm\">square_hr_tracing.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.htm\" title=\"Click picture\">live run<\/a> game, and challenge yourself!<\/p>\n<p>You can also see this play out at WordPress 4.1.1&#8217;s <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-game-tutorial\/'>HTML Square Horizontal Rule Tracing Primer Tutorial<\/a>.<\/p>\n<hr>\n<p id='htmlshrtpt'>Previous relevant <a target=_blank title='HTML Square Horizontal Rule Tracing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-primer-tutorial\/'>HTML Square Horizontal Rule Tracing Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Square Horizontal Rule Tracing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.jpg\" title=\"HTML Square Horizontal Rule Tracing Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Square Horizontal Rule Tracing Primer Tutorial<\/p><\/div>\n<p>One sad thing about today&#8217;s blog posting title is it gives the game away.   We&#8217;re tackling a proof of concept web application for a future venture.  We want to be able to draw a grid of lines (or you could see them as matches) and we&#8217;ll want to &#8230;<\/p>\n<ul>\n<li>graphically present them (ie. grid square border lines (or matches)) around the edges of each grid square &#8230; and &#8230;<\/li>\n<li>graphically present vertices at match end points and half way between, and well as in the middle of squares &#8230; then let the user &#8230;<\/li>\n<li>click\/touch a match &#8230; then &#8230;<\/li>\n<li>click\/touch two vertices to reposition that match to the clicked vertex positioning<\/li>\n<\/ul>\n<p>Now, it seems to me, off the top of the head, you could proceed along the lines of &#8230;<\/p>\n<ul>\n<li>HTML5 <a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> element graphics &#8230; or <\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> graphics &#8230; but we prefer <font size=1> &#8230; you guessed it<\/font> &#8230; <\/li>\n<li><a target=_blank title='HTML hr element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_hr.asp'>HR<\/a> (Horizontal Rule) HTML elements, transformed as required, to suit our purposes<\/li>\n<\/ul>\n<p>Interested?!  Why not try the HTML\/Javascript\/CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html_GETME\">square_hr_tracing.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/square_hr_tracing.html\" title=\"Click picture\">live run<\/a> to see what we mean here.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42471' onclick='var dv=document.getElementById(\"d42471\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42471' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42490' onclick='var dv=document.getElementById(\"d42490\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42490' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d42512' onclick='var dv=document.getElementById(\"d42512\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/propogation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d42512' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s HTML Square Horizontal Rule Tracing Game Tutorial continued on with the &#8230; HTML hr and div elements made up to be &#8230; lines vertices &#8230; only needing the underlying &#8230; table cell elements as graphical position markers only (made &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-square-horizontal-rule-tracing-propogation-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,15,37],"tags":[103,142,1580,281,354,400,476,2208,541,2298,2229,557,2770,576,652,2598,2169,2772,997,1986,2617,1071,2771,1238,1298,1300,1319],"class_list":["post-42512","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-array","tag-bezier-curves","tag-cell","tag-css","tag-dom","tag-event","tag-game","tag-getboundingclientrect","tag-graphics","tag-grid","tag-hash","tag-hashtag","tag-horizontal-rule","tag-html","tag-javascript","tag-line","tag-location-hash","tag-match","tag-programming","tag-proof-of-concept","tag-propogation","tag-rotate","tag-square","tag-table","tag-transform","tag-translate","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42512"}],"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=42512"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42512\/revisions"}],"predecessor-version":[{"id":42518,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/42512\/revisions\/42518"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=42512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=42512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=42512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}