{"id":32129,"date":"2017-08-14T03:01:48","date_gmt":"2017-08-13T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32129"},"modified":"2017-08-13T14:24:52","modified_gmt":"2017-08-13T04:24:52","slug":"naturally-occurring-elements-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/naturally-occurring-elements-game-primer-tutorial\/","title":{"rendered":"Naturally Occurring Elements Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/atomic_level_human_body.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Naturally Occurring Elements Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/atomic_level_human_body.jpg\" title=\"Naturally Occurring Elements Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Naturally Occurring Elements Game Primer Tutorial<\/p><\/div>\n<p>You can look at life from a lot of different viewpoints.  Reading <i>Biology<\/i> Fifth Edition by Campbell Reece Mitchell (ISBN: 0-201-52262-4) helped  crystallize these thoughts for us, thanks, and provided for today&#8217;s game&#8217;s background image, as well, so double thanks. In biological terms, let&#8217;s for now ignore subatomic particles, we could look at life (on Earth) from the viewpoints &#8230;<\/p>\n<ul>\n<li>atomic level (eg. oxygen)<\/li>\n<li>molecular level (eg. DNA)<\/li>\n<li>organelle level (eg. cell nucleus)<\/li>\n<li>cellular level (eg. smooth muscle cell)<\/li>\n<li>tissue level (eg. smooth muscle tissue)<\/li>\n<li>organ level (eg. stomach)<\/li>\n<li>organ system level (eg. digestive system)<\/li>\n<li>organism level (eg. tiger, consisting of many organ systems)<\/li>\n<li>higher levels (eg. populations, communities, ecosystems)<\/li>\n<\/ul>\n<p>Today&#8217;s biological game jumps from the &#8220;organism level&#8221; down to the &#8220;atomic level&#8221; regarding human beings, asking the user, in layperson&#8217;s terms, &#8220;what goes to make us up&#8221;.<\/p>\n<p>Like with <a title='Body Systems Quiz Game Primer Tutorial' href='#bsqgpt'>Body Systems Quiz Game Primer Tutorial<\/a>, as shown below, all the game&#8217;s HTML elements involve CSS <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a> property styling, as a few other games have recently, actually.  This time though, it is more of a stretch to describe what we do as &#8220;overlaying&#8221; as such, but more the placement of HTML elements so that they do not &#8220;overlay&#8221; (ie. clash).  Those things we don&#8217;t want to &#8220;clash&#8221; are &#8230;<\/p>\n<ul>\n<li>a contextual background image, the dimensions of which we know, so can plan the <a target=_blank title='CSS position:absolute information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_class_position.asp'>position:absolute<\/a>&#8216;s <i>left<\/i> and <i>top<\/i> properties for &#8230;<\/li>\n<li>a <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> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/piechart' title='Google Pie Charts'>Pie Chart<\/a> initially showing the proportions of unknown elements but infilled with element names as the game progresses &#8230; and &#8230;<\/li>\n<li>some headings &#8230; and &#8230;<\/li>\n<li>a select &#8220;dropdown&#8221; element consisting of those elements we know of in life and nature and the laboratory (ie. in biology), that are shown in the <a target=_blank title='Periodic Table' href='https:\/\/en.wikipedia.org\/wiki\/Periodic_table'>Periodic Table<\/a><\/li>\n<\/ul>\n<p> &#8230; so, as you can imagine, in all likelihood, the user is asked to name the 11 most abundant elements that go to make up the human body in the order from most prevalent to least prevalent, selecting their choice from that select &#8220;dropdown&#8221; element and having a score (as an h4 element) be appropriately updated.  As per usual with our biology and anatomy and physiology games recently, we add an option to &#8220;give up&#8221; to allow the game to proceed, and learn, while moving on to the next question.<\/p>\n<blockquote><p>\n<a style='cursor:pointer;text-decoration:underline;' onclick=\" document.getElementById('wssi').style.display='block';  document.getElementById('wssi').src='\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm?youtubeid=PkxCdOb4QlY&#038;youtube_duration=295.218&#038;email=&#038;email=&#038;emoji=on&#038;c0=on&#038;i0=0&#038;j0=8.10&#038;i1=&#038;j1=&#038;i2=&#038;j2=&#038;i3=&#038;j3=&#038;i4=&#038;j4=&#038;i5=&#038;j5=&#038;i6=&#038;j6=&#038;i7=&#038;j7=&#038;i8=&#038;j8=&#038;i9=&#038;j9=&#038;i10=&#038;j10=&#038;i11=&#038;j11=&#038;i12=&#038;j12=&#038;i13=&#038;j13=&#038;i14=&#038;j14=&#038;i15=&#038;j15=&#038;i16=&#038;j16=&#038;i17=&#038;j17=&#038;i18=&#038;j18=&#038;i19=&#038;j19=&#038;i20=&#038;j20=&#038;i21=&#038;j21=&#038;i22=&#038;j22=&#038;i23=&#038;j23=&#038;i24=&#038;j24=&#038;i25=&#038;j25=&#038;i26=&#038;j26=&#038;i27=&#038;j27=&#038;i28=&#038;j28=&#038;i29=&#038;j29='; setTimeout(dowhos,14000);   \"  title=\"Click me ... and expect some sound\">We&#8217;re so sorry, Uncle<\/a> <span title=\"Click me ... and expect some sound\" id='whos'>?<\/span>\n<\/p><\/blockquote>\n<p><iframe id='wssi' style='display:none;height:600px;width:100%;' src='javascript:none'><\/iframe><\/p>\n<p>We hope you get something out of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/atomic_level_human_body.html\">live run<\/a> of our &#8220;Human Body &#8211; Naturally Occurring Elements&#8221; game (or quiz).  The HTML and Javascript and CSS is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/atomic_level_human_body.html_GETME\">atomic_level_human_body.html<\/a> for your perusal.<\/p>\n<hr>\n<p id='bsqgpt'>Previous relevant <a target=_blank title='Body Systems Quiz Game Primer Tutorial' href='https:\/\/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: <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<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='#d32129' onclick='var dv=document.getElementById(\"d32129\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/biology\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d32129' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can look at life from a lot of different viewpoints. Reading Biology Fifth Edition by Campbell Reece Mitchell (ISBN: 0-201-52262-4) helped crystallize these thoughts for us, thanks, and provided for today&#8217;s game&#8217;s background image, as well, so double thanks. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/naturally-occurring-elements-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,37],"tags":[126,127,2082,281,354,367,476,477,513,519,576,652,2302,944,997,1022,1319],"class_list":["post-32129","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-biology","tag-css","tag-dom","tag-dropdown","tag-game","tag-games-2","tag-google","tag-google-charts","tag-html","tag-javascript","tag-life","tag-pie-chart","tag-programming","tag-quiz","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32129"}],"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=32129"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32129\/revisions"}],"predecessor-version":[{"id":32140,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32129\/revisions\/32140"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=32129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=32129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=32129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}