{"id":28045,"date":"2017-02-07T03:01:24","date_gmt":"2017-02-06T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28045"},"modified":"2017-02-12T15:38:04","modified_gmt":"2017-02-12T05:38:04","slug":"learning-programming-short-quiz-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/learning-programming-short-quiz-tutorial\/","title":{"rendered":"Learning Programming Short Quiz Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/short_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Learning Programming Short Quiz Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/short_quiz.JPG\" title=\"Learning Programming Short Quiz Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Leaning Programming Short Quiz Tutorial<\/p><\/div>\n<p>Do you remember?<\/p>\n<ul>\n<li>client pre-emptive HTML iframe element ideas we&#8217;ve had at this blog<\/li>\n<li>the recent separated radio buttons work<\/li>\n<li>our Learning Programming web and mobile app written in PHP<\/li>\n<\/ul>\n<p>Even if &#8230; <font size=1>you didn&#8217;t want to <a target=_blank title='?' href='https:\/\/m.youtube.com\/watch?v=KUmZp8pR1uc'>go to rehab<\/a> either<\/font> &#8230; no, no, no &#8230; it&#8217;s easy to get up to speed.  Take a look at &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Client Pre-emotive HTML iframe element ideas in action' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/xml_to_html.html'>client pre-emptive HTML iframe element ideas<\/a> and techniques we used converting XML to HTML<\/li>\n<li><a target=_blank title='In between radio buttons' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/separated_radio.html'>separated radio buttons work<\/a> allows for lots of content between left floating radio buttons as discussed at <a title='Elevation Game Separated Radio Buttons Primer Tutorial' href='#egsrbpt'>Elevation Game Separated Radio Buttons Primer Tutorial<\/a><\/li>\n<li><a target=_blank title='Learning Programming' href='http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/?isMobile=n'>Learning Programming<\/a> is a quiz and game<\/li>\n<\/ul>\n<p> &#8230; and if you examine today&#8217;s <a target=_blank title='Short Quiz' href='http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/short_quiz.html'>Short Quiz<\/a> version of the more <i>&#8220;gamy&#8221;<\/i> Learning Programming app, written just in HTML and CSS and Javascript as per the code you could call <a target=_blank title='Short Quiz' href='http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/short_quiz.html_GETME'>short_quiz.html<\/a> you&#8217;ll see how the client pre-emptive HTML iframe approach allows for a client side solution to a problem that is a bit serverside, in that our quiz questions and answers and explanations are stored in flat files on a web server, but that the fact that we know &#8230;<\/p>\n<ol>\n<li>where they are<\/li>\n<li>what their filenames follow the pattern of ( ie. in PHP glob terms they are all at http:\/\/www.rjmprogramming.com.au\/Learning\/Programming\/ with the filespec Student_Question_*.q )<\/li>\n<li>what the numerical range &#8220;*&#8221; represents above<\/li>\n<\/ol>\n<p> &#8230; means that we can &#8220;swing it&#8221; just setting a question number in that range above and opening that file in an HTML iframe.  Now, in the past, we&#8217;ve mainly opened HTML files with this technique, but today we are opening text files and end up using &#8230;<\/p>\n<p><code>aconto.body.innerText<\/code><\/p>\n<p> &#8230; rather than the more usual <i>aconto.body.innerHTML<\/i> we&#8217;ve used more often in the past.  When the &#8220;aconto&#8221; HTML iframe document object is presented under the <i>guise<\/i> of the <i>innerText<\/i> property, the output is encased in a &lt;pre&gt; &#8230; &lt;\/pre&gt; HTML element, that we peel off as we store this question and answer and explanation data into a Javascript global variable that called into play similar data to what we constructed for the &#8220;separated radio buttons&#8221; work, but today that separated data is just the wording of the multiple choice options for the user to select from, to see whether they are correct.   If you are wrong, a Javascript alert box displays an explanation of the answer.  So, there you have a very pared down version of our Learning Programming app, but sharing the same content, so we locate the HTML where that Learning Programming code sits, as well &#8230; first draft.<\/p>\n<hr>\n<p id='egsrbpt'>Previous relevant <a target=_blank title='Elevation Game Separated Radio Buttons Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/elevation-game-separated-radio-buttons-prime-tutorial\/'>Elevation Game Separated Radio Buttons 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\/separated_radio.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Elevation Game Separated Radio Buttons Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/separated_radio.JPG\" title=\"Elevation Game Separated Radio Buttons Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Elevation Game Separated Radio Buttons Primer Tutorial<\/p><\/div>\n<p>If you were around for the recent <a title='Golden Ratio Game CSS Tutorial' href='#grgct'>Golden Ratio Game CSS Tutorial<\/a>, and tried out this game, was it in the back (or front) of your mind, that if it had been you writing the code you&#8217;d have preferred to use <i>input<\/i> type=<a target=_blank title='HTML input type=radio information from w3schools' href='http:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_radio'><i>radio<\/i><\/a> rather than type=<i>button<\/i> with those decision maker elements up the top?  Am sure there are a lot of people like you.  Today, we write a new game using HTML <i>input<\/i> type=<i>radio<\/i> elements, and we delve into the idea of a lot of HTML &#8220;plonked&#8221; in between.  Yes, those usual <i>label<\/i> tags can have a lot of Javascript DOM <i>innerHTML<\/i> &#8220;filling&#8221;, should you like to go down that path.  We like the idea because the radio buttons line up at the left and context lies under it.  This, we feel, is good for decision making.  It means if we start today&#8217;s game with its default <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/separated_radio.html'>live run<\/a> look, the decision is yet to be made by the user whether to pick a &#8230;<\/p>\n<ul>\n<li>Harder &#8230; or &#8230;<\/li>\n<li>Easier<\/li>\n<\/ul>\n<p> &#8230; mode of play for today&#8217;s HTML and Javascrript (DOM) &#8220;Elevation Game&#8221; where one unknown out of &#8230;<\/p>\n<ul>\n<li>Harder&#8217;s elevation, altitude, distance, height &#8230; or &#8230;<\/li>\n<li>Easier&#8217;s elevation, altitude, distance<\/li>\n<\/ul>\n<p> &#8230; is what the user solves for, and we can, with &#8220;separated&#8221; radio buttons, place in a diagram we&#8217;ve constructed to explain the situation to the user.<\/p>\n<p>We hope you enjoy the <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/separated_radio.html'>game<\/a> whose HTML and Javascript code you could call  <a target=_blank title='separated_radio.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/separated_radio.html_GETME'>separated_radio.html<\/a> as you see fit.<\/p>\n<hr>\n<p id='grgct'>Previous relevant <a target=_blank title='Golden Ratio Game CSS Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/golden-ratio-game-css-tutorial\/'>Golden Ratio Game CSS 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\/golden_ratio_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Golden Ratio Game CSS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game_difficulty.JPG\" title=\"Golden Ratio Game CSS Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Golden Ratio Game CSS Tutorial<\/p><\/div>\n<p>We wanted to add some styling to improve on our Golden Ratio Game we started yesterday with our <a title='Golden Ratio Game Primer Tutorial' href='#grgpt'>Golden Ratio Primer Tutorial<\/a>.  These styling improvements relate to us wanting to add a Degree of Difficulty mode of play for the game, because we see that there is scope to &#8230;<\/p>\n<ul>\n<li>make the answer terribly predictable for the whole game<\/li>\n<li>make the rectangles more or less similar in their dimensions approximating the Golden Ratio dimensions<\/li>\n<li>rotate the rectangles and introduce overlaying and non-even display conditions, for obfuscation purposes<\/li>\n<\/ul>\n<p>  &#8230; which allows for scope for some differentiation with the scoring in the game, in that the harder modes of use score more points per correct choice.<\/p>\n<p>Also wanted to introduce a nuanced 3D look to the HTML div elements that are the rectangles in the game.  We found an excellent website <a target=_blank title='Useful website' href='http:\/\/stackoverflow.com\/questions\/33203148\/how-to-make-a-div-box-look-3d\/33203203#33203203'>here<\/a> to help with achieving this with a shadow box and some border effects.<\/p>\n<p>And we add more (of our favourite) CSS <i>backgroundColor<\/i> effects to help section off parts of the game display from others.<\/p>\n<p>As far as the the HTML div element rotations go in that &#8220;Hardest&#8221; level of difficulty (mode of play) we, perhaps, could have arranged a CSS way of doing this, by the same &#8230;<\/p>\n<p><code>location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&difficulty=' + this.value;<\/code><\/p>\n<p> &#8230; HTML (select element) <i>difficulty<\/i> &#8220;dropdown&#8221; <i>onchange<\/i> event logic means of doing it, but today, as we&#8217;ve done before, at <a target=_blank title='Analogue Clock Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/analogue-clock-Primer-Tutorial\/'>Analogue Clock Primer Tutorial<\/a>, we&#8217;ve dynamically arranged the three HTML div elements to get three Javascript DOM arranged rotations, as each new set of 3 rectangles is displayed.  See that previous link for the basis of the code used to do this.<\/p>\n<p>So that leaves us with the HTML and Javascript and CSS <a target=_blank title='golden_ratio_game.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.html-GETME'>golden_ratio_game.html<\/a> is associated with this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.html'>live run<\/a> link, and which changed in <a target=_blank title='golden_ratio_game.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.html-GETME'>this way<\/a>.   We hope you try out the game, enjoy it, and perhaps use it as the launching pad for ideas of your own.<\/p>\n<hr>\n<p id='grgpt'>Previous relevant <a target=_blank title='Golden Ratio Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/golden-Ratio-game-primer-Tutorial\/'>Golden Ratio 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\/golden_ratio_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Golden Ratio Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.JPG\" title=\"Golden Ratio Game Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Golden Ratio Game Primer Tutorial<\/p><\/div>\n<p>Today we have a Golden Ratio Game for you.  In mathematics and architectural design, there is a ratio of rectangular dimensions that appeals to the human pysche, and this magical irrational number, close to &#8230;<\/p>\n<p><code>1.6180339887<\/code><\/p>\n<p> &#8230; we gleaned from Wikipedia&#8217;s <a target=_blank title='Golden Ratio information from Wikipedia ... thanks' href='https:\/\/en.m.wikipedia.org\/wiki\/Golden_ratio'>Golden Ratio<\/a> webpage, so, thanks.<\/p>\n<p>These Golden Ratio proportions are no mathematical accident, and you should read more at that Wikipedia link above, which, in summary, tells us that that irrational number above equates to &#8230;<\/p>\n<p><code>(1 + \u221a5) \/ 2<\/code><\/p>\n<p>The code today is HTML with some Javascript DOM workings could be called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.html_GETME\" title=\"golden_ratio_game.html\">golden_ratio_game.html<\/a> And you can try it out with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/golden_ratio_game.html\" title=\"Click picture\">live run<\/a> link, and see whether you can pick what appeals to so many others.  As with many games, it features lots of calls such as &#8230;<br \/>\n<code><br \/>\ncolis[0]=bcols[<a target=_blank title='Math.floor information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>(<a target=_blank title='Math.random information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random<\/a>() * bcols.length)];<br \/>\n<\/code><\/p>\n<p> &#8230; to add that element of randomosity to your web application games.<\/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='#d27860' onclick='var dv=document.getElementById(\"d27860\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27860' 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='#d27896' onclick='var dv=document.getElementById(\"d27896\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27896' 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='#d27914' onclick='var dv=document.getElementById(\"d27914\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/radio\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27914' 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='#d28045' onclick='var dv=document.getElementById(\"d28045\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28045' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you remember? client pre-emptive HTML iframe element ideas we&#8217;ve had at this blog the recent separated radio buttons work our Learning Programming web and mobile app written in PHP Even if &#8230; you didn&#8217;t want to go to rehab &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/learning-programming-short-quiz-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,15,37],"tags":[418,2137,476,477,576,587,652,997,1022,1319,1411],"class_list":["post-28045","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-file","tag-flat-file","tag-game","tag-games-2","tag-html","tag-iframe","tag-javascript","tag-programming","tag-quiz","tag-tutorial","tag-web-server"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28045"}],"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=28045"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28045\/revisions"}],"predecessor-version":[{"id":28072,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28045\/revisions\/28072"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}