{"id":32030,"date":"2017-08-09T03:01:41","date_gmt":"2017-08-08T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32030"},"modified":"2017-08-12T16:02:19","modified_gmt":"2017-08-12T06:02:19","slug":"body-systems-quiz-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/body-systems-quiz-game-primer-tutorial\/","title":{"rendered":"Body Systems Quiz Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_systems.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Body Systems Quiz Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_system.jpg\" title=\"Body Systems Quiz Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Body Systems Quiz Game Primer Tutorial<\/p><\/div>\n<p>&#8220;Regional&#8221; click (or touch) web application functionality doesn&#8217;t have to be always done via an HTML map element <strike>thang<\/strike>thing.  Today, as an alternative methodology, we &#8230;<\/p>\n<ul>\n<li>start with a useful &#8220;Body Systems&#8221; image &#8230; thanks to <i>HLTAAP001 Recognise healthy body systems<\/i> TAFE NSW<\/li>\n<li>set it up as the document.body <i>background: url(&#8216;body_systems.jpg&#8217;) no-repeat;<\/i> background image<\/li>\n<li>&#8220;overlay&#8221; a &#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<li><a target=_blank title='CSS3 background-color information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-color.asp'>background-color:transparent<\/a><\/li>\n<\/ol>\n<p> &#8230; HTML table element &#8220;grid&#8221; on top\n<\/li>\n<li>add HTML table element&#8217;s cells&#8217; <i>onclick<\/i> event logics that work on the scoring for the &#8220;Body Systems Quiz&#8221; game we have for you today<\/li>\n<li>an HTML select &#8220;dropdown&#8221; element gets randomly selected with a &#8220;Body Part&#8221; for which the user then (and features the use of <a target=_blank title='HTML and Javascript data attribute information' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/Guide\/HTML\/Using_data_attributes'><i>data attributes<\/i><\/a> to store associated data items) &#8230;<\/li>\n<li>clicks (or touches) (a &#8220;Body System&#8221; arrowhead representing) one of the HTML table element&#8217;s cells (but looks to the user as the original background image showing &#8220;Body Systems&#8221;), triggering the scoring analysis logic for today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_systems.html\" title='Click picture'>&#8220;Body Systems (of Body Parts) Game&#8221;<\/a> whose HTML and Javascript and bit of CSS source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_systems.html_GETME\">body_systems.html<\/a> is there for your perusal<\/li>\n<\/ul>\n<p>You may wonder, from this, where&#8217;s the relationship among &#8230;<\/p>\n<ul>\n<li>Body System<\/li>\n<li>Body Part<\/li>\n<li>Grid Reference (ie. HTML table element&#8217;s cells&#8217; IDs)<\/li>\n<\/ul>\n<p> &#8230; established?  Again, as you may be really sick of by now with us, nothing more complicated data structure wise, than a <i>&#8220;Body System:Body Parts List (comma separated):Grid Reference List (comma separated)&#8221;<\/i> array, as exemplified by the snippet &#8230;<\/p>\n<p><code><br \/>\nvar b_s=[\"Cardiovascular:heart,blood,vessels:3_2,3_3,5_2\",<br \/>\n        ...<br \/>\n        ];<br \/>\n<\/code><\/p>\n<p>When taking a look at today&#8217;s HTML and Javascript and bit of CSS source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/body_systems.html_GETME\">body_systems.html<\/a> you may notice &#8220;the bit of CSS&#8221;, literally &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd { width: 10%; height: 10%; border: <b>0px<\/b> inset red; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and wonder, what&#8217;s the go with the <b>0px<\/b> bit of &#8220;border: <b>0px<\/b> inset red;&#8221;?  Well, it&#8217;s a reminder back to how we &#8220;debugged&#8221; the &#8220;Grid Reference&#8221; array data we collected.  When developing this web application, we had, for debugging purposes, this CSS as &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\ntd { width: 10%; height: 10%; border: <b>1px<\/b> inset red; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and just during that period we had a way to tell in which HTML table element&#8217;s cell a &#8220;Body System&#8221; arrowhead would fall.  It may not be to your liking to leave such &#8220;kludges&#8221; in live code, and often we&#8217;d agree, but if something is such an obvious code &#8220;attention seeker&#8221;, we actually find leaving such &#8220;peccadillos&#8221; in instructive into future revisits of such code.<\/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='#d32030' onclick='var dv=document.getElementById(\"d32030\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/anatomy\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32030' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Regional&#8221; click (or touch) web application functionality doesn&#8217;t have to be always done via an HTML map element thangthing. Today, as an alternative methodology, we &#8230; start with a useful &#8220;Body Systems&#8221; image &#8230; thanks to HLTAAP001 Recognise healthy body &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/body-systems-quiz-game-primer-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":[75,126,127,1580,281,305,400,2298,576,590,652,800,861,870,894,997,1238,1319],"class_list":["post-32030","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-anatomy","tag-background","tag-background-image","tag-cell","tag-css","tag-debug","tag-event","tag-grid","tag-html","tag-image","tag-javascript","tag-mobilefish","tag-onclick","tag-onload","tag-overlay","tag-programming","tag-table","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32030"}],"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=32030"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32030\/revisions"}],"predecessor-version":[{"id":32111,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32030\/revisions\/32111"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=32030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=32030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=32030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}