{"id":43296,"date":"2019-02-28T03:01:00","date_gmt":"2019-02-27T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=43296"},"modified":"2021-10-07T11:36:48","modified_gmt":"2021-10-07T01:36:48","slug":"respiratory-system-quiz-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/respiratory-system-quiz-game-primer-tutorial\/","title":{"rendered":"Respiratory System Quiz Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/respiratory_system.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Respiratory System Quiz Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/respiratory_system.png\" title=\"Respiratory System Quiz Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Respiratory System Quiz Game Primer Tutorial<\/p><\/div>\n<p>The previous <a title='Body Systems Quiz Game Primer Tutorial' href='#bsqgpt'>Body Systems Quiz Game Primer Tutorial<\/a> shares many commonalities with today&#8217;s Respiratory System quiz, two major commonalities being &#8230;<\/p>\n<ul>\n<li>the source for the quiz knowledge &#8230; thanks to HLTAAP001 Recognise healthy body systems TAFE NSW<\/li>\n<li>both quizzes have a single image as a reference point but neither use (or need) HTML map nor canvas elements<\/li>\n<\/ul>\n<p> &#8230; and today, for the first time that we can remember we set our image as the <strong>background image<\/strong> to an HTML &#8230;<\/p>\n<ul>\n<li>form element &#8230;<\/li>\n<li>action=[here&#8217;sLookingAtYouKid]<\/li>\n<li>method=GET<\/li>\n<li>style=&#8217;width:640px;height:480px;<strong>background: URL(respiratory_system.jpg) no-repeat;<\/strong>&#8216;<\/li>\n<li>comprised of input type=text textboxes and one type=submit button overlayed into specific positions masking the image at points where that image would have given the answer away, as per &#8230;<br \/>\n<code><br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:108px;top:142px;<\/i>' name=fld1 id=fld1 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:458px;top:108px;<\/i>' name=fld2 id=fld2 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:458px;top:158px;<\/i>' name=fld3 id=fld3 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:458px;top:223px;<\/i>' name=fld4 id=fld4 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:458px;top:312px;<\/i>' name=fld5 id=fld5 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input placeholder='What is this?' type=text style='position:absolute;<i>left:458px;top:410px;<\/i>' name=fld6 id=fld6 value=''&gt;&lt;\/input&gt;<br \/>\n&lt;input id='sb' type=submit style='background-color:yellow;position:absolute;<i>left:458px;top:460px;<\/i>' value='Check Answers'&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; and this is where you may have cried out <i>&#8220;How did you get good values for top and left positions, given you are not using an HTML map element?&#8221;<\/i>.  Well, we temporarily put the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/flowchart.html---GETME\" title=\"flowchart.html\"><i>flowchart bits<\/i><\/a> you can further read about at <a target=_blank title='Flowchart Colours Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-colours-tutorial\/'>Flowchart Colours Tutorial<\/a> (and <strong>our own bits, temporarily<\/strong>) &#8230;<\/p>\n<p><code><br \/>\n<i>function recxy(event) {<br \/>\n       var isok=true;<br \/>\n       \/\/if (document.getElementById('dpf')) {<br \/>\n       \/\/  if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('cliCk ' + wording + ' ' + bodyclick); }<br \/>\n       \/\/}<br \/>\n       if (event.touches) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24567441\/how-do-i-detect-two-fingers-at-touchstart-in-javascript<br \/>\n         if (event.touches.length &gt; 1) {  isok=false; }<br \/>\n       }<br \/>\n       if (isok) {<br \/>\n       if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {<br \/>\n<br \/>\n       if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       \/\/if (document.getElementById('dpf')) {<br \/>\n       \/\/  if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('Click ' + wording + ' ' + bodyclick); }<br \/>\n       \/\/}<br \/>\n       <strike>setTimeout(xthen, 2000);<\/strike><br \/>\n       <strike>setTimeout(andthen, 1000);<\/strike><br \/>\n       } else {<br \/>\n<br \/> <br \/>\n       if (event.clientX || event.clientY) {<br \/>\n       if (x != event.clientX || y != event.clientY) {<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       \/\/if (document.getElementById('dpf')) {<br \/>\n       \/\/  if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('ClIck ' + wording + ' ' + bodyclick); }<br \/>\n       \/\/}<br \/>\n       <strike>setTimeout(xthen, 2000);<\/strike><br \/>\n       <strike>setTimeout(andthen, 1000);<\/strike><br \/>\n       \/\/} else {<br \/>\n       \/\/document.title+=' ! ';<br \/>\n       }<br \/>\n       } else {<br \/>\n       if (x != event.pageX || y != event.pageY) {<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       \/\/if (document.getElementById('dpf')) {<br \/>\n       \/\/  if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('clicK ' + wording + ' ' + bodyclick); }<br \/>\n       \/\/}<br \/>\n       <strike>setTimeout(xthen, 2000);<\/strike><br \/>\n       <strike>setTimeout(andthen, 1000);<\/strike><br \/>\n       \/\/} else {<br \/>\n       \/\/document.title+=' ? ';<br \/>\n       }<br \/>\n       }<br \/>\n<br \/>\n       if (event.clientX || event.clientY) {<br \/>\n       x = event.clientX; \/\/ - elemLeft;<br \/>\n       y = event.clientY; \/\/ - elemTop;<br \/>\n       } else {<br \/>\n       x = event.pageX; \/\/ - elemLeft;<br \/>\n       y = event.pageY; \/\/ - elemTop;<br \/>\n       }<br \/>\n       }<br \/>\n       \/\/alert('x=' + x + ' and y=' + y);<br \/>\n       }<\/i><br \/>\n       <strong>alert('x=' + x + ' and y=' + y);<\/strong><br \/>\n <i>}<\/i><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body <strong>onclick='recxy(event);'<\/strong> onload='checkanswers();' style='background-color:yellow;'&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; just for the period writing the web application, and then we ended up with this very pared back <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/respiratory_system.html_GETME\" title=\"respiratory_system.html\">respiratory_system.html<\/a> with its associated <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/respiratory_system.html\" title=\"Click picture\">live run<\/a> link for you to test out your Respiratory System knowledge.<\/p>\n<hr>\n<p id='bsqgpt'>Previous relevant <a target=_blank title='Body Systems Quiz Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/body-systems-quiz-game-primer-tutorial\/'>Body Systems Quiz Game 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\/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: <strong>0px<\/strong> inset red; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and wonder, what&#8217;s the go with the <strong>0px<\/strong> bit of &#8220;border: <strong>0px<\/strong> 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: <strong>1px<\/strong> 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<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='#d43296' onclick='var dv=document.getElementById(\"d43296\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d43296' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The previous Body Systems Quiz Game Primer Tutorial shares many commonalities with today&#8217;s Respiratory System quiz, two major commonalities being &#8230; the source for the quiz knowledge &#8230; thanks to HLTAAP001 Recognise healthy body systems TAFE NSW both quizzes have &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/respiratory-system-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,15,37],"tags":[75,452,576,590,652,894,997,2822,1675,1319],"class_list":["post-43296","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-anatomy","tag-form","tag-html","tag-image","tag-javascript","tag-overlay","tag-programming","tag-respiratory-system","tag-textbox","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43296"}],"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=43296"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43296\/revisions"}],"predecessor-version":[{"id":53573,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/43296\/revisions\/53573"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=43296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=43296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=43296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}