{"id":21641,"date":"2016-04-30T03:01:58","date_gmt":"2016-04-29T17:01:58","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=21641"},"modified":"2016-04-30T10:00:13","modified_gmt":"2016-04-30T00:00:13","slug":"htmljavascript-odd-one-out-button-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-odd-one-out-button-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Odd One Out Button Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/odd_one_out.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Odd One Out Button Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/odd_one_out.jpg\" title=\"HTML\/Javascript Odd One Out Button Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Odd One Out Button Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got a really simple HTML and Javascript game for you today.  Tend to think the simplest &#8220;game&#8221; concepts involve those that just involve pressing a button &#8230; it&#8217;s primal, <strike>man<\/strike> person.  And so, because it involves just this, essentially, we offer a dual mode scoring mechanism &#8230;<\/p>\n<ol>\n<li>the usual one point for one correct answer &#8230; or &#8230;<\/li>\n<li>a weighted &#8220;one point for one correct answer&#8221; depending on how fast you answer<\/li>\n<\/ol>\n<p> &#8230; the setting for which comes from an HTML select &#8220;dropdown&#8221; element.<\/p>\n<p>The Javascript DOM uses lots of code like &#8230;<\/p>\n<p><code><br \/>\n   orderpick = <a target=_blank title='Javascript Math.floor method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_floor.asp'>Math.floor<\/a>((<a target=_blank title='Javascript Math.random method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_random.asp'>Math.random<\/a>()*(words.length))+0);<br \/>\n<\/code><\/p>\n<p> &#8230; which, in layman&#8217;s terms, &#8220;takes an array called <i>words<\/i> and randomly picks a value with equal weight given to each member&#8217;s chances&#8221;.<\/p>\n<p>Game coding in Javascript and in other computing languages relies on function&#8217;s like Javascript&#8217;s &#8220;Math.random()&#8221; to try to make computers act like people &#8230; be random &#8230; chortle, chortle.<\/p>\n<p>We use an HTML table element to house the three button choices of our &#8220;Odd One Out&#8221; game today because we just find it the easiest way to keep things in columns, but you could use HTML div elements, and you&#8217;ll find a lot of advice going that way around the &#8220;net&#8221;.  But I&#8217;m, personally, working on the butterflies, particularly those in Brazil, who seem to be coming around to my way of thinking &#8230; but we digress.<\/p>\n<p>As mentioned earlier &#8230; &#8220;we&#8217;ve got a really simple HTML and Javascript game for you today&#8221; &#8230; the very fact that it is HTML and Javascript inherently means it has some weaknesses regarding the possibilities for users to be spoilsports and find the answers ahead of time.  Perhaps you are doing that now?!  It&#8217;s up to you whether you decide to involve a functionality like &#8220;Ajax jQuery&#8221; (we talked about with <a target=_blank title='Ajax jQuery Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-jquery-primer-tutorial\/'>Ajax jQuery Primer Tutorial<\/a>) or bring in a server side language like PHP (or ASP.Net) to &#8220;keep things tight&#8221; this way.  If we decide, on this game, to &#8220;keep things tight&#8221; we&#8217;ll add to this game&#8217;s tutorial &#8220;thread&#8221;.<\/p>\n<p>But for now we hope you get something out of studying the HTML and Javascript programming source code you could call <a target=_blank title='odd_one_out.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/odd_one_out.html_GETME'>odd_one_out.html<\/a> with this <a target=_blank title='odd_one_out.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/odd_one_out.html'>live run<\/a> link.<\/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='#21641' onclick='var dv=document.getElementById(\"d21641\"); 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='d21641' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve got a really simple HTML and Javascript game for you today. Tend to think the simplest &#8220;game&#8221; concepts involve those that just involve pressing a button &#8230; it&#8217;s primal, man person. And so, because it involves just this, essentially, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-odd-one-out-button-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,15,37],"tags":[174,476,477,576,652,997,1319],"class_list":["post-21641","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-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21641"}],"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=21641"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21641\/revisions"}],"predecessor-version":[{"id":21653,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/21641\/revisions\/21653"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=21641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=21641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=21641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}