{"id":32104,"date":"2017-08-13T03:01:50","date_gmt":"2017-08-12T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=32104"},"modified":"2017-08-13T11:54:06","modified_gmt":"2017-08-13T01:54:06","slug":"travel-collage-quiz-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/travel-collage-quiz-game-primer-tutorial\/","title":{"rendered":"Travel Collage Quiz Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/travel_img.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Travel Collage Quiz Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/travelimg.jpg\" title=\"Travel Collage Quiz Game Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Travel Collage Quiz Game Primer Tutorial<\/p><\/div>\n<p>We use quite a few of the principles similar to those used in the previous <a title='Body Systems Quiz Game Primer Tutorial' href='#bsqgpt'>Body Systems Quiz Game Primer Tutorial<\/a> today as we create a &#8220;Travel Collage Quiz Game&#8221; thanking the <a target=_blank title='SMH' href='http:\/\/www.smh.com.au\/'>Sydney Morning Herald<\/a> 12th August 2017 travel section for inspiration for photographic content for the &#8220;collage&#8221; image.  There&#8217;s no doubt building up this image, we got the thirst for travel, and hope you enjoy trying out today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/travel_img.html\" title=\"Click picture\">live run<\/a> and its associated Javascript and Javascript DOM and small amount of CSS (like before) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/travel_img.html_GETME\" title=\"travel_img.html\">travel_img.html<\/a> source code.<\/p>\n<p>The table &#8220;grid&#8221; on top of the &#8220;collage&#8221; image is similar.  However, that &#8220;grid&#8221; has cells missing, for the other cells that are bigger than one square, all in columns though, and so involves the use of the HTML <i>td<\/i> (cell) element&#8217;s <a target=_blank title='HTML td rowspan attribute' href='https:\/\/www.w3schools.com\/TAGs\/att_td_rowspan.asp'>rowspan<\/a> attribute.  Managed to &#8220;wing&#8221; the construction of this table &#8220;grid&#8221; based on a full grid and working &#8220;backwards&#8221; via &#8230;<\/p>\n<ol>\n<li>add the relevant <i>rowspan<\/i> value &#8230; then &#8230;<\/li>\n<li>remove the relevant (<i>now obsolete<\/i>) table td cells<\/li>\n<\/ol>\n<p> &#8230; but it almost &#8220;blew my mind&#8221; doing this, and would advise, for you, should you be doing this yourself, to &#8220;build up from nothing&#8221; rather than &#8220;down from everything&#8221;.<\/p>\n<p>So the game works with &#8230;<\/p>\n<ul>\n<li>table td (cell) elements (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 Country name data items) highlighted via defining the border of the cell you want the user to use a &#8230;<\/li>\n<li>select &#8220;dropdown&#8221; element of Country names is used to see whether you can score a point by identifying the country the relevant cell&#8217;s photograph was taken in<\/li>\n<\/ul>\n<p> &#8230; which brings us to a slight difference in arrangements, because no array is needed &#8220;statically&#8221; today (that we did use with that previous tutorial), rather, that equivalent functionality <b>happens<\/b> at a local Javascript functional level (via the random cell chooser function) &#8230;<\/p>\n<p><code><br \/>\nfunction choose() {<br \/>\n  var ihuh, <b>huhs=document.<a target=_blank title='Javascript DOM getElementsByTagName() method information from w3schools' href='https:\/\/www.w3schools.com\/Jsref\/met_document_getelementsbytagname.asp'>getElementsByTagName<\/a>('td');<\/b><br \/>\n  for (ihuh=0; ihuh&lt;huhs.length; ihuh++) {<br \/>\n    huhs[ihuh].style.border='0px inset red';<br \/>\n  }<br \/>\n  choice=Math.floor(Math.random() * huhs.length);<br \/>\n  huhs[choice].style.border='7px inset rgba(255,0,0,0.4)';<br \/>\n  country_is='' + huhs[choice].getAttribute(\"data-title\");<br \/>\n  document.getElementById('travel_img').value='';<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Another matter of interest is the construction of the collage image contents, specifically, how did the imagery get put into table columns of similar width?  We&#8217;re going to illustrate this with an image showing us using a bookmarklet like a calculator ( eg. web URL <i>javascript:alert(eval(8000\/252));<\/i> result of &#8220;32&#8221; odd tells us to scale the image involved to 32% width and 32% height (using the PaintBrush image editor) to achieve a set HTML table <i>td<\/i> cell width of about 80px that we specified up with the &#8220;tiny bit of CSS&#8221; namely &lt;style&gt; td { width: 80px; border: 0px inset red; } &lt;\/style&gt; ) &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tvlimage.jpg' title='How it got done'><\/img><\/p>\n<p>We hope you try, and enjoy today&#8217;s quiz.<\/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 with WordPress 4.1.1&#8217;s <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>, 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 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='#d32104' onclick='var dv=document.getElementById(\"d32104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/table\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='32104' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We use quite a few of the principles similar to those used in the previous Body Systems Quiz Game Primer Tutorial today as we create a &#8220;Travel Collage Quiz Game&#8221; thanking the Sydney Morning Herald 12th August 2017 travel section &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/travel-collage-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":[126,127,157,2251,1580,281,305,400,2298,576,590,652,861,870,894,896,997,1238,2301,1319],"class_list":["post-32104","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-bookmarklet","tag-calculator","tag-cell","tag-css","tag-debug","tag-event","tag-grid","tag-html","tag-image","tag-javascript","tag-onclick","tag-onload","tag-overlay","tag-paintbrush","tag-programming","tag-table","tag-travel","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32104"}],"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=32104"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32104\/revisions"}],"predecessor-version":[{"id":32132,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/32104\/revisions\/32132"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=32104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=32104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=32104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}