<!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</title>
<style>
td.square {
width: 100px;
height: 100px;
}
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 {
border-radius: 23px;
}
.face {
border-radius: 150px;
}
iframe {
z-index: 29;
}
</style>
<script type='text/javascript'>
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 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]) + '&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 Game') + '&question=%20' + '#blank'; //location.hash;
} else if (('' + location.hash).indexOf('square') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Square Pointing Game') + '&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') + '&question=%20' + '#grid'; // + location.hash;
} else if (('' + location.hash).indexOf('hangman') != -1) {
if (('' + document.URL).indexOf('mathsgrid') != -1) {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Maths Grid Paper') + '&question=%20#hangman-0.0'; // + location.hash;
} else {
zero=0;
location.href=document.URL.split('#')[0].split('?')[0] + '?wording=' + encodeURIComponent('Hangman Game') + '&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) {
//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) {
//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) {
//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) {
//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 draw_hrs() {
var inqis='';
if (('' + location.hash).indexOf('hangman') != -1 || ('' + location.hash).indexOf('mathsgrid') != -1) {
location.hash=location.hash.replace('mathsgrid','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 > 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 > 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 > 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 > 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 > 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 > 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 > 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 Game','Vertex Pointing 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 style=width:35px; 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 value=" + document.URL.split('#')[0].split('?')[0].replace('.html','.htm') + "#blank>Vertex Pointing 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></select>");
inas=inanswer.split(',');
if (inas.length > 0) {
setTimeout(acl, 2000);
}
sqorig=document.getElementById('qh4').innerHTML;
if (('' + location.hash).indexOf('square') != -1) { picksq(); }
if (('' + location.hash).indexOf('hangman0.0') != -1 && document.URL.indexOf('?wording=') != -1) {
sqorig=sqorig; //alert('Grid Paper');
} else if (('' + location.hash).indexOf('hangman') != -1) {
playhangman();
}
}
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) {
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>';
}
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 > 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>