{"id":27914,"date":"2017-02-03T03:01:27","date_gmt":"2017-02-02T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27914"},"modified":"2017-02-01T19:54:20","modified_gmt":"2017-02-01T09:54:20","slug":"elevation-game-separated-radio-buttons-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/elevation-game-separated-radio-buttons-primer-tutorial\/","title":{"rendered":"Elevation Game Separated Radio Buttons Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>If you were around for the recent Golden Ratio Game CSS Tutorial, 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 &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/elevation-game-separated-radio-buttons-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,15,37],"tags":[174,476,477,576,652,997,1597,1024,1319],"class_list":["post-27914","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-tutorials","tag-button","tag-game","tag-games-2","tag-html","tag-javascript","tag-programming","tag-radio","tag-radio-button","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27914"}],"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=27914"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27914\/revisions"}],"predecessor-version":[{"id":27940,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27914\/revisions\/27940"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}