&lt;!doctype html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;title&gt;Tracing Square Line Drawing - RJM Programming - December, 2018 ... Thanks to https://medium.com/@dear_trudence/how-to-draw-vertical-and-diagonal-lines-with-html-and-css-9e8d7d9c59b2 and https://stackoverflow.com/questions/45693587/only-part-of-border-changes-the-color and https://stackoverflow.com/questions/16795548/rotate-and-translate and https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs and https://stackoverflow.com/questions/35335226/two-different-colors-with-linear-gradient-effect&lt;/title&gt;<br>&lt;style&gt;<br>  td.square {<br>     width: 100px;<br>     height: 100px;<br>  } <br>  <br>  .bicol {<br>background: rgb(255,255,255); /* Old browsers */<br>background: -moz-linear-gradient(top,  pink 0%, pink 50%, yellow 51%, yellow 100%); /* FF3.6-15 */<br>background: -webkit-linear-gradient(top,  pink 0%,pink 50%,yellow 51%,yellow 100%); /* Chrome10-25,Safari5.1-6 */<br>background: linear-gradient(to bottom,  pink 0%,pink 50%,yellow 51%,yellow 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */<br>filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=pink, endColorstr=yellow,GradientType=0 ); /* IE6-9 */<br>  } <br>  <br>  hr { <br>       height: 4px;<br>       border: 2px solid black;<br>       background: linear-gradient(to right, yellow 80%, rgba(255,0,0,1) 20%);  <br>       border-radius: 5px;<br>  }<br><br>  hr.diagonal {<br>     transform: rotate(45deg);<br>     width: 144px;<br>  }<br><br>  hr.vertical {<br>     transform: rotate(90deg) translateY(50px) translateX(50px) ;<br>     width: 100px;<br>     border-radius: 5px;<br>     z-index: 1;<br>  }<br><br>  div.vertical {<br>     width: 4px;<br>     height: 100px;<br>     z-index: 12;<br>     border: 2px solid black;<br>     border-radius: 5px;<br>     background: linear-gradient(to left, yellow 80%, rgba(255,0,0,1) 20%);  <br>  }<br>  <br>  #span::after {<br>     content:'\000031\0020e3';<br>  }<br>  <br>  span.vertex:not(.nocont)::after {<br>     content:'\000031\0020e3';<br>  }<br><br>  hr.vertex {<br>     height: 4px;<br>     width: 4px;<br>     color: purple;<br>     background-color: purple;<br>     background: linear-gradient(to right, purple 80%, purple 20%);  <br>     border-radius: 5px;<br>     z-index: 25;<br>  }<br>  <br>  #qh4 {<br>     font-size: 12px;<br>  }<br>  <br>  input:not(.reveal) {<br>     border-radius: 23px;<br>  }<br>  <br>  .reveal {<br>    background-color: #4CAF50;<br>    color: white;<br>    padding: 30px 20px;<br>    border: 1px solid red;<br>  }<br>  <br>  .face {<br>     border-radius: 150px;<br>  }<br>  <br>  iframe {<br>     z-index: 29;<br>  }<br>&lt;/style&gt;<br><br>&lt;script type='text/javascript'&gt;<br><br>  var hors=[], vers=[], diags=[], sparescore=0;<br>  var score1=' (0)', score2=' (0)';<br>  var thisplayer=1;<br>  var osft='';<br>  var ourx=0, courx='', wourx='', lesscourx='';<br>  var lastsquare=-1;<br>  var tprefix='data-';<br>  if (document.URL.indexOf('debug=') != -1) { tprefix=''; }<br>  var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') &gt; -1));<br>  var vertices_in_a_row=0, viar_left=[0.0,0.0], viar_top=[0.0,0.0];<br>  var squares=[], lines=[], vertices=[];<br>  var thisrect, hrcnt=0, hrlgcnt=0;<br>  var lastdel=null, hro, v1=null, v2=null, onld=true;<br>  var cgcols=['lime','maroon','blue','purple','navy','teal','fuchsia','olive','red','lightgreen','lightblue','purple','orange'];<br>  var acol=cgcols[Math.floor(Math.random() * cgcols.length)];<br>  var dval='', wording='';<br>  var aurl='', burl='';<br>  var inas=[], jinas=0;<br>  var inanswer='';<br>  var haveclickedvertex=false;<br>  var vstr=';';<br>  var score=0, goes=0, sqchoice=0, sqorig='';<br>  var lasthr=0;<br>  var bpointsx=[];<br>  var bpointsy=[];<br>  var wlens=10;<br>  var wlenb=20;<br>  var vocabulary=[""];<br>  var hangman=[""];<br>  var mode=0;<br>  var clue='';<br>  var maxanyone=7;<br>  var availablescore=100;<br>  var zerozerox=0, zerozeroy=0;<br>  var xlen=0, ylen=0;<br>  var minx=0; //Math.min(eval('' + inminx), eval('' + inmaxx));<br>  var maxx=0; //Math.max(eval('' + inminx), eval('' + inmaxx));<br>  var miny=0; //Math.min(eval('' + inminy), eval('' + inmaxy));<br>  var maxy=0; //Math.max(eval('' + inminy), eval('' + inmaxy));<br>  var xoffset=0, yoffset=0;<br>  var xfactor=1, yfactor=1;<br>  var numsets=0, iset=0, orignumsets=0;<br>  var graphtitle='';<br>  var xint=0, yint=0;<br>  var oiois=null;<br>  var eqplotsuffix='';<br>  var aem='';<br>  var blk='';<br>  var emeq='plot';<br>  var firstp='Please enter minimum x,y and maximum x,y all separated by commas';<br>  var origph='Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O';<br>  var altph='Polynomial formula y=A*x*x + B*x + C ... please comma separate A,B,C';<br>  var altnextph='';<br>  var xlabel='X';<br>  var ylabel='Y';<br>  var xvalue='';<br>  var yvalue='';<br>  var dw=0;<br>  var dwl=0, dwt=0;<br>  <br>  var ihangman=0;<br>  var hangmanc=[<br>  "   document.getElementById('dhangman').innerHTML+='&lt;p id=phead class=face style=z-index:90;position:absolute;top:248px;left:142px;font-size:56px;&gt;&#128578;&lt;/p&gt;'; ",<br>  "   document.getElementById('hr77').click(); document.getElementById('hr137').click(); ",<br>  "   document.getElementById('hr119').click(); document.getElementById('hr77').click(); ",<br>  "   document.getElementById('hr131').click(); document.getElementById('hr77').click(); ",<br>  "   document.getElementById('hr137').click(); document.getElementById('hr234').click(); ",<br>  "   document.getElementById('hr137').click(); document.getElementById('hr246').click(); ",<br>  "   document.getElementById('hr235').click(); document.getElementById('hr256').click(); ",<br>  "   document.getElementById('hr260').click(); document.getElementById('hr256').click(); ",<br>  "   document.getElementById('hr230').click(); document.getElementById('hr235').click(); ",<br>  "   document.getElementById('hr235').click(); document.getElementById('hr20').click(); ",<br>  "   document.getElementById('hr290').style.display='none';   document.getElementById('hr260').click(); document.getElementById('hr235').click();  document.getElementById('phead').innerHTML='&#129314;'; document.getElementById('dhangman').innerHTML+='&lt;p id=pnoose class=face style=background-color:blank;z-index:95;position:absolute;top:195px;left:168px;font-size:6px;&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;br&gt;&#127872;&lt;/p&gt;'; "<br>  ];<br><br>  <br>  var inquestions=["",<br>  "10,22,23,9,70,126,128,139,150,149,93,36,82,138,-82,+25,+37,-138,+95,+37",<br>  "126,70,9,10,22,34,35,93,149,150,139,127,83,82,24,-24,+140,+196,-82,+173,+185",<br>  "70,72,71,180.124,+72,-61,-73,+285,-7,-68",<br>  "9,10,11,12,70,71,72,24,82,83,-70,+7,+68,-72,80,+136",<br>  "12,24,36,73.4,17.4,29.17,84.29,-287,+95,+29,-12,+84,+17",<br>  "70,71,82,72,83,12,24,20.7,61.7,73.7,84.20,-285,+73,+20",<br>  "11,12,70,126,128,139,150,149,94,83,127,71,82,23,22,-150,+117,+129,-149,+73,+84,-94,+140,+196",<br>  "11,35,22,34,24,36,73.4,13.4,124.73,136.73,147.95,158.95,41.37,-285,+95,+41",<br>  "11,35,22,34,24,36,73.4,13.4,124.73,136.73,147.95,158.95,41.37,-285,+73,+17,-286,+17,+13",<br>  "11,22,23,24,139,73.117,151.84,196.151,185.117,-11,+140,+185,-22,+140,+73,-23,+140,+151",<br>  "12,72,71,70,83,139,11,10,9,149,94,126,128,127,139,138,150,-71,+25,+37,-70,+25,+84,-83,+84,+95,-139,+95,+37"];<br>  var inwordings=["",<br>      "Get 2 rectangles to 2 squares by moving 2 matches.  Which 2?",<br>      "Get gap at bottom left closed up and leaving 2 squares by moving 2 matches.  Which 2?",<br>      "Turn Y-like figure upside down by moving 2 matches.  Which 2?",<br>      "Get four equal sized rectangles from these three equal sized squares by moving 2 matches.  Which 2?",<br>      "Get 1 parallelogram and 1 equilateral triangle by moving 2 matches.  Which 2?",<br>      "This house can become 2 by moving 1 match.  Which 1?",<br>      "Get 6 squares out of these 3 equal sized rectangles by moving 3 matches.  Which 3?",<br>      "Turn the dog around by moving 1 match.  Which 1?",<br>      "Make this dog look back by moving 2 matches.  Which 2?",<br>      "Make this pattern into a 3d cube by moving 3 matches.  Which 3?",<br>      "Change the L shape pattern into 4 equal sized squares by moving 4 matches.  Which 4?"];<br>      <br>  var sq=["Is the additive identity.",<br>  "Is the multiplicative identity.",<br>  "Is the only even prime.",<br>  "Is the number of spatial dimensions we live in.",<br>  "Is the smallest number of colours sufficient to colour all planar maps.",<br>  "Is the number of Platonic solids.",<br>  "Is the smallest perfect number.",<br>  "Is the smallest number of sides of a regular polygon that is not constructible by straightedge and compass.",<br>  "Is the largest cube in the Fibonacci sequence.",<br>  "Is the maximum number of cubes that are needed to sum to any positive integer.",<br>  "Is the base of our number system.",<br>  "Is the largest known multiplicative persistence.",<br>  "Is the smallest abundant number.",<br>  "Is the number of Archimedian solids.",<br>  "Is the smallest even number n with no solutions to phi(m) = n.",<br>  "Is the smallest composite number n with the property that there is only one group of order n.",<br>  "Is the only number of the form xy = yx with x and y being different integers.",<br>  "Is the number of wallpaper groups.",<br>  "Is the only positive number that is twice the sum of its digits.",<br>  "Is the maximum number of 4th powers needed to sum to any number.",<br>  "Is the number of rooted trees with 6 vertices.",<br>  "Is the smallest number of distinct squares needed to tile a square.",<br>  "Is the number of partitions of 8.",<br>  "Is the smallest number of integer-sided boxes that tile a box so that no two boxes share a common length.",<br>  "Is the largest number divisible by all numbers less than its square root.",<br>  "Is the smallest square that can be written as a sum of 2 squares."];<br>      <br>  function maybenocont(inv) {<br>    if (inv.length &gt; 0) { return ' nocont'; } else { return ''; }<br>  }<br>      <br>  function vplus(fb) {<br>    var xf=eval(fb.split(',')[0]);<br>    var yf=eval(fb.split(',')[1].split(';')[0]);<br>    return fb + eval(xf) + ',' + eval(1 + yf) + ';' + eval(1 + xf) + ',' + eval(yf) + ';' + eval(1 + xf) + ',' + eval(1 + yf) + ';' + eval(xf) + ',' + eval(-1 + yf) + ';' + eval(-1 + xf) + ',' + eval(yf) + ';' + eval(-1 + xf) + ',' + eval(-1 + yf) + ';'; <br>  }<br>      <br>  function ourmathround(inn) {<br>    var oinn=Math.floor(Math.floor(eval('' + inn) + 23) / 47);<br>    //if (('' + inn).indexOf('220.') != -1 || ('' + inn).indexOf('218.') != -1) {  alert('inn=' + inn + ' and oinn=' + oinn + ' results in ' + '' + eval(eval('' + oinn) * 5)); }<br>    //if (vstr != '') { alert(vstr); }<br>    return '' + eval(eval('' + oinn) * 47);<br>  }<br>  <br>  function picksq() {<br>      sqchoice=Math.floor(Math.random() * eval(0 - 1 + sq.length)) + 1;<br>      document.getElementById('qh4').innerHTML=sqorig + ' ... Score: ' + score + '/' + goes + ' ... ' + sq[sqchoice];<br>  }<br>  <br>  function gridinfo(insq) {<br>      if (insq.indexOf(' in square ') != -1) {<br>       //alert('x' + location.hash);<br>      document.getElementById('qh4').innerHTML+=insq;<br>      } else {<br>       //alert('z' + location.hash);<br>      document.getElementById('qh4').innerHTML=sqorig + insq;<br>      }<br>  }<br>  <br>  function pickone(what) {<br>    var zero=1, choice=0;<br>    if (('' + location.hash).indexOf('blank') == -1 && ('' + location.hash).indexOf('hangman') == -1 && ('' + location.hash).indexOf('square') == -1 && ('' + location.hash).indexOf('grid') == -1) {<br>      choice=Math.floor(Math.random() * eval(0 - zero + inquestions.length)) + zero;<br>      if (document.URL.indexOf('?') == -1 && ('' + location.hash) == '') {<br>        location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent(inwordings[choice]) + courx + '&question=' + encodeURIComponent(inquestions[choice]);<br>      }<br>    } else if (('' + location.hash).indexOf('blank') != -1) {<br>      zero=0;<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Vertex Pointing' + osft + ' Game') + courx + '&question=%20' + '#blank' + lesscourx; //location.hash;<br>    } else if (('' + location.hash).indexOf('square') != -1) {<br>      zero=0;<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Square Pointing Game') + courx + '&question=%20' + '#square'; //location.hash;<br>    } else if (('' + location.hash).indexOf('grid') != -1) {<br>      zero=0;<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Grid Pointing Game') + courx + '&question=%20' + '#grid'; // + location.hash;<br>    } else if (('' + location.hash).indexOf('hangman') != -1) {<br>      if (('' + document.URL).indexOf('reveal') != -1) {<br>      zero=0;<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Image Reveal Game') + courx + '&question=%20#hangman-00.0'; // + location.hash;<br>      } else if (('' + document.URL).indexOf('mathsgrid') != -1) {<br>      zero=0;<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Maths Grid Paper') + courx + '&question=%20#hangman-0.0'; // + location.hash;<br>      } else {<br>      zero=0;<br>      //alert(location.hash);<br>      location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Hangman Game') + courx + '&question=%20' + location.hash;<br>      }<br>    }<br>    return what;<br>  }<br>    <br>  function acl() {<br>    if (inas.length &gt; 0 && inas.length &gt; jinas) {<br>      if (inas[jinas].indexOf('-') != -1) {<br>        hrclick(document.getElementById('hr' + inas[jinas].replace('-','').replace('dr','').replace('hr','')));<br>        jinas++;<br>        setTimeout(acl, 2000);<br>      } else {<br>        hrclick(document.getElementById('hr' + inas[jinas].replace(' ','').replace('+','').replace('dr','').replace('hr','')));<br>        jinas++;<br>        setTimeout(acl, 2000);<br>      }<br>    }<br>  }<br>  <br>  // Thanks to https://stackoverflow.com/questions/16227300/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto<br>  function placebezierpoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {<br>  if (mode != 5) {<br>  var cX = 3 * (p1x - p0x),<br>      bX = 3 * (p2x - p1x) - cX,<br>      aX = p3x - p0x - cX - bX;<br><br>  var cY = 3 * (p1y - p0y),<br>      bY = 3 * (p2y - p1y) - cY,<br>      aY = p3y - p0y - cY - bY;<br><br>  var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0x;<br>  var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0y;<br>    //alert('' + x + ' ' + y);<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + y + 'px;left:' + x + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>  }<br>  //return {x: x, y: y};  <br>  }<br>  <br>  function dobezier(x0, y0, x1, y1, x2, y2, x3, y3) {<br>  if (mode != 5) {<br>    var accuracy = 0.01; //this'll give the bezier 100 segments<br>    //var p0 = {x: x0, y: y0}; //use whatever points you want obviously<br>    //var p1 = {x: x1, y: y1};<br>    //var p2 = {x: x2, y: y2};<br>    //var p3 = {x: y3, y: y4};<br>    //var p;<br>    <br>    //alert(67);<br><br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + y0 + 'px;left:' + x0 + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>  //alert(67);<br>  while (eval('' + accuracy) &lt; 1.00) {<br>    //alert(61);<br>     placebezierpoint(accuracy, x0, y0, x1, y1, x2, y2, x3, y3); //p0, p1, p2, p3);<br>     accuracy+=0.01;<br>    //alert(167);<br>  }<br>  }<br>  }<br>  <br>  function hrclick(inhro) {<br>    try {<br>    //alert(inhro.id);<br>    hro=document.getElementById(inhro.id.replace('dr','hr'));<br>    if (hro != null) {<br>    var topdiff=0.0, leftdiff=0.0;<br>    //alert(hro.id);<br>    var whro='';<br>    whro=('' + hro.style.width).replace('px','');<br>    //document.title=whro;<br>    if (isNaN(whro)) {<br>     whro=('' + hro.style.height).replace('px','');<br>     //document.title+=' ** ' + whro;<br>    }<br>    //if (eval(('' + hro.style.width).replace('px','')) &gt; 9 || inhro.outerHTML.indexOf('&lt;div') != -1 || inhro.id != inhro.id.replace('dr','hr')) {<br>    if (eval(whro) &gt; 9 || inhro.outerHTML.indexOf('&lt;div') != -1 || inhro.id != inhro.id.replace('dr','hr')) {<br>      if (('' + location.hash).indexOf('grid') != -1) {  gridinfo(' ... Element Type ' + hro.outerHTML.substring(1).split(' ')[0] + ' is ' + eval(whro) + ' pixels long'); }<br>      if (!haveclickedvertex || vertices_in_a_row == 0) {<br>      lastdel=hro;<br>      //alert(hro.id + ' vs ' + inhro.id);<br>      //inhro.style.width='0px';<br>      //inhro.style.height='0px';<br>      hro.style.display='none'; //visibility='hidden';<br>      hro.style.visibility='hidden'; //visibility='hidden';<br>      vertices_in_a_row=0;<br>      }<br>    } else if (vertices_in_a_row == 0) {<br>      v1=inhro;<br>      viar_left[0]=eval(('' + hro.style.left).replace('px',''));<br>      viar_top[0]=eval(('' + hro.style.top).replace('px',''));<br>      vertices_in_a_row=1;<br>      document.getElementById('pout').innerHTML="&lt;style&gt; #" + inhro.id + "::after { content:'\\000031\\0020e3'; } &lt;/style&gt;"; <br>      if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1) {<br>        if (bpointsx.length &lt; 4) { <br>          bpointsx.push(viar_left[0]);<br>          bpointsy.push(viar_top[0]);<br>          if (bpointsx.length &gt;= 4 && (' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>          //alert('square');<br>          if (parent.document.getElementById('dback')) { parent.document.getElementById('dback').title='' + bpointsx[0] +',' + eval(-200 + bpointsy[0]) + ',' + bpointsx[1] +',' + eval(-200 + bpointsy[1]) + ',' + bpointsx[2] + ',' + eval(-200 + bpointsy[2]) + ',' + bpointsx[3] +',' + eval(-200 + bpointsy[3]);           bpointsx=[];    bpointsy=[];   } <br>          } else if (bpointsx.length &gt;= 4 && ('' + location.hash).indexOf('blank') != -1 && ('' + location.hash).indexOf('=column') == -1 && ('' + location.hash).indexOf('=plot') == -1) {  dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }<br>        } else {<br>          bpointsx[0]=bpointsx[1];<br>          bpointsy[0]=bpointsy[1];<br>          bpointsx[1]=bpointsx[2];<br>          bpointsy[1]=bpointsy[2];<br>          bpointsx[2]=bpointsx[3];<br>          bpointsy[2]=bpointsy[3];<br>          bpointsx[3]=viar_left[0];<br>          bpointsy[3]=viar_top[0];<br>          if (bpointsx.length &gt;= 4 && (' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>          //alert('square');<br>          if (parent.document.getElementById('dback')) { parent.document.getElementById('dback').title='' + bpointsx[0] +',' + eval(-200 + bpointsy[0]) + ',' + bpointsx[1] +',' + eval(-200 + bpointsy[1]) + ',' + bpointsx[2] + ',' + eval(-200 + bpointsy[2]) + ',' + bpointsx[3] +',' + eval(-200 + bpointsy[3]);           bpointsx=[];    bpointsy=[];   } <br>          } else if (bpointsx.length &gt;= 4 && ('' + location.hash).indexOf('blank') != -1 && ('' + location.hash).indexOf('=column') == -1 && ('' + location.hash).indexOf('=plot') == -1) {   dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }<br>        }<br>      }<br>    } else if (vertices_in_a_row == 1) {<br>      v2=inhro;<br>      viar_left[1]=eval(('' + hro.style.left).replace('px',''));<br>      leftdiff=Math.abs(viar_left[1] - viar_left[0]);<br>      viar_top[1]=eval(('' + hro.style.top).replace('px',''));<br>      topdiff=Math.abs(viar_top[1] - viar_top[0]);<br>      var thiswidth=Math.sqrt(eval(topdiff * topdiff) + eval(leftdiff * leftdiff));<br>      if (!isIE) {<br>      //alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   '));<br>      document.getElementById('hrs').innerHTML+=connect(v1, v2).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   ').replace('&lt;DIV ','&lt;div onclick=alert(this.title); id=hr' + hrcnt + ' class=vertical   ');<br>          hrcnt++;<br>      if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1) {<br>        if (bpointsx.length &lt; 4) { <br>          bpointsx.push(viar_left[1]);<br>          bpointsy.push(viar_top[1]);<br>          if (bpointsx.length &gt;= 4 && (' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>          //alert('square');<br>          if (parent.document.getElementById('dback')) { parent.document.getElementById('dback').title='' + bpointsx[0] +',' + eval(-200 + bpointsy[0]) + ',' + bpointsx[1] +',' + eval(-200 + bpointsy[1]) + ',' + bpointsx[2] + ',' + eval(-200 + bpointsy[2]) + ',' + bpointsx[3] +',' + eval(-200 + bpointsy[3]);           bpointsx=[];    bpointsy=[]; } <br>          } else if (bpointsx.length &gt;= 4 && ('' + location.hash).indexOf('blank') != -1 && ('' + location.hash).indexOf('=column') == -1 && ('' + location.hash).indexOf('=plot') == -1) {   dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }<br>        } else {<br>          bpointsx[0]=bpointsx[1];<br>          bpointsy[0]=bpointsy[1];<br>          bpointsx[1]=bpointsx[2];<br>          bpointsy[1]=bpointsy[2];<br>          bpointsx[2]=bpointsx[3];<br>          bpointsy[2]=bpointsy[3];<br>          bpointsx[3]=viar_left[1];<br>          bpointsy[3]=viar_top[1];<br>          if (bpointsx.length &gt;= 4 && (' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>          //alert('square');<br>          if (parent.document.getElementById('dback')) { parent.document.getElementById('dback').title='' + bpointsx[0] +',' + eval(-200 + bpointsy[0]) + ',' + bpointsx[1] +',' + eval(-200 + bpointsy[1]) + ',' + bpointsx[2] + ',' + eval(-200 + bpointsy[2]) + ',' + bpointsx[3] +',' + eval(-200 + bpointsy[3]);           bpointsx=[];    bpointsy=[];   } <br>          } else if (bpointsx.length &gt;= 4 && ('' + location.hash).indexOf('blank') != -1 && ('' + location.hash).indexOf('=column') == -1 && ('' + location.hash).indexOf('=plot') == -1) {   dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }<br>        }<br>      }<br>      } else if (Math.abs(topdiff) &lt; 3.0 && Math.abs(leftdiff) &gt; 3.0) {<br>        if (viar_left[1] &gt; viar_left[0]) {<br>          //alert(0);<br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        } else {<br>          //alert(100);<br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        }<br>      } else if (Math.abs(topdiff) &gt; 3.0 && Math.abs(leftdiff) &lt; 3.0) {<br>        if (viar_top[1] &gt; viar_top[0]) {<br>          document.getElementById('hrs').innerHTML+='&lt;hr class=vertical   onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(90deg) translateY(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) ;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        } else {<br>          document.getElementById('hrs').innerHTML+='&lt;hr class=vertical   onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(90deg) translateY(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) ;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        }<br>      } else if (Math.abs(topdiff - leftdiff) &lt; 3.0) {<br>        if (viar_top[1] &gt; viar_top[0] && viar_left[1] &gt; viar_left[0]) {<br>          //alert(45);<br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 10) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 10) / 2)) + 'px) ;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        } else if (viar_top[1] &lt; viar_top[0] && viar_left[1] &gt; viar_left[0]) {<br>          //alert(-135);<br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(135deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] - leftdiff / 2) + 'px ' + eval(viar_top[1] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] - leftdiff / 2) + 'px;"&gt;&lt;/hr&gt;';<br>        } else if (viar_top[1] &gt; viar_top[0] && viar_left[1] &lt; viar_left[0]) {<br>          //alert(135);<br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(135deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[0] - leftdiff / 2) + 'px ' + eval(viar_top[0] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[0] + topdiff / 2) + 'px;left:' + eval(viar_left[0] - leftdiff / 2) + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        } else if (viar_top[1] &lt; viar_top[0] && viar_left[1] &lt; viar_left[0]) {<br>          //alert(-45);<br><br><br>          document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 10) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 10) / 2)) + 'px) ;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"&gt;&lt;/hr&gt;';<br><br><br>   // getting there below<br>          //document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] + leftdiff / 2) + 'px ' + eval(viar_top[1] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] + leftdiff / 2) + 'px;"&gt;&lt;/hr&gt;';<br><br><br><br>          //document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] + leftdiff / 2) + 'px ' + eval(viar_top[0] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] + leftdiff / 2) + 'px;"&gt;&lt;/hr&gt;';<br>          hrcnt++;<br>        }<br>        //document.getElementById('hrs').innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + 'px;"&gt;&lt;/hr&gt;';<br>        //hrcnt++;<br>      } else {<br>        alert('Sorry, cannot draw this one.');<br>        if (lastdel != null) {<br>          lastdel.style.display='block';<br>        }<br>      }<br>      //alert(leftdiff + ' ' + topdiff);<br>      vertices_in_a_row=0;<br>    }<br>    //document.title='' + vertices_in_a_row;<br>    } else {<br>    hro=lastdel;<br>    }<br>    } catch(tres) {<br>    }<br>  }<br>  <br>  function ina(inqs) {<br>  // http://localhost:8888/square_hr_tracing.htm?debug=y&wording=hdgdyt%20dfh&inquestion=10,22,23,9,70,126,128,139,150,149,93,36,82,138,-82,+25,+37,-138,+95,+37<br>    if (inanswer == '') {<br>      if (inqs.indexOf(',-') != -1 || inqs.indexOf(',+') != -1 || inqs.indexOf(', ') != -1) {<br>        var preurl=inqs.split(',-')[0].split(',+')[0].split(', ')[0];<br>        var prest=inqs.replace(preurl + ',','').replace(preurl,'').replace(/\ /g,'+');<br>        var ins=(preurl + '-').replace(',-','').replace('-','').split(',');<br>        var inandouts=prest.split(',');<br>        burl=pickone(document.URL);<br>        aurl=document.URL.split('#')[0].replace('question=','q=') + '&question=' + encodeURIComponent(preurl) + '&answer=' + encodeURIComponent(prest);<br>        //alert(prest + ' ... ' + aurl);<br>        return preurl;<br>      } else {<br>        burl=pickone(document.URL);<br>        aurl=document.URL;<br>      }<br>    } else {<br>      burl=pickone(document.URL);<br>      aurl=document.URL.replace('question=','q=').replace('answer=','question=');<br>    }<br>    return inqs;<br>  }<br>  <br>function asocwc() {<br>       courx='';<br>       lesscourx='';<br>       if (document.getElementById('selmode').value.indexOf('blank') != -1) {<br>         lesscourx=('' + ourx).replace('px','');<br>         courx='&ourx=' + lesscourx;<br>       }<br>}<br><br>function socwc(evt) {<br>       if (evt.clientX) {<br>       ourx = evt.clientX; // - elemLeft;<br>       } else {<br>       ourx = evt.pageX; // - elemLeft;<br>       }<br>       setTimeout(asocwc, 2000);  <br>}<br><br>  function norepeat(cwhat) {<br>     if (cwhat.indexOf('.11111') != -1) {<br>       return cwhat.split('.')[0] + '.1';<br>     } else if (cwhat.indexOf('.22222') != -1) {<br>       return cwhat.split('.')[0] + '.2';<br>     } else if (cwhat.indexOf('.33333') != -1) {<br>       return cwhat.split('.')[0] + '.3';<br>     } else if (cwhat.indexOf('.44444') != -1) {<br>       return cwhat.split('.')[0] + '.4';<br>     } else if (cwhat.indexOf('.55555') != -1) {<br>       return cwhat.split('.')[0] + '.6';<br>     } else if (cwhat.indexOf('.66666') != -1) {<br>       return cwhat.split('.')[0] + '.7';<br>     } else if (cwhat.indexOf('.77777') != -1) {<br>       return cwhat.split('.')[0] + '.8';<br>     } else if (cwhat.indexOf('.88888') != -1) {<br>       return cwhat.split('.')[0] + '.9';<br>     } else if (cwhat.indexOf('.99999') != -1) {<br>       if (cwhat.indexOf('-') != -1) {<br>       return eval(-1 + eval('' + cwhat.split('.')[0])) + '.0';<br>       } else {<br>       return eval(1 + eval('' + cwhat.split('.')[0])) + '.0';<br>       }<br>     } <br>     return cwhat;<br>  }<br><br>  function texttoo(hrval, cwords) {<br>     var axisword='0', minustwenty='-20', labo='70', mgmore='', pee='p';<br>     if (cwords.indexOf(',0.0)') != -1 || cwords.indexOf('(0.0,') != -1) {  pee='b'; mgmore='margin-top:20px;'; minustwenty='-5'; }<br>     if (cwords == '(0.0,0.0)') {<br>       if (('' + location.hash).indexOf('=column') != -1) { <br>       if ((' ' + maxy).length &gt; 4) { minustwenty='-' + eval(eval((' ' + maxy).length) * 6);  }<br>       document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;su' + pee + ' style="margin-left:' + minustwenty + 'px;' + mgmore + 'position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + yoffset + '&lt;/su' + pee + '&gt;&lt;/b&gt;';<br>       } else {<br>       document.getElementById('daxes').innerHTML+='&lt;su' + pee + ' style="margin-left:10px;' + mgmore + 'position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + norepeat('' + axisword) + '&lt;/su' + pee + '&gt;';<br>       //document.getElementById('daxes').innerHTML+='&lt;sub style="margin-top:-10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + axisword + '&lt;/sub&gt;';<br>       }<br>    } else if (cwords.replace('(0.0,','(0,').replace(',0.0)',',0)') == '(0,0)') {<br>       if (('' + location.hash).indexOf('=column') != -1) { <br>       if ((' ' + maxy).length &gt; 4) { minustwenty='-' + eval(eval((' ' + maxy).length) * 6);  }<br>       document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;su' + pee + ' style="margin-top:-10px;margin-left:' + minustwenty + 'px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + yoffset + '&lt;/su' + pee + '&gt;&lt;/b&gt;';<br>       } else {<br>       document.getElementById('daxes').innerHTML+='&lt;su' + pee + ' style="margin-top:-10px;margin-left:10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + norepeat('' + axisword) + '&lt;/su' + pee + '&gt;';<br>       //document.getElementById('daxes').innerHTML+='&lt;sub style="margin-top:-10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + axisword + '&lt;/sub&gt;';<br>       }<br>     } else if (cwords.replace(',0.0)',',0)').indexOf(',0)') != -1) {<br>       axisword=cwords.replace('(0.0,','(0,').replace(',0.0)',',0)').substring(1).split(',')[0];<br>       if (('' + location.hash).indexOf('=column') != -1) { <br>       document.getElementById('daxes').innerHTML+='&lt;sub style="margin-top:-10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;&lt;/sub&gt;';<br>       } else {<br>       document.getElementById('daxes').innerHTML+='&lt;sub style="margin-top:-10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + norepeat('' + axisword) + '&lt;/sub&gt;';<br>       }<br>       if (('' + location.hash).indexOf('=column') != -1 && eval('' + axisword) == eval(eval('' + yint) * 3)) {<br>        if (xlabel.indexOf('~') != -1) { labo='50'; }<br>        document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;sub id=sxlabel style="margin-top:' + labo + 'px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + xlabel.replace(/\~/g,'&lt;br&gt;') + '&lt;/sub&gt;&lt;/b&gt;';<br>       } else if (('' + location.hash).indexOf('=column') == -1 && eval('' + axisword) == xint) {<br>        document.getElementById('daxes').innerHTML+='&lt;sub id=sxlabel style="margin-top:20px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + xlabel + '&lt;/sub&gt;';<br>       }<br>     } else if (cwords.replace('(0.0,','(0,').indexOf('(0,') != -1) {<br>       axisword=cwords.replace('(0.0,','(0,').replace(',0.0)',',0)').substring(3).split(')')[0];<br>       if (('' + location.hash).indexOf('=column') != -1) { <br>       if ((' ' + maxy).length &gt; 4) { minustwenty='-' + eval(eval((' ' + maxy).length) * 6);  }<br>       //alert(cwords + ' --- ' + cwords.replace('(0.0,','(0,').replace(',0.0)',',0)').substring(3) + ' ... ' + axisword + ' + ' + yoffset);<br>       document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;su' + pee + ' style="margin-left:' + minustwenty + 'px;' + mgmore + 'position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + norepeat('' + eval(eval('' + axisword) + eval('' + yoffset))) + '&lt;/su' + pee + '&gt;&lt;/b&gt;';<br>       } else {<br>       document.getElementById('daxes').innerHTML+='&lt;su' + pee + ' style="margin-left:10px;' + mgmore + 'position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + norepeat('' + axisword) + '&lt;/su' + pee + '&gt;';<br>       }<br>       if (('' + location.hash).indexOf('=column') != -1 && eval('' + axisword) == eval(eval('' + yint) * 6)) { <br>        document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;sup id=sylabel style="margin-left:-57px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + ylabel.replace(/\~/g,'&lt;br&gt;') + '&lt;/sup&gt;&lt;/b&gt;';<br>       } else if (('' + location.hash).indexOf('=column') == -1 && eval('' + axisword) == yint) {<br>        document.getElementById('daxes').innerHTML+='&lt;sup id=sylabel style="margin-left:-10px;position:absolute;left:' + document.getElementById('hr' + hrval).style.left.replace('px','') + 'px;top:' + document.getElementById('hr' + hrval).style.top.replace('px','') + 'px;"&gt;' + ylabel + '&lt;/sup&gt;';<br>       }<br>     }<br>     return cwords;<br>  } <br><br>  function plotit(inminx, inminy, inmaxx, inmaxy) {<br>    var cintx='', cinty='', oneupx=0, oneupy=0;<br>    var i, j, xisneeded=false, yisneeded=false;<br>    xint=0;<br>    yint=0;<br>    minx=Math.min(eval('' + inminx), eval('' + inmaxx));<br>    maxx=Math.max(eval('' + inminx), eval('' + inmaxx));<br>    miny=Math.min(eval('' + inminy), eval('' + inmaxy));<br>    maxy=Math.max(eval('' + inminy), eval('' + inmaxy));<br>    xlen=eval(eval('' + maxx) - eval('' + minx));<br>    ylen=eval(eval('' + maxy) - eval('' + miny));<br>    var xdiff=eval(eval('' + maxx) + eval('' + minx));<br>    var ydiff=eval(eval('' + maxy) + eval('' + miny));<br>    if (eval('' + minx) &gt;= 0 && eval('' + miny) &gt;= 0) {<br>      zerozerox=eval('' + document.getElementById('hr233').style.left.replace('px',''));<br>      zerozeroy=eval('' + document.getElementById('hr233').style.top.replace('px',''));<br>      xint=eval(maxx / 9);<br>      yint=eval(maxy / 9);<br>      //alert('' + xint + ',' + yint);<br>      cintx='' + Math.floor(xint);<br>      cinty='' + Math.floor(yint);<br>      oneupx=eval(eval('' + cintx.substring(0,1)) + 1);<br>      oneupy=eval(eval('' + cinty.substring(0,1)) + 1);<br>      <br>      for (i=1; i&lt;cintx.length; i++) {<br>        if (cintx.substring(i, eval(1 + i)) != '0') { xisneeded=true; }<br>        if (cinty.substring(i, eval(1 + i)) != '0') { yisneeded=true; }<br>        oneupx*=10;<br>        oneupy*=10;<br>      }<br>      <br>      xfactor=eval(Math.abs(eval('' + document.getElementById('hr234').style.left.replace('px','')) - eval('' + document.getElementById('hr233').style.left.replace('px',''))) / xint);<br>      yfactor=eval(Math.abs(eval('' + document.getElementById('hr181').style.top.replace('px','')) - eval('' + document.getElementById('hr233').style.top.replace('px',''))) / yint);<br>  //alert('yint=' + yint + ' and yfactor so far=' + yfactor);<br>      if (xisneeded) { xint=oneupx;  xfactor=eval(Math.abs(eval('' + document.getElementById('hr234').style.left.replace('px','')) - eval('' + document.getElementById('hr233').style.left.replace('px',''))) / oneupx); }<br>      if (yisneeded) { yint=oneupy;  yfactor=eval(Math.abs(eval('' + document.getElementById('hr181').style.top.replace('px','')) - eval('' + document.getElementById('hr233').style.top.replace('px',''))) / oneupy); }<br>  //alert('yint=' + yint + ' and yfactor later=' + yfactor + ' ... pxstuff=' + Math.abs(eval('' + document.getElementById('hr181').style.top.replace('px','')) - eval('' + document.getElementById('hr233').style.top.replace('px',''))) + ' ... via ' + document.getElementById('hr181').style.top.replace('px','') + ' and ' + document.getElementById('hr110').style.top.replace('px',''));<br><br>      if (document.getElementById('h1column').innerHTML == 'Bar') {<br>      document.getElementById('hr233').title=texttoo(233,'(0.0,0.0)');<br>      document.getElementById('hr234').title=texttoo(234,'(0.0,' + eval(xint * 1) + ')');<br>      document.getElementById('hr245').title=texttoo(245,'(0.0,' + eval(xint * 2) + ')');<br>      document.getElementById('hr246').title=texttoo(246,'(0.0,' + eval(xint * 3) + ')');<br>      document.getElementById('hr256').title=texttoo(256,'(0.0,' + eval(xint * 4) + ')');<br>      document.getElementById('hr257').title=texttoo(257,'(0.0,' + eval(xint * 5) + ')');<br>      document.getElementById('hr267').title=texttoo(267,'(0.0,' + eval(xint * 6) + ')');<br>      document.getElementById('hr268').title=texttoo(268,'(0.0,' + eval(xint * 7) + ')');<br>      document.getElementById('hr278').title=texttoo(278,'(0.0,' + eval(xint * 8) + ')');<br>      document.getElementById('hr279').title=texttoo(279,'(0.0,' + eval(xint * 9) + ')');<br>      <br>      document.getElementById('hr181').title=texttoo(181,'(' + eval(yint * 1) + ',0.0)');<br>      document.getElementById('hr177').title=texttoo(177,'(' + eval(yint * 2) + ',0.0)');<br>      document.getElementById('hr125').title=texttoo(125,'(' + eval(yint * 3) + ',0.0)');<br>      document.getElementById('hr121').title=texttoo(121,'(' + eval(yint * 4) + ',0.0)');<br>      document.getElementById('hr69').title=texttoo(69,'(' + eval(yint * 5) + ',0.0)');<br>      document.getElementById('hr65').title=texttoo(65,'(' + eval(yint * 6) + ',0.0)');<br>      document.getElementById('hr68').title=texttoo(68,'(' + eval(yint * 7) + ',0.0)');<br>      document.getElementById('hr4').title=texttoo(4,'(' + eval(yint * 8) + ',0.0)');<br>      document.getElementById('hr7').title=texttoo(7,'(' + eval(yint * 9) + ',0.0)');<br>     } else {<br>      document.getElementById('hr233').title=texttoo(233,'(0,0)');<br>      document.getElementById('hr234').title=texttoo(234,'(' + eval(xint * 1) + ',0)');<br>      document.getElementById('hr245').title=texttoo(245,'(' + eval(xint * 2) + ',0)');<br>      document.getElementById('hr246').title=texttoo(246,'(' + eval(xint * 3) + ',0)');<br>      document.getElementById('hr256').title=texttoo(256,'(' + eval(xint * 4) + ',0)');<br>      document.getElementById('hr257').title=texttoo(257,'(' + eval(xint * 5) + ',0)');<br>      document.getElementById('hr267').title=texttoo(267,'(' + eval(xint * 6) + ',0)');<br>      document.getElementById('hr268').title=texttoo(268,'(' + eval(xint * 7) + ',0)');<br>      document.getElementById('hr278').title=texttoo(278,'(' + eval(xint * 8) + ',0)');<br>      document.getElementById('hr279').title=texttoo(279,'(' + eval(xint * 9) + ',0)');<br>      <br>      document.getElementById('hr181').title=texttoo(181,'(0,' + eval(yint * 1) + ')');<br>      document.getElementById('hr177').title=texttoo(177,'(0,' + eval(yint * 2) + ')');<br>      document.getElementById('hr125').title=texttoo(125,'(0,' + eval(yint * 3) + ')');<br>      document.getElementById('hr121').title=texttoo(121,'(0,' + eval(yint * 4) + ')');<br>      document.getElementById('hr69').title=texttoo(69,'(0,' + eval(yint * 5) + ')');<br>      document.getElementById('hr65').title=texttoo(65,'(0,' + eval(yint * 6) + ')');<br>      document.getElementById('hr68').title=texttoo(68,'(0,' + eval(yint * 7) + ')');<br>      document.getElementById('hr4').title=texttoo(4,'(0,' + eval(yint * 8) + ')');<br>      document.getElementById('hr7').title=texttoo(7,'(0,' + eval(yint * 9) + ')');<br>      }<br><br>      document.getElementById('hr279').click(); <br>      document.getElementById('hr233').click(); <br>      document.getElementById('hr7').click(); <br>      document.getElementById('hr233').click();   // (0,0)<br>      document.getElementById('ashare').style.display='inline-block';<br>    } else if (eval('' + maxx) &lt;= 0 && eval('' + maxy) &lt;= 0) {<br>      zerozerox=eval('' + document.getElementById('hr53').style.left.replace('px',''));<br>      zerozeroy=eval('' + document.getElementById('hr53').style.top.replace('px',''));<br>      xint=eval(-minx / 9);<br>      yint=eval(-maxy / 9);<br>      //alert('' + xint + ',' + yint);<br>      cintx='' + Math.floor(xint);<br>      cinty='' + Math.floor(yint);<br>      oneupx=eval(eval('' + cintx.substring(0,1)) + 1);<br>      oneupy=eval(eval('' + cinty.substring(0,1)) + 1);<br>      <br>      for (i=1; i&lt;cintx.length; i++) {<br>        if (cintx.substring(i, eval(1 + i)) != '0') { xisneeded=true; }<br>        if (cinty.substring(i, eval(1 + i)) != '0') { yisneeded=true; }<br>        oneupx*=10;<br>        oneupy*=10;<br>      }<br>      <br>      xfactor=eval(Math.abs(eval('' + document.getElementById('hr42').style.left.replace('px','')) - eval('' + document.getElementById('hr41').style.left.replace('px',''))) / xint);<br>      yfactor=eval(Math.abs(eval('' + document.getElementById('hr113').style.top.replace('px','')) - eval('' + document.getElementById('hr110').style.top.replace('px',''))) / yint);<br>      if (xisneeded) { xint=oneupx;  xfactor=eval(Math.abs(eval('' + document.getElementById('hr42').style.left.replace('px','')) - eval('' + document.getElementById('hr41').style.left.replace('px',''))) / oneupx); }<br>      if (yisneeded) { yint=oneupy;  yfactor=eval(Math.abs(eval('' + document.getElementById('hr113').style.top.replace('px','')) - eval('' + document.getElementById('hr110').style.top.replace('px',''))) / oneupy); }<br><br>      document.getElementById('hr53').title=texttoo(53,'(0,0)');<br><br><br>      document.getElementById('hr42').title=texttoo(42,'(' + eval(-xint * 1) + ',0)');<br>      document.getElementById('hr41').title=texttoo(41,'(' + eval(-xint * 2) + ',0)');<br>      document.getElementById('hr30').title=texttoo(30,'(' + eval(-xint * 3) + ',0)');<br>      document.getElementById('hr29').title=texttoo(29,'(' + eval(-xint * 4) + ',0)');<br>      document.getElementById('hr18').title=texttoo(18,'(' + eval(-xint * 5) + ',0)');<br>      document.getElementById('hr17').title=texttoo(17,'(' + eval(-xint * 6) + ',0)');<br>      document.getElementById('hr5').title=texttoo(5,'(' + eval(-xint * 7) + ',0)');<br>      document.getElementById('hr4').title=texttoo(4,'(' + eval(-xint * 8) + ',0)');<br>      document.getElementById('hr6').title=texttoo(6,'(' + eval(-xint * 9) + ',0)');<br>      <br>      document.getElementById('hr113').title=texttoo(113,'(0,' + eval(-yint * 1) + ')');<br>      document.getElementById('hr110').title=texttoo(110,'(0,' + eval(-yint * 2) + ')');<br>      document.getElementById('hr114').title=texttoo(114,'(0,' + eval(-yint * 3) + ')');<br>      document.getElementById('hr166').title=texttoo(166,'(0,' + eval(-yint * 4) + ')');<br>      document.getElementById('hr170').title=texttoo(170,'(0,' + eval(-yint * 5) + ')');<br>      document.getElementById('hr222').title=texttoo(222,'(0,' + eval(-yint * 6) + ')');<br>      document.getElementById('hr226').title=texttoo(226,'(0,' + eval(-yint * 7) + ')');<br>      document.getElementById('hr278').title=texttoo(278,'(0,' + eval(-yint * 8) + ')');<br>      document.getElementById('hr282').title=texttoo(282,'(0,' + eval(-yint * 9) + ')');<br><br><br>      document.getElementById('hr282').click(); <br>      document.getElementById('hr53').click();   // (0,0)<br>      document.getElementById('hr6').click(); <br>      document.getElementById('hr53').click(); <br>      document.getElementById('ashare').style.display='inline-block';<br>    } else { <br>      //alert('' + xdiff + ',' + ydiff);<br>      //if (Math.abs(xdiff) &lt; eval(xlen / 10) && Math.abs(ydiff) &lt; eval(ylen / 10)) {   // hr144 is (0,0)<br>      zerozerox=eval('' + document.getElementById('hr144').style.left.replace('px',''));<br>      zerozeroy=eval('' + document.getElementById('hr144').style.top.replace('px',''));<br>      xint=Math.max(eval(maxx / 5), eval(-minx / 5));<br>      yint=Math.max(eval(maxy / 5), eval(-miny / 5));<br>      //alert('' + xint + ',' + yint);<br>      cintx='' + Math.floor(xint);<br>      cinty='' + Math.floor(yint);<br>      oneupx=eval(eval('' + cintx.substring(0,1)) + 1);<br>      oneupy=eval(eval('' + cinty.substring(0,1)) + 1);<br>      <br>      for (i=1; i&lt;cintx.length; i++) {<br>        if (cintx.substring(i, eval(1 + i)) != '0') { xisneeded=true; }<br>        if (cinty.substring(i, eval(1 + i)) != '0') { yisneeded=true; }<br>        oneupx*=10;<br>        oneupy*=10;<br>      }<br>      <br>      <br>      xfactor=eval(Math.abs(eval('' + document.getElementById('hr145').style.left.replace('px','')) - eval('' + document.getElementById('hr144').style.left.replace('px',''))) / xint);<br>      yfactor=eval(Math.abs(eval('' + document.getElementById('hr92').style.top.replace('px','')) - eval('' + document.getElementById('hr144').style.top.replace('px',''))) / yint);<br>      if (xisneeded) { xint=oneupx;  xfactor=eval(Math.abs(eval('' + document.getElementById('hr145').style.left.replace('px','')) - eval('' + document.getElementById('hr144').style.left.replace('px',''))) / oneupx); }<br>      if (yisneeded) { yint=oneupy;  yfactor=eval(Math.abs(eval('' + document.getElementById('hr92').style.top.replace('px','')) - eval('' + document.getElementById('hr144').style.top.replace('px',''))) / oneupy); }<br><br>      document.getElementById('hr144').title=texttoo(144,'(0,0)');<br>      document.getElementById('hr145').title=texttoo(145,'(' + eval(xint * 1) + ',0)');<br>      document.getElementById('hr155').title=texttoo(155,'(' + eval(xint * 2) + ',0)');<br>      document.getElementById('hr156').title=texttoo(156,'(' + eval(xint * 3) + ',0)');<br>      document.getElementById('hr166').title=texttoo(166,'(' + eval(xint * 4) + ',0)');<br>      document.getElementById('hr167').title=texttoo(167,'(' + eval(xint * 5) + ',0)');<br>      document.getElementById('hr134').title=texttoo(134,'(' + eval(-xint * 1) + ',0)');<br>      document.getElementById('hr133').title=texttoo(133,'(' + eval(-xint * 2) + ',0)');<br>      document.getElementById('hr122').title=texttoo(122,'(' + eval(-xint * 3) + ',0)');<br>      document.getElementById('hr121').title=texttoo(121,'(' + eval(-xint * 4) + ',0)');<br>      document.getElementById('hr123').title=texttoo(123,'(' + eval(-xint * 5) + ',0)');<br>      <br>      document.getElementById('hr92').title=texttoo(92,'(0,' + eval(yint * 1) + ')');<br>      document.getElementById('hr88').title=texttoo(88,'(0,' + eval(yint * 2) + ')');<br>      document.getElementById('hr91').title=texttoo(91,'(0,' + eval(yint * 3) + ')');<br>      document.getElementById('hr29').title=texttoo(29,'(0,' + eval(yint * 4) + ')');<br>      document.getElementById('hr32').title=texttoo(32,'(0,' + eval(yint * 5) + ')');<br>      document.getElementById('hr148').title=texttoo(148,'(0,' + eval(-yint * 1) + ')');<br>      document.getElementById('hr200').title=texttoo(200,'(0,' + eval(-yint * 2) + ')');<br>      document.getElementById('hr204').title=texttoo(204,'(0,' + eval(-yint * 3) + ')');<br>      document.getElementById('hr256').title=texttoo(256,'(0,' + eval(-yint * 4) + ')');<br>      document.getElementById('hr260').title=texttoo(260,'(0,' + eval(-yint * 5) + ')');<br>     <br>      <br>      document.getElementById('hr167').click(); <br>      document.getElementById('hr123').click(); <br>      document.getElementById('hr32').click(); <br>      document.getElementById('hr260').click();<br>      document.getElementById('ashare').style.display='inline-block'; <br>      //}<br>     }<br>  }<br>  <br>  function toggleplaceholder() {<br>    if (oiois != null) {<br>      if (oiois.value == '') {<br>         if (oiois.placeholder != origph) { //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O') {<br>           oiois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O';<br>         } else {<br>           oiois.placeholder=altph; //'Polynomial formula y=A*x*x + B*x + C ... please comma separate A,B,C';<br>         }<br>         setTimeout(toggleplaceholder, 5000);<br>      } else {<br>         oiois=null;<br>      }<br>    }<br>  }<br>  <br>  function emailit() {<br>    if (1 == 7 && ('' + location.hash).indexOf('=column') != -1) {<br>    document.getElementById('aemail').href=aem + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?blank=' + encodeURIComponent(eqplotsuffix.substring(1)) + '#blank=' + emeq + eqplotsuffix.substring(0,1));<br>    } else {<br>    document.getElementById('aemail').href=aem + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#blank=' + emeq + eqplotsuffix);<br>    }<br>    document.getElementById('aemail').click();<br>  }<br>  <br>  function preplot(inans) {<br>    return plotthis(document.getElementById('iplot'), inans, inans);<br>  }<br><br>  function plotthis(iois, ioisval, jans) {<br>   if (minx == 0 && miny == 0 && maxx == 0 && maxy == 0) {<br>    if (ioisval == '') { ioisval=iois.value;  }<br>    var rangeis=ioisval.split(',');<br>    var norangeis=ioisval.replace(/\ /g,',').split(',');<br>    if (('' + location.hash).indexOf('=column') != -1) {<br>           if (rangeis.length &gt;= 4) {<br>           //alert(0);<br>             yoffset=eval('' + rangeis[2]);<br>             xoffset=eval('' + rangeis[2]);<br>           //alert(yoffset);<br>             miny=0;<br>             maxy=eval(eval('' + rangeis[3]) - eval('' + rangeis[2]));<br>           //alert(maxy);<br>             maxx=maxy;<br>             minx=0;<br>             numsets=eval('' + rangeis[1]);<br>             orignumsets=numsets;<br>             graphtitle=rangeis[0];<br>             //document.getElementById('myh1').innerHTML=graphtitle;<br>             if (document.getElementById('h1column')) {<br>             document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:none;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;&lt;span id=h1column style=display:inline-block;&gt;' + document.getElementById('h1column').innerHTML + '&lt;/span&gt; Graph ' + graphtitle;<br>             } else {<br>             document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:none;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;&lt;span id=h1column style=display:inline-block;&gt;Column&lt;/span&gt; Graph ' + graphtitle;<br>             }<br>             if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(encodeURIComponent(rangeis[0]) + ',' + rangeis[1] + ',' + rangeis[2] + ',' + rangeis[3] + '|'); }<br>           //alert(99);<br>      plotit(minx, miny, maxx, maxy);<br>      document.getElementById('daxes').innerHTML+='&lt;style&gt; hr.vertex { width:1px; height: 1px; } &lt;/style&gt;';<br>      dw=eval(xfactor * eval(eval(eval('' + maxx) / numsets)));<br>      dwl=eval('' + zerozerox);<br>      dwt=eval('' + zerozeroy);<br>      dwt-=dw;<br>      iois.value='';<br>      oiois=iois;<br>      iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      setTimeout(toggleplaceholder, 5000);<br>           }<br>    } else {<br>    if (rangeis.length &gt;= 4) {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(ioisval + '|'); }<br>      plotit(rangeis[0], rangeis[1], rangeis[2], rangeis[3]);<br>      iois.value='';<br>      oiois=iois;<br>      iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      setTimeout(toggleplaceholder, 5000);<br>    } else if (nosrangeis.length &gt;= 4) {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(ioisval.replace(/\ /g,',') + '|'); }<br>      plotit(nosrangeis[0], nosrangeis[1], nosrangeis[2], nosrangeis[3]);<br>      iois.value='';<br>      oiois=iois;<br>      iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      setTimeout(toggleplaceholder, 5000);<br>    } else {<br>      var crangeis=jans;<br>      if (crangeis == '') { crangeis=prompt(firstp,''); }<br>      if (crangeis == null) { crangeis=''; }<br>      rangeis=crangeis.split(',');<br>      if (rangeis.length &gt;= 4) {<br>       if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(crangeis.replace(/\ /g,',') + '|'); }<br>       plotit(rangeis[0], rangeis[1], rangeis[2], rangeis[3]);<br>       iois.value='';<br>       iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      }<br>    }<br>    <br>    <br>    // &lt;hr class="vertex" onmouseover="alert(this.outerHTML);" onclick="hrclick(this);" data-title="hr391" id="hr391" title="(2,193)" <br>    //        style="position:absolute;top:268.359px;left:274px;"&gt;<br>    // &lt;hr class="vertex" onclick="hrclick(this);" data-title="hr144" id="hr144" <br>    //        style="position:absolute;top:461.359375px;left:272px;" title="(0,0)"&gt;<br>    // &lt;hr class="vertex" onclick="hrclick(this);" data-title="hr92" id="hr92" <br>    //        style="position:absolute;top:408.359375px;left:272px;" title="(0,40)"&gt;<br>    }<br>    <br>   } else if ((ioisval.indexOf(';') != -1 || iois.value.indexOf(';') != -1)) {<br>    if (ioisval == '') { ioisval=iois.value;  }<br>    var things=ioisval.split(';');<br>    if (things.length &gt;= 2 && xlabel == '' && ylabel == '') {<br>      xlabel=things[0];<br>      ylabel=things[1];<br>      if (xlabel.indexOf('~') != -1) { document.getElementById('sxlabel').style.marginTop='50px'; }<br><br>      if (document.getElementById('h1column').innerHTML == 'Bar') {<br>      document.getElementById('sylabel').innerHTML='&lt;br&gt;&lt;br&gt;&lt;br&gt;' + xlabel.replace(/\~/g,'&lt;br&gt;');<br>      var yl=(ylabel + ' ').substring(0,1);<br>      for (var iyu=1; iyu&lt;ylabel.length; iyu++) {<br>        yl+='&lt;br&gt;' + ylabel.substring(iyu, eval(1 + iyu));<br>      }<br>      document.getElementById('sxlabel').innerHTML=yl;<br>      document.getElementById('sxlabel').style.marginLeft='-57px';<br>      document.getElementById('sxlabel').style.marginTop='-80px';<br>      } else {<br>      document.getElementById('sxlabel').innerHTML=xlabel.replace(/\~/g,'&lt;br&gt;');<br>      var yl=(ylabel + ' ').substring(0,1);<br>      for (var iyu=1; iyu&lt;ylabel.length; iyu++) {<br>        yl+='&lt;br&gt;' + ylabel.substring(iyu, eval(1 + iyu));<br>      }<br>      document.getElementById('sylabel').innerHTML=yl;<br>      }<br>      //alert(0);<br>      if (document.getElementById('h1column').innerHTML == 'Bar') {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(encodeURIComponent(things[1]) + ';' + encodeURIComponent(things[0]) + '|'); }<br>      } else {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(encodeURIComponent(things[0]) + ';' + encodeURIComponent(things[1]) + '|'); }<br>      }<br>      //alert(10);<br>      iois.value='';<br>      origph=altnextph;<br>      altph=altnextph;<br>      iois.placeholder=altnextph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      //alert(20);<br>   } else if (things.length &gt;= 2 && numsets &gt; 0) {<br>      yvalue=things[eval(-1 + things.length)];<br>      xvalue=ioisval.replace(';' + yvalue, ''); //.replace(/\~/g,'&lt;br&gt;');<br>      if (document.getElementById('h1column').innerHTML == 'Bar') {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(encodeURIComponent(yvalue) + ';' + xvalue + '|'); }<br>      } else {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(encodeURIComponent(xvalue) + ';' + yvalue + '|'); }<br>      }<br>      xvalue=ioisval.replace(';' + yvalue, '').replace(/\~/g,'&lt;br&gt;');<br>      //alert(zerozerox + ' ... ' + eval(yfactor * eval(eval('' + yvalue))) + ' ... yfactor=' + yfactor + " &lt;div title='' style='background-color:rgba(255,0,0,0.5);z-index:24;position:absolute;top:" + eval(zerozeroy + 8 - eval(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset))))) + "px;left:" + dwl + "px;width:" + dw + "px;height:" + eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset))) + "px;'&gt;&lt;/div&gt;");<br>      var xl='';<br>      xl=(xvalue + ' ').substring(0,1);<br>      for (var iiyu=1; iiyu&lt;ylabel.length; iiyu++) {<br>        xl+='&lt;br&gt;' + xvalue.substring(iiyu, eval(1 + iiyu));<br>      }<br>      //alert(document.getElementById('h1column').innerHTML);<br>      if (document.getElementById('h1column').innerHTML == 'Line' || document.getElementById('h1column').innerHTML == 'Area') { //xvalue.toLowerCase().indexOf('line') != -1) {<br>      //alert('2:' + document.getElementById('h1column').innerHTML);<br>      document.getElementById('h1column').innerHTML=document.getElementById('h1column').innerHTML; //'Line';<br>      if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML=document.getElementById('h1column').innerHTML; }<br>      hrlgcnt++;<br>      document.getElementById('daxes').innerHTML+='&lt;hr title="' + ylabel + ': ' + yvalue + '" class="vertex" onclick="hrclick(this);" ' + tprefix + 'title=hrlg' + hrlgcnt + ' id=hrlg' + hrlgcnt + ' style="position:absolute;top:' + eval(zerozeroy + 14 - eval(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset))))) + 'px;left:' + eval(eval('' + dwl) + eval(eval('' + dw) / 2)) + 'px;"&gt;&lt;/hr&gt;';<br>      document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;sub style="margin-top:20px;position:absolute;left:' + eval(eval('' + dwl) + eval(eval('' + dw) / 2)) + 'px;top:' + zerozeroy + 'px;"&gt;' + xvalue + '&lt;/sub&gt;&lt;/b&gt;';<br>      if (orignumsets != numsets) {<br>      //alert(connect(document.getElementById('hrlg' + lasthr), document.getElementById('hrlg' + hrlgcnt)));<br>      //document.getElementById('daxes').innerHTML+=connect(document.getElementById('hrlg' + lasthr), document.getElementById('hrlg' + hrlgcnt));<br>      document.getElementById('hrlg' + lasthr).click();<br>      document.getElementById('hrlg' + hrlgcnt).click();<br><br>      if (document.getElementById('h1column').innerHTML == 'Area') { // thanks to https://stackoverflow.com/questions/41988955/absolute-positioning-of-svg-element-not-working and https://datavizcatalogue.com/methods/area_graph.html<br>        var mintop=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')),  eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')));       <br>        var minleft=Math.min(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')),  eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));       <br>        var thisheight=Math.abs(zerozeroy - mintop);<br>        var thiswidth=Math.abs(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')));       <br>        var az='&lt;div class="svg-container" style="opacity:0.5;position:absolute;top:' + Math.floor(eval(14 + mintop)) + 'px;left:' + Math.floor(minleft) + 'px;width:' + Math.floor(thiswidth) + 'px;height:' + Math.floor(thisheight) + 'px;"&gt;&lt;svg height="100%" width="100%"&gt;&lt;polygon points="'; //0,0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',0 ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + ' ' + Math.floor(eval('' + dwl) + eval(eval('' + dw) / 2)) + ',' + Math.floor(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset)))) + '" style="fill:lime;stroke:purple;stroke-width:1" /&gt;&lt;/svg&gt;&lt;/div&gt;'; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ','; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.top.replace('px','')) - mintop) + ' '; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ','; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.top.replace('px','')) - mintop) + ' '; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + hrlgcnt).style.left.replace('px','')) - minleft) + ','; <br>        az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' '; <br>        az+='' + Math.floor(eval('' + document.getElementById('hrlg' + lasthr).style.left.replace('px','')) - minleft) + ','; <br>        az+='' + Math.floor(eval(eval(eval('' + zerozeroy)) - mintop)) + ' '; <br>        az+='" style="fill:' + acol + ';stroke:purple;stroke-width:1" /&gt;&lt;/svg&gt;&lt;/div&gt;';<br>        //alert(az); <br>        document.getElementById('daxes').innerHTML+=az; <br>      } <br><br><br>      } //else {<br>      //alert(' numsets=' + numsets + ' and orignumsets=' + orignumsets);<br>      //}<br>      lasthr=hrlgcnt;<br>      } else if (document.getElementById('h1column').innerHTML == 'Bar') { // yvalue.toLowerCase().indexOf('bar') != -1) {<br>      document.getElementById('daxes').innerHTML+="&lt;div onclick='alert(this.title);' title='" + xlabel + ": " + xvalue + "' style='background-color:" + cgcols[Math.floor(Math.random() * cgcols.length)] + ";opacity:0.5;z-index:24;position:absolute;top:" + dwt + "px;left:" + eval(zerozerox + 14) + "px;height:" + dw + "px;width:" + eval(xfactor * eval(eval('' + xvalue) - eval('' + xoffset))) + "px;'&gt;&lt;/div&gt;";<br>      document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;sub style="margin-top:20px;margin-left:-50px;position:absolute;top:' + dwt + 'px;left:' + zerozerox + 'px;"&gt;' + yvalue + '&lt;/sub&gt;&lt;/b&gt;';<br>      } else {<br>      document.getElementById('daxes').innerHTML+="&lt;div onclick='alert(this.title);' title='" + ylabel + ": " + yvalue + "' style='background-color:" + cgcols[Math.floor(Math.random() * cgcols.length)] + ";opacity:0.5;z-index:24;position:absolute;top:" + eval(zerozeroy + 14 - eval(eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset))))) + "px;left:" + dwl + "px;width:" + dw + "px;height:" + eval(yfactor * eval(eval('' + yvalue) - eval('' + yoffset))) + "px;'&gt;&lt;/div&gt;";<br>      document.getElementById('daxes').innerHTML+='&lt;b&gt;&lt;sub style="margin-top:20px;position:absolute;left:' + dwl + 'px;top:' + zerozeroy + 'px;"&gt;' + xvalue + '&lt;/sub&gt;&lt;/b&gt;';<br>      }<br>      numsets--;<br>      if (numsets == 0) {  document.getElementById('daxes').innerHTML+='&lt;style&gt; hr.vertex { visibility:hidden; } &lt;/style&gt;'; }<br>      dwl+=dw;<br>      dwt-=dw;<br>      dwl+=5;<br>      dwt-=5;<br>      iois.value='';<br>      iois.placeholder=altnextph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>   }<br>   } else {<br>    var gradient=0.0;<br>    var offset=0.0;<br>    if (ioisval == '') { ioisval=iois.value;  }<br>    var things=ioisval.split(',');<br>    //alert(ioisval + ' ... things.length=' + things.length);<br>    if (things.length &gt;= 3) {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(ioisval + '|'); }<br>      var rootsy=[0,0]; // thanks to http://www.biology.arizona.edu/biomath/tutorials/quadratic/roots.html<br>      for (var kkk=minx; kkk&lt;=maxx; kkk+=0.05) {<br>      //alert(eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2]))));<br>      if (eval(1.0 * eval('' + kkk)) &gt; maxx || eval(1.0 * eval('' + kkk)) &lt; minx) {<br>      hrcnt=hrcnt;<br>      } else if (eval(1.0 * eval(eval('' + kkk) + ',' + eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2]))) + eval('' + offset)) &gt; maxy || eval(1.0 * eval(eval('' + kkk) + ',' + eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2]))) + eval('' + offset)) &lt; miny) {<br>      hrcnt=hrcnt;<br>      } else if (eval('' + kkk) != 0 && Math.abs(eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2]))) &gt; 0.05) {<br>      hrcnt++;<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + things[0] + '*x*x ' + ('+' + things[1]).replace('+-','-').replace('-','- ') + '*x ' + ('+' + things[2]).replace('+-','-').replace('-','- ') + ' plot point (' + eval('' + kkk) + ',' + eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2])) + ')" style="border-color:orange;position:absolute;top:' + eval(zerozeroy - eval(yfactor * eval(eval('' + kkk) + ',' + eval(eval(eval('' + kkk) * eval('' + kkk) * eval('' + things[0])) + (eval('' + kkk) * eval('' + things[1])) + eval('' + things[2]))) + eval('' + offset))) + 'px;left:' + eval(zerozerox + eval(xfactor * eval('' + kkk))) + 'px;"&gt;&lt;/hr&gt;';<br>      }<br>      }<br>      if (eval('' + things[0]) != 0) {<br>        //alert(eval(2.0 * eval(eval('' + things[0]))) + ' ... ' + eval(eval(eval('' + things[1]) * eval('' + things[1])) - eval(4.0 * eval('' + things[0]) * eval('' + things[2]))));<br>        if (eval(eval('' + things[1]) * eval('' + things[1]) - eval(4.0 * eval('' + things[0]) * eval('' + things[2]))) &gt;= 0) {<br>        rootsy[0]=eval(eval(eval(('-' + things[1]).replace('--','')) + Math.sqrt(eval(eval(eval('' + things[1])) * eval(eval('' + things[1])) - eval(4.0 * eval(eval('' + things[0])) * eval(eval('' + things[2])))))) / eval(2.0 * eval(eval('' + things[0]))));<br>        rootsy[1]=eval(eval(eval(('-' + things[1]).replace('--','')) - Math.sqrt(eval(eval(eval('' + things[1])) * eval(eval('' + things[1])) - eval(4.0 * eval(eval('' + things[0])) * eval(eval('' + things[2])))))) / eval(2.0 * eval(eval('' + things[0]))));<br>        //alert('' + rootsy[0] + ' ' + rootsy[1]);<br>        }<br>        hrcnt++;<br>        document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + things[0] + '*x*x ' + ('+' + things[1]).replace('+-','-').replace('-','- ') + '*x ' + ('+' + things[2]).replace('+-','-').replace('-','- ') + ' plot point (' + eval('' + rootsy[0]) + ',0)" style="z-index:234;border-color:pink;position:absolute;left:' + eval(zerozerox + eval(xfactor * eval(eval('' + rootsy[0])))) + 'px;top:' + eval('' + zerozeroy) + 'px;"&gt;&lt;/hr&gt;';<br>        hrcnt++;<br>        document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + things[0] + '*x*x ' + ('+' + things[1]).replace('+-','-').replace('-','- ') + '*x ' + ('+' + things[2]).replace('+-','-').replace('-','- ') + ' plot point (' + eval('' + rootsy[1]) + ',0)" style="z-index:234;border-color:pink;position:absolute;left:' + eval(zerozerox + eval(xfactor * eval(eval('' + rootsy[1])))) + 'px;top:' + eval('' + zerozeroy) + 'px;"&gt;&lt;/hr&gt;';<br>      }<br>      hrcnt++;<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + things[0] + '*x*x ' + ('+' + things[1]).replace('+-','-').replace('-','- ') + '*x ' + ('+' + things[2]).replace('+-','-').replace('-','- ') + ' plot point (0,' + eval('' + things[2]) + ')" style="z-index:234;border-color:pink;position:absolute;left:' + eval(zerozerox) + 'px;top:' + eval(zerozeroy - eval(yfactor * eval(eval('' + things[2])))) + 'px;"&gt;&lt;/hr&gt;';<br>      iois.value='';<br>      iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      oiois=iois;<br>      setTimeout(toggleplaceholder, 5000);<br>      <br>      <br>    } else if (things.length &gt;= 1) {<br>      if (jans == '') { if (eqplotsuffix == '') { eqplotsuffix='|'; } eqplotsuffix+=(ioisval + '|'); }<br>      gradient=eval('' + things[0]);<br>      offset=eval('' + things[1]);<br>      // y=6x + 12;<br>      if (gradient != 0) {<br>      //alert('' + xfactor + ' ' + yfactor);<br>      hrcnt++;<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + gradient + '*x ' + ('+' + offset).replace('+-','-').replace('-','- ') + ' plot point (' + eval(-offset / eval('' + gradient)) + ',0)" style="z-index:134;border-color:pink;position:absolute;top:' + zerozeroy + 'px;left:' + eval(zerozerox - eval(xfactor * eval(offset / eval('' + gradient)))) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + gradient + '*x ' + ('+' + offset).replace('+-','-').replace('-','- ') + ' plot point (0,' + eval('' + offset) + ')" style="z-index:134;border-color:pink;position:absolute;top:' + eval(zerozeroy - eval(yfactor * eval('' + offset))) + 'px;left:' + zerozerox + 'px;"&gt;&lt;/hr&gt;';<br>      <br>      for (var kkk=minx; kkk&lt;=maxx; kkk+=eval(eval('' + xlen) / Math.floor((80 * Math.abs(eval('' + gradient)))) )) {<br>      if (eval(eval(eval('' + kkk) * eval('' + gradient)) + eval('' + offset)) &gt; maxx || eval(eval(eval('' + kkk) * eval('' + gradient)) + eval('' + offset)) &lt; minx) {<br>      hrcnt=hrcnt;<br>      } else if (eval('' + kkk) &gt; maxy || eval('' + kkk) &lt; miny) {<br>      hrcnt=hrcnt;<br>      } else {<br>      hrcnt++;<br>      document.getElementById('hrs').innerHTML+='&lt;hr class="vertex" onclick="alert(this.title);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' title="y=' + gradient + '*x ' + ('+' + offset).replace('+-','-').replace('-','- ') + ' plot point (' + eval('' + kkk) + ',' + eval(eval(eval('' + kkk) * eval('' + gradient)) + eval('' + offset)) + ')" style="position:absolute;top:' + eval(zerozeroy - eval(yfactor * eval(eval(eval('' + kkk) * eval('' + gradient)) + eval('' + offset)))) + 'px;left:' + eval(zerozerox + eval(xfactor * eval('' + kkk))) + 'px;"&gt;&lt;/hr&gt;';<br>      }<br>      }<br>      iois.value='';<br>      iois.placeholder=origph; //'Line formula y=Gx + O ... G is gradient, O is Y-offset ... please comma separate G,O'; <br>      oiois=iois;<br>      setTimeout(toggleplaceholder, 5000);<br>      <br>      }<br>    }<br>   }<br>   return '';<br>  }<br>  <br>  function draw_hrs() {<br>    var inqis='';<br>    if (('' + location.hash).indexOf('=column') != -1) {<br>       emeq='column';<br>       document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Plot%20Axes%','Column%20Graph%');<br>       xlabel='';<br>       ylabel='';<br>       firstp='Please enter Title, Number of data sets, Y-axis minimum, Y-axis maximum';<br>    }<br>    if (('' + location.hash).replace(/\%7C/g,'|').indexOf('|Bar|') != -1) {<br>       origph='Enter X-axis Label (numerical); Y-axis Label';<br>       altph=origph;<br>       altnextph='Enter X-axis Value; Y-axis Value (~ is line feed)';<br>       firstp='Please enter Title, Number of data sets, X-axis minimum, X-axis maximum';<br>    }<br>    aem=document.getElementById('aemail').href;<br>    wourx=location.search.split('ourx=')[1] ? decodeURIComponent(location.search.split('ourx=')[1].split('&')[0]) : '';<br>    if (('' + location.hash + '~').indexOf('blank') != -1 && ('' + location.hash + '~').indexOf('blank~') == -1) {<br>     wourx=('' + location.hash + '~').split('blank')[1].split('~')[0];<br>    }<br>    lesscourx=wourx;<br>    if (('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('mathsgrid') != -1 || ('' + location.hash).indexOf('reveal') != -1) {<br>     location.hash=location.hash.replace('mathsgrid','hangman').replace('reveal','hangman#hangman');<br>     if (('' + location.hash).indexOf('.') != -1) {<br>       goes=eval(('' + location.hash).split('.')[1]);<br>       score=eval(('' + location.hash).split('.')[0].split('hangman')[1].replace('-',''));<br>     } else if (document.URL.indexOf('?wording=') != -1 && ('' + location.hash).split('angma').length &gt; 3) { // && ('' + location.hash).indexOf('hangman0.0') != -1) { // && ('' + location.hash).indexOf('00.0') != -1) {<br>       sosize(' '); // sosize('word_wrap.jpg');<br>     } else if (document.URL.indexOf('?wording=') != -1 && ('' + location.hash).split('angma').length &gt; 2) { // && ('' + location.hash).indexOf('hangman0.0') != -1) { // && ('' + location.hash).indexOf('00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='&nbsp;';<br>       document.getElementById('myh3').innerHTML='&nbsp;';<br>       document.getElementById('myh4').innerHTML='&nbsp;';<br>       document.getElementById('dhangman').innerHTML+="&lt;iframe name=iback id=iback style='background-color:transparent;z-index:23;position:absolute;top:200px;left:0px;width:580px;height:100vh;' src=//www.rjmprogramming.com.au/HTMLCSS/user_of_signature_signature.html?rand=" + Math.floor(Math.random() * 123456) + "&gt;&lt;/iframe&gt;";<br>       document.getElementById('dhangman').innerHTML+="&lt;iframe name=ifront id=ifront style='background-color:transparent;z-index:22;position:absolute;top:0px;left:0px;width:100%;height:100vh;' src=//www.rjmprogramming.com.au/HTMLCSS/square_hr_tracing.htm#hangman-0.0&gt;&lt;/iframe&gt;";<br>       document.getElementById('dhangman').innerHTML+="&lt;div id=dback title='' style='background-color:transparent;z-index:24;position:absolute;top:200px;left:580px;'&gt;&lt;/div&gt;";<br>       //return;<br>     }<br>    }<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Maths Grid Paper';<br>       } <br>    <br>    //    if (('' + location.hash).indexOf('blank') == -1 && ('' + location.hash).indexOf('square') == -1 && ('' + location.hash).indexOf('grid') == -1) {<br>    <br>    if (document.URL.indexOf('?') == -1 && ('' + location.hash).indexOf('blank') == -1 && ('' + location.hash).indexOf('hangman') == -1 && ('' + location.hash).indexOf('square') == -1 && ('' + location.hash).indexOf('grid') == -1) { pickone(inqis); } else if (document.URL.indexOf('?') == -1 && (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1)) {  inqis=' '; pickone(inqis);  }<br>    wording=location.search.split('wording=')[1] ? decodeURIComponent(location.search.split('wording=')[1].split('&')[0]) : '&nbsp;';<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       wording='Maths Grid Paper';<br>       } <br>    inanswer=location.search.split('answer=')[1] ? decodeURIComponent(location.search.split('answer=')[1].split('&')[0]) : inqis;<br>    var inquestion=location.search.split('question=')[1] ? ina(decodeURIComponent(location.search.split('question=')[1].split('&')[0])) : '';<br>    var tds=document.getElementsByTagName('td');<br>    var fhr=0, vdval='', thisv='', into='hrs', defvdval='', toff=6, loff=-2;<br>    dval='';<br>    for (var itds=0; itds&lt;tds.length; itds++) {<br>      tds[itds].id='td' + eval(1 + itds);<br>      if (('' + location.hash).indexOf('grid') != -1) { into='td' + eval(1 + itds); }<br>      if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) { <br>        if (('' + location.hash).indexOf('square') != -1) { if (eval(1 + itds) &gt; 9) {  document.getElementById('spout').innerHTML+="&lt;style&gt; #td" + eval(1 + itds) + "::after { content:'\\00003" + Math.floor(eval(eval(1 + itds) / 10)) + "\\0020e3\\00003" + eval(eval(1 + itds) % 10) + "\\0020e3'; } &lt;/style&gt;"; } else {  document.getElementById('spout').innerHTML+="&lt;style&gt; #td" + eval(1 + itds) + "::after { content:'\\00003" + eval(eval(1 + itds) % 10) + "\\0020e3'; } &lt;/style&gt;"; }  defvdval="visibility:hidden;"; tds[itds].style.border='1px solid red';  }<br>        if (('' + location.hash).indexOf('grid') != -1) { tds[itds].style.border='1px solid brown';  }<br>        tds[itds].onclick=function(event) { lastsquare=eval(('' + this.id).replace('td','')); goes++; if (lastsquare == sqchoice) { score++; }  if (('' + location.hash).indexOf('square') != -1) { picksq(); } else if (('' + location.hash).indexOf('grid') != -1) {  gridinfo(' in square number ' + lastsquare);  }  };<br>      }<br>      thisrect=tds[itds].getBoundingClientRect();<br>      //squares.push(('' + thisrect.left).replace('px','') + "," + ('' + thisrect.top).replace('px','') + ";" + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));<br>      //alert(('' + thisrect.left) + ' ' + ('' + thisrect.top) + ' ' + ('' + thisrect.width) + ' ' + ('' + thisrect.height) + ' ' + squares[0]);<br><br>      fhr=hrcnt;<br>      <br>      //vertices.push(('' + thisrect.left).replace('px','') + "," + ('' + thisrect.top).replace('px',''));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(('' + thisrect.left).replace('px',''))) + "," + ourmathround(eval(('' + thisrect.top).replace('px',''))) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br><br>      //vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(('' + thisrect.left).replace('px','')) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')))) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')))) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')))) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + ('' + thisrect.top).replace('px',''));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')))) + "," + ourmathround(('' + thisrect.top).replace('px','')) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      //if (hrcnt == 134 || hrcnt == 146) { alert(vdval + ' hr' + hrcnt + ': ' + thisv + ' ... ' + vstr); } // ?<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>      <br>      //<br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2)) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2)) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1)) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2)) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br><br><br>      //vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(('' + thisrect.left).replace('px','')) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2)) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br><br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + ('' + thisrect.top).replace('px',''));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2)) + "," + ourmathround(('' + thisrect.top).replace('px','')) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br><br>      //vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 1));<br>      vdval=defvdval;<br>      thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2)) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 1)) + ';';<br>      if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }<br>      document.getElementById(into).innerHTML+='&lt;hr class="vertex' + maybenocont(vdval) + '" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + vdval + 'position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 1) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br><br>      if (eval(itds % 5) == 0) {<br>      dval='';<br>      if (inquestion != '') {<br>       if (parent.document != document) {<br>        if (parent.document.getElementById('myh1')) {<br>        dval=dval;<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Maths Grid Paper';<br>       } else {<br>       document.getElementById('myh1').innerHTML='Chinese Brain Twisters Answer';<br>       }<br>        } else {<br>       if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) { <br>       document.getElementById('myh1').innerHTML=wording;<br>       //wording='&nbsp;';<br>       } else {<br>       if (document.getElementById('myh3').innerHTML.indexOf(' ... ') == -1) { document.getElementById('myh3').innerHTML+=' ... Thanks to Chinese Brain Twisters by Baifang ISBN: 0-471-59505-5'; }<br>       document.getElementById('reveal').style.display='block';<br>       document.getElementById('skip').style.display='block';<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Maths Grid Paper';<br>       } else {<br>       document.getElementById('myh1').innerHTML='Chinese Brain Twisters Question';<br>       }<br>       }<br>        }<br>       } else {<br>       if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) { <br>       document.getElementById('myh1').innerHTML=wording;<br>       //wording='&nbsp;';<br>       } else {<br>       if (document.getElementById('myh3').innerHTML.indexOf(' ... ') == -1) { document.getElementById('myh3').innerHTML+=' ... Thanks to Chinese Brain Twisters by Baifang ISBN: 0-471-59505-5'; }<br>       document.getElementById('reveal').style.display='block';<br>       document.getElementById('skip').style.display='block';<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Maths Grid Paper';<br>       } else {<br>       document.getElementById('myh1').innerHTML='Chinese Brain Twisters Question';<br>       }<br>       }<br>       }<br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>       document.getElementById('myh1').innerHTML='Image Reveal Game';<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>       document.getElementById('qh4').innerHTML='Maths Grid Paper';<br>       } else {<br>       //alert('' + location.hash);<br>       if (('' + location.hash).indexOf('=plot') != -1) {<br>       document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:none;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;Plot Axes - Linear or Polynomial Equation';<br>       document.getElementById('qh4').innerHTML=wording.replace('Vertex Pointing' + osft + ' Game','Plot Axes ... &lt;input style="width:460px;" type=text placeholder="' + firstp + '" onblur=plotthis(this,blk,blk); value="" id=iplot&gt;&lt;/input&gt;');<br>       document.getElementById('hr2').style.display='none';<br>       document.getElementById('hr8').style.display='none';<br>       document.getElementById('hr1').style.display='none';<br>       document.getElementById('myh4').innerHTML='&nbsp;';<br>       } else if (('' + location.hash).indexOf('=column') != -1) {<br>       emeq='column';<br>       document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Plot%20Axes%','Column%20Graph%');<br>       document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:none;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;&lt;span id=h1column style=display:inline-block;&gt;Column&lt;/span&gt; Graph';<br>       document.getElementById('qh4').innerHTML=wording.replace('Vertex Pointing' + osft + ' Game','&lt;select onchange=changegtypeto(this.value); id=graphsel style=display:inline-block;&gt;&lt;option value=Column&gt;Column&lt;/option&gt;&lt;option value=Line&gt;Line&lt;/option&gt;&lt;option value=Area&gt;Area&lt;/option&gt;&lt;option value=Bar&gt;Bar&lt;/option&gt;&lt;/select&gt; Graph ... &lt;input style="width:460px;" type=text placeholder="' + firstp + '" onblur=plotthis(this,blk,blk); value="" id=iplot&gt;&lt;/input&gt;');<br>       document.getElementById('hr2').style.display='none';<br>       document.getElementById('hr8').style.display='none';<br>       document.getElementById('hr1').style.display='none';<br>       document.getElementById('myh4').innerHTML='&nbsp;&lt;span id=h1col style=display:inline-block;&gt;Column&lt;/span&gt; Graph';<br>       <br>    if (('' + location.hash).replace(/\%7C/g,'|').indexOf('|Bar|') == -1) {<br>       origph='Enter X-axis Label; Y-axis Label (numerical)';<br>       altph=origph;<br>       altnextph='Enter X-axis Value (~ is line feed); Y-axis Value';<br>    }<br>       <br>       } else {<br>       document.getElementById('qh4').innerHTML=wording.replace('Vertex Pointing' + osft + ' Game','Vertex Pointing' + osft + ' Game ... On Each Set of 4 a Bezier Curve is Shown');<br>       }<br>       }<br>       if (inquestion.indexOf('r') == -1) { inquestion='hr' + inquestion.replace(/\,/g,',hr'); } <br>       if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }<br>      }<br>      //document.getElementById(into).innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   style="' + dval + 'position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      if (!isIE) {<br>      //alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   '));<br>      document.getElementById(into).innerHTML+=connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   ');<br>      } else {<br>      document.getElementById(into).innerHTML+='&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   style="' + dval + 'position:absolute;top:' + eval(toff + eval('' + thisrect.top)) + 'px;left:' + eval(loff + eval('' + thisrect.left)) + 'px;"&gt;&lt;/div&gt;';<br>      }<br>      hrcnt++;<br>      }<br>      if (itds &lt; 5) {<br>      dval='';<br>      if (inquestion != '') {<br>       if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }<br>      }<br>      document.getElementById(into).innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + '  style="' + dval + 'width:100px;position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>      }<br>      //document.getElementById(into).innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   style="' + dval + 'position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"&gt;&lt;/hr&gt;';<br>      dval='';<br>      if (inquestion != '') {<br>       if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }<br>      }<br>      if (!isIE) {<br>      //alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   '));<br>      document.getElementById(into).innerHTML+=connect(document.getElementById('hr' + eval(3 + eval('' + fhr))), document.getElementById('hr' + eval(2 + eval('' + fhr)))).replace('&lt;div ','&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   ');<br>      } else {<br>      document.getElementById(into).innerHTML+='&lt;div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical   style="' + dval + 'position:absolute;top:' + eval(toff + eval('' + thisrect.top)) + 'px;left:' + eval(loff + eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"&gt;&lt;/div&gt;';<br>      }<br>      hrcnt++;<br>      dval='';<br>      if (inquestion != '') {<br>       if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }<br>      }<br>      document.getElementById(into).innerHTML+='&lt;hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + '  style="' + dval + 'width:100px;position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + thisrect.left + 'px;"&gt;&lt;/hr&gt;';<br>      hrcnt++;<br>      <br>      dval='';<br><br>    }<br>    onld=false;<br>    dval='';<br>    <br>    if (('' + location.hash).indexOf('grid') != -1) { document.getElementById('mytable').style.marginTop='8px'; document.getElementById('mytable').style.marginLeft='3px';  }<br>    <br>    if (inquestion.indexOf('.') != -1) {<br>      var xinas=inquestion.split(',');<br>      for (ix=0; ix&lt;xinas.length; ix++) {<br>       if (xinas[ix].indexOf('.') != -1) {<br>         hrclick(document.getElementById('hr' + xinas[ix].split('.')[0].replace('-','').replace('dr','').replace('hr','')));<br>         hrclick(document.getElementById('hr' + xinas[ix].split('.')[1].replace('-','').replace('dr','').replace('hr','')));<br>       }<br>      }<br>    }<br>    <br>    document.getElementById('myh3').innerHTML = document.getElementById('myh3').innerHTML.replace(" - ","&lt;select id=selmode style=width:35px; onclick=socwc(event); ontouchmove=socwc(event); onmousemove=socwc(event); onchange=selc(this.value);&gt;&lt;option value=" + document.URL.split('#')[0] + location.hash + "&gt; - &lt;/option&gt;&lt;option value=" + (document.URL.split('#')[0].split('?')[0] + 'l').replace('.htmll','.html') + "&gt;Tracing Square Line Drawing&lt;/option&gt; &lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "&gt;Chinese Brain Twisters&lt;/option&gt;&lt;option id=paxes value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#blank=plot&gt;Plot Axes - Linear or Polynomial Equation&lt;/option&gt;&lt;option id=columns value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#blank=column&gt;Column or Line or Area or Bar Graph&lt;/option&gt;&lt;option id=iosos value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#blank&gt;Vertex Pointing or SOS (for two) Game&lt;/option&gt;&lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#square&gt;Square Pointing Game&lt;/option&gt;&lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#grid&gt;Grid Pointing Game&lt;/option&gt;&lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#hangman&gt;Hangman Game&lt;/option&gt;&lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#mathsgrid#hangman&gt;Maths Grid Paper&lt;/option&gt;&lt;option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#reveal#hangman&gt;Image Reveal Game&lt;/option&gt;&lt;/select&gt;");    <br><br>    inas=inanswer.split(',');<br>    if (inas.length &gt; 0) {<br>      setTimeout(acl, 2000);<br>    }<br>    <br>    if (wourx != '' && wourx.indexOf('=column') == -1 && wourx.indexOf('=plot') == -1 && document.getElementById('selmode')) {<br>     var rectw=document.getElementById('selmode').getBoundingClientRect();<br>     //alert(wourx);<br>     //alert(eval(eval('' + wourx) - eval('' + rectw.left)));<br>     //document.title+=' ' + eval(eval('' + wourx) - eval('' + rectw.left));<br>     if (eval(eval('' + wourx) - eval('' + rectw.left)) &lt;= 20) { wourx=''; }<br>    }<br>    if (wourx != '' && wourx.indexOf('=column') == -1 && wourx.indexOf('=plot') == -1 && (' ' + location.hash).indexOf('blank') != -1) {<br>       osft=' or SOS (for two)';<br>       document.getElementById('qh4').innerHTML=document.getElementById('qh4').innerHTML.replace(' Game', osft + ' Game');<br>       //alert(wourx);<br>       setTimeout(presosize,2000);<br>    }<br>    <br>    sqorig=document.getElementById('qh4').innerHTML;  <br>    <br>    if (('' + location.hash).indexOf('square') != -1) { picksq(); }<br><br><br>    if ((('' + location.hash).indexOf('hangman0.0') != -1 || ('' + location.hash).indexOf('hangman00.0') != -1) && document.URL.indexOf('?wording=') != -1) {<br>      sqorig=sqorig; //alert('Grid Paper');<br>    } else if (('' + location.hash).indexOf('hangman') != -1) { <br>      playhangman(); <br>    }<br>    <br>    //alert(document.getElementById('qh4').innerHTML);<br>    sqorig=sqorig.replace('Pointing Game', 'Pointing &lt;a onclick="osft=' + "'"  + ' or SOS (for two)=' + "'"  + '; sosize(' + "''" + ');" style=text-decoration:underline;cursor:pointer;&gt;or SOS (for two)&lt;/a&gt; Game');<br>    document.getElementById('qh4').innerHTML=document.getElementById('qh4').innerHTML.replace('Pointing Game', 'Pointing &lt;a onclick="osft=' + "'"  + ' or SOS (for two)=' + "'"  + '; sosize(' + "''" + ');" style=text-decoration:underline;cursor:pointer;&gt;or SOS (for two)&lt;/a&gt; Game');<br>    //alert(document.getElementById('qh4').innerHTML);<br><br>    if (('' + location.hash).replace(/\%7C/g,'|').indexOf('=plot|') != -1) {<br>         //alert(0);<br>         var pbits=('' + location.hash).replace(/\%7C/g,'|').split('|');<br>         <br>         for (var ipbits=1; ipbits&lt;pbits.length; ipbits++) {<br>         //alert(ipbits);<br>           if (pbits[ipbits].indexOf(',') != -1) {<br>         //alert(pbits[ipbits]);<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=(pbits[ipbits] + '|');<br>             if (!document.getElementById('ashare')) {<br>               document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:inline-block;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;Plot Axes - Linear or Polynomial Equation';<br>             } else {<br>               document.getElementById('ashare').style.display='inline-block';<br>             }<br>             preplot(pbits[ipbits]);<br>           }<br>         }<br>    } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('=column|') != -1) {<br>         if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Line|') != -1) {<br>             document.getElementById('h1column').innerHTML='Line';<br>             document.getElementById('graphsel').value='Line';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Area'; }<br>         } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Bar|') != -1) {<br>             document.getElementById('h1column').innerHTML='Bar';<br>             document.getElementById('graphsel').value='Bar';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Bar'; }<br>         } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Area|') != -1) {<br>             document.getElementById('h1column').innerHTML='Area';<br>             document.getElementById('graphsel').value='Area';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Area'; }<br>         }  <br>  if (document.getElementById('h1column').innerHTML == 'Line') {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Line%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Line|');<br>  } else if (document.getElementById('h1column').innerHTML == 'Area') {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Area%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Area|');<br>  } else if (document.getElementById('h1column').innerHTML == 'Bar') {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Bar%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Bar|');<br>  } else {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Line%20Graph%','Column%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>  }<br>         //alert(0);<br>    // http://localhost:8888/square_hr_tracing.htm#blank=column|ngfh,2,234,675|Country;Currency|Great%3Cbr%3EBritain;456|hgfjhfg;427|<br>         var pbits=('' + location.hash + (location.search.split('blank=')[1] ? decodeURIComponent(location.search.split('blank=')[1].split('&')[0]) : '')).replace(/\%7C/g,'|').replace(/\%3Cbr\%3E/g,'~').replace(/\%7E/g,'~').split('|');<br>         var uptocoords=0, ijk=0, aijk, cijk='';<br>         for (var ipbits=1; ipbits&lt;pbits.length; ipbits++) {<br>         //alert(ipbits);<br>         //alert(pbits[ipbits]);<br>           if (decodeURIComponent(pbits[ipbits]).indexOf(';') != -1) { uptocoords=true; }<br>           if (decodeURIComponent(pbits[ipbits]).indexOf(',') != -1 || decodeURIComponent(pbits[ipbits]).indexOf(';') != -1) {<br>             if (decodeURIComponent(pbits[ipbits]).indexOf(';') != -1  && uptocoords && document.getElementById('h1column').innerHTML == 'Bar') {<br>               aijk=decodeURIComponent(pbits[ipbits]).split(';');<br>               cijk=aijk[1] + ';' + aijk[0];<br>               for (ijk=2; ijk&lt;aijk.length; ijk++) {<br>                 cijk+=';' + aijk[ijk];<br>               }<br>             }<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=(pbits[ipbits] + '|');<br>             if (cijk != '') { pbits[ipbits]=cijk; cijk=''; }<br>             if (!document.getElementById('ashare')) {<br>               document.getElementById('myh1').innerHTML='&lt;a onclick=emailit(); style=cursor:pointer;display:inline-block;text-decoration:underline; id=ashare&gt;Email&nbsp;&lt;/a&gt;&lt;span id=h1column style=display:inline-block;&gt;Column&lt;/span&gt; Graph';<br>             } else {<br>               document.getElementById('ashare').style.display='inline-block';<br>             }<br>             preplot(decodeURIComponent(pbits[ipbits]));<br>         //alert(pbits[ipbits]);<br>           } else if (decodeURIComponent(pbits[ipbits]).toLowerCase() == 'line') {<br>             document.getElementById('h1column').innerHTML='Line';<br>             document.getElementById('graphsel').value='Line';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Line'; }<br>             //emeq='line';<br>           }<br>         }<br>    } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Line|') != -1) {<br>             document.getElementById('h1column').innerHTML='Line';<br>             document.getElementById('graphsel').value='Line';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Line'; }<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Line%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Line|');<br>    } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Area|') != -1) {<br>             document.getElementById('h1column').innerHTML='Area';<br>             document.getElementById('graphsel').value='Area';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Area'; }<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Area%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Area|');<br>    } else if (decodeURIComponent('' + location.hash).replace(/\%7C/g,'|').indexOf('|Bar|') != -1) {<br>             document.getElementById('h1column').innerHTML='Bar';<br>             document.getElementById('graphsel').value='Bar';<br>             if (document.getElementById('h1col')) { document.getElementById('h1col').innerHTML='Bar'; }<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Bar%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Bar|');<br>    } <br>    <br><br><br><br>  }<br>  <br>function changegtypeto(tv) {<br>  if (eqplotsuffix == '') { eqplotsuffix='|'; } <br>  eqplotsuffix+=(tv + '|'); <br>  document.getElementById('graphsel').value=tv;<br>  document.getElementById('h1column').innerHTML=tv;<br>  if (tv == 'Line') {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Column%20Graph%','Line%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>             if (eqplotsuffix == '') {  eqplotsuffix='|';   }<br>             eqplotsuffix+=('Line|');<br>  } else {<br>  document.getElementById('aemail').href=document.getElementById('aemail').href.replace('Line%20Graph%','Column%20Graph%');<br>    aem=document.getElementById('aemail').href;<br>  }<br>  if ( document.getElementById('h1col')) { document.getElementById('h1col').innerHTML=tv; }<br>  if (tv != 'Line' && decodeURIComponent(('' + location.hash)).indexOf('|Line|') != -1) {<br>    if (document.URL.indexOf('?') != -1) {<br>    location.href=document.URL.split('#')[0] + '&rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CLine\%7C/g,'%7C' + tv + '%7C').replace(/\|Line\|/g,'|' + tv + '|');<br>    } else {<br>    location.href=document.URL.split('#')[0] + '?rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CLine\%7C/g,'%7C' + tv + '%7C').replace(/\|Line\|/g,'|' + tv + '|');<br>    }<br>  } else if (tv != 'Area' && decodeURIComponent(('' + location.hash)).indexOf('|Area|') != -1) {<br>    if (document.URL.indexOf('?') != -1) {<br>    location.href=document.URL.split('#')[0] + '&rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CArea\%7C/g,'%7C' + tv + '%7C').replace(/\|Area\|/g,'|' + tv + '|');<br>    } else {<br>    location.href=document.URL.split('#')[0] + '?rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CArea\%7C/g,'%7C' + tv + '%7C').replace(/\|Area\|/g,'|' + tv + '|');<br>    }<br>  } else if (tv != 'Bar' && decodeURIComponent(('' + location.hash)).indexOf('|Bar|') != -1) {<br>    if (document.URL.indexOf('?') != -1) {<br>    location.href=document.URL.split('#')[0] + '&rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CBar\%7C/g,'%7C' + tv + '%7C').replace(/\|Bar\|/g,'|' + tv + '|');<br>    } else {<br>    location.href=document.URL.split('#')[0] + '?rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CBar\%7C/g,'%7C' + tv + '%7C').replace(/\|Bar\|/g,'|' + tv + '|');<br>    }<br>  } else if (tv != 'Column' && decodeURIComponent(('' + location.hash)).indexOf('|Column|') != -1) {<br>    if (document.URL.indexOf('?') != -1) {<br>    location.href=document.URL.split('#')[0] + '&rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CColumn\%7C/g,'%7C' + tv + '%7C').replace(/\|Column\|/g,'|' + tv + '|');<br>    } else {<br>    location.href=document.URL.split('#')[0] + '?rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash).replace(/\%7CColumn\%7C/g,'%7C' + tv + '%7C').replace(/\|Column\|/g,'|' + tv + '|');<br>    }<br>  } else if (tv != 'Column' && decodeURIComponent(('' + location.hash)).indexOf('=column') != -1) {<br>    if (document.URL.indexOf('?') != -1) {<br>    location.href=document.URL.split('#')[0] + '&rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash + '|' + tv + '|');<br>    } else {<br>    location.href=document.URL.split('#')[0] + '?rand=' + Math.floor(Math.random() * 12345678) + ('' + location.hash + '|' + tv + '|');<br>    }<br>  } <br>}<br><br>function presosize() {<br>  sosize('');<br>}<br><br>function myguess() {<br>  var myg=prompt('Okay, Player' + eval(3 - thisplayer) + ', what is your guess regarding the contents of the image as it is being revealed?', '');<br>  if (myg == null) { myg=''; } <br>  var mygx=confirm('Okay, Player' + thisplayer + ', is Player' + eval(3 - thisplayer) + ' guess of ' + myg + ' a correct guess?'); <br>  if (mygx) { <br>      //alert('score' + eval(3 - thisplayer) + '+=' + availablescore);<br>      eval('sparescore=eval(score' + eval(3 - thisplayer) + '.split("(")[1].split(")")[0])');<br>      sparescore+=availablescore<br>      eval('score' + eval(3 - thisplayer) + '=" (' + sparescore + ')"');<br>      //document.getElementById('myh4').innerHTML+=' ... image of Player1' + score1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player2' + score2;<br>      thisplayer=eval(3 - thisplayer);<br>      sosize(' '); // sosize('word_wrap.jpg');<br>  }<br>}<br><br>function readUBlob(inimis,xis,yis) {<br>   if (inimis.trim() != '') {<br>      document.getElementById('mytable').style.background="url('" + inimis.trim() + "')";<br>      document.getElementById('dpf').style.display='none';<br>   }<br>}<br><br>function process(infilecontents) {<br>    if (infilecontents != null) {<br>    //alert(99);<br>        document.getElementById('mytable').style.backgroundImage="URL('data:image/png;base64," + btoa(infilecontents) + "')";<br>    //alert(999);<br>        document.getElementById('dpf').style.display='none';<br>    //alert(9999);<br>    }<br>}<br><br>function readBlob(opt_startByte, opt_stopByte) {<br><br>    //alert(33);<br>    var files = document.getElementById("file").files;<br>    //alert(333);<br>    if (!files.length) {<br>      alert("Please select a file!");<br>      return;<br>    } else {<br>      w = files[0].name;<br>      //document.getElementById("fil").value = w;<br>    }<br><br>    var file = files[0];<br>    var start = parseInt(opt_startByte) || 0;<br>    var stop = parseInt(opt_stopByte) || file.size - 1;<br>    <br>    //alert(stop);<br><br>    var reader = new FileReader();<br><br>    // If we use onloadend, we need to check the readyState.<br>    reader.onloadend = function(evt) {<br>      if (evt.target.readyState == FileReader.DONE) { // DONE == 2<br>    //alert(77);<br>        process(evt.target.result);<br>    //alert(777);<br>      }<br>    };<br><br>    var blob = file.slice(start, stop + 1);<br>    reader.readAsBinaryString(blob);<br>}<br><br>function eh() {<br>  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {<br>    //alert(2);<br>    if (evt.target.tagName.toLowerCase() == 'button') {<br>      var startByte = evt.target.getAttribute('data-startbyte');<br>      var endByte = evt.target.getAttribute('data-endbyte');<br>    //alert(22);<br>      readBlob(startByte, endByte);<br>    //alert(222);<br>    }<br>  }, false);<br>}<br>  <br>function sosize(inim) {<br>    //var hors=[], vers=[], diags=[];<br>    var itds=0; tds=document.getElementsByTagName('td');<br>    var sqsi=0, ioffset=0, bextras='', s1=0, s2=0, ainim=inim;<br>    if (inim != '') {<br>      availablescore=100;<br>      if (inim.trim() != '') {<br>      inim=prompt('Okay, Player' + thisplayer + ' what is your image (to be revealed by Player' + eval(3 - thisplayer) + ') as a URL?  Else if you answer with a blank you can browse for the image file.', inim);<br>      }<br>      eval('s1=score' + thisplayer);<br>      eval('s2=score' + eval(3 - thisplayer));<br>        //document.title+=' x';<br>      document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing';<br>        //document.title+=' y';<br>      if (inim.trim() != '' && ainim.trim() != '') {<br>      document.getElementById('myh4').innerHTML+=' ... image &lt;div id=dpf style=display:NONE;&gt;&lt;input style=display:inline-block; id=file type=file name=file&gt;&lt;/input&gt;&lt;span class=readBytesButtons&gt;&lt;button style=display:none; data-endbyte=4 data-startbyte=0&gt;1-5&lt;/button&gt;&lt;button style=display:none; data-endbyte=14 data-startbyte=5&gt;6-15&lt;/button&gt;&lt;button style=display:none; data-endbyte=7 data-startbyte=6&gt;7-8&lt;/button&gt;&lt;button name=button id=button value=Process data-endbyte=0 data-startbyte=0&gt;Process&lt;/button&gt;&lt;/span&gt; or URL &lt;input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"&gt;&lt;/input&gt;&lt;/div&gt; of Player' + thisplayer + s1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + s2;<br>      document.getElementById('mytable').style.background="url('" + inim + "')";<br>      } else {<br>      document.getElementById('myh4').innerHTML+=' ... image &lt;div id=dpf style=display:INLINE-BLOCK;&gt;&lt;input style=display:inline-block; id=file type=file name=file&gt;&lt;/input&gt;&lt;span class=readBytesButtons&gt;&lt;button style=display:none; data-endbyte=4 data-startbyte=0&gt;1-5&lt;/button&gt;&lt;button style=display:none; data-endbyte=14 data-startbyte=5&gt;6-15&lt;/button&gt;&lt;button style=display:none; data-endbyte=7 data-startbyte=6&gt;7-8&lt;/button&gt;&lt;button name=button id=button value=Process data-endbyte=0 data-startbyte=0&gt;Process&lt;/button&gt;&lt;/span&gt; or URL &lt;input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"&gt;&lt;/input&gt;&lt;/div&gt; of Player' + thisplayer + s1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + s2;<br>      }<br>      <br>      setTimeout(eh, 1000);<br>          //document.title+=' z';<br>      //document.getElementById('myh4').innerHTML+=' ... image of Player' + thisplayer + s1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + s2;<br>    } else {<br>      document.getElementById('myh4').innerHTML+=' ... turn of Player1' + score1 + ' versus Player2' + score2;<br>    }<br>    for (var itrs=0; itrs&lt;5; itrs++) {<br>    for (var itds=eval(5 * itrs); itds&lt;eval(5 + eval(5 * itrs)); itds++) {<br>      thisrect=tds[itds].getBoundingClientRect();<br>      <br>      tds[itds].style.verticalAlign='top';<br>      sqsi=eval(2 * itds + ioffset);<br>      if (inim != '') {<br>      if (itds == 0) {<br>        document.getElementById('myh1').innerHTML='Image Reveal Game';<br>        document.getElementById('qh4').innerHTML='&nbsp;';<br>      }<br>      bextras='position:absolute;height:' + eval(eval('' + thisrect.height) / 2) + 'px;width:' + eval(eval('' + thisrect.width) / 2) + 'px;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;';<br>      tds[itds].innerHTML='&lt;button title="Click/touch me to reveal 1/100th of image below" class=reveal title="" style="' + bextras + 'display:inline-block;' + '" id=sqsisqsi' + sqsi + ' onclick=sosmove(this); value="&nbsp;"&gt;&nbsp;&lt;/button&gt;';<br>      //sqsi++;<br>      bextras='position:absolute;height:' + eval(eval('' + thisrect.height) / 2) + 'px;width:' + eval(eval('' + thisrect.width) / 2) + 'px;top:' + thisrect.top + 'px;left:' + eval(eval('' + thisrect.left) + eval('' + thisrect.width) / 2) + 'px;';<br>      tds[itds].innerHTML+='&lt;button title="Click/touch me to reveal 1/100th of image below" class=reveal title="" style="' + bextras + 'display:inline-block;' + '" id=sqsisqsi' + eval(1 + sqsi) + ' onclick=sosmove(this); value="&nbsp;"&gt;&nbsp;&lt;/button&gt;';<br>      //sqsi++;<br>      bextras='position:absolute;height:' + eval(eval('' + thisrect.height) / 2) + 'px;width:' + eval(eval('' + thisrect.width) / 2) + 'px;top:' + eval(eval('' + thisrect.top) + eval('' + thisrect.height) / 2) + 'px;left:' + thisrect.left + 'px;';<br>      tds[itds].innerHTML+='&lt;button title="Click/touch me to reveal 1/100th of image below" class=reveal title="" style="' + bextras + 'display:inline-block;' + '" id=sqsisqsi' + eval(10 + sqsi) + ' onclick=sosmove(this); value="&nbsp;"&gt;&nbsp;&lt;/button&gt;';<br>      //sqsi++;<br>      bextras='position:absolute;height:' + eval(eval('' + thisrect.height) / 2) + 'px;width:' + eval(eval('' + thisrect.width) / 2) + 'px;top:' + eval(eval('' + thisrect.top) + eval('' + thisrect.height) / 2) + 'px;left:' + eval(eval('' + thisrect.left) + eval('' + thisrect.width) / 2) + 'px;';<br>      tds[itds].innerHTML+='&lt;button title="Click/touch me to reveal 1/100th of image below" class=reveal title="" style="' + bextras + 'display:inline-block;' + '" id=sqsisqsi' + eval(11 + sqsi) + ' onclick=sosmove(this); value="&nbsp;"&gt;&nbsp;&lt;/button&gt;';<br>      } else {<br>      //alert(sqsi);<br>      tds[itds].innerHTML='&lt;select title="" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + sqsi + ' onchange=sosmove(this);&gt;&lt;option value=" "&gt; &lt;/option&gt;&lt;option value="S"&gt;S&lt;/option&gt;&lt;option value="O"&gt;O&lt;/option&gt;&lt;/select&gt;';<br>      //sqsi++;<br>      tds[itds].innerHTML+='&lt;select title="" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(1 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=" "&gt; &lt;/option&gt;&lt;option value="S"&gt;S&lt;/option&gt;&lt;option value="O"&gt;O&lt;/option&gt;&lt;/select&gt;';<br>      //sqsi++;<br>      tds[itds].innerHTML+='&lt;br&gt;&lt;select title="" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(10 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=" "&gt; &lt;/option&gt;&lt;option value="S"&gt;S&lt;/option&gt;&lt;option value="O"&gt;O&lt;/option&gt;&lt;/select&gt;';<br>      //sqsi++;<br>      tds[itds].innerHTML+='&lt;select title="" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(11 + sqsi) + ' onchange=sosmove(this);&gt;&lt;option value=" "&gt; &lt;/option&gt;&lt;option value="S"&gt;S&lt;/option&gt;&lt;option value="O"&gt;O&lt;/option&gt;&lt;/select&gt;';<br>      //sqsi++;<br>      //alert(tds[itds].innerHTML);<br>      }<br>    }  <br>    ioffset+=10;<br>    }  <br>}<br><br>function checkifsos(t1, t2, t3) { //, camv) {<br>  //var score1=' (0)', score2=' (0)';<br>  //var amv=camv.split('.')[0];<br>  var retv=false;<br>  if (t1 &gt;= 0 && t1 &lt; 100 && t2 &gt;= 0 && t2 &lt; 100 && t3 &gt;= 0 && t3 &lt; 100) {<br>     if (document.getElementById('sqsi' + t1).value == 'S' && document.getElementById('sqsi' + t2).value == 'O' && document.getElementById('sqsi' + t3).value == 'S') {<br>       if (thisplayer == 1) {<br>       document.getElementById('sqsi' + t1).style.border='1px inset red';<br>       document.getElementById('sqsi' + t2).style.border='1px inset red';<br>       document.getElementById('sqsi' + t3).style.border='1px inset red';<br>       <br>       if (document.getElementById('sqsi' + t1).title.indexOf('2') != -1) {<br>       document.getElementById('sqsi' + t1).style.backgroundColor='';<br>       document.getElementById('sqsi' + t1).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t1).style.backgroundColor='pink';<br>       }<br>       if (document.getElementById('sqsi' + t2).title.indexOf('2') != -1) {<br>       document.getElementById('sqsi' + t2).style.backgroundColor='';<br>       document.getElementById('sqsi' + t2).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t2).style.backgroundColor='pink';<br>       }<br>       if (document.getElementById('sqsi' + t3).title.indexOf('2') != -1) {<br>       document.getElementById('sqsi' + t3).style.backgroundColor='';<br>       document.getElementById('sqsi' + t3).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t3).style.backgroundColor='pink';<br>       }<br>       document.getElementById('sqsi' + t1).title+='1';<br>       document.getElementById('sqsi' + t2).title+='1';<br>       document.getElementById('sqsi' + t3).title+='1';<br>       } else {<br>       document.getElementById('sqsi' + t1).style.border='1px inset olive';<br>       document.getElementById('sqsi' + t2).style.border='1px inset olive';<br>       document.getElementById('sqsi' + t3).style.border='1px inset olive';<br>       if (document.getElementById('sqsi' + t1).title.indexOf('1') != -1) {<br>       document.getElementById('sqsi' + t1).style.backgroundColor='';<br>       document.getElementById('sqsi' + t1).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t1).style.backgroundColor='yellow';<br>       }<br>       if (document.getElementById('sqsi' + t2).title.indexOf('1') != -1) {<br>       document.getElementById('sqsi' + t2).style.backgroundColor='';<br>       document.getElementById('sqsi' + t2).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t2).style.backgroundColor='yellow';<br>       }<br>       if (document.getElementById('sqsi' + t3).title.indexOf('1') != -1) {<br>       document.getElementById('sqsi' + t3).style.backgroundColor='';<br>       document.getElementById('sqsi' + t3).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";<br>       } else {<br>       document.getElementById('sqsi' + t3).style.backgroundColor='yellow';<br>       }<br>       document.getElementById('sqsi' + t1).title+='2';<br>       document.getElementById('sqsi' + t2).title+='2';<br>       document.getElementById('sqsi' + t3).title+='2';<br>       }<br>       retv=true;<br>       if (thisplayer == 1) {<br>         score1=' (' + eval(eval(score1.split('(')[1].split(')')[0]) + 1) + ')';<br>       } else {<br>         score2=' (' + eval(eval(score2.split('(')[1].split(')')[0]) + 1) + ')';<br>       }<br>     }<br>  }<br>  return retv;<br>}<br><br>function sosmove(osel) {<br>  if (osel.id.indexOf('sqsisqsi') != -1) {<br>  availablescore--;<br>  osel.style.visibility='hidden';<br>  if (availablescore == 0) { <br>    myguess();<br>  }<br>  } else {<br>  var cosel=osel.value, anothergo=false, prevplayer=thisplayer;<br>  var thistile=eval(osel.id.replace('sqsi',''));<br>  var surrounds='';<br>  var prevscore1=score1;<br>  var prevscore2=score2;<br>  if (cosel.trim() != '') {<br>   osel.size=1;<br>   osel.style.border='1px inset blue';<br>   osel.innerHTML='&lt;option value=' + cosel + '&gt;' + cosel + '&lt;/option&gt;';<br>   document.getElementById('myh4').innerHTML=document.getElementById('myh4').innerHTML.replace(' Player1' + score1 + ' versus Player2' + score2,' Player02' + score2 + ' versus Player01' + score1).replace(' Player2' + score2 + ' versus Player1' + score1,' Player01' + score1 + ' versus Player02' + score2).replace(' Player0',' Player').replace(' Player0',' Player');<br>   // hmiddle -1 me +1<br>   // hend -2 -1 me<br>   // hstart me +1 +2<br>   // vmiddle -10 me +10<br>   // vend -20 -10 me<br>   // vstart me +10 +20<br>   // ddmiddle -11 me +11<br>   // ddend -22 -11 me<br>   // ddstart me +11 +22<br>   // udmiddle -9 me +9<br>   // udend -18 -9 me<br>   // udstart me +9 +18<br>     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9) {<br>     anothergo|=checkifsos(eval(-1 + thistile), thistile, eval(1 + thistile));<br>     }<br>     if (eval(thistile % 10) &gt; 1) {<br>     anothergo|=checkifsos(eval(-2 + thistile), eval(-1 + thistile), thistile);<br>     }<br>     if (eval(thistile % 10) &lt; 8) {<br>     anothergo|=checkifsos(thistile, eval(1 + thistile), eval(2 + thistile));<br>     }<br>     <br>     if (eval(thistile / 10) &gt; 0 && eval(thistile / 10) &lt; 9) {<br>     anothergo|=checkifsos(eval(-10 + thistile), thistile, eval(10 + thistile));<br>     }<br>     if (eval(thistile / 10) &gt; 1) {<br>     anothergo|=checkifsos(eval(-20 + thistile), eval(-10 + thistile), thistile);<br>     }<br>     if (eval(thistile / 10) &lt; 8) {<br>     anothergo|=checkifsos(thistile, eval(10 + thistile), eval(20 + thistile));<br>     }<br><br>     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9 && eval(thistile / 10) &gt; 0 && eval(thistile / 10) &lt; 9) {<br>     anothergo|=checkifsos(eval(-11 + thistile), thistile, eval(11 + thistile));<br>     }<br>     if (eval(thistile % 10) &gt; 1 && eval(thistile / 10) &gt; 2) {<br>     anothergo|=checkifsos(eval(-22 + thistile), eval(-11 + thistile), thistile);<br>     }<br>     if (eval(thistile % 10) &lt; 8 && eval(thistile / 10) &lt; 8) {<br>     anothergo|=checkifsos(thistile, eval(11 + thistile), eval(22 + thistile));<br>     }<br><br>     if (eval(thistile % 10) &gt; 0 && eval(thistile % 10) &lt; 9 && eval(thistile / 10) &gt; 0 && eval(thistile / 10) &lt; 9) {<br>     anothergo|=checkifsos(eval(-9 + thistile), thistile, eval(9 + thistile));<br>     }<br>     if (eval(thistile % 10) &gt;= 0 && eval(thistile / 10) &lt; 8) {<br>     anothergo|=checkifsos(eval(-18 + thistile), eval(-9 + thistile), thistile);<br>     }<br>     if (eval(thistile % 10) &gt; 2 && eval(thistile / 10) &lt; 8) {<br>     anothergo|=checkifsos(thistile, eval(9 + thistile), eval(18 + thistile));<br>     }<br>     <br>     <br>   if (!anothergo) {  thisplayer=eval(eval('' + 3) - eval('' + prevplayer));   } else {   document.getElementById('myh4').innerHTML=document.getElementById('myh4').innerHTML.replace(' Player1' + prevscore1 + ' versus Player2' + prevscore2,' Player02' + score2 + ' versus Player01' + score1).replace(' Player2' + prevscore2 + ' versus Player1' + prevscore1,' Player01' + score1 + ' versus Player02' + score2).replace(' Player0',' Player').replace(' Player0',' Player');  }<br>  }<br>  }<br>}<br><br>function playhangman() {<br> if (vocabulary[0] == '') {<br> mode=5;<br> //alert('hangman');<br> document.getElementById('imyword').src='//www.rjmprogramming.com.au/PHP/surprise.php?min=' + eval(1 + 10) + '&max=' + eval(1 + 20) + '&phrase=y&youllneverfindthis=y' + Math.floor(Math.random() * 134567);<br> } else {<br> mode=5;<br> document.getElementById('imyword').src='//www.rjmprogramming.com.au/PHP/surprise.php?min=' + eval(1 + 10) + '&max=' + eval(1 + 20) + '&phrase=y&youllneverfindthis=y' + Math.floor(Math.random() * 134567);<br> //alert(vocabulary[0]);<br> }<br>}<br><br>function selc(tvi) {<br> asocwc();<br> if (courx != '') {<br>   if (tvi.indexOf(courx) == -1 && tvi.indexOf('&') != -1) { tvi=tvi.replace('&', courx + '&');  } else if (tvi.indexOf(courx) == -1 && tvi.indexOf('#') != -1) { tvi=tvi + courx.split('=')[1];  } <br> }<br> if ((document.URL.split('#')[0] + location.hash) != tvi) {   if (((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) || ('' + tvi).replace('hangman','blank').replace('vertex','blank').replace('#square','#blank').replace('#grid','#blank').indexOf('blank') != -1) {  top.location.href=tvi; } else { location.href=tvi.replace('.htm#','.htm?rand=' + Math.floor(Math.random() * 123456) + '#').replace('.html#','.html?rand=' + Math.floor(Math.random() * 123456) + '#'); } } <br>} <br>  <br>function getOffset(el) { // thanks to https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs<br>    var rect = el.getBoundingClientRect();<br>    return {<br>        left: rect.left + window.pageXOffset,<br>        top: rect.top + window.pageYOffset,<br>        width: rect.width || el.offsetWidth,<br>        height: rect.height || el.offsetHeight<br>    };<br>}<br><br>function connect(div1, div2) { //, color, thickness) { // draw a line connecting elements<br>    var thickness = 0;<br>    var titleextra="";<br>    var ioff=-4;<br>    if (!onld && 4 == 5) { ioff=0; }<br>    var off1 = getOffset(div1);<br>    var off2 = getOffset(div2);<br>    // bottom right<br>    var x1 = off1.left + off1.width;<br>    var y1 = off1.top + off1.height;<br>    // top right<br>    var x2 = off2.left + off2.width;<br>    var y2 = off2.top;<br>    // distance<br>    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));<br>    // center<br>    var cx = ((x1 + x2) / 2) - (length / 2);<br>    var cy = ((y1 + y2) / 2) - (thickness / 2);<br>    // angle<br>    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);<br>    // make hr<br>    if (div1.title.indexOf(': ') != -1 && div2.title.indexOf(': ') != -1) {<br>      titleextra=' title="' + div1.title + ' to ' + div2.title + '"';<br>    }<br>    var htmlLine = ("&lt;div" + titleextra).replace('&lt;div ','&lt;DIV ') + " style='" + dval + "padding:0px; margin:0px; height:4px; position:absolute; left:" + eval(ioff + cx) + "px; top:" + eval(ioff + cy) + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' /&gt;";<br>    //<br>    // alert(htmlLine);<br>    return htmlLine; //document.body.innerHTML += htmlLine;<br>}<br><br><br> function maybeontop(swhat,swhatshort) {<br>          //alert(mode + ' swhatshort=' + swhatshort);<br>          if (mode == 5) { // hangman<br>            document.getElementById('sq').style.display='none';<br>            //alert('&lt;input onclick="alert(' + "'" + swhatshort + "'" + ');" type=button value="Player ' + curplayer + ' click reveals phrase while Player ' + eval(3 - curplayer) + ' turns away?"&gt;&lt;/input&gt;');<br>            document.getElementById('ontopsq').innerHTML='&lt;input onclick=" document.getElementById(' + "'" + 'mya' + "'" + ').click(); clue=' + "'" + '?' + "'" + '; while (clue == ' + "'" + '?' + "'" + ') {  clue=' + "''" + '; try { clue=prompt(' + "'" + swhatshort + " ... to leave a hint for your playing partner, enter one here optionally, and know that to read a helper window enter ?, and that it closes itself in one minute',''" + '); } catch { perr=true; }  if (clue == ' + "'" + '?' + "'" + ') {  prowoo();  }   } if (clue == null) { clue=' + "''" + '; } cluey(' + "'" + swhatshort + "'" + '); " type=button value="Player ' + curplayer + ' click reveals phrase while Player ' + eval(3 - curplayer) + ' turns away?"&gt;&lt;/input&gt;';<br>            if (document.getElementById('ihangman')) {<br>            document.getElementById('ihangman').src="//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=1&tosolve=" + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue);<br>            } else {<br>            document.getElementById('dhangman').innerHTML='&lt;br&gt;&lt;div id=shangman&gt;&lt;/div&gt;&lt;br&gt;&lt;iframe style="transform:scale(0.5);margin-left:-50%;margin-top:-200px;width:200%;height:720px;" id="ihangman" src="//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=' + curplayer + '&tosolve=' + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue) + '"&gt;&lt;/iframe&gt;&lt;br&gt;';<br>            document.getElementById('dhangman').style.display='block';<br>            }<br>            lookforend();<br>          }<br>          return swhat;<br> }<br> <br> function handon() {<br>     location.href=document.URL.split('#')[0].split('?')[0] + '#hangman' + score + '.' + goes;<br> }<br><br> function hguess(gthis,othis) {<br>   var ifnd=0, fnd=false, newval='';<br>   for (ifnd=0; ifnd&lt;vocabulary[0].length; ifnd++) {<br>     if (vocabulary[0].substring(ifnd,eval(1 + ifnd)).toLowerCase() == gthis.toLowerCase()) {<br>       fnd=true;<br>       newval+=gthis;<br>     } else {<br>       newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));<br>     }<br>   }<br>   document.getElementById('sletters').innerHTML=newval;<br>   document.getElementById('sletters').title=newval;<br>   othis.style.visibility='hidden';<br>   <br>   if (!fnd) {<br>    eval(hangmanc[ihangman]);<br>    ihangman++;<br>   }<br>   if (ihangman &gt;= hangmanc.length) {<br>     goes++;<br>     newval='';<br>   for (ifnd=0; ifnd&lt;vocabulary[0].length; ifnd++) {<br>     if (document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd)).toLowerCase() == "_") {<br>       newval+='&lt;font color=red&gt;' + vocabulary[0].substring(ifnd,eval(1 + ifnd)) + '&lt;/font&gt;';<br>     } else {<br>       newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));<br>     }<br>   }<br>   document.getElementById('sletters').innerHTML=newval;<br>   document.getElementById('sletters').title=vocabulary[0];<br>     setTimeout(handon, 5000);<br>   } else if (document.getElementById('sletters').innerHTML.indexOf('_') != -1) {<br>   } else {<br>     score+=document.getElementById('sletters').innerHTML.length;<br>     goes++;<br>     setTimeout(handon, 5000);<br>   }<br> }<br><br> function checkwi(iois) {<br>  var okay=true, hiddenv='', hletters='&nbsp;', letters=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];<br>  if (iois != null) {<br>  try {<br>    var aconto = (iois.contentWindow || iois.contentDocument);<br>    if (aconto != null) {<br>     if (aconto.document) { aconto = aconto.document; }<br>     if (aconto.body != null) {<br>       vocabulary[0] = aconto.body.innerHTML.replace('&lt;/pre&gt;','').replace('&lt;pre&gt;','');<br>       if (vocabulary[0].indexOf('-') != -1) { okay=false; }<br>       if (mode == 5) { <br>        for (var iji=0; iji&lt;letters.length; iji++) { <br>          hletters+='&lt;input style=inline-block; type=button onclick=hguess(this.value,this); value=' + letters[iji] + '&gt;' + '' + '&lt;/input&gt;';<br>          if (letters[iji].toLowerCase() == 'm') { hletters+='&lt;br&gt;';   document.getElementById('qh4').innerHTML='&nbsp;';    }<br>        }<br>        for (var ii=0; ii&lt;vocabulary[0].length; ii++) { <br>          if (vocabulary[0].substring(ii, eval(1 + ii)) == ' ') {<br>            hiddenv+=' ';<br>          } else {<br>            hiddenv+='_';<br>          }<br>        } <br>       if ((' ' + location.hash).split('#').length &gt; 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {<br>        //document.title+=' a';<br>        //document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing';<br>        if (inim.trim() != '') {   <br>        document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing ... image &lt;div id=dpf style=display:NONE;&gt;&lt;input style=display:inline-block; id=file type=file name=file&gt;&lt;/input&gt;&lt;span class=readBytesButtons&gt;&lt;button style=display:none; data-endbyte=4 data-startbyte=0&gt;1-5&lt;/button&gt;&lt;button style=display:none; data-endbyte=14 data-startbyte=5&gt;6-15&lt;/button&gt;&lt;button style=display:none; data-endbyte=7 data-startbyte=6&gt;7-8&lt;/button&gt;&lt;button name=button id=button value=Process data-endbyte=0 data-startbyte=0&gt;Process&lt;/button&gt;&lt;/span&gt; or URL &lt;input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"&gt;&lt;/input&gt;&lt;/div&gt; of Player' + thisplayer + score1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + score2;<br>        } else {<br>        document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing ... image &lt;div id=dpf style=display:INLINE-BLOCK;&gt;&lt;input style=display:inline-block; id=file type=file name=file&gt;&lt;/input&gt;&lt;span class=readBytesButtons&gt;&lt;button style=display:none; data-endbyte=4 data-startbyte=0&gt;1-5&lt;/button&gt;&lt;button style=display:none; data-endbyte=14 data-startbyte=5&gt;6-15&lt;/button&gt;&lt;button style=display:none; data-endbyte=7 data-startbyte=6&gt;7-8&lt;/button&gt;&lt;button name=button id=button value=Process data-endbyte=0 data-startbyte=0&gt;Process&lt;/button&gt;&lt;/span&gt; or URL &lt;input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"&gt;&lt;/input&gt;&lt;/div&gt; of Player' + thisplayer + score1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + score2;<br>        }<br>        setTimeout(eh, 1000);<br><br>        //document.title+=' b';<br>        //document.getElementById('myh4').innerHTML+=' ... image &lt;input style=display:inline-block; id=file type=file name=file&gt;&lt;/input&gt;&lt;div id=dpf style=display:INLINE-BLOCK;&gt;&lt;span class=readBytesButtons&gt;&lt;button style=display:none; data-endbyte=4 data-startbyte=0&gt;1-5&lt;/button&gt;&lt;button style=display:none; data-endbyte=14 data-startbyte=5&gt;6-15&lt;/button&gt;&lt;button style=display:none; data-endbyte=7 data-startbyte=6&gt;7-8&lt;/button&gt;&lt;button name=button id=button value=Process&gt;Process&lt;/button&gt;&lt;/span&gt; or URL &lt;input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"&gt;&lt;/input&gt;&lt;/div&gt; of Player' + thisplayer + score1 + ' versus &lt;a onclick=myguess(); style=text-decoration:underline;cursor:pointer;&gt;guess&lt;/a&gt; of Player' + eval(3 - thisplayer) + score2;<br>        //document.title+=' c';<br>        //if (inim.trim() != '') {   document.getElementById('dpf').style.display='none';   }<br>       } else if ((' ' + location.hash).split('#').length &gt; 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {<br>        document.getElementById('myh4').innerHTML='Enjoy scribbling &lt;a style=text-decoration:underline;cursor:pointer; onclick="parent.document.getElementById(' + "'" + 'iback' + "'" + ').src=' + "'" + 'user_of_signature_signature.html?rand=' + "'" + ' + Math.floor(Math.random() * 123456);" title="Clear Maths Grid Paper below"&gt;away&lt;/a&gt;!  Four discrete vertex clicks define image extraction rectangle.';<br>       } else {<br>        document.getElementById('myh4').innerHTML='&lt;span id=gscore&gt;Score: ' + score + '/' + goes + '&lt;/span&gt; &lt;span id=hint title="' + vocabulary[0].length + ' long"&gt;Hint:&lt;/span&gt; ' + '&lt;span id=sletters data-title="' + vocabulary[0] + '" title="' + hiddenv + '"&gt;' + hiddenv + '&lt;/span&gt;' + hletters;<br>       }<br>        //document.getElementById('qh4').innerHTML=hletters;<br>       }<br>       hangman[0] = maybeontop('', vocabulary[0]);<br>       var ws=vocabulary[0].split(' ');<br>       for (var iws=0; iws&lt;ws.length; iws++) {<br>         if (ws[iws].length &gt; maxanyone) { okay=false; }<br>       }<br>       //if (mode == 4) questions[0] = vocabulary[0];<br>     }<br>    }<br>  } catch(ee) {<br>  if (vocabulary[0] == '' && mode == 5) { okay=false; }<br>  }<br>  }<br>  //if (!okay) { document.getElementById('imyword').src='//www.rjmprogramming.com.au/PHP/surprise.php?min=' + eval(1 + wlens) + '&max=' + eval(1 + wlenb) + '&phrase=y&youllneverfindthis=y' + Math.floor(Math.random() * 134567); }<br>  if (!okay) { document.getElementById('imyword').src='../PHP/surprise.php?min=' + eval(1 + wlens) + '&max=' + eval(1 + wlenb) + '&phrase=y&youllneverfindthis=y' + Math.floor(Math.random() * 134567); }<br> }<br> <br> <br><br>&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body onload=' draw_hrs(); '&gt;<br>&lt;h1 id=myh1&gt;Tracing Square Line Drawing&lt;/h1&gt;<br>&lt;h3 id=myh3&gt;RJM Programming - December, 2018&lt;/h3&gt;<br>&lt;h4 id=myh4&gt;Hint: Click/touch a match then two vertices to reposition that match&lt;/h4&gt;<br>&lt;h4 id=qh4&gt;&nbsp;&lt;/h4&gt;<br>&lt;table&gt;&lt;tr&gt;&lt;th&gt;<br>&lt;table id=mytable&gt;<br>&lt;tbody&gt;<br>&lt;tr&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;/tr&gt;<br>&lt;tr&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;/tr&gt;<br>&lt;tr&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;/tr&gt;<br>&lt;tr&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;/tr&gt;<br>&lt;tr&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;td class=square&gt;&lt;/td&gt;&lt;/tr&gt;<br>&lt;/tbody&gt;<br>&lt;/table&gt;<br>&lt;/th&gt;&lt;th id='tdhuh' style='vertical-align:top;'&gt;&nbsp;&lt;input style='display:none;background-color:yellow;' type=button id=reveal value='Reveal Answer' onclick="if (this.value.indexOf('Reveal') != -1) { this.value='Another Teaser?'; location.href='#reveal'; document.getElementById('pout').innerHTML='&lt;style&gt; .vertex { opacity: 0.1; } &lt;/style&gt;'; document.getElementById('tdandthen').innerHTML='&lt;iframe src=' + aurl + ' style=width:560px;height:600px;background-color:#f0f0f0;&gt;&lt;/iframe&gt;'; } else {  this.value='Reveal Answer'; document.getElementById('tdandthen').innerHTML=''; location.href=burl.split('#')[0].split('?')[0];   } "&gt;&lt;/input&gt;&nbsp;&lt;br&gt;&lt;input type=button id=skip value=Skip style=background-color:lightgreen;display:none; onclick="location.href=document.URL.split('#')[0].split('?')[0]; "&gt;&lt;/input&gt;&lt;/th&gt;&lt;th id='tdandthen'&gt;&lt;/th&gt;&lt;/tr&gt;<br>&lt;/table&gt;<br>&lt;div id=hrs&gt;&lt;/div&gt;<br>&lt;div id=pout&gt;&lt;/div&gt;<br>&lt;div id=spout&gt;&lt;/div&gt;<br>&lt;div id=daxes&gt;&lt;/div&gt;<br>&lt;iframe id='imyword' onload='checkwi(this);' src='//www.rjmprogramming.com.au/PHP/surprise.php?min=11&max=21&phrase=y&youllneverfindthis=y' title='Get a word' style='display:none;'&gt;&lt;/iframe&gt;<br>&lt;span id=sq&gt;&lt;/span&gt;&lt;div id=ontopsq&gt;&lt;/div&gt;&lt;div id=dhangman&gt;&lt;/div&gt;<br>&lt;a style='display:none;' id=aemail href='mailto:?subject=Plot%20Axes%20link%20below%20...&body='&gt;Email&lt;/a&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br>