{"id":45663,"date":"2019-07-21T03:01:12","date_gmt":"2019-07-20T17:01:12","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45663"},"modified":"2019-07-21T12:30:39","modified_gmt":"2019-07-21T02:30:39","slug":"maths-symbology-via-new-window-local-font-memory-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/maths-symbology-via-new-window-local-font-memory-tutorial\/","title":{"rendered":"Maths Symbology via New Window Local Font Memory Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Maths Symbology via New Window Local Font Memory Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ignore_and_open.jpg\" title=\"Maths Symbology via New Window Local Font Memory Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Maths Symbology via New Window Local Font Memory Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Maths Symbology via New Window Local Font Tutorial' href='#msnwlft'>Maths Symbology via New Window Local Font Tutorial<\/a>&#8216;s involvement of two quite big web applications is too resource hungry memory wise for all occasions and platforms, and today, we start down the road to optimise and prune functionality.  And we try to cater for popup windows not working.<\/p>\n<p>This happens, and there&#8217;s more to do, because image data is stored as data URIs (which are big) and also on canvas (presumably in at least as sizeable a data URI density), and in several places transferring between web applications.<\/p>\n<p>And how do we give an alternative to a popup window?   Settle for, for now, reduced functionality in an HTML iframe where we&#8217;ll need to also look into getting back &#8220;discrete click&#8221; functionality by coding for a fourth layer scenario.<\/p>\n<p>And so, the code changes today involved &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html----GETME\">talk_maths.html<\/a> (with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html\" title=\"Click picture\">live run<\/a> link) &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html---------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html---------GETME\">under_local_font.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-------------GETME\">HTML changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.html-------------GETME\">signature_signature.html<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------------------------GETME\">Javascript changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/signature_signature.js---------------------------------------GETME\">signature_signature.js<\/a><\/li>\n<\/ul>\n<p>Hope you hang around as our journey continues.<\/p>\n<hr>\n<p id='msnwlft'>Previous relevant <a target=_blank title='Maths Symbology via New Window Local Font Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/maths-symbology-via-new-window-local-font-tutorial\/'>Maths Symbology via New Window Local Font 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\/talk_maths.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Maths Symbology via New Window Local Font Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_stuff_lf_nwin.jpg\" title=\"Maths Symbology via New Window Local Font Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Maths Symbology via New Window Local Font Tutorial<\/p><\/div>\n<p>The Javascript DOM communicators of yesterday&#8217;s <a title='Maths Symbology via Div Local Font Tutorial' href='#msdlft'>Maths Symbology via Div Local Font Tutorial<\/a> were, in large part, using &#8230;<\/p>\n<ul>\n<li>parent webpage window &#8230; and &#8230;<\/li>\n<li>child HTML iframe element<\/li>\n<\/ul>\n<p> &#8230; communication conduits between web applications.  But today we introduce another idea, the implication of a Javascript codeline such as &#8230;<\/p>\n<p><code><br \/>\n var wois=<a target=_blank href='http:\/\/www.w3schools.com\/jsref\/met_win_open.asp' title='window.open information from w3schools'>window.open<\/a>('.\/under_local_font.html?allowwo=' + Math.floor(Math.random() * 196745323) + midbit,'_blank');<br \/>\n<\/code>    <\/p>\n<p> &#8230; though opening a webpage in a new window, still thought of as a popup window, and so (var) <i>wois<\/i> will be null if a web browser popup blocker intervenes.  Nonetheless, if you get past that the new communication conduit works it with &#8230;<\/p>\n<ul>\n<li>parent webpage window (or &#8220;caller&#8221;) &#8230; and &#8230;<\/li>\n<li>child popup window (or &#8220;called&#8221;) (that can see back to its caller via <a target=_blank title='window.opener information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_opener.asp'><i>window.opener<\/i><\/a> property)<\/li>\n<\/ul>\n<p>What&#8217;s any advantage of this approach?  Well, it&#8217;s a way to keep all the webpage window parties involved as being top.document to their inheritors, which, as we explained yesterday, can simplify Javascript logic considerably.  You know where you stand.  <font size=1>Do you like my slippers?!<\/font><\/p>\n<p>Today&#8217;s &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html---GETME\">talk_maths.html<\/a> (with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html\" title=\"Click picture\">live run<\/a> link) &#8230; and &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html--------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html--------GETME\">under_local_font.html<\/a><\/li>\n<\/ul>\n<p> &#8230; can form, respectively, the components of such a relationship when the user wants to dynamically create and use Local Font characters to map to ascii characters, and not necessarily Save any such Local Font character sets.  These Local Font characters, via clicks or touches of the created Local Font character images can even transfer these images over to the other (or same) web browser &#8220;parent&#8221; Maths Symbology window and its (textarea looking) div contenteditable=true display.<\/p>\n<p>An interesting alternative technique would be to use <a target=_blank title='Window.postMessage method information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/postMessage'><i>window.postMessage<\/i><\/a> techniques.  We hope this is of interest to you.<\/p>\n<hr>\n<p id='msdlft'>Previous relevant <a target=_blank title='Maths Symbology via Div Local Font Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/maths-symbology-via-div-local-font-tutorial\/'>Maths Symbology via Div Local Font 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\/talk_maths.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Maths Symbology via Div Local Font Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_stuff_lf.jpg\" title=\"Maths Symbology via Div Local Font Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Maths Symbology via Div Local Font Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/local-fonts-revisited-middle-tutorial\/' title='Local Fonts Revisited Middle Tutorial'>Local Fonts Revisited Middle Tutorial<\/a> &#8220;Local Font&#8221; functionality teams up with the progress from the previous <a title='Maths Symbology via Div Primer Tutorial' href='#msdpt'>Maths Symbology via Div Primer Tutorial<\/a> to combine with today&#8217;s extension of functionality, allowing for a Local Font interface, optionally.<\/p>\n<p>To make this integration we wondered whether we could &#8230;<\/p>\n<ul>\n<li>add the Maths Symbology web application as a layer on top of the Local Font 3-tier arrangement &#8230; found issues because that redefines (Javascript DOM) top.document &#8230; so rethought it so that &#8230;<\/li>\n<li>slot the Maths Symbology so as to imbue itself as a <a target='_blank' title='?' href='https:\/\/www.youtube.com\/watch?v=aZbhrO4IEtI'>second &#8220;parent&#8221;<\/a> in the Local Font &#8220;grandparent&#8221; &#8220;parent(s)&#8221; &#8220;grandchild&#8221; hierarchy &#8230; and how do we achieve this?\n<ol>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html--GETME\">talk_maths.html<\/a>&#8216;s <i>onload<\/i> logic <font color=blue>change<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;body onload=\"<font color=blue>if (parent.document == document || !parent.document) { top.location.href='.\/under_local_font.html?helpout=talk_maths.html';  } setTimeout(kutd, 1000);<\/font> interpret();\"&gt;<br \/>\n<\/code><br \/>\n &#8230; redirects to the Local Fonts web application if a default web browser address bar &#8230; and &#8230;\n<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html-------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/under_local_font.html-------GETME\">under_local_font.html<\/a>&#8216;s existant document.body.innerHTML is nested by &#8230;<br \/>\n<code><br \/>\n&lt;table style='width:100%;';&gt;&lt;tr&gt;&lt;td id=left&gt;&lt;script type='text\/javascript'&gt; var helpout=(location.search.split('helpout=')[1] ? (decodeURIComponent(location.search.split('helpout=')[1]).split('&')[0]) : ''); if (helpout != '') { setTimeout(noright, 1000);  document.getElementById('left').style.width='90%'; document.write(\"&lt;iframe src='\" + helpout + \"' style='width:100%;height:100vh;'&gt;&lt;\/iframe&gt;\"); } &lt;\/script&gt;&lt;\/td&gt;&lt;td id=right&gt;<br \/>\n<\/code><br \/>\n &#8230; up the top &#8230; and &#8230;<br \/>\n<code><br \/>\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<br \/>\n<\/code><br \/>\n &#8230; down the bottom, directed to shift its normal content over to the right (and eventually disappearing, after passing data back to the Maths Symbology web application before that) to make way for the Maths Symbology web application at the left hand cell of the HTML table element above\n<\/li>\n<\/ol>\n<p> &#8230; bypassing the top.document redefinition (and so any integration hassles in that regard)\n<\/li>\n<\/ul>\n<p>As you might imagine, once these communications are sorted out, and any Local Font image data passed across, then we need to allow for this optional functionality to be user selectable (in a select &#8220;dropdown&#8221; element), as required.<\/p>\n<p>Please feel free to try the new <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html\" title=\"Click picture\">live run<\/a> link to try this new arrangement for yourself.<\/p>\n<hr>\n<p id='msdpt'>Previous relevant <a target=_blank title='Maths Symbology via Div Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/maths-symbology-via-div-primer-tutorial\/'>Maths Symbology via Div 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\/talk_maths.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Maths Symbology via Div Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_stuff.jpg\" title=\"Maths Symbology via Div Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Maths Symbology via Div Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long been interested by &#8230;<\/p>\n<ul>\n<li>HTML and Javascript and CSS web applications &#8230; that can &#8230;<\/li>\n<li>display Mathematical symbology &#8230; and be capable of &#8230;<\/li>\n<li>some sharing capabilities<\/li>\n<\/ul>\n<p>So, in a similar line of thinking to <a title='HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial' href='#html\/jbmgjt'>HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial<\/a> we&#8217;re harnessing &#8230;<\/p>\n<ul>\n<li>HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true &#8230; and its &#8230;<\/li>\n<li>onchange and onblur value change events &#8230; as well as &#8230;<\/li>\n<li>onkeypress keyboard event (purely for a time when to intervene) &#8230; we allow for &#8230;<\/li>\n<li>display controllables are &#8230;\n<ol>\n<li>content symbology helper inspired by W3school&#8217;s <a target=_blank title='W3schools help, thanks' href='\/\/www.w3schools.com\/charsets\/ref_utf_math.asp'>https:\/\/www.w3schools.com\/charsets\/ref_utf_math.asp<\/a> (thanks) &#8230; and &#8230;<\/li>\n<li>content superscript and normal and subscript modes of placement &#8230; and &#8230;<\/li>\n<li>font colour<\/li>\n<li>background colour<\/li>\n<li>font size<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; we start down our road of discovery.<\/p>\n<p>At this early &#8220;proof of concept&#8221; stage we have a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html-GETME\" title=\"talk_maths.html\">talk_maths.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/talk_maths.html\" title=\"Click picture\">live run<\/a> link for you to explore with, or take a look at our <a target=_blank title='' href='https:\/\/www.vivaxsolutions.com\/maths\/albscintgrtn.aspx'>Vivax Solutions webpage<\/a> (thanks) inspired <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/maths_stuff.jpg\" title=\"Tutorial picture\">tutorial picture<\/a> for today.<\/p>\n<hr>\n<p id='html\/jbmgjt'>Previous relevant <a target=_blank title='HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-binomial-multiplication-game-jeopardy-tutorial\/'>HTML\/Javascript Binomial Multiplication Game Jeopardy 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\/multiplying_binomials.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/binomial_multiplying.jpg\" title=\"HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial<\/p><\/div>\n<p>Today, as with WordPress 4.1.1&#8217;s <a target=_blank title='HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binomial-multiplication-game-jeopardy-tutorial\/'>HTML\/Javascript Binomial Multiplication Game Jeopardy Tutorial<\/a>, we add a <a target=_blank title='Answer the question' href='https:\/\/en.wikipedia.org\/wiki\/Jeopardy!'>Double Jeopardy<\/a> (aka the game, not so much the movie) clause to our <a target=_blank title='HTML\/Javascript Binomial Multiplication Game Primer Tutorial' href='#hjbmgpt'>HTML\/Javascript Binomial Multiplication Game Primer Tutorial<\/a> starting game from a couple of days ago.<\/p>\n<p>So we now have four modes of game usage &#8230;<\/p>\n<ul>\n<li>Multiplying Binomials (with Trinomials)<\/li>\n<li><i>Double Jeopardy<\/i> Binomials (with Trinomials) (ie. you supply either one of the two questions that would suit the answers shown)<\/li>\n<li>Expanding to Quadratic Equations<\/li>\n<li><i>Double Jeopardy<\/i> Quadratic Equations (ie. you supply either one of the two questions that would suit the answers shown)<\/li>\n<\/ul>\n<p>This adds a lot of new mathematics functionality to the game, just building on those HTML and Javascript ideas from a couple of days ago.<\/p>\n<p>If you like practising your algebra maybe you should try, and hope you enjoy, the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiplying_binomials.htm\" title='click picture'>game<\/a> and\/or look at the HTML\/Javascript programming source code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiplying_binomials.html_GETME\" title=\"multiplying_binomials.html-GETME\">multiplying_binomials.html<\/a> and which changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiplying_binomials.html_GETME\" title=\"multiplying_binomials.html\">multiplying_binomials.html<\/a>in this way<\/a>.<\/p>\n<hr>\n<p id='hjbmgpt'>Previous relevant <a target=_blank title='HTML\/Javascript Binomial Multiplication Game Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-binomial-multiplication-game-primer-tutorial\/'>HTML\/Javascript Binomial Multiplication 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\/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='#d8609' 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='#d19779' 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<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='#d19779' onclick='var dv=document.getElementById(\"d19779\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&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<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='#d45624' onclick='var dv=document.getElementById(\"d45624\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/symbol\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45624' 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='#d45648' onclick='var dv=document.getElementById(\"d45648\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/integration\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45648' 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='#d45657' onclick='var dv=document.getElementById(\"d45657\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/window.open\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45657' 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='#d45663' onclick='var dv=document.getElementById(\"d45663\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/memory\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45663' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Maths Symbology via New Window Local Font Tutorial&#8216;s involvement of two quite big web applications is too resource hungry memory wise for all occasions and platforms, and today, we start down the road to optimise and prune functionality. And &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/maths-symbology-via-new-window-local-font-memory-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,37],"tags":[224,1709,2442,281,342,354,451,577,587,614,652,2995,752,3004,767,967,2227,997,3011,1168,3006,3005,1789,1254,1319,1404,1418,1583,1433,3010,1994],"class_list":["post-45663","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-colour","tag-communication","tag-contenteditable","tag-css","tag-div","tag-dom","tag-font","tag-html-entities","tag-iframe","tag-integration","tag-javascript","tag-local-font","tag-mathematics","tag-maths","tag-memory","tag-popup","tag-postmessage","tag-programming","tag-resources","tag-software-integration","tag-subscript","tag-superscript","tag-symbol","tag-text","tag-tutorial","tag-web-browser","tag-webpage","tag-window","tag-window-open","tag-window-opener","tag-window-postmessage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45663"}],"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=45663"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45663\/revisions"}],"predecessor-version":[{"id":45671,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45663\/revisions\/45671"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45663"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45663"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45663"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}