{"id":65812,"date":"2024-11-30T03:01:00","date_gmt":"2024-11-29T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65812"},"modified":"2024-12-01T12:41:46","modified_gmt":"2024-12-01T02:41:46","slug":"html-javascript-scratchpad-simultaneous-line-equations-hints-revisit-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-javascript-scratchpad-simultaneous-line-equations-hints-revisit-tutorial\/","title":{"rendered":"HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/s_l_e_hints.gif\" title=\"HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial<\/p><\/div>\n<p>One way a lot of us learn something new is to &#8230;<\/p>\n<ul>\n<li>have a way to an answer be modelled for us &#8230; then &#8230;<\/li>\n<li>perhaps, for a different problem presented, of the same ilk, we might need to model again, or have less modelling, or have no modelling needed at all &#8230; then &#8230;<\/li>\n<li>over time we might be able to solve this type of problem independently<\/li>\n<\/ul>\n<p> &#8230; that last step important when being examined on a topic.  We&#8217;re equating &#8220;modelling&#8221; with &#8220;hints&#8221; in our web application, where, today, further to yesterday&#8217;s <a title='HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial' href='#html\/jsslert'>HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial<\/a>, we&#8217;ve introduced a new emoji button &#129309; the user can click to receive a hint in their Javascript scratchpad used to code for a Simultaneous Linear Equation &#8220;intersection point&#8221; solution.<\/p>\n<p>There is a bit of a juggle trying to keep &#8220;various webpage players&#8221; above the fold, and for the first time we can remember we&#8217;re accessing the relevant element CSS <a target=\"_blank\" title='CSS vertical-align property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_pos_vertical-align.php' rel=\"noopener\"><i>vertical-align<\/i><\/a> property <font color=blue>in a Javascript DOM way<\/font>, as well as using the incredibly useful <font color=purple>[Element].<a target=\"_blank\" title='Element.scrollIntoView information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_scrollintoview.asp' rel=\"noopener\">scrollIntoView<\/a>()<\/font> there at one point &#8230;<\/p>\n<p><code><br \/>\nfunction yourhandhold() {<br \/>\n  var ik=-1;<br \/>\n  var tac=document.getElementById('tascratch').value;<br \/>\n  var newlines='';<br \/>\n  if (hhcnt == 0) {<br \/>\n     newlines+='&lt;br&gt; \/\/ Get first y isolated, by dividing both sides of equation by ' + your_y1 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;<br \/>\n     newlines+='&lt;br&gt; your_x1 = eval((' + your_x1 + ') \/ (' + your_y1 + ')); \/\/ ' + eval((your_x1) \/ (your_y1)) + '';<br \/>\n     newlines+='&lt;br&gt; your_f1 = eval((' + your_f1 + ') \/ (' + your_y1 + ')); \/\/ ' + eval((your_f1) \/ (your_y1)) + '';<br \/>\n     newlines+='&lt;br&gt; your_y1 = 1; \/\/ y = ' + eval((your_x1) \/ (your_y1)) + 'x + (' + eval((your_f1) \/ (your_y1)) + ') &lt;br&gt;&lt;br&gt; ';<br \/>\n     hiddenm=eval((your_x1) \/ (your_y1));<br \/>\n     hiddenf=eval((your_f1) \/ (your_y1));<br \/>\n     tac=tac.replace('\/\/ ... hopefully by here', newlines + '\/\/ ... hopefully by here');<br \/>\n     document.getElementById('tascratch').value=tac.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n     <font color=blue>document.getElementById('tdleft').style.verticalAlign='middle';<\/font><br \/>\n     hhcnt++;<br \/>\n     document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';<br \/>\n  } else if (hhcnt == 1) {<br \/>\n     newlines+='&lt;br&gt; \/\/ Get second y isolated, by dividing both sides of equation by ' + your_y2 + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;<br \/>\n     newlines+='&lt;br&gt; your_x2 = eval((' + your_x2 + ') \/ (' + your_y2 + ')); \/\/ ' + eval((your_x2) \/ (your_y2)) + '';<br \/>\n     newlines+='&lt;br&gt; your_f2 = eval((' + your_f2 + ') \/ (' + your_y2 + ')); \/\/ ' + eval((your_f2) \/ (your_y2)) + '';<br \/>\n     newlines+='&lt;br&gt; your_y2 = 1; \/\/ y = ' + eval((your_x2) \/ (your_y2)) + 'x + (' + eval((your_f2) \/ (your_y2)) + ') \/\/ ... meaning ... &lt;br&gt; \/\/ ' + eval((your_x1) \/ (your_y1)) + 'x + (' + eval((your_f1) \/ (your_y1)) + ') = ' + eval((your_x2) \/ (your_y2)) + 'x + (' + eval((your_f2) \/ (your_y2)) + ') &lt;br&gt;&lt;br&gt; ';<br \/>\n     tac=tac.replace('\/\/ ... hopefully by here', newlines + '\/\/ ... hopefully by here');<br \/>\n     document.getElementById('tascratch').value=tac.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n     <font color=blue>document.getElementById('tdleft').style.verticalAlign='bottom';<\/font><br \/>\n     hhcnt++;<br \/>\n     document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';<br \/>\n  } else if (hhcnt == 2) {<br \/>\n     newlines+='&lt;br&gt; \/\/ Gather x over on left ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;<br \/>\n     newlines+='&lt;br&gt; \/\/ ' + eval(eval((your_x1) \/ (your_y1)) - eval((your_x2) \/ (your_y2))) + 'x = (' + eval((your_f2) \/ (your_y2)) + ') - (' + eval((your_f1) \/ (your_y1)) + ') &lt;br&gt;&lt;br&gt; ';<br \/>\n     hiddend=eval(eval((your_x1) \/ (your_y1)) - eval((your_x2) \/ (your_y2)));<br \/>\n     tac=tac.replace('\/\/ ... hopefully by here', newlines + '\/\/ ... hopefully by here');<br \/>\n     document.getElementById('tascratch').value=tac.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n     hhcnt++;<br \/>\n     document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';<br \/>\n  } else if (hhcnt == 3) {<br \/>\n     newlines+='&lt;br&gt; \/\/ Isolate that x by dividing both sides by ' + hiddend + ' ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;<br \/>\n     newlines+='&lt;br&gt; \/\/ ' + 'x = (' + eval(eval(eval((your_f2) \/ (your_y2)) \/ hiddend) - eval(eval((your_f1) \/ (your_y1)) \/ hiddend)) + ') &lt;br&gt;&lt;br&gt; ';<br \/>\n     tac=tac.replace('\/\/ ... hopefully by here', newlines + '\/\/ ... hopefully by here');<br \/>\n     document.getElementById('tascratch').value=tac.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n     hiddenx=eval(eval(eval((your_f2) \/ (your_y2)) \/ hiddend) - eval(eval((your_f1) \/ (your_y1)) \/ hiddend));<br \/>\n     hhcnt++;<br \/>\n     document.getElementById('yourhh').title='Hint ' + eval(1 + hhcnt) + ' of up to 5';<br \/>\n  } else if (hhcnt == 4) {<br \/>\n     newlines+='&lt;br&gt; \/\/ Plug that x into either y (as isolated) equation ... ' + String.fromCodePoint(129309) + ' ' + document.getElementById('yourhh').title;<br \/>\n     newlines+='&lt;br&gt; \/\/ ' + 'y = (' + hiddenm + ' * (' + hiddenx + ')) + (' + hiddenf + ') ';<br \/>\n     newlines+='&lt;br&gt; \/\/ ' + 'y = (' + eval(hiddenf + eval(hiddenm * hiddenx)) + ') &lt;br&gt;&lt;br&gt; ';<br \/>\n     newlines+='&lt;br&gt; ' + 'thisxintercept = ' + hiddenx + '; ';<br \/>\n     newlines+='&lt;br&gt; ' + 'thisyintercept = ' + eval(hiddenf + eval(hiddenm * hiddenx)) + '; &lt;br&gt;&lt;br&gt; ';<br \/>\n     tac=tac.replace('\/\/ ... hopefully by here', newlines + '\/\/ ... hopefully by here');<br \/>\n     document.getElementById('tascratch').value=tac.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n     checkyours(); \/\/ document.getElementById('yourcheck').click();<br \/>\n     <font color=blue>document.getElementById('tdleft').style.verticalAlign='bottom';<\/font><br \/>\n     document.getElementById('s').click();<br \/>\n     hhcnt++;<br \/>\n     document.getElementById('tascratch').rows=eval(0 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));<br \/>\n  }<br \/>\n  <br \/>\n  if (ik &lt; 0) {<br \/>\n    document.getElementById('tascratch').rows=eval(1 + eval('' + document.getElementById('tascratch').value.split(String.fromCharCode(10)).length));<br \/>\n  }<br \/>\n  <br \/>\n  setTimeout(function(){ isokay=true; <font color=purple>document.getElementById('yourhh').scrollIntoView();<\/font> }, 2000);<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to try to help the user out a bit, here, as far as a User Experience goes, with <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html---GETME' title='simultaneous_linear.html' rel=\"noopener\">our changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html---GETME' title='simultaneous_linear.html' rel=\"noopener\">simultaneous_linear.html<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html' title='simultaneous_linear.html' rel=\"noopener\">Simultaneous Linear Equations<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-scratchpad-simultaneous-line-equations-hints-revisit-tutorial\/' rel=\"noopener\">HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jsslert'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-scratchpad-for-simultaneous-line-equations-revisit-tutorial\/' rel=\"noopener\">HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit 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\/simultaneous_linear.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/s_l_e_scratchpad.jpg\" title=\"HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial<\/p><\/div>\n<p>What yesterday&#8217;s <a title='HTML\/Javascript Simultaneous Line Equations Revisit Tutorial' href='#html\/jslert'>HTML\/Javascript Simultaneous Line Equations Revisit Tutorial<\/a> lacked, in our opinion, was a way in for the user to interact with it&#8217;s web application.  To add this new optional functionality might have a dual advantage &#8230;<\/p>\n<ul>\n<li>learn about Simultaneous Linear Equations in an interactive way, more likely to sink in and be remembered &#8230;<\/li>\n<li>study and create some Javascript coding<\/li>\n<\/ul>\n<p>This involves a user &#8230;<\/p>\n<ul>\n<li>using a suggested template &#8230;<br \/>\n<code><br \/>\nfunction beforepresolve() {<br \/>\n your_x1 = document.getElementById(\"x1\").value;<br \/>\n your_y1 = document.getElementById(\"y1\").value;<br \/>\n your_f1 = document.getElementById(\"f1\").value;<br \/>\n your_x2 = document.getElementById(\"x2\").value;<br \/>\n your_y2 = document.getElementById(\"y2\").value;<br \/>\n your_f2 = document.getElementById(\"f2\").value;<br \/>\n  s_w_big='function you_solve_equations() { &lt;br&gt;' + ' thisxintercept = 0; &lt;br&gt;' + ' thisyintercept = 0; &lt;br&gt;&lt;br&gt;' + ' your_y1 = ' + your_y1 + '; ';<br \/>\n  s_w_big+='&lt;br&gt;' + ' your_x1 = ' + your_x1 + '; ';<br \/>\n  s_w_big+='&lt;br&gt;' + ' your_f1 = ' + your_f1 + '; ';<br \/>\n  s_w_big+='&lt;br&gt;' + ' your_y2 = ' + your_y2 + '; ';<br \/>\n  s_w_big+='&lt;br&gt;' + ' your_x2 = ' + your_x2 + '; ';<br \/>\n  s_w_big+='&lt;br&gt;' + ' your_f2 = ' + your_f2 + '; ';<br \/>\n  <br \/>\n  s_w_big+='&lt;br&gt;&lt;br&gt; document.getElementById(\"yans\").placeholder=\"Intersection point is (0,0)\"; &lt;br&gt;&lt;br&gt; \/\/ So you have Javascript variables above to play around with (new ones prefix with \"var \") ... &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt; \/\/ ... hopefully by here you have calculated &lt;br&gt; \/\/ thisxintercept and thisyintercept to match the Solve click answer&lt;br&gt;&lt;br&gt; if (thisxintercept != 0 || thisyintercept != 0) { &lt;br&gt;  var myans=\"Intersection point is (\" + thisxintercept + \",\" + thisyintercept + \")\"; &lt;br&gt;  document.getElementById(\"yans\").value=myans;&lt;br&gt; } &lt;br&gt;';<br \/>\n  <br \/>\n  s_w_big+='&lt;br&gt;}&lt;br&gt;&lt;br&gt;you_solve_equations(); &lt;br&gt;';<br \/>\n  <br \/>\n  if (!document.getElementById('tascratch')) {<br \/>\n   document.getElementById('helpout').innerHTML='&lt;details&gt;&lt;summary&gt;Optionally try solving in Javascript scratchpad below ...&lt;\/summary&gt;&lt;textarea cols=95 id=tascratch&gt;' + s_w_big.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)) + '&lt;\/textarea&gt;&lt;br&gt;&lt;br&gt;&lt;button id=yourcheck onclick=checkyours(); style=background-color:lightgreen;&gt;Check Working Above ...&lt;\/button&gt;&nbsp;&nbsp;&lt;input id=yans type=text placeholder=\"Intersection point is (0,0)\" value=\"\" style=width:70%;&gt;&lt;\/input&gt;&lt;br&gt;&lt;\/details&gt;&lt;br&gt;';<br \/>\n  } else {<br \/>\n   document.getElementById('tascratch').value=s_w_big.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n   document.getElementById('yans').value='';<br \/>\n  }<br \/>\n  <br \/>\n  document.getElementById('tascratch').rows=eval(1 + eval('' + s_w_big.split('&lt;br&gt;').length));<br \/>\n  <br \/>\n  s_w_big=\"\";<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; to create some Javascript to calculate a Simultaneous Linear Equation intersection point (x,y)<\/li>\n<li>our web application executing that Javascript &#8230;<br \/>\n<code><br \/>\nfunction checkyours() {<br \/>\n      var tag = document.createElement('script');<br \/>\n      tag.innerHTML = document.getElementById('tascratch').value;<br \/>\n      var firstScriptTag = document.getElementsByTagName('script')[0];<br \/>\n      firstScriptTag.insertAdjacentElement(\"afterend\", tag);<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; this way, instantaneously, and without navigating to any new webpages\n <\/li>\n<\/ul>\n<p>Again, then, why not try <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html--GETME' title='simultaneous_linear.html' rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html--GETME' title='simultaneous_linear.html' rel=\"noopener\">simultaneous_linear.html<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html' title='simultaneous_linear.html' rel=\"noopener\">Simultaneous Linear Equations<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-scratchpad-for-simultaneous-line-equations-revisit-tutorial\/' rel=\"noopener\">HTML\/Javascript Scratchpad for Simultaneous Line Equations Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jslert'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Simultaneous Line Equations Revisit Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-simultaneous-line-equations-revisit-tutorial\/' rel=\"noopener\">HTML\/Javascript Simultaneous Line Equations Revisit 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\/simultaneous_linear.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Simultaneous Line Equations Revisit Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SimultaneousLinearEquations.gif\" title=\"HTML\/Javascript Simultaneous Line Equations Revisit Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Simultaneous Line Equations Revisit Tutorial<\/p><\/div>\n<p>It&#8217;s the anniversary of <a title='HTML\/Javascript Simultaneous Line Equations Tutorial' href='#html\/jslet'>HTML\/Javascript Simultaneous Line Equations Tutorial<\/a>!<\/p>\n<blockquote><p>\nHappy <font size=1>(<sup>11th <\/sup>give or take)<\/font> Anniversary &#8230; release of <a title='HTML\/Javascript Simultaneous Line Equations Tutorial' href='#html\/jslet'>HTML\/Javascript Simultaneous Line Equations Tutorial<\/a>!  Many happy <font size=1>Javascript<\/font> return<sub>s<\/sub> <font size=1> &#8230; chortle, chortle<\/font>.\n<\/p><\/blockquote>\n<p>On revisiting it&#8217;s <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html\" rel=\"noopener\">Simultaneous Line Equations<\/a> web application, we were a bit lost with the initial form settings, given the default input numbers, unchanged, resulted in an ill-defined result &#8230; <font size=1>not a good look<\/font> &#8230; and we apologize for this.  So, we&#8217;ve fixed that with a pretty simple new randomizer Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction mixitup() {<br \/>\n  document.getElementById(\"x1\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n  document.getElementById(\"y1\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n  document.getElementById(\"f1\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n  document.getElementById(\"x2\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n  document.getElementById(\"y2\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n  document.getElementById(\"f2\").value='' + Math.floor(Math.random() * 19) - Math.floor(Math.random() * 19);<br \/>\n}<br \/>\n<\/code> <\/p>\n<p> &#8230; we also slot in at the document.body <i>onload<\/i> event intervention point <font size=2> &#8230; our favourite<\/font><font size=1> &#8230; aaaaaahhhh!<\/font><\/p>\n<p>And then, a flash back to high school days, when every mathematics teacher there stressed how important it was to show your working<sub>s<\/sub>.  You know in <a target=\"_blank\" title=\"Netflix\" href='https:\/\/www.netflix.com\/' rel=\"noopener\">Netflix<\/a> this will amount to some screen zooming into some code somewhere ticking through the codelines meaningfully &#8230; but really &#8230; it is just boring hard<sub>ish<\/sub> slog to &#8220;Show Workings&#8221;, which we do here via a <a target=\"_blank\" href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal\" title='WordPress reveal posts' rel=\"noopener\">&#8220;reveal&#8221;<\/a> functionality with <a target=\"_blank\" title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">details<\/a>\/<a target=\"_blank\" title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp' rel=\"noopener\">summary<\/a> usage, but given we remember Linear Equations from mathematics, and it interested us, we decided to show the <font size=1>(no doubt less efficient Javascript guise for)<\/font> coding steps mimicking the Substitution Method so well explained, thanks, by HT<font color=black>TP<\/font>:\/\/sydney.edu.au\/stuserv\/documents\/maths_learning_centre\/simeqns.pdf<\/p>\n<p>Why not try <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html-GETME' title='simultaneous_linear.html' rel=\"noopener\">the changed<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html-GETME' title='simultaneous_linear.html' rel=\"noopener\">simultaneous_linear.html<\/a> <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html' title='simultaneous_linear.html' rel=\"noopener\">Simultaneous Linear Equations<\/a> web application.<\/p>\n<p><b><i>Stop Press<\/b><\/i><\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/squidgy.mp4\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"The Other Day at Lawson Station Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/squidgy.png\" title=\"The Other Day at Lawson Station Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">The Other Day at Lawson Station Tutorial<\/p><\/div>\n<p>We had an &#8230;<\/p>\n<blockquote><p>\n<a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\" title=\"?\" rel=\"noopener\">Ephemeral<\/a> 101\n<\/p><\/blockquote>\n<p> &#8230; lesson this morning at Lawson train station.  We came across this &#8230;<\/p>\n<p><!--video style=\"width:100%;\" controls><source type=video\/mp4 src=\/squidgy.mp4><\/source><\/video--><br \/>\n<video id=myvideo style=width:95%; controls><source type=video\/mp4 src=\/squidgy.mp4><\/source><br \/>\n<audio id=myaudio><source type=audio\/mp4 src=\/squidgy.m4a><\/source><\/audio><br \/>\n<script>\n  \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/6433900\/syncing-html5-video-with-audio-playback\n  var myvideo=null, myaudio=null, change_time_state=true;\n  function syncit() {\n    myvideo = document.getElementById(\"myvideo\");\n    myaudio = document.getElementById(\"myaudio\");\n    change_time_state = true;\n    myvideo.onplay = function(){\n        myaudio.play();\n        if(change_time_state){\n            myaudio.currentTime = myvideo.currentTime;\n            change_time_state = false;\n        }\n    }\n    myvideo.onpause = function(){\n        myaudio.pause();\n        change_time_state = true;\n    }\n  }\n  setTimeout(syncit, 9000);\n<\/script><\/video> <\/p>\n<p> &#8230; reminding us of the rubber snake guest appearance in <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/citizen-science-primer-tutorial\/' title='Citizen Science Primer Tutorial' rel=\"noopener\">Citizen Science Primer Tutorial<\/a>!  Funny later, but a bit concerning at the time, especially in summer, in some parts hereabouts in the Blue Mountains.  Well &#8230; you had to be there!<\/p>\n<p>We did not plant this, but it looks like 6 ply, if you want to try it.   Alas, a bit before filming, when a train went by, we could not get the camera out quick enough to see it gyrating a lot better than this!<\/p>\n<p><b><i>Stop Press &#8230; later today &#8230;<\/i><\/b><\/p>\n<details>\n<summary>It&#8217;s still there!<\/summary>\n<p><img src=\/squidgy_later.png style=\"width:100%;\"><\/img><br \/>\n<\/details>\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='#d30150' onclick='var dv=document.getElementById(\"d30150\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/photobooth\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d30150' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=\"_blank\" href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-simultaneous-line-equations-revisit-tutorial\/' rel=\"noopener\">HTML\/Javascript Simultaneous Line Equations Revisit Tutorial<\/a>.<\/p-->\n<hr>\n<p id='html\/jslet'>Previous relevant <a target=\"_blank\" title='HTML\/Javascript Simultaneous Line Equations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html\/javascript-simultaneous-line-equations-tutorial\/' rel=\"noopener\">HTML\/Javascript Simultaneous Line Equations 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\/simultaneous_linear.html\" rel=\"noopener\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Simultaneous Line Equations Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/SimultaneousLinearEquations.jpg\" title=\"HTML\/Javascript Simultaneous Line Equations Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Simultaneous Line Equations Tutorial<\/p><\/div>\n<p>Here is a <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html\" title='HTML\/Javascript Simultaneous Line Equations Tutorial' rel=\"noopener\">tutorial<\/a> showing some client-side basics in HTML and Javascript that can solve a pair of Simultaneous Linear Equations.   The inspiration for this came from the tutorial <a target=\"_blank\" title='Simultaneous Linear Equations' href='http:\/\/sydney.edu.au\/stuserv\/documents\/maths_learning_centre\/simeqns.pdf' rel=\"noopener\">here<\/a>.<\/p>\n<p>Sometimes a graphical representation of the Line Equations can help visualize the situation, so for this we call on a previous tutorial <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Line Chart Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1731' rel=\"noopener\">PHP\/Javascript\/HTML Google Chart Line Chart Tutorial<\/a>.<\/p>\n<p>This HTML\/Javascript solution uses an HTML form to collect information, and it is a lot like Javascript form validation to do the mathematics, so the previous tutorial <a target=\"_blank\" title='PHP\/Javascript\/HTML Google Chart Line Chart Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1431' rel=\"noopener\">Javascript Form Validation Primer Tutorial<\/a> has many similarities in its coding structure to today&#8217;s tutorial.<\/p>\n<p>Link to some downloadable HTML programming code &#8230; rename to <a target=\"_blank\" href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/simultaneous_linear.html_GETME' title='simultaneous_linear.html' rel=\"noopener\">simultaneous_linear.html<\/a>\n<\/p>\n<p>Hope you get some ideas from today&#8217;s tutorial.<\/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='#d5322' onclick='var dv=document.getElementById(\"d5322\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5322' 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='#d65762' onclick='var dv=document.getElementById(\"d65762\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65762' 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='#d65809' onclick='var dv=document.getElementById(\"d65809\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65809' 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='#d65812' onclick='var dv=document.getElementById(\"d65812\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65812' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<p>Hope you get some ideas from today&#8217;s tutorial.<\/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='#d5322' onclick='var dv=document.getElementById(\"d5322\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=59\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d5322' 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='#d65762' onclick='var dv=document.getElementById(\"d65762\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65762' 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='#d65809' onclick='var dv=document.getElementById(\"d65809\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/textarea\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65809' 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='#d65812' onclick='var dv=document.getElementById(\"d65812\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65812' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>One way a lot of us learn something new is to &#8230; have a way to an answer be modelled for us &#8230; then &#8230; perhaps, for a different problem presented, of the same ilk, we might need to model &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-javascript-scratchpad-simultaneous-line-equations-hints-revisit-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":[51,2367,174,218,1849,2310,385,3606,392,2728,4559,576,3111,652,688,702,752,1663,4997,4998,990,997,1063,1105,1917,1107,3896,1145,1171,1200,2311,1238,1566,1262,1319,1802,4996],"class_list":["post-65812","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above-the-fold","tag-answer","tag-button","tag-code","tag-coding","tag-details","tag-emoji","tag-emoji-button","tag-equation","tag-hint","tag-hints","tag-html","tag-intersection","tag-javascript","tag-learning","tag-linear-equations","tag-mathematics","tag-model","tag-modelled","tag-modelling","tag-problem","tag-programming","tag-reveal","tag-script","tag-scroll","tag-scrolling","tag-scrollintoview","tag-simultaneous-equations","tag-solution","tag-stop-press","tag-summary","tag-table","tag-template","tag-textarea","tag-tutorial","tag-vertical-align","tag-working"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65812"}],"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=65812"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65812\/revisions"}],"predecessor-version":[{"id":65865,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65812\/revisions\/65865"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}