{"id":19779,"date":"2016-01-27T03:01:30","date_gmt":"2016-01-26T17:01:30","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19779"},"modified":"2016-01-26T19:46:55","modified_gmt":"2016-01-26T09:46:55","slug":"htmljavascript-binomial-multiplication-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binomial-multiplication-game-primer-tutorial\/","title":{"rendered":"HTML\/Javascript Binomial Multiplication Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiplying_binomials.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Binomial Multiplication Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binomial_multiplying.jpg\" title=\"HTML\/Javascript Binomial Multiplication Game Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Binomial Multiplication Game Primer Tutorial<\/p><\/div>\n<p>We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you&#8217;d like to involve in the game, but find it unwieldy to do so.  Below we talked a bit about this with <a target=_blank title='HTML\/Javascript MathML Primer Tutorial' href='#hjmpt'>HTML\/Javascript MathML Primer Tutorial<\/a> as shown below.<\/p>\n<p>The use of <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_mathml.htm' title='MathML information'>MathML HTML tags<\/a> is a great idea for sure, but with our &#8220;Multiplying Binomials&#8221; mathematics game today, that we would like to <a target=_blank title='?' href='https:\/\/youtu.be\/8rXk8TDtu1M'>serve<\/a> up to you today, all we want is to represent the &#8220;to the power of 2&#8221; (ie: \u00b2) symbol, and the MathML solution feels like a bit of overkill &#8230; and so we thought about it a bit &#8230;<\/p>\n<ul>\n<li>you can&#8217;t use <a target=_blank title='HTML enties information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references'>HTML entities<\/a> in HTML <a target=_blank title='HTML input tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_input.asp'>input type=text<\/a> elements &#8230; so &#8230;<\/li>\n<li>nor can you use  &lt;sup&gt;2&lt;\/sup&gt; &#8230; unless you want to look kind of dumb &#8230; but &#8230;<\/li>\n<li>suppose you put in the header section (between  &lt;head&gt; and &lt;\/head&gt;) <i>&lt;meta charset=&#8221;UTF-8&#8243; \/&gt;<\/i> then we can assign a Javascript (global) var<font size=1>iable<\/font> to a copied and pasted \u00b2 found on the net somewhere, for instance &#8230; as in the code<br \/>\n<code><br \/>\nvar twosup=\"\u00b2\";<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; sounds promising as far as writing things onto the HTML input type=text element but what about the hassle for the user to have the control themselves interactively entering these \u00b2s.  Well, we can think of two useful (pragmatic) helper ideas here, they being &#8230;<\/p>\n<ul>\n<li>we know there are going to be two \u00b2s involved in any one Multiplying Binomials answer so why not initialize the value first presented in the HTML input type=text element&#8217;s value with 2 \u00b2s spread apart a little that the user can build on to build up their answer without having to worry about the keypad production of any \u00b2 &#8230; and &#8230;<\/li>\n<li>present a helper \u00b2 button that appends a \u00b2 at a time of the user&#8217;s choosing to the end of their Multiplying Binomials answer (separately for their Intermediate (show working) Answer and\/or their final Answer)<\/li>\n<\/ul>\n<p>We&#8217;ve used this game ourselves and found it reasonably easy to use, and it teaches you some mathematical patience to answer the Multiplying Binomials questions asked.<\/p>\n<p>And what created the interest for this web application?  The <a target=_blank title='Maths is Fun' href='https:\/\/www.mathsisfun.com\/algebra\/polynomials-multiplying.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\/multiplying_binomials.html_GETME\" title=\"multiplying_binomials.html\">multiplying_binomials.html<\/a> (and just see that the <i>var twosup=&#8221;\u00b2&#8221;;<\/i> line (and any other lines containing \u00b2) looks the way it should) and test it for yourself with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiplying_binomials.html\" title='click picture'>live run<\/a> link.<\/p>\n<hr>\n<p id='hjmpt'>Previous relevant <a target=_blank title='HTML\/Javascript MathML Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-mathml-primer-tutorial\/'>HTML\/Javascript MathML 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\/MathML\/\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript MathML Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MathML\/MathML_Primer.jpg\" title=\"HTML\/Javascript MathML Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript MathML Primer Tutorial<\/p><\/div>\n<p>The HTML5 specification allows for the use of mathematical symbology via <a target=_blank href='http:\/\/www.tutorialspoint.com\/html5\/html5_mathml.htm' title='MathML information'>MathML HTML tags<\/a>.<\/p>\n<p>The display of mathematical symbology was not so easy to achieve very easily with older versions of HTML, and MathML makes this a lot easier for web content creators.<\/p>\n<p>Today, with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MathML\/\" title='Click picture'>tutorial<\/a>, we show the use of MathML HTML tags to show operations on 2&#215;2 matrices (in fact the matrix is the same on either side of + &#8211; x and \/ operators).   Matrix mathematics can get hugely more complicated than in this primer tutorial, and should you want to study this further, and you are starting from scratch:<\/p>\n<ul>\n<li>stop scratching<\/li>\n<li>maybe start with a peruse of <a target=_blank title='Matrix information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Matrix_%28mathematics%29'>Wikipedia<\/a>, and then take it from there to other research<\/li>\n<li>link about matrix <a target=_blank title='Matrix inversion' href='http:\/\/www.mathwords.com\/i\/inverse_of_a_matrix.htm'>inversion<\/a><\/li>\n<\/ul>\n<p>Today we have HTML and Javascript programmable source code you could call <a target=_blank title='mathml_tutorial.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MathML\/mathml_tutorial.html_GETME'>mathml_tutorial.html<\/a> and here is its <a target=_blank title='mathml_tutorial.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MathML\/mathml_tutorial.html'>live run<\/a>.<\/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='#8609' onclick='var dv=document.getElementById(\"d8609\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d8609' 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='#19779' onclick='var dv=document.getElementById(\"d19779\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/utf-8\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19779' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We can probably all think of good mathematics games we could invent in a program, but when you sit down to program you can be put off by the mathematical symbols you&#8217;d like to involve in the game, but find &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binomial-multiplication-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,1,37],"tags":[476,477,576,577,652,752,997,1789,1319,1352],"class_list":["post-19779","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-uncategorised","category-tutorials","tag-game","tag-games-2","tag-html","tag-html-entities","tag-javascript","tag-mathematics","tag-programming","tag-symbol","tag-tutorial","tag-utf-8"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19779"}],"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=19779"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19779\/revisions"}],"predecessor-version":[{"id":19785,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19779\/revisions\/19785"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}