<!doctype html>
<html>
<head>
<title>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</title>
<style>
td.square {
width: 100px;
height: 100px;
}

.bicol {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, pink 0%, pink 50%, yellow 51%, yellow 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, pink 0%,pink 50%,yellow 51%,yellow 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, pink 0%,pink 50%,yellow 51%,yellow 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=pink, endColorstr=yellow,GradientType=0 ); /* IE6-9 */
}

hr {
height: 4px;
border: 2px solid black;
background: linear-gradient(to right, yellow 80%, rgba(255,0,0,1) 20%);
border-radius: 5px;
}

hr.diagonal {
transform: rotate(45deg);
width: 144px;
}

hr.vertical {
transform: rotate(90deg) translateY(50px) translateX(50px) ;
width: 100px;
border-radius: 5px;
z-index: 1;
}

div.vertical {
width: 4px;
height: 100px;
z-index: 12;
border: 2px solid black;
border-radius: 5px;
background: linear-gradient(to left, yellow 80%, rgba(255,0,0,1) 20%);
}

#span::after {
content:'\000031\0020e3';
}

span.vertex:not(.nocont)::after {
content:'\000031\0020e3';
}

hr.vertex {
height: 4px;
width: 4px;
color: purple;
background-color: purple;
background: linear-gradient(to right, purple 80%, purple 20%);
border-radius: 5px;
z-index: 25;
}

#qh4 {
font-size: 12px;
}

input:not(.reveal) {
border-radius: 23px;
}

.reveal {
background-color: #4CAF50;
color: white;
padding: 30px 20px;
border: 1px solid red;
}

.face {
border-radius: 150px;
}

iframe {
z-index: 29;
}
</style>

<script type='text/javascript'>

var hors=[], vers=[], diags=[], sparescore=0;
var score1=' (0)', score2=' (0)';
var thisplayer=1;
var osft='';
var ourx=0, courx='', wourx='', lesscourx='';
var lastsquare=-1;
var tprefix='data-';
if (document.URL.indexOf('debug=') != -1) { tprefix=''; }
var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1));
var vertices_in_a_row=0, viar_left=[0.0,0.0], viar_top=[0.0,0.0];
var squares=[], lines=[], vertices=[];
var thisrect, hrcnt=0;
var lastdel=null, hro, v1=null, v2=null, onld=true;
var dval='', wording='';
var aurl='', burl='';
var inas=[], jinas=0;
var inanswer='';
var haveclickedvertex=false;
var vstr=';';
var score=0, goes=0, sqchoice=0, sqorig='';
var bpointsx=[];
var bpointsy=[];
var wlens=10;
var wlenb=20;
var vocabulary=[""];
var hangman=[""];
var mode=0;
var clue='';
var maxanyone=7;
var availablescore=100;

var ihangman=0;
var hangmanc=[
" document.getElementById('dhangman').innerHTML+='<p id=phead class=face style=z-index:90;position:absolute;top:248px;left:142px;font-size:56px;>🙂</p>'; ",
" document.getElementById('hr77').click(); document.getElementById('hr137').click(); ",
" document.getElementById('hr119').click(); document.getElementById('hr77').click(); ",
" document.getElementById('hr131').click(); document.getElementById('hr77').click(); ",
" document.getElementById('hr137').click(); document.getElementById('hr234').click(); ",
" document.getElementById('hr137').click(); document.getElementById('hr246').click(); ",
" document.getElementById('hr235').click(); document.getElementById('hr256').click(); ",
" document.getElementById('hr260').click(); document.getElementById('hr256').click(); ",
" document.getElementById('hr230').click(); document.getElementById('hr235').click(); ",
" document.getElementById('hr235').click(); document.getElementById('hr20').click(); ",
" document.getElementById('hr290').style.display='none'; document.getElementById('hr260').click(); document.getElementById('hr235').click(); document.getElementById('phead').innerHTML='🤢'; document.getElementById('dhangman').innerHTML+='<p id=pnoose class=face style=background-color:blank;z-index:95;position:absolute;top:195px;left:168px;font-size:6px;>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀<br>🎀</p>'; "
];


var inquestions=["",
"10,22,23,9,70,126,128,139,150,149,93,36,82,138,-82,+25,+37,-138,+95,+37",
"126,70,9,10,22,34,35,93,149,150,139,127,83,82,24,-24,+140,+196,-82,+173,+185",
"70,72,71,180.124,+72,-61,-73,+285,-7,-68",
"9,10,11,12,70,71,72,24,82,83,-70,+7,+68,-72,80,+136",
"12,24,36,73.4,17.4,29.17,84.29,-287,+95,+29,-12,+84,+17",
"70,71,82,72,83,12,24,20.7,61.7,73.7,84.20,-285,+73,+20",
"11,12,70,126,128,139,150,149,94,83,127,71,82,23,22,-150,+117,+129,-149,+73,+84,-94,+140,+196",
"11,35,22,34,24,36,73.4,13.4,124.73,136.73,147.95,158.95,41.37,-285,+95,+41",
"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",
"11,22,23,24,139,73.117,151.84,196.151,185.117,-11,+140,+185,-22,+140,+73,-23,+140,+151",
"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"];
var inwordings=["",
"Get 2 rectangles to 2 squares by moving 2 matches. Which 2?",
"Get gap at bottom left closed up and leaving 2 squares by moving 2 matches. Which 2?",
"Turn Y-like figure upside down by moving 2 matches. Which 2?",
"Get four equal sized rectangles from these three equal sized squares by moving 2 matches. Which 2?",
"Get 1 parallelogram and 1 equilateral triangle by moving 2 matches. Which 2?",
"This house can become 2 by moving 1 match. Which 1?",
"Get 6 squares out of these 3 equal sized rectangles by moving 3 matches. Which 3?",
"Turn the dog around by moving 1 match. Which 1?",
"Make this dog look back by moving 2 matches. Which 2?",
"Make this pattern into a 3d cube by moving 3 matches. Which 3?",
"Change the L shape pattern into 4 equal sized squares by moving 4 matches. Which 4?"];

var sq=["Is the additive identity.",
"Is the multiplicative identity.",
"Is the only even prime.",
"Is the number of spatial dimensions we live in.",
"Is the smallest number of colours sufficient to colour all planar maps.",
"Is the number of Platonic solids.",
"Is the smallest perfect number.",
"Is the smallest number of sides of a regular polygon that is not constructible by straightedge and compass.",
"Is the largest cube in the Fibonacci sequence.",
"Is the maximum number of cubes that are needed to sum to any positive integer.",
"Is the base of our number system.",
"Is the largest known multiplicative persistence.",
"Is the smallest abundant number.",
"Is the number of Archimedian solids.",
"Is the smallest even number n with no solutions to phi(m) = n.",
"Is the smallest composite number n with the property that there is only one group of order n.",
"Is the only number of the form xy = yx with x and y being different integers.",
"Is the number of wallpaper groups.",
"Is the only positive number that is twice the sum of its digits.",
"Is the maximum number of 4th powers needed to sum to any number.",
"Is the number of rooted trees with 6 vertices.",
"Is the smallest number of distinct squares needed to tile a square.",
"Is the number of partitions of 8.",
"Is the smallest number of integer-sided boxes that tile a box so that no two boxes share a common length.",
"Is the largest number divisible by all numbers less than its square root.",
"Is the smallest square that can be written as a sum of 2 squares."];

function maybenocont(inv) {
if (inv.length > 0) { return ' nocont'; } else { return ''; }
}

function vplus(fb) {
var xf=eval(fb.split(',')[0]);
var yf=eval(fb.split(',')[1].split(';')[0]);
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) + ';';
}

function ourmathround(inn) {
var oinn=Math.floor(Math.floor(eval('' + inn) + 23) / 47);
//if (('' + inn).indexOf('220.') != -1 || ('' + inn).indexOf('218.') != -1) { alert('inn=' + inn + ' and oinn=' + oinn + ' results in ' + '' + eval(eval('' + oinn) * 5)); }
//if (vstr != '') { alert(vstr); }
return '' + eval(eval('' + oinn) * 47);
}

function picksq() {
sqchoice=Math.floor(Math.random() * eval(0 - 1 + sq.length)) + 1;
document.getElementById('qh4').innerHTML=sqorig + ' ... Score: ' + score + '/' + goes + ' ... ' + sq[sqchoice];
}

function gridinfo(insq) {
if (insq.indexOf(' in square ') != -1) {
//alert('x' + location.hash);
document.getElementById('qh4').innerHTML+=insq;
} else {
//alert('z' + location.hash);
document.getElementById('qh4').innerHTML=sqorig + insq;
}
}

function pickone(what) {
var zero=1, choice=0;
if (('' + location.hash).indexOf('blank') == -1 && ('' + location.hash).indexOf('hangman') == -1 && ('' + location.hash).indexOf('square') == -1 && ('' + location.hash).indexOf('grid') == -1) {
choice=Math.floor(Math.random() * eval(0 - zero + inquestions.length)) + zero;
if (document.URL.indexOf('?') == -1 && ('' + location.hash) == '') {
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent(inwordings[choice]) + courx + '&question=' + encodeURIComponent(inquestions[choice]);
}
} else if (('' + location.hash).indexOf('blank') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Vertex Pointing' + osft + ' Game') + courx + '&question=%20' + '#blank' + lesscourx; //location.hash;
} else if (('' + location.hash).indexOf('square') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Square Pointing Game') + courx + '&question=%20' + '#square'; //location.hash;
} else if (('' + location.hash).indexOf('grid') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Grid Pointing Game') + courx + '&question=%20' + '#grid'; // + location.hash;
} else if (('' + location.hash).indexOf('hangman') != -1) {
if (('' + document.URL).indexOf('reveal') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Image Reveal Game') + courx + '&question=%20#hangman-00.0'; // + location.hash;
} else if (('' + document.URL).indexOf('mathsgrid') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Maths Grid Paper') + courx + '&question=%20#hangman-0.0'; // + location.hash;
} else {
zero=0;
//alert(location.hash);
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Hangman Game') + courx + '&question=%20' + location.hash;
}
}
return what;
}

function acl() {
if (inas.length > 0 && inas.length > jinas) {
if (inas[jinas].indexOf('-') != -1) {
hrclick(document.getElementById('hr' + inas[jinas].replace('-','').replace('dr','').replace('hr','')));
jinas++;
setTimeout(acl, 2000);
} else {
hrclick(document.getElementById('hr' + inas[jinas].replace(' ','').replace('+','').replace('dr','').replace('hr','')));
jinas++;
setTimeout(acl, 2000);
}
}
}

// Thanks to https://stackoverflow.com/questions/16227300/how-to-draw-bezier-curves-with-native-javascript-code-without-ctx-beziercurveto
function placebezierpoint(t, p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
if (mode != 5) {
var cX = 3 * (p1x - p0x),
bX = 3 * (p2x - p1x) - cX,
aX = p3x - p0x - cX - bX;

var cY = 3 * (p1y - p0y),
bY = 3 * (p2y - p1y) - cY,
aY = p3y - p0y - cY - bY;

var x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0x;
var y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0y;
//alert('' + x + ' ' + y);
document.getElementById('hrs').innerHTML+='<hr class="vertex" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + y + 'px;left:' + x + 'px;"></hr>';
hrcnt++;
}
//return {x: x, y: y};
}

function dobezier(x0, y0, x1, y1, x2, y2, x3, y3) {
if (mode != 5) {
var accuracy = 0.01; //this'll give the bezier 100 segments
//var p0 = {x: x0, y: y0}; //use whatever points you want obviously
//var p1 = {x: x1, y: y1};
//var p2 = {x: x2, y: y2};
//var p3 = {x: y3, y: y4};
//var p;

//alert(67);

document.getElementById('hrs').innerHTML+='<hr class="vertex" onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + y0 + 'px;left:' + x0 + 'px;"></hr>';
hrcnt++;
//alert(67);
while (eval('' + accuracy) < 1.00) {
//alert(61);
placebezierpoint(accuracy, x0, y0, x1, y1, x2, y2, x3, y3); //p0, p1, p2, p3);
accuracy+=0.01;
//alert(167);
}
}
}

function hrclick(inhro) {
try {
//alert(inhro.id);
hro=document.getElementById(inhro.id.replace('dr','hr'));
if (hro != null) {
var topdiff=0.0, leftdiff=0.0;
//alert(hro.id);
var whro='';
whro=('' + hro.style.width).replace('px','');
//document.title=whro;
if (isNaN(whro)) {
whro=('' + hro.style.height).replace('px','');
//document.title+=' ** ' + whro;
}
//if (eval(('' + hro.style.width).replace('px','')) > 9 || inhro.outerHTML.indexOf('<div') != -1 || inhro.id != inhro.id.replace('dr','hr')) {
if (eval(whro) > 9 || inhro.outerHTML.indexOf('<div') != -1 || inhro.id != inhro.id.replace('dr','hr')) {
if (('' + location.hash).indexOf('grid') != -1) { gridinfo(' ... Element Type ' + hro.outerHTML.substring(1).split(' ')[0] + ' is ' + eval(whro) + ' pixels long'); }
if (!haveclickedvertex || vertices_in_a_row == 0) {
lastdel=hro;
//alert(hro.id + ' vs ' + inhro.id);
//inhro.style.width='0px';
//inhro.style.height='0px';
hro.style.display='none'; //visibility='hidden';
hro.style.visibility='hidden'; //visibility='hidden';
vertices_in_a_row=0;
}
} else if (vertices_in_a_row == 0) {
v1=inhro;
viar_left[0]=eval(('' + hro.style.left).replace('px',''));
viar_top[0]=eval(('' + hro.style.top).replace('px',''));
vertices_in_a_row=1;
document.getElementById('pout').innerHTML="<style> #" + inhro.id + "::after { content:'\\000031\\0020e3'; } </style>";
if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1) {
if (bpointsx.length < 4) {
bpointsx.push(viar_left[0]);
bpointsy.push(viar_top[0]);
if (bpointsx.length >= 4 && (' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
//alert('square');
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=[]; }
} else if (bpointsx.length >= 4 && ('' + location.hash).indexOf('blank') != -1) { dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }
} else {
bpointsx[0]=bpointsx[1];
bpointsy[0]=bpointsy[1];
bpointsx[1]=bpointsx[2];
bpointsy[1]=bpointsy[2];
bpointsx[2]=bpointsx[3];
bpointsy[2]=bpointsy[3];
bpointsx[3]=viar_left[0];
bpointsy[3]=viar_top[0];
if (bpointsx.length >= 4 && (' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
//alert('square');
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=[]; }
} else if (bpointsx.length >= 4 && ('' + location.hash).indexOf('blank') != -1) { dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }
}
}
} else if (vertices_in_a_row == 1) {
v2=inhro;
viar_left[1]=eval(('' + hro.style.left).replace('px',''));
leftdiff=Math.abs(viar_left[1] - viar_left[0]);
viar_top[1]=eval(('' + hro.style.top).replace('px',''));
topdiff=Math.abs(viar_top[1] - viar_top[0]);
var thiswidth=Math.sqrt(eval(topdiff * topdiff) + eval(leftdiff * leftdiff));
if (!isIE) {
//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('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById('hrs').innerHTML+=connect(v1, v2).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
hrcnt++;
if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1) {
if (bpointsx.length < 4) {
bpointsx.push(viar_left[1]);
bpointsy.push(viar_top[1]);
if (bpointsx.length >= 4 && (' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
//alert('square');
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=[]; }
} else if (bpointsx.length >= 4 && ('' + location.hash).indexOf('blank') != -1) { dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }
} else {
bpointsx[0]=bpointsx[1];
bpointsy[0]=bpointsy[1];
bpointsx[1]=bpointsx[2];
bpointsy[1]=bpointsy[2];
bpointsx[2]=bpointsx[3];
bpointsy[2]=bpointsy[3];
bpointsx[3]=viar_left[1];
bpointsy[3]=viar_top[1];
if (bpointsx.length >= 4 && (' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
//alert('square');
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=[]; }
} else if (bpointsx.length >= 4 && ('' + location.hash).indexOf('blank') != -1) { dobezier(bpointsx[0],bpointsy[0],bpointsx[1],bpointsy[1],bpointsx[2],bpointsy[2],bpointsx[3],bpointsy[3]); }
}
}
} else if (Math.abs(topdiff) < 3.0 && Math.abs(leftdiff) > 3.0) {
if (viar_left[1] > viar_left[0]) {
//alert(0);
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
} else {
//alert(100);
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
}
} else if (Math.abs(topdiff) > 3.0 && Math.abs(leftdiff) < 3.0) {
if (viar_top[1] > viar_top[0]) {
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
} else {
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
}
} else if (Math.abs(topdiff - leftdiff) < 3.0) {
if (viar_top[1] > viar_top[0] && viar_left[1] > viar_left[0]) {
//alert(45);
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
} else if (viar_top[1] < viar_top[0] && viar_left[1] > viar_left[0]) {
//alert(-135);
document.getElementById('hrs').innerHTML+='<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;"></hr>';
} else if (viar_top[1] > viar_top[0] && viar_left[1] < viar_left[0]) {
//alert(135);
document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
} else if (viar_top[1] < viar_top[0] && viar_left[1] < viar_left[0]) {
//alert(-45);


document.getElementById('hrs').innerHTML+='<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;"></hr>';


// getting there below
//document.getElementById('hrs').innerHTML+='<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;"></hr>';



//document.getElementById('hrs').innerHTML+='<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;"></hr>';
hrcnt++;
}
//document.getElementById('hrs').innerHTML+='<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;"></hr>';
//hrcnt++;
} else {
alert('Sorry, cannot draw this one.');
if (lastdel != null) {
lastdel.style.display='block';
}
}
//alert(leftdiff + ' ' + topdiff);
vertices_in_a_row=0;
}
//document.title='' + vertices_in_a_row;
} else {
hro=lastdel;
}
} catch(tres) {
}
}

function ina(inqs) {
// 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
if (inanswer == '') {
if (inqs.indexOf(',-') != -1 || inqs.indexOf(',+') != -1 || inqs.indexOf(', ') != -1) {
var preurl=inqs.split(',-')[0].split(',+')[0].split(', ')[0];
var prest=inqs.replace(preurl + ',','').replace(preurl,'').replace(/\ /g,'+');
var ins=(preurl + '-').replace(',-','').replace('-','').split(',');
var inandouts=prest.split(',');
burl=pickone(document.URL);
aurl=document.URL.split('#')[0].replace('question=','q=') + '&question=' + encodeURIComponent(preurl) + '&answer=' + encodeURIComponent(prest);
//alert(prest + ' ... ' + aurl);
return preurl;
} else {
burl=pickone(document.URL);
aurl=document.URL;
}
} else {
burl=pickone(document.URL);
aurl=document.URL.replace('question=','q=').replace('answer=','question=');
}
return inqs;
}

function asocwc() {
courx='';
lesscourx='';
if (document.getElementById('selmode').value.indexOf('blank') != -1) {
lesscourx=('' + ourx).replace('px','');
courx='&ourx=' + lesscourx;
}
}

function socwc(evt) {
if (evt.clientX) {
ourx = evt.clientX; // - elemLeft;
} else {
ourx = evt.pageX; // - elemLeft;
}
setTimeout(asocwc, 2000);
}

function draw_hrs() {
var inqis='';
wourx=location.search.split('ourx=')[1] ? decodeURIComponent(location.search.split('ourx=')[1].split('&')[0]) : '';
if (('' + location.hash + '~').indexOf('blank') != -1 && ('' + location.hash + '~').indexOf('blank~') == -1) {
wourx=('' + location.hash + '~').split('blank')[1].split('~')[0];
}
lesscourx=wourx;
if (('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('mathsgrid') != -1 || ('' + location.hash).indexOf('reveal') != -1) {
location.hash=location.hash.replace('mathsgrid','hangman').replace('reveal','hangman#hangman');
if (('' + location.hash).indexOf('.') != -1) {
goes=eval(('' + location.hash).split('.')[1]);
score=eval(('' + location.hash).split('.')[0].split('hangman')[1].replace('-',''));
} else if (document.URL.indexOf('?wording=') != -1 && ('' + location.hash).split('angma').length > 3) { // && ('' + location.hash).indexOf('hangman0.0') != -1) { // && ('' + location.hash).indexOf('00.0') != -1) {
sosize(' '); // sosize('word_wrap.jpg');
} else if (document.URL.indexOf('?wording=') != -1 && ('' + location.hash).split('angma').length > 2) { // && ('' + location.hash).indexOf('hangman0.0') != -1) { // && ('' + location.hash).indexOf('00.0') != -1) {
document.getElementById('myh1').innerHTML=' ';
document.getElementById('myh3').innerHTML=' ';
document.getElementById('myh4').innerHTML=' ';
document.getElementById('dhangman').innerHTML+="<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) + "></iframe>";
document.getElementById('dhangman').innerHTML+="<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></iframe>";
document.getElementById('dhangman').innerHTML+="<div id=dback title='' style='background-color:transparent;z-index:24;position:absolute;top:200px;left:580px;'></div>";
//return;
}
}
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('myh1').innerHTML='Maths Grid Paper';
}

// if (('' + location.hash).indexOf('blank') == -1 && ('' + location.hash).indexOf('square') == -1 && ('' + location.hash).indexOf('grid') == -1) {

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); }
wording=location.search.split('wording=')[1] ? decodeURIComponent(location.search.split('wording=')[1].split('&')[0]) : ' ';
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
wording='Maths Grid Paper';
}
inanswer=location.search.split('answer=')[1] ? decodeURIComponent(location.search.split('answer=')[1].split('&')[0]) : inqis;
var inquestion=location.search.split('question=')[1] ? ina(decodeURIComponent(location.search.split('question=')[1].split('&')[0])) : '';
var tds=document.getElementsByTagName('td');
var fhr=0, vdval='', thisv='', into='hrs', defvdval='', toff=6, loff=-2;
dval='';
for (var itds=0; itds<tds.length; itds++) {
tds[itds].id='td' + eval(1 + itds);
if (('' + location.hash).indexOf('grid') != -1) { into='td' + eval(1 + itds); }
if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) {
if (('' + location.hash).indexOf('square') != -1) { if (eval(1 + itds) > 9) { document.getElementById('spout').innerHTML+="<style> #td" + eval(1 + itds) + "::after { content:'\\00003" + Math.floor(eval(eval(1 + itds) / 10)) + "\\0020e3\\00003" + eval(eval(1 + itds) % 10) + "\\0020e3'; } </style>"; } else { document.getElementById('spout').innerHTML+="<style> #td" + eval(1 + itds) + "::after { content:'\\00003" + eval(eval(1 + itds) % 10) + "\\0020e3'; } </style>"; } defvdval="visibility:hidden;"; tds[itds].style.border='1px solid red'; }
if (('' + location.hash).indexOf('grid') != -1) { tds[itds].style.border='1px solid brown'; }
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); } };
}
thisrect=tds[itds].getBoundingClientRect();
//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',''))));
//alert(('' + thisrect.left) + ' ' + ('' + thisrect.top) + ' ' + ('' + thisrect.width) + ' ' + ('' + thisrect.height) + ' ' + squares[0]);

fhr=hrcnt;

//vertices.push(('' + thisrect.left).replace('px','') + "," + ('' + thisrect.top).replace('px',''));
vdval=defvdval;
thisv=';' + ourmathround(eval(('' + thisrect.left).replace('px',''))) + "," + ourmathround(eval(('' + thisrect.top).replace('px',''))) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;


//vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));
vdval=defvdval;
thisv=';' + ourmathround(('' + thisrect.left).replace('px','')) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')))) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;

//vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));
vdval=defvdval;
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','')))) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;

//vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + ('' + thisrect.top).replace('px',''));
vdval=defvdval;
thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')))) + "," + ourmathround(('' + thisrect.top).replace('px','')) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
//if (hrcnt == 134 || hrcnt == 146) { alert(vdval + ' hr' + hrcnt + ': ' + thisv + ' ... ' + vstr); } // ?
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;

//

//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));
vdval=defvdval;
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)) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;


//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));
vdval=defvdval;
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)) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;



//vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));
vdval=defvdval;
thisv=';' + ourmathround(('' + thisrect.left).replace('px','')) + "," + ourmathround(eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2)) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;



//vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + ('' + thisrect.top).replace('px',''));
vdval=defvdval;
thisv=';' + ourmathround(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2)) + "," + ourmathround(('' + thisrect.top).replace('px','')) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;


//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));
vdval=defvdval;
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)) + ';';
if (vstr.indexOf(thisv) != -1) { vdval="visibility:hidden;"; } else { vstr+=vplus(thisv.substring(1)); }
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;

if (eval(itds % 5) == 0) {
dval='';
if (inquestion != '') {
if (parent.document != document) {
if (parent.document.getElementById('myh1')) {
dval=dval;
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('myh1').innerHTML='Maths Grid Paper';
} else {
document.getElementById('myh1').innerHTML='Chinese Brain Twisters Answer';
}
} else {
if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) {
document.getElementById('myh1').innerHTML=wording;
//wording=' ';
} else {
if (document.getElementById('myh3').innerHTML.indexOf(' ... ') == -1) { document.getElementById('myh3').innerHTML+=' ... Thanks to Chinese Brain Twisters by Baifang ISBN: 0-471-59505-5'; }
document.getElementById('reveal').style.display='block';
document.getElementById('skip').style.display='block';
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('myh1').innerHTML='Maths Grid Paper';
} else {
document.getElementById('myh1').innerHTML='Chinese Brain Twisters Question';
}
}
}
} else {
if (('' + location.hash).indexOf('blank') != -1 || ('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('square') != -1 || ('' + location.hash).indexOf('grid') != -1) {
document.getElementById('myh1').innerHTML=wording;
//wording=' ';
} else {
if (document.getElementById('myh3').innerHTML.indexOf(' ... ') == -1) { document.getElementById('myh3').innerHTML+=' ... Thanks to Chinese Brain Twisters by Baifang ISBN: 0-471-59505-5'; }
document.getElementById('reveal').style.display='block';
document.getElementById('skip').style.display='block';
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('myh1').innerHTML='Maths Grid Paper';
} else {
document.getElementById('myh1').innerHTML='Chinese Brain Twisters Question';
}
}
}
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('qh4').innerHTML='Maths Grid Paper';
} else {
//alert('' + location.hash);
document.getElementById('qh4').innerHTML=wording.replace('Vertex Pointing' + osft + ' Game','Vertex Pointing' + osft + ' Game ... On Each Set of 4 a Bezier Curve is Shown');
}
if (inquestion.indexOf('r') == -1) { inquestion='hr' + inquestion.replace(/\,/g,',hr'); }
if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }
}
//document.getElementById(into).innerHTML+='<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;"></hr>';
if (!isIE) {
//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('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById(into).innerHTML+=connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
} else {
document.getElementById(into).innerHTML+='<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;"></div>';
}
hrcnt++;
}
if (itds < 5) {
dval='';
if (inquestion != '') {
if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }
}
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;
}
//document.getElementById(into).innerHTML+='<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;"></hr>';
dval='';
if (inquestion != '') {
if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }
}
if (!isIE) {
//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('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById(into).innerHTML+=connect(document.getElementById('hr' + eval(3 + eval('' + fhr))), document.getElementById('hr' + eval(2 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
} else {
document.getElementById(into).innerHTML+='<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;"></div>';
}
hrcnt++;
dval='';
if (inquestion != '') {
if ((inquestion + ',').indexOf('r' + hrcnt + ',') == -1 && ('' + location.hash).indexOf('grid') == -1) { dval="display:none;visibility:hidden;"; }
}
document.getElementById(into).innerHTML+='<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;"></hr>';
hrcnt++;

dval='';

}
onld=false;
dval='';

if (('' + location.hash).indexOf('grid') != -1) { document.getElementById('mytable').style.marginTop='8px'; document.getElementById('mytable').style.marginLeft='3px'; }

if (inquestion.indexOf('.') != -1) {
var xinas=inquestion.split(',');
for (ix=0; ix<xinas.length; ix++) {
if (xinas[ix].indexOf('.') != -1) {
hrclick(document.getElementById('hr' + xinas[ix].split('.')[0].replace('-','').replace('dr','').replace('hr','')));
hrclick(document.getElementById('hr' + xinas[ix].split('.')[1].replace('-','').replace('dr','').replace('hr','')));
}
}
}

document.getElementById('myh3').innerHTML = document.getElementById('myh3').innerHTML.replace(" - ","<select id=selmode style=width:35px; onclick=socwc(event); ontouchmove=socwc(event); onmousemove=socwc(event); onchange=selc(this.value);><option value=" + document.URL.split('#')[0] + location.hash + "> - </option><option value=" + (document.URL.split('#')[0].split('?')[0] + 'l').replace('.htmll','.html') + ">Tracing Square Line Drawing</option> <option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + ">Chinese Brain Twisters</option><option id=iosos value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#blank>Vertex Pointing or SOS (for two) Game</option><option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#square>Square Pointing Game</option><option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#grid>Grid Pointing Game</option><option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#hangman>Hangman Game</option><option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#mathsgrid#hangman>Maths Grid Paper</option><option value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#reveal#hangman>Image Reveal Game</option></select>");

inas=inanswer.split(',');
if (inas.length > 0) {
setTimeout(acl, 2000);
}

if (wourx != '') {
var rectw=document.getElementById('selmode').getBoundingClientRect();
//alert(eval(eval('' + wourx) - eval('' + rectw.left)));
//document.title+=' ' + eval(eval('' + wourx) - eval('' + rectw.left));
if (eval(eval('' + wourx) - eval('' + rectw.left)) <= 20) { wourx=''; }
}
if (wourx != '' && (' ' + location.hash).indexOf('blank') != -1) {
osft=' or SOS (for two)';
document.getElementById('qh4').innerHTML=document.getElementById('qh4').innerHTML.replace(' Game', osft + ' Game');
//alert(wourx);
setTimeout(presosize,2000);
}

sqorig=document.getElementById('qh4').innerHTML;

if (('' + location.hash).indexOf('square') != -1) { picksq(); }


if ((('' + location.hash).indexOf('hangman0.0') != -1 || ('' + location.hash).indexOf('hangman00.0') != -1) && document.URL.indexOf('?wording=') != -1) {
sqorig=sqorig; //alert('Grid Paper');
} else if (('' + location.hash).indexOf('hangman') != -1) {
playhangman();
}

//alert(document.getElementById('qh4').innerHTML);
sqorig=sqorig.replace('Pointing Game', 'Pointing <a onclick="osft=' + "'" + ' or SOS (for two)=' + "'" + '; sosize(' + "''" + ');" style=text-decoration:underline;cursor:pointer;>or SOS (for two)</a> Game');
document.getElementById('qh4').innerHTML=document.getElementById('qh4').innerHTML.replace('Pointing Game', 'Pointing <a onclick="osft=' + "'" + ' or SOS (for two)=' + "'" + '; sosize(' + "''" + ');" style=text-decoration:underline;cursor:pointer;>or SOS (for two)</a> Game');
//alert(document.getElementById('qh4').innerHTML);
}

function presosize() {
sosize('');
}

function myguess() {
var myg=prompt('Okay, Player' + eval(3 - thisplayer) + ', what is your guess regarding the contents of the image as it is being revealed?', '');
if (myg == null) { myg=''; }
var mygx=confirm('Okay, Player' + thisplayer + ', is Player' + eval(3 - thisplayer) + ' guess of ' + myg + ' a correct guess?');
if (mygx) {
//alert('score' + eval(3 - thisplayer) + '+=' + availablescore);
eval('sparescore=eval(score' + eval(3 - thisplayer) + '.split("(")[1].split(")")[0])');
sparescore+=availablescore
eval('score' + eval(3 - thisplayer) + '=" (' + sparescore + ')"');
//document.getElementById('myh4').innerHTML+=' ... image of Player1' + score1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player2' + score2;
thisplayer=eval(3 - thisplayer);
sosize(' '); // sosize('word_wrap.jpg');
}
}

function readUBlob(inimis,xis,yis) {
if (inimis.trim() != '') {
document.getElementById('mytable').style.background="url('" + inimis.trim() + "')";
document.getElementById('dpf').style.display='none';
}
}

function process(infilecontents) {
if (infilecontents != null) {
//alert(99);
document.getElementById('mytable').style.backgroundImage="URL('data:image/png;base64," + btoa(infilecontents) + "')";
//alert(999);
document.getElementById('dpf').style.display='none';
//alert(9999);
}
}

function readBlob(opt_startByte, opt_stopByte) {

//alert(33);
var files = document.getElementById("file").files;
//alert(333);
if (!files.length) {
alert("Please select a file!");
return;
} else {
w = files[0].name;
//document.getElementById("fil").value = w;
}

var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;

//alert(stop);

var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
//alert(77);
process(evt.target.result);
//alert(777);
}
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}

function eh() {
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
//alert(2);
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
//alert(22);
readBlob(startByte, endByte);
//alert(222);
}
}, false);
}

function sosize(inim) {
//var hors=[], vers=[], diags=[];
var itds=0; tds=document.getElementsByTagName('td');
var sqsi=0, ioffset=0, bextras='', s1=0, s2=0, ainim=inim;
if (inim != '') {
availablescore=100;
if (inim.trim() != '') {
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);
}
eval('s1=score' + thisplayer);
eval('s2=score' + eval(3 - thisplayer));
//document.title+=' x';
document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing';
//document.title+=' y';
if (inim.trim() != '' && ainim.trim() != '') {
document.getElementById('myh4').innerHTML+=' ... image <div id=dpf style=display:NONE;><input style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span> or URL <input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"></input></div> of Player' + thisplayer + s1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + s2;
document.getElementById('mytable').style.background="url('" + inim + "')";
} else {
document.getElementById('myh4').innerHTML+=' ... image <div id=dpf style=display:INLINE-BLOCK;><input style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span> or URL <input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"></input></div> of Player' + thisplayer + s1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + s2;
}

setTimeout(eh, 1000);
//document.title+=' z';
//document.getElementById('myh4').innerHTML+=' ... image of Player' + thisplayer + s1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + s2;
} else {
document.getElementById('myh4').innerHTML+=' ... turn of Player1' + score1 + ' versus Player2' + score2;
}
for (var itrs=0; itrs<5; itrs++) {
for (var itds=eval(5 * itrs); itds<eval(5 + eval(5 * itrs)); itds++) {
thisrect=tds[itds].getBoundingClientRect();

tds[itds].style.verticalAlign='top';
sqsi=eval(2 * itds + ioffset);
if (inim != '') {
if (itds == 0) {
document.getElementById('myh1').innerHTML='Image Reveal Game';
document.getElementById('qh4').innerHTML=' ';
}
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;';
tds[itds].innerHTML='<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=" "> </button>';
//sqsi++;
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;';
tds[itds].innerHTML+='<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=" "> </button>';
//sqsi++;
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;';
tds[itds].innerHTML+='<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=" "> </button>';
//sqsi++;
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;';
tds[itds].innerHTML+='<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=" "> </button>';
} else {
//alert(sqsi);
tds[itds].innerHTML='<select title="" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + sqsi + ' onchange=sosmove(this);><option value=" "> </option><option value="S">S</option><option value="O">O</option></select>';
//sqsi++;
tds[itds].innerHTML+='<select title="" style=vertical-align:top;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(1 + sqsi) + ' onchange=sosmove(this);><option value=" "> </option><option value="S">S</option><option value="O">O</option></select>';
//sqsi++;
tds[itds].innerHTML+='<br><select title="" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(10 + sqsi) + ' onchange=sosmove(this);><option value=" "> </option><option value="S">S</option><option value="O">O</option></select>';
//sqsi++;
tds[itds].innerHTML+='<select title="" style=vertical-align:bottom;width:50%;height:50%;text-align:center; size=3 id=sqsi' + eval(11 + sqsi) + ' onchange=sosmove(this);><option value=" "> </option><option value="S">S</option><option value="O">O</option></select>';
//sqsi++;
//alert(tds[itds].innerHTML);
}
}
ioffset+=10;
}
}

function checkifsos(t1, t2, t3) { //, camv) {
//var score1=' (0)', score2=' (0)';
//var amv=camv.split('.')[0];
var retv=false;
if (t1 >= 0 && t1 < 100 && t2 >= 0 && t2 < 100 && t3 >= 0 && t3 < 100) {
if (document.getElementById('sqsi' + t1).value == 'S' && document.getElementById('sqsi' + t2).value == 'O' && document.getElementById('sqsi' + t3).value == 'S') {
if (thisplayer == 1) {
document.getElementById('sqsi' + t1).style.border='1px inset red';
document.getElementById('sqsi' + t2).style.border='1px inset red';
document.getElementById('sqsi' + t3).style.border='1px inset red';

if (document.getElementById('sqsi' + t1).title.indexOf('2') != -1) {
document.getElementById('sqsi' + t1).style.backgroundColor='';
document.getElementById('sqsi' + t1).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t1).style.backgroundColor='pink';
}
if (document.getElementById('sqsi' + t2).title.indexOf('2') != -1) {
document.getElementById('sqsi' + t2).style.backgroundColor='';
document.getElementById('sqsi' + t2).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t2).style.backgroundColor='pink';
}
if (document.getElementById('sqsi' + t3).title.indexOf('2') != -1) {
document.getElementById('sqsi' + t3).style.backgroundColor='';
document.getElementById('sqsi' + t3).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t3).style.backgroundColor='pink';
}
document.getElementById('sqsi' + t1).title+='1';
document.getElementById('sqsi' + t2).title+='1';
document.getElementById('sqsi' + t3).title+='1';
} else {
document.getElementById('sqsi' + t1).style.border='1px inset olive';
document.getElementById('sqsi' + t2).style.border='1px inset olive';
document.getElementById('sqsi' + t3).style.border='1px inset olive';
if (document.getElementById('sqsi' + t1).title.indexOf('1') != -1) {
document.getElementById('sqsi' + t1).style.backgroundColor='';
document.getElementById('sqsi' + t1).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t1).style.backgroundColor='yellow';
}
if (document.getElementById('sqsi' + t2).title.indexOf('1') != -1) {
document.getElementById('sqsi' + t2).style.backgroundColor='';
document.getElementById('sqsi' + t2).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t2).style.backgroundColor='yellow';
}
if (document.getElementById('sqsi' + t3).title.indexOf('1') != -1) {
document.getElementById('sqsi' + t3).style.backgroundColor='';
document.getElementById('sqsi' + t3).className='bicol'; //style.backgroundColor="linear-gradient(top, pink, yellow)";
} else {
document.getElementById('sqsi' + t3).style.backgroundColor='yellow';
}
document.getElementById('sqsi' + t1).title+='2';
document.getElementById('sqsi' + t2).title+='2';
document.getElementById('sqsi' + t3).title+='2';
}
retv=true;
if (thisplayer == 1) {
score1=' (' + eval(eval(score1.split('(')[1].split(')')[0]) + 1) + ')';
} else {
score2=' (' + eval(eval(score2.split('(')[1].split(')')[0]) + 1) + ')';
}
}
}
return retv;
}

function sosmove(osel) {
if (osel.id.indexOf('sqsisqsi') != -1) {
availablescore--;
osel.style.visibility='hidden';
if (availablescore == 0) {
myguess();
}
} else {
var cosel=osel.value, anothergo=false, prevplayer=thisplayer;
var thistile=eval(osel.id.replace('sqsi',''));
var surrounds='';
var prevscore1=score1;
var prevscore2=score2;
if (cosel.trim() != '') {
osel.size=1;
osel.style.border='1px inset blue';
osel.innerHTML='<option value=' + cosel + '>' + cosel + '</option>';
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');
// hmiddle -1 me +1
// hend -2 -1 me
// hstart me +1 +2
// vmiddle -10 me +10
// vend -20 -10 me
// vstart me +10 +20
// ddmiddle -11 me +11
// ddend -22 -11 me
// ddstart me +11 +22
// udmiddle -9 me +9
// udend -18 -9 me
// udstart me +9 +18
if (eval(thistile % 10) > 0 && eval(thistile % 10) < 9) {
anothergo|=checkifsos(eval(-1 + thistile), thistile, eval(1 + thistile));
}
if (eval(thistile % 10) > 1) {
anothergo|=checkifsos(eval(-2 + thistile), eval(-1 + thistile), thistile);
}
if (eval(thistile % 10) < 8) {
anothergo|=checkifsos(thistile, eval(1 + thistile), eval(2 + thistile));
}

if (eval(thistile / 10) > 0 && eval(thistile / 10) < 9) {
anothergo|=checkifsos(eval(-10 + thistile), thistile, eval(10 + thistile));
}
if (eval(thistile / 10) > 1) {
anothergo|=checkifsos(eval(-20 + thistile), eval(-10 + thistile), thistile);
}
if (eval(thistile / 10) < 8) {
anothergo|=checkifsos(thistile, eval(10 + thistile), eval(20 + thistile));
}

if (eval(thistile % 10) > 0 && eval(thistile % 10) < 9 && eval(thistile / 10) > 0 && eval(thistile / 10) < 9) {
anothergo|=checkifsos(eval(-11 + thistile), thistile, eval(11 + thistile));
}
if (eval(thistile % 10) > 1 && eval(thistile / 10) > 2) {
anothergo|=checkifsos(eval(-22 + thistile), eval(-11 + thistile), thistile);
}
if (eval(thistile % 10) < 8 && eval(thistile / 10) < 8) {
anothergo|=checkifsos(thistile, eval(11 + thistile), eval(22 + thistile));
}

if (eval(thistile % 10) > 0 && eval(thistile % 10) < 9 && eval(thistile / 10) > 0 && eval(thistile / 10) < 9) {
anothergo|=checkifsos(eval(-9 + thistile), thistile, eval(9 + thistile));
}
if (eval(thistile % 10) >= 0 && eval(thistile / 10) < 8) {
anothergo|=checkifsos(eval(-18 + thistile), eval(-9 + thistile), thistile);
}
if (eval(thistile % 10) > 2 && eval(thistile / 10) < 8) {
anothergo|=checkifsos(thistile, eval(9 + thistile), eval(18 + thistile));
}


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'); }
}
}
}

function playhangman() {
if (vocabulary[0] == '') {
mode=5;
//alert('hangman');
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);
} else {
mode=5;
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);
//alert(vocabulary[0]);
}
}

function selc(tvi) {
asocwc();
if (courx != '') {
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]; }
}
if ((document.URL.split('#')[0] + location.hash) != tvi) { if (((' ' + location.hash).split('#').length > 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) + '#'); } }
}

function getOffset(el) { // thanks to https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}

function connect(div1, div2) { //, color, thickness) { // draw a line connecting elements
var thickness = 0;
var ioff=-4;
if (!onld && 4 == 5) { ioff=0; }
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<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);' />";
//
// alert(htmlLine);
return htmlLine; //document.body.innerHTML += htmlLine;
}

function maybeontop(swhat,swhatshort) {
//alert(mode + ' swhatshort=' + swhatshort);
if (mode == 5) { // hangman
document.getElementById('sq').style.display='none';
//alert('<input onclick="alert(' + "'" + swhatshort + "'" + ');" type=button value="Player ' + curplayer + ' click reveals phrase while Player ' + eval(3 - curplayer) + ' turns away?"></input>');
document.getElementById('ontopsq').innerHTML='<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?"></input>';
if (document.getElementById('ihangman')) {
document.getElementById('ihangman').src="//www.rjmprogramming.com.au/HTMLCSS/hangman_bg.html?curplayer=1&tosolve=" + encodeURIComponent(swhatshort) + "&clue=" + encodeURIComponent(clue);
} else {
document.getElementById('dhangman').innerHTML='<br><div id=shangman></div><br><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) + '"></iframe><br>';
document.getElementById('dhangman').style.display='block';
}
lookforend();
}
return swhat;
}

function handon() {
location.href=document.URL.split('#')[0].split('?')[0] + '#hangman' + score + '.' + goes;
}

function hguess(gthis,othis) {
var ifnd=0, fnd=false, newval='';
for (ifnd=0; ifnd<vocabulary[0].length; ifnd++) {
if (vocabulary[0].substring(ifnd,eval(1 + ifnd)).toLowerCase() == gthis.toLowerCase()) {
fnd=true;
newval+=gthis;
} else {
newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));
}
}
document.getElementById('sletters').innerHTML=newval;
document.getElementById('sletters').title=newval;
othis.style.visibility='hidden';

if (!fnd) {
eval(hangmanc[ihangman]);
ihangman++;
}
if (ihangman >= hangmanc.length) {
goes++;
newval='';
for (ifnd=0; ifnd<vocabulary[0].length; ifnd++) {
if (document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd)).toLowerCase() == "_") {
newval+='<font color=red>' + vocabulary[0].substring(ifnd,eval(1 + ifnd)) + '</font>';
} else {
newval+=document.getElementById('sletters').innerHTML.substring(ifnd,eval(1 + ifnd));
}
}
document.getElementById('sletters').innerHTML=newval;
document.getElementById('sletters').title=vocabulary[0];
setTimeout(handon, 5000);
} else if (document.getElementById('sletters').innerHTML.indexOf('_') != -1) {
} else {
score+=document.getElementById('sletters').innerHTML.length;
goes++;
setTimeout(handon, 5000);
}
}

function checkwi(iois) {
var okay=true, hiddenv='', hletters=' ', 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'];
if (iois != null) {
try {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
vocabulary[0] = aconto.body.innerHTML.replace('</pre>','').replace('<pre>','');
if (vocabulary[0].indexOf('-') != -1) { okay=false; }
if (mode == 5) {
for (var iji=0; iji<letters.length; iji++) {
hletters+='<input style=inline-block; type=button onclick=hguess(this.value,this); value=' + letters[iji] + '>' + '' + '</input>';
if (letters[iji].toLowerCase() == 'm') { hletters+='<br>'; document.getElementById('qh4').innerHTML=' '; }
}
for (var ii=0; ii<vocabulary[0].length; ii++) {
if (vocabulary[0].substring(ii, eval(1 + ii)) == ' ') {
hiddenv+=' ';
} else {
hiddenv+='_';
}
}
if ((' ' + location.hash).split('#').length > 3 || (' ' + location.hash).indexOf('hangman-00.0') != -1) {
//document.title+=' a';
//document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing';
if (inim.trim() != '') {
document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing ... image <div id=dpf style=display:NONE;><input style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span> or URL <input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"></input></div> of Player' + thisplayer + score1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + score2;
} else {
document.getElementById('myh4').innerHTML='Enjoy your two player game of Image Revealing ... image <div id=dpf style=display:INLINE-BLOCK;><input style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span> or URL <input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"></input></div> of Player' + thisplayer + score1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + score2;
}
setTimeout(eh, 1000);

//document.title+=' b';
//document.getElementById('myh4').innerHTML+=' ... image <input style=display:inline-block; id=file type=file name=file></input><div id=dpf style=display:INLINE-BLOCK;><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process>Process</button></span> or URL <input id=vsiurl type=url onblur=readUBlob(this.value,0,0); value="' + inim.trim() + '"></input></div> of Player' + thisplayer + score1 + ' versus <a onclick=myguess(); style=text-decoration:underline;cursor:pointer;>guess</a> of Player' + eval(3 - thisplayer) + score2;
//document.title+=' c';
//if (inim.trim() != '') { document.getElementById('dpf').style.display='none'; }
} else if ((' ' + location.hash).split('#').length > 2 || (' ' + location.hash).indexOf('hangman-0.0') != -1) {
document.getElementById('myh4').innerHTML='Enjoy scribbling <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">away</a>! Four discrete vertex clicks define image extraction rectangle.';
} else {
document.getElementById('myh4').innerHTML='<span id=gscore>Score: ' + score + '/' + goes + '</span> <span id=hint title="' + vocabulary[0].length + ' long">Hint:</span> ' + '<span id=sletters data-title="' + vocabulary[0] + '" title="' + hiddenv + '">' + hiddenv + '</span>' + hletters;
}
//document.getElementById('qh4').innerHTML=hletters;
}
hangman[0] = maybeontop('', vocabulary[0]);
var ws=vocabulary[0].split(' ');
for (var iws=0; iws<ws.length; iws++) {
if (ws[iws].length > maxanyone) { okay=false; }
}
//if (mode == 4) questions[0] = vocabulary[0];
}
}
} catch(ee) {
if (vocabulary[0] == '' && mode == 5) { okay=false; }
}
}
//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); }
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); }
}



</script>
</head>
<body onload=' draw_hrs(); '>
<h1 id=myh1>Tracing Square Line Drawing</h1>
<h3 id=myh3>RJM Programming - December, 2018</h3>
<h4 id=myh4>Hint: Click/touch a match then two vertices to reposition that match</h4>
<h4 id=qh4> </h4>
<table><tr><th>
<table id=mytable>
<tbody>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
</tbody>
</table>
</th><th id='tdhuh' style='vertical-align:top;'> <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='<style> .vertex { opacity: 0.1; } </style>'; document.getElementById('tdandthen').innerHTML='<iframe src=' + aurl + ' style=width:560px;height:600px;background-color:#f0f0f0;></iframe>'; } else { this.value='Reveal Answer'; document.getElementById('tdandthen').innerHTML=''; location.href=burl.split('#')[0].split('?')[0]; } "></input> <br><input type=button id=skip value=Skip style=background-color:lightgreen;display:none; onclick="location.href=document.URL.split('#')[0].split('?')[0]; "></input></th><th id='tdandthen'></th></tr>
</table>
<div id=hrs></div>
<div id=pout></div>
<div id=spout></div>
<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;'></iframe>
<span id=sq></span><div id=ontopsq></div><div id=dhangman></div>
</body>
</html>