<html>
<head>
<title>Canvas HTML Element Fraction Board Game (with double click functionality) Tutorial ... RJM Programming ... April 2014 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<script language="JavaScript">
var score = 0.0;
var goes = 0.0;
var realgoes = 0;
var actsym = '+';
var answeridea = '';
var prevsansweridea = '';
var sansweridea = '';
var operatoris = '';
var x=0, y=0;
var num1 = 0;
var denom1 = 0;
var num2 = 0;
var denom2 = 0;
var ndenom = 0;
var xrand = 0;
var zz = "0";
var caninvite=false;
var xaction = ['+', '+', '-', '*', '/', '%', '**'];
var cfb = '24px Courier New';
var cf = '18px Courier New';
var cfs = '16px Courier New';
var ttd='';
var imgis=null;
var moveid=-1;
var mousePos;
var dragans='';
var dragarr='';
var outstandingcommand=[];

var ua = navigator.userAgent;
var ouraction = "double click";
var isiPad = /iPad/i.test(ua) || /iPhone OS 3_1_2/i.test(ua) || /Andrxoid/i.test(ua) || /iPhone OS 3_2_2/i.test(ua);
var withingesture = 0;
var lastadvice = "";
if (isiPad) ouraction = "use any gesture";

var retit='';

var anchor=null, firstclick=false, twofirstclick=true;

var documentURL=document.URL;
var alreadyaskedfor=';', suffv='';
var collaboration=location.search.split('collaboration=')[1] ? decodeURIComponent(location.search.split('collaboration=')[1].split('&')[0].split('#')[0]) : '';
var collaboratee=collaboration;

var addhashbit='', curaddh=(document.URL.indexOf('addhashbit=') != -1 ? 0 : 999);
var addhashbits=[];
if (curaddh == 0) {
addhashbits=(document.URL.split('addhashbit=')[1] ? decodeURIComponent(document.URL.split('addhashbit=')[1].split('&')[0].split('#')[0]).split('#')[0] : ' ').substring(1).split('_');
}

function innertextize(whatih) {
var nextfroms=['[',']','{','}'], inxt=0;
retit=retit.replace('!@', document.getElementById('guess').value);
retit+=' while we think a reduced answer could be ' + String.fromCharCode(10) + String.fromCharCode(10);
retit+='' + (prevsansweridea != '' ? prevsansweridea : sansweridea) + String.fromCharCode(10) + String.fromCharCode(10) + '?';
//alert(retit);
var rets=whatih.split('>');
for (var jrets=1; jrets<rets.length; jrets++) {
if (rets[eval(-1 + jrets)].slice(-3) == '/tr') {
retit+=String.fromCharCode(10);
}
if (4 == 6 && rets[eval(-1 + jrets)].indexOf(' value="') != -1) {
retit+=rets[eval(-1 + jrets)].split(' value="')[1].split('"')[0];
}
if (4 == 6 && rets[eval(-1 + jrets)].indexOf(' onchange=') != -1) {
retit+=document.getElementById('iop').value;
}
if (rets[eval(-1 + jrets)].indexOf(' src=') != -1 && rets[eval(-1 + jrets)].indexOf('/images/') != -1 && rets[eval(-1 + jrets)].indexOf('rt.') != -1) {
switch (rets[eval(-1 + jrets)].split('/images/')[1].split('.')[0]) {
case 'g0':
case '0':
retit+='0';
break;

case 'g1':
case '1':
retit+='1';
break;

case 'g2':
case '2':
retit+='2';
break;

case 'g3':
case '3':
retit+='3';
break;

case 'g4':
case '4':
retit+='4';
break;

case 'g5':
case '5':
retit+='5';
break;

case 'g6':
case '6':
retit+='6';
break;

case 'g7':
case '7':
retit+='7';
break;

case 'g8':
case '8':
retit+='8';
break;

case 'g9':
case '9':
retit+='9';
break;

case 'divide':
case 'slash':
retit+='/';
break;

case 'gsqrt':
if (4 == 4) {
retit=retit.replace(nextfroms[inxt],String.fromCodePoint(8730)).replace(nextfroms[inxt],String.fromCodePoint(8730));
inxt++;
} else {
retit+=String.fromCodePoint(8730);
}
break;

case 'gcurt':
if (4 == 4) {
retit=retit.replace(nextfroms[inxt],String.fromCodePoint(8731)).replace(nextfroms[inxt],String.fromCodePoint(8731));
inxt++;
} else {
retit+=String.fromCodePoint(8731);
}
break;

case 'plus':
retit+='+';
break;

case 'gminus':
case 'minus':
retit+='-';
break;

case 'multiply':
retit+='*';
break;

case 'mod':
retit+='%';
break;

case 'power':
retit+='**';
break;

case 'dot':
retit+='.';
break;

case 'line':
if (retit.slice(-1) != '_') {
retit+=String.fromCharCode(10);
}
retit+='_';
break;

default:
break;

}
}
if (4 == 6 && rets[jrets].split('<')[0] != '') {
retit+=rets[jrets].split('<')[0];
}
}
//alert(retit);
return retit; //document.getElementsByTagName('td')[1].innerText;
}

function presendto() {
if (collaboratee.indexOf(',') != -1) {
if (collaborateurl.indexOf('collaboration=') == -1) {
collaborateurl+='&collaboration=' + encodeURIComponent(collaboratee);
}
collaboration=collaboratee;
}
sendto(collaboratee, 'Fractional Mathematics Problem ... my answer' + (collaborateurl.indexOf('?') != -1 ? ' and new fractional problem' : '') + ' follows ...', innertextize(document.getElementsByTagName('p')[0].innerHTML) + (collaborateurl.indexOf('?') != -1 ? String.fromCharCode(10) + String.fromCharCode(10) + collaborateurl : ''));
}

function sendto(collaborate, subj, bodbit) {
if (collaborate.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + (collaborate.trim()) + '?subject=' + encodeURIComponent(subj) + '&body=' + encodeURIComponent(bodbit);
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();
} else if (collaborate.trim() != '' && collaborate.trim().split(',')[0].replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + (collaborate.trim()) + '&body=' + encodeURIComponent(bodbit);
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

function collaborate() {
if (collaboratee.trim() == '') {
collaboratee=prompt('Enter email address or SMS number to collaborate with (and optionally comma separate your email address for more interaction possibilities regarding your answers)?', '');
if (collaboratee == null) { collaboratee=''; }
if (collaboratee.indexOf(',') != -1) {
collaborateurl+='&collaboration=' + encodeURIComponent(collaboratee);
collaboration=collaboratee;
}
}
if (collaboratee.indexOf(',') != -1) {
if (collaborateurl.indexOf('collaboration=') == -1) {
collaborateurl+='&collaboration=' + encodeURIComponent(collaboratee);
}
collaboration=collaboratee;
}
sendto(collaboratee, 'Fractional Mathematics Problem', collaborateurl);
}


function maybe(imgo,xx,yy) {
if (eval('' + addhashbits.length) > curaddh) {
curaddh++;
context.drawImage(document.getElementById(addhashbits[eval(-1 + curaddh)].split(',')[0]), addhashbits[eval(-1 + curaddh)].split(',')[1], addhashbits[eval(-1 + curaddh)].split(',')[2]);
return document.getElementById('imgnothing');
}
return imgo;
}

function reargs(whichone, ccwhi) {
var spare='', suffz='';
suffv='';
if (whichone.indexOf('' + ccwhi + '=') != -1) {
//collaborateurl=document.URL.split('?')[0].split('#')[0];
//documentURL='';
//alert('here ' + ccwhi);
if (whichone.indexOf('' + ccwhi + suffv + '=') != -1) {
suffv+='_';
}
}
if (documentURL == document.URL) {
while (alreadyaskedfor.indexOf(';' + ccwhi + suffz + ';') != -1) {
suffz+='_';
}
spare=documentURL.split(ccwhi + suffz + '=')[1] ? decodeURIComponent(documentURL.split(ccwhi + suffz + '=')[1].split('&')[0].split('#')[0]).split('#')[0] : '';
if (ccwhi == 'sansweridea') {
eval('prev' + ccwhi + '="' + spare + '"');
}
alreadyaskedfor+=ccwhi + suffz + ';';
if (spare != '' && (spare + ' ').substring(0,1) >= '0' && (spare + ' ').substring(0,1) <= 9) {
if (2 == 6) {
document.getElementsByTagName('p')[0].innerHTML+=' ' + ccwhi + '=' + spare + '';
}
eval('' + ccwhi + '=' + spare + '');
} else if (spare != '' && (spare + ' ').substring(0,1) == '-' && spare != '-') {
if (2 == 6) {
document.getElementsByTagName('p')[0].innerHTML+=' ' + ccwhi + '=' + spare + '';
}

try {
eval('' + ccwhi + '=' + spare + '');
} catch(htdhr) {
var gh=prompt(ccwhi + ' in ' + whichone,ccwhi + ' in ' + whichone);
}
} else if (spare != '') {
if (2 == 6) {
document.getElementsByTagName('p')[0].innerHTML+=' ' + ccwhi + '="' + spare + '"';
}
eval('' + ccwhi + '="' + spare + '"');
}
}
return collaborateurl;
}


function reduce(jnn, ind) {
var inn = jnn;
if (inn < 0) inn = -inn;
var retval = ind;
var iis, miis = ind;
if (miis < inn) miis = inn;
for (iis=(miis - 1); iis>=2; iis--) {
if (iis <= inn && iis <= ind && (inn % iis) == 0 && (ind % iis) == 0) return eval(ind + "/" + iis);
}
return retval;
}

function updatescore() {
var sis=document.getElementById('score');
sis.innerHTML = score.toString();
var gis=document.getElementById('goes');
gis.innerHTML = goes.toString();
}

function fansweridea(operatoris) {
var newerdenom = 0;
var newdenom = 0;
var newnum = 0;
var hval = 0;
answeridea = "((" + num1 + " / " + denom1 + ") " + operatoris + " (" + num2 + " / " + denom2 + "))";

if (operatoris == "+") {
if (denom1 != denom2) {
newdenom = eval(denom1 + "*" + denom2);
num1 = eval(num1 + "*" + denom2);
num2 = eval(num2 + "*" + denom1);
denom1 = newdenom;
denom2 = newdenom;
newnum = eval(num1 + "+" + num2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
ndenom = newerdenom;
} else {
newdenom = denom1;
newnum = eval(num1 + "+" + num2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
ndenom = newerdenom;
}
} else if (operatoris == "-") {
if (denom1 != denom2) {
newdenom = eval(denom1 + "*" + denom2);
num1 = eval(num1 + "*" + denom2);
num2 = eval(num2 + "*" + denom1);
denom1 = newdenom;
denom2 = newdenom;
newnum = eval(num1 + "-" + num2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
ndenom = newerdenom;
} else {
newdenom = denom1;
newnum = eval(num1 + "-" + num2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
ndenom = newerdenom;
}
} else if (operatoris == "*") {
newdenom = eval(denom1 + "*" + denom2);
newnum = eval(num1 + "*" + num2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
} else if (operatoris == "/") {
newdenom = eval(denom1 + "*" + num2);
newnum = eval(num1 + "*" + denom2);
newerdenom = reduce(newnum, newdenom);
if (newerdenom != newdenom) {
newnum = eval(newnum + "/(" + newdenom + "/" + newerdenom + ")");
newdenom = newerdenom;
}
if ((newdenom % newnum) == 0) {
sansweridea = "1/" + eval(newdenom + "/" + newnum);
} else {
sansweridea = "" + newnum + "/" + newdenom;
}
}

if (sansweridea != '') {
sansweridea=sansweridea.replace(/\/1$/g,'');
}

if (6 == 6) {
if (reargs(collaborateurl,'num1').indexOf('?') != -1) {
collaborateurl+='&num1' + suffv + '=' + encodeURIComponent('' + num1);
} else {
collaborateurl+='?num1' + suffv + '=' + encodeURIComponent('' + num1);
}
if (reargs(collaborateurl,'denom1').indexOf('?') != -1) {
collaborateurl+='&denom1' + suffv + '=' + encodeURIComponent('' + denom1);
} else {
collaborateurl+='?denom1' + suffv + '=' + encodeURIComponent('' + denom1);
}
if (reargs(collaborateurl,'num2').indexOf('?') != -1) {
collaborateurl+='&num2' + suffv + '=' + encodeURIComponent('' + num2);
} else {
collaborateurl+='?num2' + suffv + '=' + encodeURIComponent('' + num2);
}
if (reargs(collaborateurl,'denom2').indexOf('?') != -1) {
collaborateurl+='&denom2' + suffv + '=' + encodeURIComponent('' + denom2);
} else {
collaborateurl+='?denom2' + suffv + '=' + encodeURIComponent('' + denom2);
}
if (reargs(collaborateurl,'sansweridea').indexOf('?') != -1) {
collaborateurl+='&sansweridea' + suffv + '=' + encodeURIComponent('' + sansweridea);
} else {
collaborateurl+='?sansweridea' + suffv + '=' + encodeURIComponent('' + sansweridea);
}

if (reargs(collaborateurl,'operatoris').indexOf('?') != -1) {
collaborateurl+='&operatoris' + suffv + '=' + encodeURIComponent('' + operatoris);
} else {
collaborateurl+='?operatoris' + suffv + '=' + encodeURIComponent('' + operatoris);
}
if (reargs(collaborateurl,'sansweridea').indexOf('?') != -1) {
collaborateurl+='&sansweridea' + suffv + '=' + encodeURIComponent('' + sansweridea);
} else {
collaborateurl+='?sansweridea' + suffv + '=' + encodeURIComponent('' + sansweridea);
}
}


if (yesplease == 1) {
if (isiPad) yesplease = 0;
iuo.value = answeridea;
setTimeout(giveadvice, 1000);
}
}

function checkget() {

if (window.location.search.indexOf("score") != (0 - 1)) {

var myprmstr = window.location.search.substr(1);
//alert(myprmstr);

var xpos = myprmstr.indexOf("goes");
if (xpos != -1) {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(' start ', ' resume ');

var gsuff = myprmstr.substr(xpos + 5);
goes = parseFloat(gsuff);
//alert(goes + ' ' + myprmstr.substr(xpos + 5));
myprmstr = myprmstr.substr(0, (xpos - 2));
}
xpos = myprmstr.indexOf("score");
if (xpos != -1) {
var ssuff = myprmstr.substr(xpos + 6);
score = parseFloat(ssuff);
}
updatescore();


if (!firstclick) {
firstclick=true;
//document.getElementById('canvaselement').click();
setTimeout(function(){
retit='Is ... ' + String.fromCharCode(10) + String.fromCharCode(10) + '!@' + ' (as my reduced fractional problem) equivalent to but simpler version of ' + String.fromCharCode(10) + String.fromCharCode(10) + document.getElementById('guess').value + '[' + document.getElementById('guessr').value + (document.getElementById('guess2').outerHTML.split('>')[0].indexOf('none;') != -1 ? '' : document.getElementById('iop').value + document.getElementById('guess2').value + ']' + document.getElementById('guess2r').value) + String.fromCharCode(10) + String.fromCharCode(10);
addhashbit='';
curaddh=999;
addhashbits=[];
documentURL='';
twofirstclick=true;
}, 4000);
}

}


//alert(10);
var okeypad=document.getElementById('keypad');
//alert(11);
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b0>0</a>';
//alert(12);
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b1>1</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b2>2</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b3>3</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b4>4</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b5>5</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b6>6</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b7>7</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b8>8</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=b9>9</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=bd>.</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=bm>-</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick="clickhuh(this); drag(event);" ondragstart=drag(event) draggable=true id=bs>/</a>';
okeypad.innerHTML += '<a style="text-decoration:none;padding:8 8 8 8;border:2px solid black;background-color:lightgray;" onclick=assess("0") id=ba>Check Answer</a>';

}


function allowDrop(ev) {
//document.title='...';
ev.preventDefault();
mousePos = getMousePos(elem, ev);
//mousePos.x=ev.clientX;
//mousePos.y=ev.clientY;
}

function drag(ev) {
//alert(98);
moveid = ev.target.id;
//if (document.getElementById(ev.target.id).innerHTML.indexOf('<') == -1) {
if (ev.target.id.substring(0,1) == 'b') {
ttd=document.getElementById(ev.target.id).innerHTML;
//document.title=ttd;
imgis=null;
if (ev.dataTransfer) {
ev.dataTransfer.setData('text/plain', ev.target.id);
}
}
//}
}

function drop(ev) {
//alert(65);
var evpageX = ev.pageX, evpageX2;
var evpageY = ev.pageY, evpageY2;
ev.preventDefault();
if (typeof mousePos.x !== 'undefined') {
//alert(evpageX + ' vs mousePos.x=' + mousePos.x + ' ' + evpageY + ' vs mousePos.y=' + mousePos.y);
if (ttd != '') {
context.strokeStyle = 'gray';
context.font = cfb;
context.strokeText(ttd, mousePos.x, mousePos.y);
dodrag(dragans, dragarr, ttd, mousePos.x, mousePos.y);
} else if (imgis != null) {
context.drawImage(imgis, mousePos.x, mousePos.y);
}
}
}

function clickhuh(iis) {
outstandingcommand.push("document.getElementById('guess').value += '" + iis.innerHTML + "'");
setTimeout(maybedothis, 3000);
}

function maybedothis() {
if (outstandingcommand.length > 0) {
for (var ii=0; ii<outstandingcommand.length; ii++) {
eval(outstandingcommand[ii]);
}
outstandingcommand=[];
}
}

function dodrag(ans, arr, thisletter, mx, my) {
var dans="" + ans;
var darr="" + arr;
if (darr == "") {
if (dans == "" || dans == document.getElementById('guess').value) {
dragans=document.getElementById('guess').value + thisletter;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr=mx;
} else {
dragans=dans + thisletter;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr=mx;
}
} else if (darr.indexOf(",") == -1) {
if (eval(darr) < eval(mx)) {
dragans=document.getElementById('guess').value + thisletter;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr+="," + mx;
} else {
dragans=thisletter + document.getElementById('guess').value;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr=mx + "," + dragarr;
}
} else {
var xs=darr.split(",");
if (eval(mx) <= eval(xs[0])) {
dragans=thisletter + document.getElementById('guess').value;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr=mx + "," + dragarr;
} else if (eval(mx) >= eval(xs[eval(-1 + xs.length)])) {
dragans=document.getElementById('guess').value + thisletter;
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr+="," + mx;
} else {
for (var ii=1; ii<eval(0 + xs.length); ii++) {
if (eval(mx) >= eval(xs[eval(-1 + ii)]) && eval(mx) <= eval(xs[eval(0 + ii)])) {
dragans=document.getElementById('guess').value.substring(0,ii) + thisletter + document.getElementById('guess').value.substring(ii);
document.getElementById('guess').value=dragans;
outstandingcommand=[];
dragarr=dragarr.replace(xs[eval(-1 + ii)] + "," + xs[eval(0 + ii)], xs[eval(-1 + ii)] + "," + mx + "," + xs[eval(0 + ii)]);
}
}
}
}
}

setTimeout(function(){
caninvite=true;
}, 35000);


</script>
</head>
<body onload="checkget();">
<h1 id='myh1'>Click for your maths question about fractions ... Take fewest goes to reach score of 20</h1><p>Score <span style='color:green;' id="score">0</span> achieved via <span style='color:red;' id="goes">0</span> goes and your current answer is <input onchange='assess(zz);' style='background-color: pink;' id="guess" value=""></input>  <select id="difficulty" name="difficulty" style="display:none;"><option value="SuperEasy">Super Easy</option><option value="Easy" selected="selected">Easy</option><option value="Harder">Harder</option></select></p> <input type='text' id='iuo' style='display:none;' value=''></input><div id='keypad'></div></p>
<canvas ondrop='drop(event);' ondragover='allowDrop(event);' style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your maths question about fractions ... Take fewest goes to reach score of 20' id="canvaselement" width="1150" height="500" style="border: 1px solid green;" />
<script language="JavaScript">

var toggle = 0;
var goodx = 200;
var goody = 200;
var inidone = 0;
var curcard = 0;
var suffix = "";

var img;
var imgaction;

var scoretoget = 20;
var guessvalue = 0.0;

var elem = document.getElementById('canvaselement');
var iuo = document.getElementById('iuo');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
var context = elem.getContext('2d');
var elements = [];
var arr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var iDoubleClickInterval = 500;
var previewTimestamp = -1;
var yesplease = 0;

elem.addEventListener("gesturestart", gestureStart, false);

elem.addEventListener("gesturechange", gestureChange, false);

elem.addEventListener("gestureend", gestureEnd, false);

function gestureStart(e) {
//e.preventDefault();
}

function gestureEnd(e) {
//e.preventDefault();
if (toggle == 1 && withingesture == 0) {
withingesture = 1;
yesplease = 1;
fansweridea(actsym);
yesplease = 0;
withingesture = 0;
e.preventDefault();
}
}

function gestureChange(e) {
//e.preventDefault();
}

// Add event listener for `onMouseUp` events.
elem.addEventListener('mouseup', function(e) {

if (previewTimestamp > 0)
{
if (eval(e.timeStamp - previewTimestamp) < iDoubleClickInterval)
{
yesplease = 1;
}
previewTimestamp = e.timeStamp;
}
else {
previewTimestamp = e.timeStamp;
}
}, false);


// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
if (ttd != '') {
allowDrop(event);
drop(event);
ttd='';
} else {
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
x = event.pageX - elemLeft;
y = event.pageY - elemTop;

x = goodx;
y = goody;

var r = Math.floor((Math.random()*256)+0);
var g = Math.floor((Math.random()*256)+0);
var b = Math.floor((Math.random()*256)+0);
var thiscol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];

elem.style.backgroundColor = thiscol;


if (toggle == 0) {
iuo.value = '';
answeridea = '';
document.getElementById('guess').value = '';
document.getElementById('myh1').innerHTML = 'Change your<sup title="Collaborate?" style=text-decoration:underline;cursor:pointer; onclick=collaborate();>++?</sup> answer and click chalkboard to reveal answer (or ' + ouraction + ' for help on next problem) ... Take fewest goes to reach score of 20';
//context.drawImage(imgover,x,y);
add_question(x, y);
if (twofirstclick && caninvite) {
sendto(collaboratee, 'Fractional Mathematics Problem', collaborateurl);
}
} else {
document.getElementById('myh1').innerHTML = 'Click anywhere on chalkboard to reveal a new question ... Take fewest goes to reach score of 20';
//goes = goes + 1.0;
//realgoes = realgoes + 1.0;
score = score + assess("1");
if (score >= scoretoget) {
alert('Congratulations! You got there in ' + goes + ' goes. Is this your best?');
window.location = './fraction_withdoubleclick_chalkboard.html';
} else {
elem.width = elem.width;
}
}

toggle = 1 - toggle;
yesplease = 0;
}
// }

}, false);

elem.addEventListener('mouseenter', function(evt) { // thanks to http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
mousePos = getMousePos(elem, evt);
}, false);

function giveadvice() {
var ihiuo = iuo.value.replace(") / (", ") (");
var ii, advice = "The " + ihiuo + " problem can be broken down into 3 questions? Firstly, what is a common denominator for ";
if (ihiuo != '') {
var slasha = ihiuo.split('/');
var myn1a = slasha[0].split('(');
var myn1 = myn1a[myn1a.length - 1].replace(' ', '');
var myd1a = slasha[1].split(')');
var myd1 = myd1a[0].replace(' ','');
var myopa = (" " + myd1a[1]).split('(');
var myop = myopa[0].replace(' ','');
myop = myop.replace(' ','').replace(' ','').replace(' ','');
if (myop == '') myop = actsym;
if (myop == '') myop = "/";
var myopai = myopa.length - 1;
var myn2a = myopa[myopai].split('/');
var myn2 = myn2a[myn2a.length - 1].replace(' ', '');
var myd2a = slasha[slasha.length - 1].split(')');
var myd2 = myd2a[0].replace(' ','');
for (ii=0; ii<=myd1; ii++) {
if (ii == 0) advice = advice + '(';
if (ii < myd1) advice = advice + '# ';
if (ii == myd1) advice = advice + ') and ';
}
for (ii=0; ii<=myd2; ii++) {
if (ii == 0) advice = advice + '(';
if (ii < myd2) advice = advice + '# ';
if (ii == myd2) advice = advice + ')? Secondly, respective to first denominator changes (if any) multiply, as required, respectively, numerators ';
}
for (ii=0; ii<=myn1; ii++) {
if (ii == 0) advice = advice + '(';
if (ii < myn1) advice = advice + '# ';
if (ii == myn1) advice = advice + ') and ';
}
for (ii=0; ii<=myn2; ii++) {
if (ii == 0) advice = advice + '(';
if (ii < myn2) advice = advice + '# ';
if (ii == myn2) advice = advice + ') by the relevant factors? Lastly, ';
}
if (myop == '+') {
advice = advice + 'what is first adjusted numerator1/denominator1 fraction added to second numerator2/denominator2 fraction (with same denominators)?';
} else if (myop == '-') {
advice = advice + 'what is second adjusted numerator2/denominator2 fraction subtracted from first adjusted numerator1/denominator1 fraction (with same denominators)?';
} else if (myop == '*') {
advice = 'Regarding ' + ihiuo.replace(") (", ") / (") + ' problem what is (' + myn1 + ' times ' + myn2 + ') over (' + myd1 + ' times ' + myd2 + '), as a fraction? This is like asking how many (' + myd2 + ' times ' + myd1 + ') are there in (' + myn1 + ' times ' + myn2 + '), as a number?';
} else if (myop == '/') {
advice = 'Regarding ' + ihiuo.replace(") (", ") / (") + ' problem what is (' + myn1 + ' times ' + myd2 + ') over (' + myd1 + ' times ' + myn2 + '), as a fraction? This is like asking how many (' + myd1 + ' times ' + myn2 + ') are there in (' + myn1 + ' times ' + myd2 + '), as a number?';
}
var pa;
if (lastadvice != advice) {
pa = prompt(advice, '');
lastadvice = advice;
if (pa != null) {
if (pa != '') {
zz = "00";
document.getElementById('guess').value = pa;
assess("0");
}
}
}
zz = "0";
}
}

function doclick() {
elem.click();
}

setTimeout(doclick, 1000);

function aresame(ins1, ins2) {
var resis = false;
if (ins1 == ins2) {
return true;
} else if (ins1.indexOf("/") != -1 && ins2.indexOf("/") != -1) {
var nw = ins1.split("/");
var newd = reduce(nw[0], nw[1]);
//alert(newd + " from reduce(" + nw[0] + "," + nw[1] + ")");
if (newd != nw[1]) {
var xnewnum = eval(nw[0] + "/(" + nw[1] + "/" + newd + ")");
var xnewdenom = newd;
var cnewd = xnewnum + "/" + xnewdenom;
if (cnewd == ins2) {
resis = true;
alert("You score a point but remember to reduce, because (your answer) " + ins1 + " = " + ins2);
}
} else if (Math.abs(eval("(" + ins2 + ")-(" + ins1 + ")")) < 0.0001) {
resis = true;
alert("You score a point but remember to reduce, because (your answer) " + ins1 + " = " + ins2);
}
} else if (ins2.indexOf("/") != -1 && ins1 != "") {
if (Math.abs(eval("(" + ins2 + ")-(" + ins1 + ")")) < 0.0001) {
resis = true;
} else {
suffix = " = " + eval("(" + ins2 + ")") + suffix;
}
}
return resis;
}

function getMousePos(canvas, evt) { // thanks to http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
var rect = canvas.getBoundingClientRect();
//document.title='' + eval(evt.clientX - rect.left) + ',' + eval(evt.clientY - rect.top);
return {
x: eval(evt.clientX - rect.left),
y: eval(evt.clientY - rect.top)
};
}


function assess(myin) {
var retval = 0;
var one = 1;
if (myin == "00") {
myin = "0";
one = 0;
} else if (myin == "0") {
goes = goes + 1.0;
realgoes = realgoes + 1.0;
}
var xmyin = document.getElementById('guess').value;
if (toggle == 1) {
if (ndenom != 0) {
suffix = " (Hint: Make the denominator " + ndenom + ")";
} else if (actsym == "*") {
suffix = " (Hint: Multiply the numerators and multiply the denominators)";
} else if (actsym == "/") {
suffix = " (Hint: Multiply first numerator and second denominator as resultant numerator, multiply others as resultant denominator)";
} else {
suffix = "";
}
//var therealanswer = eval(answeridea);
//var theanswer = 0.0;
//if (xmyin.length > 0) theanswer = eval('(' + xmyin + ')');
//if (Math.abs(therealanswer - theanswer) < 0.0001) {
//if (xmyin.indexOf("/") == -1) xmyin = xmyin + "/1";
if (collaboration != '') {
setTimeout(presendto, 3000);
}
if (aresame(xmyin.replace(' ','').replace(' ','').replace(' ','').replace(' ',''), sansweridea) == true) {
retval = 1;
if (myin == "0") {
//goes = goes + one;
//realgoes = realgoes + one;
score = score + one;
updatescore();
toggle = 0;
elem.width = elem.width;
answeridea = '';
if (dragans != '') {
document.getElementById('guess').value='';
dragans='';
dragarr='';
ttd='';
//elem.click();
}
document.getElementById('myh1').innerHTML = 'Change your answer and click chalkboard to reveal answer ... Take fewest goes to reach score of 20';
//context.drawImage(imgover,x,y);
add_question(x, y);
}
} else if (myin == "0") {
//alert('Sorry, but answer for ' + answeridea + ' = ' + therealanswer + ' ... click chalkboard for another question.');
alert('Sorry, but answer for ' + answeridea + ' = ' + sansweridea + suffix + ' ... click chalkboard for another question.');
//goes = goes + one;
//realgoes = realgoes + one;
updatescore();
toggle = 0;
elem.width = elem.width;
answeridea = '';
if (dragans != '') {
document.getElementById('guess').value='';
dragans='';
dragarr='';
ttd='';
//elem.click();
}
document.getElementById('myh1').innerHTML = 'Change your answer and click chalkboard to reveal answer ... Take fewest goes to reach score of 20';
//context.drawImage(imgover,x,y);
add_question(x, y);
}
}
return retval;
}


function add_question(inx, iny) {
//alert(99);
if (twofirstclick) {
collaborateurl=document.URL.split('?')[0].split('#')[0];
}
var zero = 0, thousand = 1000, hundred = 100;
var difficulty = document.getElementById("difficulty").value;
//alert(98);
var mrand = 0, srand=0, nrand=0, frand=0, lx=inx, ly=iny, nx=inx, ny=iny, mx, my, j, k, tn="";

if (reargs(collaborateurl,'difficulty').indexOf('?') != -1) {
collaborateurl+='&difficulty' + suffv + '=' + encodeURIComponent('' + difficulty);
} else {
collaborateurl+='?difficulty' + suffv + '=' + encodeURIComponent('' + difficulty);
}

xrand = 0;
num1 = 0;
denom1 = 0;
num2 = 0;
denom2 = 0;
ndenom = 0;
if (difficulty.indexOf("Easy") != -1) {
xrand = Math.floor((Math.random()*4)+1); // 3
} else {
xrand = Math.floor((Math.random()*4)+1); // 6
}
//alert(xrand);
if (xrand == 6) {
imgaction = document.getElementById('power');
thousand = 12;
hundred = 12;
} else if (xrand == 5) {
imgaction = document.getElementById('mod');
zero = 1;
} else if (xrand == 4) {
imgaction = document.getElementById('divide');
zero = 1;
hundred = 12;
} else if (xrand == 3) {
imgaction = document.getElementById('multiply');
hundred = 12;
} else if (xrand == 2) {
imgaction = document.getElementById('minus');
} else {
imgaction = document.getElementById('plus');
}
actsym = imgaction.title;
//alert("inx=" + inx + ' ' + "iny=" + iny);
addhashbit+='_' + imgaction.id + ',' + inx + ',' + iny;
context.drawImage(maybe(imgaction,inx,iny), inx, iny);
//alert("imgaction.style.width");
//alert(imgaction.width);
nx = eval(inx + imgaction.width + 15);
//alert(nx + ' ' + imgaction.width);
mx = nx;
my = eval(iny - imgaction.height - 15);
ly = eval(ly + imgaction.width + 15);
if (difficulty.indexOf("Easy") != -1) {
if (difficulty.indexOf("Super") != -1) {
mrand = Math.floor((Math.random()*10)+0);
} else {
mrand = Math.floor((Math.random()*100)+0);
}
tn = "" + mrand;
placetn(mx, my, tn);
if (difficulty.indexOf("Super") != -1) {
mrand = Math.floor((Math.random()*10)+zero);
} else {
mrand = Math.floor((Math.random()*hundred)+zero);
}
tn = "" + mrand;
placetn(nx, ny, tn);
} else {
srand = Math.floor((Math.random()*2)+1);
mrand = Math.floor((Math.random()*1000)+0);
frand = Math.floor((Math.random()*100)+0);
if (srand <= 1) {
tn = "" + mrand;
} else {
tn = "-" + mrand;
}
if (frand != 0) tn = tn + "." + frand;
placetn(mx, my, tn);
srand = Math.floor((Math.random()*2)+1);
mrand = Math.floor((Math.random()*thousand)+zero);
frand = Math.floor((Math.random()*100)+zero);
if (srand <= 1) {
tn = "" + mrand;
} else {
tn = "-" + mrand;
}
if (frand != 0) tn = tn + "." + frand;
placetn(nx, ny, tn);
}
img = document.getElementById('line');
for (k=0; k<5; k++) {
addhashbit+='_' + img.id + ',' + lx + ',' + ly;
context.drawImage(maybe(img,lx,ly), lx, ly);
lx = eval(lx + img.width);
}

if (twofirstclick) {
retit='Is ... ' + String.fromCharCode(10) + String.fromCharCode(10) + '!@' + ' (as my reduced fractional problem) equivalent to but simpler version of ' + String.fromCharCode(10) + String.fromCharCode(10) + document.getElementById('guess').value + String.fromCharCode(10) + String.fromCharCode(10);
addhashbit='';
curaddh=999;
addhashbits=[];
documentURL='';
}

}

function placetn(px, py, ptn) {
var kk, myc='', prefix='';
if (answeridea == '') {
answeridea = '(' + ptn + ') ' + actsym + ' ';
} else {
answeridea = answeridea + '(' + ptn + ')';
}
for (kk=0; kk<ptn.length; kk++) {
myc = ptn.substring(kk, (kk+1));
if (myc == '+') {
img = document.getElementById('plus');
} else if (myc == '-') {
img = document.getElementById('minus');
} else if (myc == '/') {
img = document.getElementById('divide');
} else if (myc == '*') {
img = document.getElementById('multiply');
} else if (myc == '**') {
img = document.getElementById('power');
} else if (myc == '%') {
img = document.getElementById('mod');
} else if (myc == '.') {
img = document.getElementById('dot');
} else {
if (kk > 0 && myc == "0") myc = "1";
img = document.getElementById(prefix + myc);
if (kk == 0 && denom1 == 0) {
num1 = myc;
} else if (kk == 1 && denom1 == 0) {
denom1 = myc;
} else if (kk == 0 && denom1 != 0) {
num2 = myc;
} else if (kk == 1 && denom1 != 0) {
denom2 = myc;
fansweridea(actsym);
}
}
addhashbit+='_' + img.id + ',' + px + ',' + py;
context.drawImage(maybe(img,px,py), px, py);
px = eval(px + img.width);
if (kk == 0) {
img = document.getElementById('slash');
addhashbit+='_' + img.id + ',' + px + ',' + py;
context.drawImage(maybe(img,px,py), px, py);
px = eval(px + img.width);
if (ptn.length == 1) {
img = document.getElementById('1');
addhashbit+='_' + img.id + ',' + px + ',' + py;
context.drawImage(maybe(img,px,py), px, py);
px = eval(px + img.width);
if (denom1 == 0) {
denom1 = "1";
} else {
denom2 = "1";
fansweridea(actsym);
}
}
}
if (addhashbit != '') {
collaborateurl=collaborateurl.replace('addhashbit=', 'addh' + Math.floor(Math.random() * 134) + 'ashbit=') + '&addhashbit=' + encodeURIComponent(addhashbit);
}
}
}


updatescore();

</script>
<img id="0" alt="0" title="0" src="images/0.gif" style="display:none;"></img>
<img id="1" alt="1" title="1" src="images/1.gif" style="display:none;"></img>
<img id="2" alt="2" title="2" src="images/2.gif" style="display:none;"></img>
<img id="3" alt="3" title="3" src="images/3.gif" style="display:none;"></img>
<img id="4" alt="4" title="4" src="images/4.gif" style="display:none;"></img>
<img id="5" alt="5" title="5" src="images/5.gif" style="display:none;"></img>
<img id="6" alt="6" title="6" src="images/6.gif" style="display:none;"></img>
<img id="7" alt="7" title="7" src="images/7.gif" style="display:none;"></img>
<img id="8" alt="8" title="8" src="images/8.gif" style="display:none;"></img>
<img id="9" alt="9" title="9" src="images/9.gif" style="display:none;"></img>
<img id="slash" alt="9" title="/" src="images/slash.gif" style="display:none;"></img>
<img id="plus" alt="+" title="+" src="images/plus.gif" style="display:none;"></img>
<img id="minus" alt="-" title="-" src="images/minus.gif" style="display:none;"></img>
<img id="divide" alt="/" title="/" src="images/divide.gif" style="display:none;"></img>
<img id="multiply" alt="*" title="*" src="images/multiply.gif" style="display:none;"></img>
<img id="mod" alt="%" title="%" src="images/mod.gif" style="display:none;"></img>
<img id="power" alt="**" title="**" src="images/power.gif" style="display:none;"></img>
<img id="dot" alt="." title="." src="images/dot.gif" style="display:none;"></img>
<img id="line" alt="line" title="line" src="images/line.gif" style="display:none;"></img>
<img id=imgnothing title="imgnothing" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" style="display:none;"></img>

</body>
</html>