<!doctype html>
<html>
<head>
<title>Canvas HTML Tree Game Tutorial ... RJM Programming ... March, 2016 ... thanks to http://stackoverflow.com/questions/9880279/how-do-i-add-a-simple-onclick-event-handler-to-a-canvas-element</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>
.none {
}

.rotatenone {
}

.rotatecanvasnone {
}

.rotatehangers {
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transform-origin: 190px 190px;
-o-transform-origin: 190px 190px;
-moz-transform-origin: 190px 190px;
-ms-transform-origin: 190px 190px;
-webkit-transform-origin: 190px 190px;
}

.rotatecanvashangers {
margin-left:380px;
margin-top:-280px;
}

.rotatetrees {
-o-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
transform-origin: 190px 190px;
-o-transform-origin: 190px 190px;
-moz-transform-origin: 190px 190px;
-ms-transform-origin: 190px 190px;
-webkit-transform-origin: 190px 190px;
}

.rotatecanvastrees {
margin-left:380px;
margin-top:-280px;
}

.rotatelrcreepers {
-o-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
transform-origin: 630px 630px;
-o-transform-origin: 630px 630px;
-moz-transform-origin: 630px 630px;
-ms-transform-origin: 630px 630px;
-webkit-transform-origin: 630px 630px;
}

.rotatecanvaslrcreepers {
}


</style>

<script language="JavaScript">

var five=5;
var nextstr='';
var nextone='';
var laststr='';
var lastone='';

var goes=0;
var score=0;

var previob=null;
var previid='';
var previval='';


var mode='';

var donelist=";";
var gpx = 20;
var gpy = 20;
var gpttext = "";
var cf = "24px Verdana";

var trs = new Array();

var Questions = [new Object(), new Object(), new Object(), new Object(), new Object()];
var QuestionsChars = ["", "", "", "", ""];



function placetext() {
var twot=2000;
stuff=top.document.title;
laststuff=stuff;
context.clearRect ( 0 , 0 , 1150 , 200 );
context.font = cf;
context.fillStyle = 'black';
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;

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;
var ygpy=gpy;
for (var il=0; il<QuestionsChars.length; il++) {
context.strokeText(QuestionsChars[il],gpx,ygpy);
ygpy = eval((ygpy + 26) % 480);
}
//gpy = gpy + 50;
setTimeout(placetext, twot);
}

function cval(v) {
return "" + v;
}

function addto(iob,iid,ival) {
var cbits, tbits;
var thisdivid=iid.replace('ip','div');
var nexti=iid.replace('ipa','a').replace('ipb','b').replace('ipc','c').replace('ipd','d').replace('ipe','e').replace('ip','');
var thisi=eval(iid.replace('ipa','').replace('ipb','').replace('ipc','').replace('ipd','').replace('ipe','').replace('ipf','').replace('ip',''));
var kk=((("" + nexti).substring(0,1) == 'a') ? 0 : ((("" + nexti).substring(0,1) == 'b') ? 1 : ((("" + nexti).substring(0,1) == 'c') ? 2 : ((("" + nexti).substring(0,1) == 'd') ? 3 : ((("" + nexti).substring(0,1) == 'e') ? 4 : 0)))));
var nextdivid='div' + ("" + nexti).substring(0,1) + eval(1 + thisi);
var thistd=document.getElementById('td' + thisi);
var thisdiv=document.getElementById(thisdivid);
var firstdiv=document.getElementById(thisdivid.replace('9','1').replace('8','1').replace('7','1').replace('6','1').replace('5','1').replace('4','1').replace('3','1').replace('2','1'));
if (ival.replace(' ','') != '') {
if (donelist.indexOf(';' + iid + ';') == -1) {
donelist+=iid + ';';
if (Questions[kk].Text == '') {
if (ival.indexOf(':') != -1) {
tbits=ival.split(':');
document.getElementById('td' + eval(1 + kk)).title=tbits[0];
document.getElementById('myt' + eval(1 + kk)).innerHTML=tbits[0];
thisdiv.title=tbits[0];
ival=ival.replace(tbits[0] + ':', '');
iob.value=ival;
addto(iob, iid, ival);
}
Questions[kk].Text = ival;
QuestionsChars[kk] = ival;
nextstr='';
nextone='';
laststr='';
lastone='';
previob=null;
previid='';
previval='';
}
if (0 == 0 || lastone == '' || lastone != ival.replace('?','').replace(/`/g,'').replace('.','_').replace('+','_').replace(',','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_') || laststr != ival) {
if (nextstr != '') {
eval("Questions[" + kk + "]." + lastone + "Next = cval(" + '"' + ival + '")');
info(iob,iid,ival,1);
}
if (nextstr != '') QuestionsChars[kk] = ival + " <- " + QuestionsChars[kk];
nextstr=ival;
nextone=ival.replace('?','').replace(/`/g,'').replace('.','_').replace('+','_').replace(',','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_');
try {
eval("Questions[" + kk + "]." + nextone + " = cval(" + '"' + ival + '")');
} catch (e) {
eval("Questions[" + kk + "]." + nextone + " = cval(" + '"' + ival.replace('.','(dot)') + '")');
}
eval("Questions[" + kk + "]." + nextone + "Next=null");
if (laststr != '') eval("Questions[" + kk + "]." + nextone + "Previous = cval(" + '"' + laststr + '")');
if (Questions[kk].TextNext == null) {
Questions[kk].TextNext = '' + ival;
}
laststr=nextstr;
lastone=nextone;
}
//alert(trs[kk].replace(/1/g, eval(1 + thisi)) + '<div style=display:table-cell;float:left; id=' + nextdivid + '></div>');
if (eval(1 + thisi) == eval(five)) {
cbits=trs[kk].split('<input');
//thisdiv.innerHTML+=('<input' + cbits[1]).replace(/1/g, eval(1 + thisi)); // + '<div style="display:table-cell;float:left;border:3px solid green;" id=' + nextdivid + '></div>';
thisdiv.innerHTML+=('<input' + cbits[1]).replace(/1/g, eval(1 + thisi)); // + '<div style="display:table-cell;float:right;border:3px solid green;" id=' + nextdivid + '></div>';
thisdiv.style.borderLeft='13px solid green';
thisdiv.style.borderTop='5px solid green';
thisdiv.style.borderBottom='5px solid green';
thisdiv.title=firstdiv.title;
//placetext();
document.getElementById(nextdivid.replace('div','ip')).style.background=" url('barkplus.png') repeat ";
document.getElementById(nextdivid.replace('div','ip')).style.fontSize='20px';
document.getElementById(nextdivid.replace('div','ip')).focus();
} else if (eval(1 + thisi) >= eval(1 + five)) {
thisi=thisi;
//placetext();
} else {
//thisdiv.innerHTML+=trs[kk].replace(/1/g, eval(1 + thisi)) + '<div style=display:table-cell;float:left; id=' + nextdivid + '></div>';
thisdiv.innerHTML+=trs[kk].replace(/1/g, eval(1 + thisi)) + '<div style=display:table-cell;float:left; id=' + nextdivid + '></div>';
//placetext();
document.getElementById(nextdivid.replace('div','ip')).style.background=" url('barkplus.png') repeat ";
document.getElementById(nextdivid.replace('div','ip')).style.fontSize='20px';
document.getElementById(nextdivid.replace('div','ip')).focus();
}
info(iob,iid,ival,1);
}
}
return true;
}

function enumis(nidea) {
var inidea=nidea;
if (inidea != '') {
if (0 != 0 && inidea.substring(0,1) == '.') {
inidea=' ' + inidea.replace('.','');
} else if (inidea.substring(0,1) == '-' || inidea.substring(0,1) == '.' || inidea.substring(0,1) == '+' || inidea.substring(0,1) == '0' || inidea.substring(0,1) == '1' || inidea.substring(0,1) == '2' || inidea.substring(0,1) == '3' || inidea.substring(0,1) == '4' || inidea.substring(0,1) == '5' || inidea.substring(0,1) == '6' || inidea.substring(0,1) == '7' || inidea.substring(0,1) == '8' || inidea.substring(0,1) == '9') {
inidea=' ' + inidea;
}
}
return inidea.replace('?','').replace(/`/g,'').replace(',','_').replace('.','_').replace('+','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_').replace(' ','_');
}

function firstoff() {
var suff='a', jj=1;
for (var ii=1; ii<=five; ii++) {
Questions[eval(-1 + ii)].Text='';
Questions[eval(-1 + ii)].TextNext=null;
Questions[eval(-1 + ii)].TextPrevious=null;
trs.push(document.getElementById('td' + ii).innerHTML);
document.getElementById('td' + ii).innerHTML+='<div style=display:table-cell;float:left; id=div' + suff + jj + '></div>';
//document.getElementById('td' + ii).innerHTML+='<div style=display:table-cell;text-align:right; id=div' + suff + jj + '></div>';
document.getElementById('td' + ii).style.background=" url('bark.png') repeat ";
document.getElementById('ip' + suff + jj).style.backgroundColor='yellow';
document.getElementById('ip' + suff + jj).style.background=" url('barkplus.png')";
document.getElementById('ip' + suff + jj).style.borderRight='13px solid brown';
document.getElementById('ip' + suff + jj).style.borderTop='3px solid brown';
document.getElementById('ip' + suff + jj).style.borderBottom='3px solid brown';
document.getElementById('ip' + suff + jj).style.fontSize='20px';
document.getElementById('ip' + suff + jj).title='At this root if tree a colon (:) separated entry means the part before colon is row title';
if (suff == 'a') {
suff='b';
} else if (suff == 'b') {
suff='c';
} else if (suff == 'c') {
suff='d';
} else if (suff == 'd') {
suff='e';
} else if (suff == 'e') {
suff='f';
}
}
document.getElementById('ipa1').focus();
}


function checkanswer(iois,mode) {

if (iois.value != '') {
if (0 != 0 && iois.value.substring(0,1) == '.') {
iois.value=' ' + iois.value.replace('.','');
return false;
} else if (iois.value.substring(0,1) == '-' || iois.value.substring(0,1) == '.' || iois.value.substring(0,1) == '+' || iois.value.substring(0,1) == '0' || iois.value.substring(0,1) == '1' || iois.value.substring(0,1) == '2' || iois.value.substring(0,1) == '3' || iois.value.substring(0,1) == '4' || iois.value.substring(0,1) == '5' || iois.value.substring(0,1) == '6' || iois.value.substring(0,1) == '7' || iois.value.substring(0,1) == '8' || iois.value.substring(0,1) == '9') {
iois.value=' ' + iois.value;
return false;
}
}

return true;
}


function info(iob,iid,ival, repeat) {
if (previob != null) {
var ppreviob=previob;
var ppreviid=previid;
var pprevival=previval;
previob=null;
previid='';
previval='';
info(ppreviob, ppreviid, pprevival, 0);
}
var optis='';
var nexti=iid.replace('ipa','a').replace('ipb','b').replace('ipc','c').replace('ipd','d').replace('ipe','e').replace('ip','');
var thisi=eval(iid.replace('ipa','').replace('ipb','').replace('ipc','').replace('ipd','').replace('ipe','').replace('ipf','').replace('ip',''));
var kk=((("" + nexti).substring(0,1) == 'a') ? 0 : ((("" + nexti).substring(0,1) == 'b') ? 1 : ((("" + nexti).substring(0,1) == 'c') ? 2 : ((("" + nexti).substring(0,1) == 'd') ? 3 : ((("" + nexti).substring(0,1) == 'e') ? 4 : 0)))));
var vor="" + eval(1 + kk);
if (ival != '') {
var altname=document.getElementById('myt' + eval(1 + kk)).innerHTML;
if (altname != '') vor=altname;
if (eval("Questions[" + kk + "]." + enumis(ival) + "Next") && eval("Questions[" + kk + "]." + enumis(ival) + "Previous")) {
top.document.title="This is Questions[" + kk + "]." + enumis(ival) + " with value of " + eval("Questions[" + kk + "]." + enumis(ival)) + " and next is " + eval("Questions[" + kk + "]." + enumis(ival) + "Next") + " and previous is " + eval("Questions[" + kk + "]." + enumis(ival) + "Previous") + " and root of tree is Questions[" + kk + "].Text with value of " + eval("Questions[" + kk + "].Text");
iob.title=top.document.title;
optis=">Who or what is root of Tree " + vor + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "].Text") + "'" + optis + '/option>';
optis=">Who or what is next to " + ival + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "]." + enumis(ival) + "Next") + "'" + optis + '/option>';
optis=">Who or what preceeds " + ival + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "]." + enumis(ival) + "Previous") + "'" + optis + '/option>';
} else if (eval("Questions[" + kk + "]." + enumis(ival) + "Next")) {
top.document.title="This is Questions[" + kk + "]." + enumis(ival) + " with value of " + eval("Questions[" + kk + "]." + enumis(ival)) + " and next is " + eval("Questions[" + kk + "]." + enumis(ival) + "Next") + " and root of tree is Questions[" + kk + "].Text with value of " + eval("Questions[" + kk + "].Text");
iob.title=top.document.title;
optis=">Who or what is root of Tree " + vor + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "].Text") + "'" + optis + '/option>';
optis=">Who or what is next to " + ival + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "]." + enumis(ival) + "Next") + "'" + optis + '/option>';
} else if (eval("Questions[" + kk + "]." + enumis(ival) + "Previous")) {
top.document.title="This is Questions[" + kk + "]." + enumis(ival) + " with value of " + eval("Questions[" + kk + "]." + enumis(ival)) + " and previous is " + eval("Questions[" + kk + "]." + enumis(ival) + "Previous") + " and root of tree is Questions[" + kk + "].Text with value of " + eval("Questions[" + kk + "].Text");
iob.title=top.document.title;
optis=">Who or what is root of Tree " + vor + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "].Text") + "'" + optis + '/option>';
optis=">Who or what preceeds " + ival + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "]." + enumis(ival) + "Previous") + "'" + optis + '/option>';
} else if (eval("Questions[" + kk + "]." + enumis(ival))) {
top.document.title="This is Questions[" + kk + "]." + enumis(ival) + " with value of " + eval("Questions[" + kk + "]." + enumis(ival)) + " and root of tree is Questions[" + kk + "].Text with value of " + eval("Questions[" + kk + "].Text");
iob.title=top.document.title;
optis=">Who or what is root of Tree " + vor + "?<";
if (document.getElementById('movingquiz').innerHTML.indexOf(optis) == -1) document.getElementById('movingquiz').innerHTML+="<option value='" + eval("Questions[" + kk + "].Text") + "'" + optis + '/option>';
}
//alert(document.getElementById('movingquiz').innerHTML);
if (repeat != 0) {
previob=iob;
previid=iid;
previval=ival;
}
}
}

function checkquiz(tv) {
if (tv != '') {
var huhq=prompt('?', '');
goes++;
if (huhq != null) {
if (tv.toLowerCase() == huhq.toLowerCase()) {
score++;
}
}
document.getElementById('myscore').innerHTML="Score <span style='color:green;' id=score>" + score + "</span> achieved via <span style='color:red;' id=goes>" + goes + "</span> goes";
}
}

</script>
</head>
<body onload=" setTimeout(firstoff, 2000); placetext(); " style='background-color: lightgreen;'>
<table id=pretable><tr><td><h1 id='myh1'>Please feel free to create up to 5 <select id=smode onchange=" if (this.value != mode) { if (this.value.length == 0) { location.href='./tree_chalkboard.html'; } else { location.href='./tree_chalkboard.html?mode=' + this.value; } } "><option value=>Tree Creeper</option><option value=trees>Tree</option><option value=lrcreepers>Creeper</option><option value=hangers>Weeping Tree</option></select> hierarchies below ... <select id=movingquiz onchange=checkquiz(this.value);><option value=>Moving quiz below ...</option></select></h1><p id='myscore'>Score <span style='color:green;' id=score>0</span> achieved via <span style='color:red;' id=goes>0</span> goes</p>
</tr></table>

<script language="JavaScript">
mode = location.search.split('mode=')[1] ? location.search.split('mode=')[1].split('&')[0] : "";
var htmlis="<div class='rotatenone'>";
htmlis+="<table id=mytable style=width:1150px; cellspacing=5><tbody id=mytbody>";
htmlis+="<tr id=mytr1 style=width:100%;><div id=myt1></div><td id=td1 style=width:100%;> <- <input onkeyup=checkanswer(this,0); onkeydown=checkanswer(this,1); onmouseover=info(this,this.id,this.value,0); onclick=info(this,this.id,this.value,0); title='' onblur=addto(this,this.id,this.value); type=text style=height:40px;width:200px;color:black;font-size:20px; id=ipa1 value=''></input></td></tr>";
htmlis+="<tr id=mytr2 style=width:100%;><div id=myt2></div><td id=td2 style=width:100%;> <- <input onkeyup=checkanswer(this,0); onkeydown=checkanswer(this,1); onmouseover=info(this,this.id,this.value,0); onclick=info(this,this.id,this.value,0); title='' onblur=addto(this,this.id,this.value); type=text style=height:40px;width:200px;color:black;font-size:20px; id=ipb1 value=''></input></td></tr>";
htmlis+="<tr id=mytr3 style=width:100%;><div id=myt3></div><td id=td3 style=width:100%;> <- <input onkeyup=checkanswer(this,0); onkeydown=checkanswer(this,1); onmouseover=info(this,this.id,this.value,0); onclick=info(this,this.id,this.value,0); title='' onblur=addto(this,this.id,this.value); type=text style=height:40px;width:200px;color:black;font-size:20px; id=ipc1 value=''></input></td></tr>";
htmlis+="<tr id=mytr4 style=width:100%;><div id=myt4></div><td id=td4 style=width:100%;> <- <input onkeyup=checkanswer(this,0); onkeydown=checkanswer(this,1); onmouseover=info(this,this.id,this.value,0); onclick=info(this,this.id,this.value,0); title='' onblur=addto(this,this.id,this.value); type=text style=height:40px;width:200px;color:black;font-size:20px; id=ipd1 value=''></input></td></tr>";
htmlis+="<tr id=mytr5 style=width:100%;><div id=myt5></div><td id=td5 style=width:100%;> <- <input onkeyup=checkanswer(this,0); onkeydown=checkanswer(this,1); onmouseover=info(this,this.id,this.value,0); onclick=info(this,this.id,this.value,0); title='' onblur=addto(this,this.id,this.value); type=text style=height:40px;width:200px;color:black;font-size:20px; id=ipe1 value=''></input></td></tr>";
htmlis+="</tbody></table>";
htmlis+="</div>";
htmlis+="<canvas class='rotatecanvasnone' style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your Onions of the 4th Dimension conversation' id='canvaselement' width='1150' height='200' style='border: 1px solid green;' /><br>";


if (window.location.search.indexOf("mode=tree") != -1) {
document.write(htmlis.replace(/none/g, "trees"));
document.getElementById('smode').value=mode;
} else if (window.location.search.indexOf("mode=lrcreeper") != -1) {
document.write(htmlis.replace(/none/g, "lrcreepers"));
document.getElementById('smode').value=mode;
} else if (window.location.search.indexOf("mode=hanger") != -1) {
document.write(htmlis.replace(/none/g, "hangers"));
document.getElementById('smode').value=mode;
} else {
document.write(htmlis);
}




elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
context = elem.getContext('2d');
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 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;



}, false);


</script>

</body>
</html>