<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 sansweridea = '';
var operatoris = '';
var num1 = 0;
var denom1 = 0;
var num2 = 0;
var denom2 = 0;
var ndenom = 0;
var xrand = 0;
var zz = "0";
var xaction = ['+', '+', '-', '*', '/', '%', '**'];

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";

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


}




</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></p>
<canvas 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) {
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
var x = event.pageX - elemLeft;
var 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 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);
} 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);

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 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 (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 = '';
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 = '';
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);
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="";
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);
context.drawImage(imgaction, 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++) {
context.drawImage(img, lx, ly);
lx = eval(lx + img.width);
}

}

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);
}
}
context.drawImage(img, px, py);
px = eval(px + img.width);
if (kk == 0) {
img = document.getElementById('slash');
context.drawImage(img, px, py);
px = eval(px + img.width);
if (ptn.length == 1) {
img = document.getElementById('1');
context.drawImage(img, px, py);
px = eval(px + img.width);
if (denom1 == 0) {
denom1 = "1";
} else {
denom2 = "1";
fansweridea(actsym);
}
}
}
}
}


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>

</body>
</html>