{"id":19794,"date":"2016-01-28T03:01:10","date_gmt":"2016-01-27T17:01:10","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19794"},"modified":"2016-01-30T09:52:50","modified_gmt":"2016-01-29T23:52:50","slug":"htmljavascript-maths-mystery-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-maths-mystery-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Maths Mystery Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_mystery.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Maths Mystery Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_mystery.jpg\" title=\"HTML\/Javascript Maths Mystery Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Maths Mystery Game Primer Tutorial<\/p><\/div>\n<p>A way into an interest in mathematics is an interest in numbers and patterns of numbers.<\/p>\n<p>With today&#8217;s mathematics game we hope you find wonder in a pattern of arithmetic that works for the vast majority of three digit numbers you can think of (and maybe the ones you can&#8217;t think of just now).<\/p>\n<p>Sounds a simple concept?  Yes, on paper, yes.  But there are three interesting issues &#8230;<\/p>\n<ul>\n<li>how do you keep any semblance of suspense for a new user answering their first set of instructions (that, if completed correctly, earn you a point &#8230; now don&#8217;t say this blog doesn&#8217;t give you anything?!  <font size=1>&#8220;Hey Mac, Your blog doesn&#8217;t give me anything?!<\/font> <a target=_blank title='I asked you not to tell me that' href='https:\/\/www.youtube.com\/playlist?list=PL2E96347D3783C704'>I asked you not to tell me that<\/a>.)?<br \/>\n<blockquote><p>\nWe work it today with an HTML table that starts with 2 <i>tr<\/i> rows, the top with <i>th<\/i> instructions, and a second row available for user interaction. <br \/>\nNow (on the first go both the first row and) that second row is revealed one <i>td<\/i> cell at a time, in a four part (or cell) &#8220;reveal&#8221; &#8230; yes, this is a <a target=_blank title='Reveal theme at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal&#8221;<\/a> scenario. <br \/>\nSo the &#8220;reveal&#8221; on the top row <i>th<\/i> cells is achieved by Javascript DOM by filling in the innerHTML property for the cell.<br \/>\nThe &#8220;reveal&#8221; on the second user interaction row of cells is achieved by setting the <i>td<\/i>&#8216;s <a target=_blank title='HTML element style.display Javascript DOM property' href='http:\/\/www.w3schools.com\/cssref\/pr_class_display.asp'><i>style.display<\/i><\/a> property to <i>table-cell<\/i> (we finally figured, after a bit of lack of success with other <i>style.display<\/i> options) going left to right across the webpage.\n<\/p><\/blockquote>\n<\/li>\n<li>there is a restriction on what is allowed as a character or set of 3 numbers that serve as the &#8220;seed&#8221; for the user playing the game &#8230; so how is this achieved?<br \/>\n<blockquote><p>\nWe use the HTML\/Javascript events <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeyup<\/i><\/a> and <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onkeydown<\/i><\/a> to check on a character and perhaps reject it, and further check if the 3 characters that form a number are legitimate, so that the &#8220;reveal&#8221; of <i>td<\/i> cell two can take place.\n<\/p><\/blockquote>\n<p><!--li>how do you allow for flexibility with answers?\n\n\n<blockquote>\nTry to get question and answer into a situation where you can traverse the answer over its bits between \"+\" or \"-\", then add back in the appropriate prefix of \"+\" or \"-\" before attempting to remove this string from the question (variable copy), and if the answer is right (and you need to be careful if the user says stuff like <i>\" ... +0xy ... \"<\/i>) you will have nothing important left in this manipulated question (variable copy).<\/p>\n\n\n<\/blockquote>\n\n\n<\/li-->\n<li>how do you add a new user interaction row for the user to have another go, as it is pretty important with today&#8217;s game to see a number pattern?<br \/>\n<blockquote><p>\nWe use a lot of Javascript DOM and need IDs to stay the same to have the Javascript code be available for reuse, so, at <i>body<\/i> <a target=_blank title='Events information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_eventattributes.asp'><i>onload<\/i><\/a> event remember how the first second row looked in a Javascript global var<font size=1>iable<\/font> called <i>trtemplate<\/i> (you&#8217;ll see being accessed later, in code below).  Now, as a question reaches completion make the just completed <i>tr<\/i> row&#8217;s innerHTML be of the form &lt;td&gt;Just wording for 1 of 4&lt;\/td&gt;&lt;td&gt;Just wording for 2 of 4&lt;\/td&gt;&lt;td&gt;Just wording for 3 of 4&lt;\/td&gt;&lt;td&gt;Just wording for 4 of 4&lt;\/td&gt; so that no IDs are specified, nor needed, and to add a new row, append to the <i>tbody<\/i> via &#8230;<br \/>\n<code><br \/>\ndocument.getElementById('mytbody').innerHTML+='&lt;tr id=\"tr' + rownum + '\"&gt;' + trtemplate + '&lt;\/tr&gt;';<br \/>\n<\/code>\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>And what created the interest for this web application?  Please don&#8217;t look now if you haven&#8217;t played the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_mystery.html\" title='click picture'>game<\/a> yet but, the <a target=_blank title='Maths is Fun' href='https:\/\/www.mathsisfun.com\/1089.html'>Maths is Fun<\/a> website we think is wonderful here, as it is for so many mathematical subjects for school students, in particular.<\/p>\n<p>So please try examining the HTML and Javascript programming source code, for the game, you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_mystery.html_GETME\" title=\"maths_mystery.html\">maths_mystery.html<\/a> and test it for yourself with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_mystery.html\" title='click picture'>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='#19794' onclick='var dv=document.getElementById(\"d19794\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19794' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A way into an interest in mathematics is an interest in numbers and patterns of numbers. With today&#8217;s mathematics game we hope you find wonder in a pattern of arithmetic that works for the vast majority of three digit numbers &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-maths-mystery-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,15,37],"tags":[354,400,476,477,576,652,752,1523,997,1063,1319],"class_list":["post-19794","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-dom","tag-event","tag-game","tag-games-2","tag-html","tag-javascript","tag-mathematics","tag-numbers","tag-programming","tag-reveal","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19794"}],"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=19794"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19794\/revisions"}],"predecessor-version":[{"id":19842,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19794\/revisions\/19842"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}