<!doctype html>
<html>
<head>
<title>Canvas HTML Element Chalk Board Game Tutorial ... RJM Programming ... December 2013 ... 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 eis='';
var totc=0;
var totcpart=0;
var tots=0;
var tcnt=0.0;
var actsym = '+';
var answeridea = '';
var eansweridea='';
var done=false;
var byline='Try to improve your character per second keyboard rate';
var bylinealt='Take fewest goes to reach score of 20';
var bylineis=byline;
var scorebit='Rate ';
var scorebitalt='Score ';
var gradation=['#fff0ff','#ffd8f5','#ffc0cc','#ffa8b2','#ff9099','#ff787f','#ff6066','#ff484c','#ff3033','#ff1819','#ff0000']; // thanks to http://www.perbang.dk/rgbgradient/

function countsecs() {
if (eval(tcnt) >= 0.0) {
tcnt+=0.1;
document.getElementById('timer').innerHTML='' + tcnt.toFixed(1);
setTimeout(countsecs, 100);
}
}

function checkanswer(iois) {
var was=iois.value;
if (was != '' && document.getElementById('timing').value != '') {
var eansweridea="" + eis;
if (eansweridea.indexOf(was) == -1) {
iois.value='';
iois.style.backgroundColor=gradation[0];
return false;
}
//alert(Math.floor((eval(-1 + gradation.length) * was.length) / answeridea.length));
iois.style.backgroundColor=gradation[Math.floor((was.length / eis.length) * gradation.length)];
if (("" + was) == eansweridea) setTimeout(fti, 90);
}
return true;
}

function fti() {
tcnt=eval(-tcnt);
if (9 == 0) {
if (document.getElementById('timing').value != '') {
totc+=totcpart;
tots-=eval(tcnt);
score = eval(totc / tots);
}
} else {
assess("0");
}
}

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

function checkget() {

if (window.location.search.indexOf("timing") != (0 - 1)) {
if (window.location.search.indexOf("timing=tim") == (0 - 1)) {
document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML.replace(byline, bylinealt);
document.getElementById('canvaselement').title = document.getElementById('myh1').title.replace(byline, bylinealt);
document.getElementById('pscore').innerHTML = document.getElementById('pscore').innerHTML.replace(scorebit, scorebitalt);
document.getElementById('guess').style.backgroundColor='pink';
bylineis=bylinealt;
done=true;
document.getElementById('timing').value='';
done=false;
}
}

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 ... Try to improve your character per second keyboard rate</h1><p id='pscore'>Rate <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 onkeydown='checkanswer(this);' onkeyup='checkanswer(this);' onchange='assess("0");' style='background-color: #fff0ff;' id="guess" value=""></input> <select onchange=" var xd=document.URL; if (xd.indexOf('?') == -1 && xd.indexOf('.html') == -1) { xd+='chalkboard.html' } else if (xd.indexOf('.html') == -1) { xd=xd.replace('?','chalkboard.html?'); } if (!done) { location.href=xd.replace(/timing/g,'wast').replace('&','&atiming=' + this.value).replace('?','&btiming=' + this.value).replace('.html','.html?timing=' + this.value); } " id="timing" name="timing"><option value="timed ">Timed</option><option value="">Not Timed</option></select> <select id="difficulty" name="difficulty"><option value="SuperEasy">Super Easy</option><option value="Easy" selected="selected">Easy</option><option value="Harder">Harder</option></select> <span id='timer'></span></p>
<canvas style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your maths question ... Try to improve your character per second keyboard rate' 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 img;
var imgaction;

var scoretoget = 20;
var guessvalue = 0.0;

var elem = document.getElementById('canvaselement');
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'];

// 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) {
answeridea = '';
document.getElementById('guess').value = '';
document.getElementById('myh1').innerHTML = 'Change your answer and click chalkboard to reveal answer ... ' + bylineis;
//context.drawImage(imgover,x,y);
add_question(x, y);
} else {
document.getElementById('myh1').innerHTML = 'Click anywhere on chalkboard to reveal a new question ... ' + bylineis;
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 = './chalkboard.html';
} else {
elem.width = elem.width;
}
}

toggle = 1 - toggle;

}, false);

function assess(myin) {
var retval = 0;
//alert(toggle);
var xmyin = document.getElementById('guess').value;
//alert(xmyin);
if (toggle == 1) {
//alert("answeridea=" + answeridea);
var therealanswer = eval(eis); //answeridea);
//alert(therealanswer);
var theanswer = 0.0;
//alert("xmyin=" + xmyin);
if (xmyin.length > 0) theanswer = eval('(' + xmyin + ')');
//alert(theanswer);
if (Math.abs(therealanswer - theanswer) < 0.0001) {
//alert("retval=1");
retval = 1;
if (myin == "0") {
goes = goes + 1;
realgoes = realgoes + 1;
if (document.getElementById('timing').value != '') {
totc+=totcpart;
tots-=eval(tcnt);
score = eval(totc / tots);
//alert(totc + "/" + tots);
} else {
score = score + 1;
}
updatescore();
toggle = 0;
elem.width = elem.width;
answeridea = '';
document.getElementById('myh1').innerHTML = 'Change your answer and click chalkboard to reveal answer ... ' + bylineis;
//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.');
goes = goes + 1;
realgoes = realgoes + 1;
updatescore();
toggle = 0;
elem.width = elem.width;
answeridea = '';
document.getElementById('myh1').innerHTML = 'Change your answer and click chalkboard to reveal answer ... ' + bylineis;
//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, xrand=0, lx=inx, ly=iny, nx=inx, ny=iny, mx, my, j, k, tn="";
if (difficulty.indexOf("Easy") != -1) {
xrand = Math.floor((Math.random()*3)+1);
} else {
xrand = Math.floor((Math.random()*6)+1);
}
//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;
if (actsym == '**') {
if (("" + mrand).indexOf('9') != -1 || ("" + mrand).indexOf('3') != -1) {
tn = '3';
} else {
tn = '2';
}
placetn(nx, ny, tn);
} else {
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 anal(dotbit) {
var odotbit=dotbit;
if (odotbit.indexOf('.') != -1) {
var dotdivide=odotbit.split('.');
if (dotdivide[1].replace(/0/g, '') == '') return dotdivide[0];
if (dotdivide[1].length == 1) return odotbit;
if (dotdivide[1].substring(1,2) != '0') return dotdivide[0] + '.' + dotdivide[1].substring(0,2);
if (dotdivide[1].substring(0,1) != '0') return dotdivide[0] + '.' + dotdivide[1].substring(0,1);
var oodotbit=dotdivide[0] + '.' + dotdivide[1].substring(0,2);
for (var jk=2; jk<dotdivide[1].length; jk++) {
if (dotdivide[1].substring(jk,eval(jk + 1)) == '0') {
oodotbit+=dotdivide[1].substring(jk,eval(jk + 1));
} else {
oodotbit+=dotdivide[1].substring(jk,eval(jk + 1));
return oodotbit;
}
}
return oodotbit;
}
return odotbit;
}

function placetn(px, py, ptn) {
var kk, myc='', mycc='';
if (answeridea == '') {
answeridea = '(' + ptn + ') ' + actsym + ' ';
} else {
if (actsym == '**') {
eis=anal("" + eval('Math.pow(' + answeridea.replace('**', ', (' + ptn + '))')));
answeridea = answeridea + '(' + ptn + ')';
} else {
answeridea = answeridea + '(' + ptn + ')';
eis = answeridea;
}
if (document.getElementById('timing').value != '') {
document.getElementById('guess').style.backgroundColor=gradation[0];
if (answeridea.indexOf('**') == -1) eis=anal("" + eval(answeridea));
totcpart=eval(eis.length);
tcnt=0.0;
document.getElementById('timer').innerHTML='0.0 seconds';
setTimeout(countsecs, 100);
document.getElementById('guess').focus();
}
}
for (kk=0; kk<ptn.length; kk++) {
myc = ptn.substring(kk, (kk+1));
mycc = (ptn + ' ').substring(kk, (kk+2));
if (myc == '+') {
img = document.getElementById('plus');
} else if (myc == '-') {
img = document.getElementById('minus');
} else if (myc == '/') {
img = document.getElementById('divide');
} else if (mycc == '**') {
img = document.getElementById('power');
//alert(answeridea + ' ... ' + eis);
} else if (myc == '*') {
img = document.getElementById('multiply');
} else if (myc == '%') {
img = document.getElementById('mod');
} else if (myc == '.') {
img = document.getElementById('dot');
} else {
img = document.getElementById(myc);
}
context.drawImage(img, px, py);
px = eval(px + img.width);
}
}

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