{"id":36173,"date":"2018-02-14T03:01:39","date_gmt":"2018-02-13T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36173"},"modified":"2018-02-14T16:27:41","modified_gmt":"2018-02-14T06:27:41","slug":"place-quiz-keyboard-and-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/place-quiz-keyboard-and-mobile-tutorial\/","title":{"rendered":"Place Quiz Keyboard and Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Place Quiz Keyboard and Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backgroundmore.png\" title=\"Place Quiz Keyboard and Mobile Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Place Quiz Keyboard and Mobile Tutorial<\/p><\/div>\n<p>As you might surmise from today&#8217;s blog posting title, there is a twofold purpose to a modified version of our &#8220;Place Quiz&#8221;, adding onto yesterday&#8217;s <a title='Place Quiz Hints Tutorial' href='#pqht'>Place Quiz Hints Tutorial<\/a>, those being &#8230;<\/p>\n<ul>\n<li>for non-mobile platforms, allow the user to not have to look up to click, but allow for them to also use the keyboard, the action of which slows down the frenetic pace of the quiz game &#8230; and &#8230;<\/li>\n<li>for mobile platforms, it is better to have the HTML h1 on the left rather than the right when hints are given, allowing for those HTML iframe elements to extend off to the right in an overflow way, which mobile platforms tend to do so much better at than restricting their width by positioning the HTML h1 to the right<\/li>\n<\/ul>\n<p>Also, for mobile platforms, we decide to replace <i>onclick<\/i> as the event of HTML div element &#8220;interest&#8221; in favor of <i>ontouchstart<\/i> and extend out the interval of time between questions, to allow for easier ways to answer with clicks or pinches or other gestures, and leaving more time for answering.  Naturally, the keyboard &#8220;not looking up&#8221; advantages for a non-mobile user doesn&#8217;t work on mobile platforms, alas.<\/p>\n<p>Sometimes with cross-platform issues, if there is enough of a difference between the HTML and styling of non-mobile versus mobile web design, it can be advantageous to split the HTML creation into two directions even before Javascript DOM document.body onload event &#8220;kick in&#8221; via the use of <a target=_blank title='Javascript DOM document.write method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write<\/a>() powered <b>Javascript code<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;body onload='setviables(); setInterval(changeit,fivethousand);'&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  <b>if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  right='left';<br \/>\n  document.write(\"&lt;div id='bimg' ontouchstart='setTimeout(holdthephone,200);'&gt;&lt;h1 id=myh1 style='top:20px;'&gt;Place Quiz&lt;br&gt;RJM Programming&lt;br&gt;February, 2018&lt;br&gt;Thanks to &lt;a ontouchstart=' aclick=true; ' onclick=' aclick=true; ' id=awiki target=_blank title='Wikipedia' href='https:\/\/wikipedia.org'&gt;Wikipedia&lt;\/a&gt;&lt;\/h1&gt;&lt;\/div&gt;&lt;iframe onload='checki(this);' id=myif style='display:none;z-index:45;opacity:0.9;position:absolute;top:250px;left:400px;width:750px;height:450px;overflow: auto; -webkit-overflow-scrolling:touch;' src=''&gt;&lt;\/iframe&gt;\");<br \/>\n  } else {<br \/>\n  document.write(\"&lt;div id='bimg' onclick='setTimeout(holdthephone,200);'&gt;&lt;h1 id=myh1&gt;Place Quiz&lt;br&gt;RJM Programming&lt;br&gt;February, 2018&lt;br&gt;Thanks to &lt;a onclick=' aclick=true; ' id=awiki target=_blank title='Wikipedia' href='https:\/\/wikipedia.org'&gt;Wikipedia&lt;\/a&gt;&lt;\/h1&gt;&lt;\/div&gt;&lt;iframe onload='checki(this);' id=myif style='display:none;z-index:45;opacity:0.9;position:absolute;top:200px;left:20px;width:450px;height:450px;' src=''&gt;&lt;\/iframe&gt;\");<br \/>\n  }<\/b><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/body&gt;<\/code> <\/p>\n<p>So again, please feel free to try out today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.htm\" title=\"Click picture\">Place Quiz<\/a> based on the HTML and Javascript (largely DOM) and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html--GETME\" title=\"background_more.html--GETME\">background_more.htm<\/a> source code, which changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html-GETME\" title=\"background_more.html--GETME\">this way<\/a> for your perusal and, maybe, your download.<\/p>\n<hr>\n<p id='pqht'>Previous relevant <a target=_blank title='Place Quiz Hints Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/place-quiz-hints-tutorial\/'>Place Quiz Hints 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\/background_more.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Place Quiz Hints Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.png\" title=\"Place Quiz Hints Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Place Quiz Hints Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Place Quiz Primer Tutorial' href='#pqppt'>Place Quiz Primer Tutorial<\/a> was another &#8220;where&#8221; themed web application.  We like doing these, being into the (x,y) of life.  If you want the (x,y,z) get a Golden Retriever &#8230; they&#8217;re always looking up.<\/p>\n<p>But, and it&#8217;s such a shame to start the sentence with &#8220;but&#8221;, but there you are.  What was I saying?  But we digress?  No buts about it?  Oh yeah, but what about that &#8220;fourth dimension&#8221; that &#8220;onion of the 4th dimension&#8221; &#8230; time &#8230; and our frequent &#8220;time conduit&#8221; &#8230; timezones.  You might recall that we have TimeZone information in that &#8230;<\/p>\n<p><code><br \/>\n<i>places<\/i> global var<font size=1>iable<\/font> array<br \/>\n<\/code><\/p>\n<p> &#8230; and so, you might want to think of this quiz as a &#8220;where and when&#8221; web application, and as a result, we&#8217;d like to call on other web applications from our domain to serve as hints for the user wanting to know more and\/or fishing for hints with the quiz.  We call on, housed in an <a target=_blank title='Overlay blog posts' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlaid<\/a> &#8230;<\/p>\n<ul>\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='CSS opacity property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_opacity.asp'>opacity<\/a><\/li>\n<\/ul>\n<p> &#8230; HTML iframe element positioned, but independent of, eventwise, our main HTML div element (running the quiz) &#8230;<\/p>\n<ul>\n<li><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 title='Google Chart Map Chart' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=4832'>Map Chart<\/a> (separate <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Map\/map.php\">live run<\/a>)<\/li>\n<li><a target=_blank title='Other Side of the World Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/other-side-of-the-world-primer-tutorial\/'>Other Side of the World Primer Tutorial<\/a>&#8216;s (separate <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/other_side_of_the_world.htm\">live run<\/a>) &#8230; and then, separate to rjmprogramming.com.au domain &#8230;<\/li>\n<li><a target=_blank title=http:\/\/www.timezoneconverter.com\/ href=HTTP:\/\/www.timezoneconverter.com\/>TimeZone Converter<\/a> website helps integrate the &#8220;when&#8221; with the &#8220;where&#8221; of above<\/li>\n<\/ul>\n<p>Again, please feel free to try out today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.htm\" title=\"Click picture\">Place Quiz<\/a> based on the HTML and Javascript (largely DOM) and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html-GETME\" title=\"background_more.html-GETME\">background_more.htm<\/a> source code, which changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html-GETME\" title=\"background_more.html-GETME\">this way<\/a> for your perusal and, perhaps, download.<\/p>\n<hr>\n<p id='pqppt'>Previous relevant <a target=_blank title='Place Quiz Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/place-quiz-primer-tutorial\/'>Place Quiz 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\/background_more.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Place Quiz Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.jpg\" title=\"Place Quiz Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Place Quiz Primer Tutorial<\/p><\/div>\n<p>As we inferred (with) the &#8220;Did you Know?&#8221; section of the recent <a title='Column Intelligence Primer Tutorial' href='#cipt'>Column Intelligence Primer Tutorial<\/a> (that it) was of &#8220;Chestnut Cracking&#8221; importance to us, representing the long held ambition to zero in on a method to have a background with transparency teamed up with that same HTML element&#8217;s &#8220;foreground&#8221; having full opacity (or more opacity than the background).  Thanks, again, <a target=_blank title='Great link' href='https:\/\/stackoverflow.com\/questions\/7241341\/can-i-set-an-opacity-only-to-the-background-image-of-a-div'>great webpage<\/a>!<\/p>\n<p>Today, we&#8217;re going to present an HTML and Javascript and CSS quiz web application based on the deployment of this method in a Javascript DOM dynamic version of its CSS essence, whereby &#8230;<\/p>\n<ul>\n<li>an HTML div element is made to cover the screen with a &#8230;<\/li>\n<li>horizontally centered HTML h1 &#8220;foreground&#8221; element nested within, containing a quiz question &#8230; over the top of &#8230; another <a target=_blank title='Overlay blog posts' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> scenario &#8230;<\/li>\n<li>all encompassing background image with some transparency and uses <i>background-repeat;repeat;<\/i> helping the user out with a hint for what the quiz answer would be, which the user can score points for by &#8230;<\/li>\n<li>clicking anywhere on the HTML div element gives the user the opportunity to answer the Place quiz question via a Javascript <a target=_blank title='Javascript prompt window information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> window within a time period determined by &#8230;<\/li>\n<li><code><a target=_blank title='Javascript setInterval method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp'>setInterval<\/a>(changeit,5000); controls the time period between question changes to 5 seconds as a default, but the clock stops during an HTML div element click operation<\/code><\/li>\n<\/ul>\n<p>As per a lot of our (quiz) games, here, there is a &#8230;<\/p>\n<ol>\n<li><i>score<\/i> global var<font size=1>iable<\/font> &#8230; and a &#8230;<\/li>\n<li><i>goes<\/i> global var<font size=1>iable<\/font> &#8230; and then, more specific to today&#8217;s (quiz) game, there are &#8230;<\/li>\n<li><i>viablequestions<\/i> global var<font size=1>iable<\/font> array<\/li>\n<li><i>viableanswers<\/i> global var<font size=1>iable<\/font> array<\/li>\n<li><i>viableimageurl<\/i> global var<font size=1>iable<\/font> array &#8230; the arrays populated (via [arrayVar].<a target=_blank title='Javascript push method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_push.asp'>push<\/a>([value]);) via an analysis of the &#8220;programmer controlled&#8221; &#8230;<\/li>\n<li><i>places<\/i> global var<font size=1>iable<\/font> array whose information comes from a combination of &#8230;\n<ul>\n<li><a target=_blank title='http:\/\/php.net\/manual\/en\/datetimezone.getlocation.php' href='http:\/\/php.net\/manual\/en\/datetimezone.getlocation.php'>TimeZone Place<\/a> information via &#8220;the home of <a target=_blank title='Home of PHP' href='http:\/\/php.net\/'>PHP<\/a>&#8220;, thanks<\/li>\n<li><a onclick=' aclick=true; ' id=awiki target=_blank title='Wikipedia' href='https:\/\/wikipedia.org'>Wikipedia<\/a> image URLs, thanks<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>Please feel free to try out today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html\" title=\"Click picture\">Place Quiz<\/a> based on the HTML and Javascript (largely DOM) and CSS <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_more.html_GETME\" title=\"background_more.html_GETME\">background_more.html<\/a> source code for your perusal and, perhaps, download.<\/p>\n<hr>\n<p id='cipt'>Previous relevant <a target=_blank title='Column Intelligence Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-primer-tutorial\/'>Column Intelligence 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\/background_attachment.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interesting Places Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.jpg\" title=\"Column Intelligence Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Column Intelligence Primer Tutorial<\/p><\/div>\n<p>Newspapers work as a media source largely because of their column format.  It is no coincidence newspapers got this format, if you research <a target=_blank title='Typesetting information from Wikipedia, thanks' href='https:\/\/graphicdesign.stackexchange.com\/questions\/3553\/why-do-newspapers-use-multiple-columns'>typesetting<\/a>.<\/p>\n<p>In the online world, presentation formats have more possibilities and varieties than newspapers presented, but that doesn&#8217;t mean &#8220;newspaper column&#8221; or &#8220;newspaper column <i>with intelligence<\/i>&#8221; can&#8217;t be options for the design of online web pages.   Today, we tip our toes in the waters of this topic by creating an HTML and CSS and Javascript web application with &#8230;<\/p>\n<ul>\n<li>an HTML div element nesting &#8230;<\/li>\n<li>three HTML div elements placed to the left, in the middle, and to the right &#8230; our 3 (newspaper) columns &#8230; except that &#8230;<\/li>\n<\/ul>\n<p> &#8230; intelligence to scroll the (newspaper) column content made up of <\/p>\n<ol>\n<li>text &#8230; and &#8230;<\/li>\n<li>background image<\/li>\n<\/ol>\n<p> &#8230; is scrollable, relative to each other, in three different ways, namely &#8230;<\/p>\n<ul>\n<li>style=&#8221; <a target=_blank title='CSS background-attachment property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-attachment.asp'>background-attachment<\/a>: fixed; &#8221; &#8230; text, only, moves as you scroll, and the (first of the) background imagery&#8217;s top\/left is the web page&#8217;s top\/left<\/li>\n<li>style=&#8221; background-attachment: local; &#8221; &#8230; both, above, move together as you scroll &#8230; new with CSS3<\/li>\n<li>style=&#8221; background-attachment: scroll; &#8221; &#8230; text, only, moves as you scroll, and the (first of the) background imagery&#8217;s top\/left is the styled element&#8217;s top\/left<\/li>\n<\/ul>\n<p>You can try this out with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html\" title=\"Click picture\">live run<\/a> link that has underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html_GETME\" title=\"background_attachment.html\">background_attachment.html<\/a>.<\/p>\n<p><b><i>Did You Know?<\/i><\/b><\/p>\n<p>We&#8217;re having a purple patch regarding &#8220;old chestnut&#8221; cracking!  Today&#8217;s is that wish to apply opacity <i>just<\/i> to background image, but not the corresponding textual data (or other types) that is the primary content of that HTML element.   How to do?  Well, we were lucky enough to stumble upon the wonderful <b>additional styling<\/b> advice from this <a target=_blank title='Great link' href='https:\/\/stackoverflow.com\/questions\/7241341\/can-i-set-an-opacity-only-to-the-background-image-of-a-div'>stupendous webpage<\/a>, thanks, regarding the CSS styling (example) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#left { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: fixed; }<\/p>\n<p>#middle { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: local; }<\/p>\n<p>#right { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: scroll; }<br \/>\np { opacity: 1.0; }<br \/>\nh3 { opacity: 1.0; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/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='#d35811' onclick='var dv=document.getElementById(\"d35811\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35811' 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='#d36123' onclick='var dv=document.getElementById(\"d36123\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/opacity\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36123' 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='#d36146' onclick='var dv=document.getElementById(\"d36146\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36146' 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='#d36173' onclick='var dv=document.getElementById(\"d36173\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d36173' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As you might surmise from today&#8217;s blog posting title, there is a twofold purpose to a modified version of our &#8220;Place Quiz&#8221;, adding onto yesterday&#8217;s Place Quiz Hints Tutorial, those being &#8230; for non-mobile platforms, allow the user to not &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/place-quiz-keyboard-and-mobile-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,278,281,342,352,354,476,477,481,518,576,587,652,673,2126,795,876,894,2134,949,997,1022,1125,1693,1319],"class_list":["post-36173","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-cross-platform","tag-css","tag-div","tag-document-write","tag-dom","tag-game","tag-games-2","tag-geographicals","tag-google-chart","tag-html","tag-iframe","tag-javascript","tag-keyboard","tag-map-chart","tag-mobile","tag-opacity","tag-overlay","tag-place","tag-placenames","tag-programming","tag-quiz","tag-setinterval","tag-timezone","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36173"}],"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=36173"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36173\/revisions"}],"predecessor-version":[{"id":36206,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/36173\/revisions\/36206"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=36173"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=36173"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=36173"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}