<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Element English Expressions and Idioms Board Game Tutorial ... RJM Programming ... July 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 src='translate_hear.js?translate_hear=yes' type='text/javascript'></script>
<script language="JavaScript">

var sentenceparts = new Array(
"call", "of", "the card",
"a", "hot", "potato",
"a penny", "for", "your thoughts",
"actions", " speak louder", "than words",
"add insult", "to", "injury",
"an arm", "and", "a leg",
"at the drop", "of", "a hat",
"back", "to the", "drawing board",
"ball", "is in", "your court",
"barking up", "the", "wrong tree",
"be glad", "to see", "the back of",
"beat", "around", "the bush",
"best", "of", "both worlds",
"best thing", "since", "sliced bread",
"bite off", "more than", "you can chew",
"blessing", "in", "disguise",
"burn", "the", "midnight oil",
"can't judge", "a book", "by its cover",
"caught", "between", "two stools",
"costs", "an arm", "and a leg",
"cross that bridge", "when", "you come to it",
"cry", "over", "spilt milk",
"curiosity", "killed", "the cat",
"cut", "", "corners",
"cut", "the", "mustard",
"devil's", "", "advocate",
"don't count", "your chickens", "before the eggs have hatched",
"don't give up", "the", "day job",
"don't put", "all your eggs", "in one basket",
"drastic times", "call for", "drastic measures",
"Elvis", "has left", "the building",
"every cloud", "has", "a silver lining",
"far", "cry", "from",
"feel a bit", "under", "the weather",
"give", "the benefit", "of the doubt",
"hear it", "on", "the grapevine",
"hit", "the nail", "on the head",
"hit", "the", "sack",
"hit", "the", "sheets",
"hit", "the", "hay",
"in the heat", "of", "the moment",
"it takes", "two", "to tango",
"jump", "on the", "bandwagon",
"keep", "something", "at bay",
"kill", "two birds", "with one stone",
"last", "", "straw",
"let", "sleeping dogs", "lie",
"let", "the cat", "out of the bag",
"make", "a long story", "short",
"method", "to my", "madness",
"miss", "the", "boat",
"not", "a spark", "of decency",
"not", "playing", "with a full deck",
"off", "one's", "rocker",
"on", "the", "ball",
"once", "in a", "blue moon",
"picture", "paints a", "thousand words",
"piece", "of", "cake",
"put wool", "over", "other people's eyes",
"pull the wool", "over", "other people's eyes",
"see", "eye to", "eye",
"sit", "on", "the fence",
"speak", "of", "the devil",
"steal", "someone's", "thunder",
"take", "with", "a grain of salt",
"taste", "of", "your own medicine ",
"to hear something", "straight from", "the horse's mouth",
"whole", "nine", "yards",
"wouldn't be", "caught", "dead",
"your guess", "is as good", "as mine"
);

var ppl = 0;
var oklist = ":";
var pseudo_sentence = "";
var real_sentence = "";
var twothings = ["", ""];
var cderived_sentences = "";
var derived_sentences = [];
var prefix = [];
var midbit= [""];
var midlist = ":";
var suffix = [];
var cprefix = "";
var cmidbit = "";
var csuffix = "";
var ij, jk, kl, bword="", unknownselect = "<select id='unknown'></select>";



var score = 0.0;
var goes = 0.0;
var realgoes = 0;
var maxx = 0.0;
var maxy = 0.0;

var sentencepick = 0;
var threepick = 0;


var offx = 0.0;
var offy = 0.0;


var okay = 1;

var gpx = 30;
var gpy = 30;
var gpttext = "";
var cf = "22px Verdana";



function updatescore() {
//var sis=document.getElementById('score');
//sis.innerHTML = "Score is " + score.toString() + " from " + goes.toString() + " goes<a target=_blank id='myadot' href='http://www.smart-words.org/quotes-sayings/idioms-meaning.html' title='English Expression ideas ... thanks'>." + "</a><div id='lang" + "div'>" + document.getElementById('langdiv').innerHTML + "</div>";
var sone=document.getElementById('sone');
var stwo=document.getElementById('stwo');
var omyadot=document.getElementById('myadot');
sone.innerHTML=score.toString();
stwo.innerHTML=goes.toString();
omyadot.href='http://www.smart-words.org/quotes-sayings/idioms-meaning.html';
}


function addsome() {
var two="", three="", one=prompt("Enter first of your English Expression parts (adjust accordingly)", "beam");
if (one != "") {
two=prompt("Enter second of your English Expression parts (adjust accordingly) that started with " + one, "me");
if (two != "") {
three=prompt("Enter third of your English Expression parts (adjust accordingly) that started with " + one + " " + two, "up");
if (three != "") {
sentenceparts[sentenceparts.length] = one;
sentenceparts[sentenceparts.length] = two;
sentenceparts[sentenceparts.length] = three;
onloading();
}
}
}
}

function onloading() {
oklist = ":";
pseudo_sentence = "";
real_sentence = "";
twothings = ["", ""];
cderived_sentences = "";
derived_sentences = [];
prefix = [];
midbit= [""];
midlist = ":";
suffix = [];
cprefix = "";
cmidbit = "";
csuffix = "";
bword="";
unknownselect = "<select id='unknown'></select>";

sentencepick = 0;
threepick = 0;

for (ij=0; ij<sentenceparts.length; ij+=3) {
//alert(sentenceparts[eval(ij + 0)]);
if (sentenceparts[eval(ij + 1)].indexOf("[") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)];
jk = sentenceparts[eval(ij + 1)].indexOf("[");
kl = sentenceparts[eval(ij + 1)].indexOf("]");
bword = sentenceparts[eval(ij + 1)].substring((jk + 1), eval((jk + 1) + kl - jk - 1));
//alert(bword);
sentenceparts[eval(ij + 1)] = sentenceparts[eval(ij + 1)].replace(" [" + bword + "]", "");
if (sentenceparts[eval(ij + 1)].indexOf("/") > -1) {
two_things = sentenceparts[eval(ij + 1)].split("/");
if (midlist.indexOf(":" + two_things[0] + ":") == -1) {
midlist = midlist + two_things[0] + ":";
midbit.push(two_things[0]);
}
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + (" " + two_things[0] + " ").replace(" "," ") + sentenceparts[eval(ij + 2)];
if (midlist.indexOf(":" + two_things[1] + ":") == -1) {
midlist = midlist + two_things[1] + ":";
midbit.push(two_things[1]);
}
csuffix = csuffix + sentenceparts[eval(ij + 2)] + "`";
csuffix = csuffix + sentenceparts[eval(ij + 2)].replace(bword + " ", "") + "`";
suffix = csuffix.split("`");
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + two_things[1] + " " + sentenceparts[eval(ij + 2)];
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + sentenceparts[eval(ij + 2)].replace(bword + " ", "");
} else {
csuffix = csuffix + sentenceparts[eval(ij + 2)] + "`";
csuffix = csuffix + sentenceparts[eval(ij + 2)].replace(bword + " ", "") + "`";
suffix = csuffix.split("`");
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + sentenceparts[eval(ij + 1)] + " " + sentenceparts[eval(ij + 2)];
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + sentenceparts[eval(ij + 2)].replace(bword + " ", "");
}
} else if (sentenceparts[eval(ij + 1)].indexOf("/") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)];
two_things = sentenceparts[eval(ij + 1)].split("/");
if (midlist.indexOf(":" + two_things[0] + ":") == -1) {
midlist = midlist + two_things[0] + ":";
midbit.push(two_things[0]);
}
csuffix = csuffix + sentenceparts[eval(ij + 2)] + "`";
suffix = csuffix.split("`");
derived_sentences.push(sentenceparts[eval(ij + 0)] + " " + two_things[0] + " " + sentenceparts[eval(ij + 2)]);
if (midlist.indexOf(":" + two_things[1] + ":") == -1) {
midlist = midlist + two_things[1] + ":";
midbit.push(two_things[1]);
}
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + two_things[1] + " " + sentenceparts[eval(ij + 2)];
} else {
prefix[prefix.length] = sentenceparts[eval(ij + 0)];
csuffix = csuffix + sentenceparts[eval(ij + 2)] + "`";
suffix = csuffix.split("`");
if (midlist.indexOf(":" + sentenceparts[eval(ij + 1)] + ":") == -1) {
midlist = midlist + sentenceparts[eval(ij + 1)] + ":";
midbit.push(sentenceparts[eval(ij + 1)]);
}
derived_sentences[derived_sentences.length] = sentenceparts[eval(ij + 0)] + " " + sentenceparts[eval(ij + 1)] + " " + sentenceparts[eval(ij + 2)];
}
}

kl = 0;
for (ij=0; ij<prefix.length; ij++) {
if (prefix[ij] != "") {
prefix[kl] = prefix[ij];
kl = kl + 1;
}
}


kl = 0;
cprefix = "<select id='sfirst' style='display:none; text-align:right;'>";
for (ij=0; ij<prefix.length; ij++) {
if (prefix[ij] != "") {
cprefix = cprefix + "<option value=" + kl + ">" + prefix[ij] + "</option>";
kl = kl + 1;
}
}
prefix[prefix.length] = "";
ppl = kl;
cprefix = cprefix + "<option value=" + kl + "></option>";
cprefix = cprefix + "</select>";
kl = 0;
cmidbit = "<select id='smiddle' style='display:none; text-align:center;'>";
for (ij=0; ij<midbit.length; ij++) {
cmidbit = cmidbit + "<option value=" + kl + ">" + midbit[ij] + "</option>";
kl = kl + 1;
}
cmidbit = cmidbit + "</select>";
kl = 0;
csuffix = "<select id='slast' style='display:none;'>";
for (ij=0; ij<suffix.length; ij++) {
if (suffix[ij] != "") {
csuffix = csuffix + "<option value=" + kl + ">" + suffix[ij] + "</option>";
kl = kl + 1;
}
}
csuffix = csuffix + "</select>";
kl = 0;
cderived_sentences = "<select id='sentences' style='display:none;'>";
for (ij=0; ij<derived_sentences.length; ij++) {
cderived_sentences = cderived_sentences + "<option value=" + kl + ">" + derived_sentences[ij] + "</option>";
kl = kl + 1;
}
cderived_sentences = cderived_sentences + "</select>";
//alert(cprefix);
//alert(cmidbit);
//alert(csuffix);
//alert(cderived_sentences);
document.getElementById('dsentence').innerHTML = document.getElementById('dsentence').innerHTML + cprefix;
document.getElementById('dsentence').innerHTML = document.getElementById('dsentence').innerHTML + cmidbit;
document.getElementById('dsentence').innerHTML = document.getElementById('dsentence').innerHTML + csuffix;
document.getElementById('dsentence').innerHTML = document.getElementById('dsentence').innerHTML + cderived_sentences;
pick_a_sentence();
elem.click();
}

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

function check_answer(osel) {
if (osel.value != "") {
//alert(oklist);
goes = goes + 1;
if (oklist.indexOf(":" + osel.value + ":") == -1) {
var tds=document.getElementsByTagName('td');
var sels=document.getElementsByTagName('select');
var altans='', found=false;
for (var itd=0; itd<tds.length; itd++) {
if (tds[itd].innerHTML.indexOf('<select ') != -1) {
altans+=sels[0].value;
} else {
altans+=tds[itd].innerHTML;
}
}
for (var iitd=0; iitd<derived_sentences.length; iitd++) {
if (!found) {
if (altans.replace(' ','').replace(' ','').replace(' ','').replace(' ','').replace(' ','').replace(' ','') == derived_sentences[iitd].replace(' ','').replace(' ','').replace(' ','').replace(' ','').replace(' ','').replace(' ','')) {
found=true;
}
}
}
if (found) {
score = score + 1;
updatescore();
document.getElementById('myadot').href='http://www.thefreedictionary.com/' + real_sentence.replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+');
real_sentence = "Yay!!!";
placerealtext();
setTimeout(andthen, 2000);
} else {
updatescore();
document.getElementById('myadot').href='http://www.thefreedictionary.com/' + real_sentence.replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+');
placerealtext();
setTimeout(andthen, 9000);
}
} else {
score = score + 1;
updatescore();
document.getElementById('myadot').href='http://www.thefreedictionary.com/' + real_sentence.replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+');
real_sentence = "Yay!!!";
placerealtext();
setTimeout(andthen, 2000);
}
}
}


function pick_a_sentence() {
var carr=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
var p="", s="", mb="", ii, jj=eval(prefix.length - 1), kk=-1, ll=-1, mm, nn, arrml, iarrml, jarrml;
arrml = midlist.split(":");
pseudo_sentence = " ";
while (pseudo_sentence.replace("...", "").trim().indexOf(" ") == -1) {
oklist = ":";
p="";
s="";
mb="";
jj=eval(prefix.length - 1);
kk=-1;
ll=-1;
sentencepick = Math.floor((Math.random()*kl)+0);
for (ii=0; ii<prefix.length; ii++) {
if (derived_sentences[sentencepick].indexOf(prefix[ii]) != -1 && prefix[ii] != "") jj = ii;
}
for (ii=0; ii<suffix.length; ii++) {
if (ll == -1 && derived_sentences[sentencepick].indexOf(suffix[ii]) != -1 && suffix[ii] != "") {
ll = ii;
mb = derived_sentences[sentencepick].replace(prefix[jj] + " ", "").replace(suffix[ll], "").trim();
}
}



for (ii=0; ii<midbit.length; ii++) {
if (midbit[ii] == mb) kk = ii;
}
//alert(derived_sentences[sentencepick]);
real_sentence = derived_sentences[sentencepick];
threepick = Math.floor((Math.random()*3)+0);
unknownselect = "<select id='unknown'></select>";
if (threepick == 0) {
pseudo_sentence = ("... " + midbit[kk] + " " + suffix[ll]).replace(" ", " ").replace(" ", " ").replace("undefined", "");
s = "<td>" + (" " + midbit[kk] + " " + suffix[ll]).replace(" ", " ") + "</td>";
//unknownselect = "<td>" + cprefix.replace("sfirst", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected>Please select a sentence prefix above (instead of ... below)</option></select></td>");
unknownselect = "<td>" + cprefix.replace("<select", "<select onchange='check_answer(this);'").replace("sfirst", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected>... </option></select></td>");
if (jj == eval(prefix.length - 1)) {
//alert(jj);
//alert(prefix);
oklist = oklist + ppl + ":";
} else {
for (mm=0; mm<derived_sentences.length; mm++) {
for (nn=0; nn<prefix.length; nn++) {
if (pseudo_sentence.replace("...", prefix[nn]).replace(" ", " ").replace(" ", " ").trim() == derived_sentences[mm].trim() && oklist.indexOf(":" + nn + ":") == -1) {
oklist = oklist + nn + ":";
//alert("Yes " + pseudo_sentence.replace("...", prefix[nn]).replace(" ", " ").replace(" ", " ").trim() + " Vs " + derived_sentences[mm].trim() + " oklist=" + oklist + " vs " + nn);
} //else {
//alert(midbit[1] + "? " + mb + "? " + kk + "? " + pseudo_sentence.replace("...", prefix[nn]).replace(" ", " ").replace(" ", " ").trim() + " Vs " + derived_sentences[mm].trim() + " oklist=" + oklist + " vs " + nn);
//}
}
}
}
} else if (threepick == 1) {
pseudo_sentence = (prefix[jj] + " ... " + suffix[ll]).replace(" ", " ").replace(" ", " ").replace("undefined", "");
p = "<td>" + prefix[jj] + " " + "</td>";
s = "<td>" + " " + suffix[ll] + "</td>";
//unknownselect = "<td>" + cmidbit.replace("smiddle", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected>Please select a sentence middle word (or not) above (instead of ... below)</option></select></td>");
unknownselect = "<td>" + cmidbit.replace("<select", "<select onchange='check_answer(this);'").replace("smiddle", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected> ... </option></select></td>");
for (mm=0; mm<derived_sentences.length; mm++) {
for (nn=0; nn<midbit.length; nn++) {
if (pseudo_sentence.replace("...", midbit[nn]).replace(" ", " ").replace(" ", " ").trim() == derived_sentences[mm].trim() && oklist.indexOf(":" + nn + ":") == -1) oklist = oklist + nn + ":";
}
}
} else {
pseudo_sentence = (prefix[jj] + " " + midbit[kk] + " ...").replace(" ", " ").replace(" ", " ").replace("undefined", "");
p = "<td>" + (prefix[jj] + " " + midbit[kk] + " ").replace(" ", " ") + "</td>";
//unknownselect = "<td>" + csuffix.replace("slast", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected>Please select a sentence ending above (instead of ... below)</option></select></td>");
unknownselect = "<td>" + csuffix.replace("<select", "<select onchange='check_answer(this);'").replace("slast", "unknown").replace("none;", "block;").replace("</select>", "<option value='' selected> ...</option></select></td>");
for (mm=0; mm<derived_sentences.length; mm++) {
for (nn=0; nn<suffix.length; nn++) {
if (pseudo_sentence.replace("...", suffix[nn]).replace(" ", " ").replace(" ", " ").trim() == derived_sentences[mm].trim() && oklist.indexOf(":" + nn + ":") == -1) oklist = oklist + nn + ":";
}
}
}


if (("*" + pseudo_sentence.trim() + "*").indexOf("...*") != -1 || ("*" + pseudo_sentence.trim() + "*").indexOf("*...") != -1) {
//alert(pseudo_sentence);
jarrml = -1;
for (iarrml=0; iarrml<arrml.length; iarrml++) {
if (jarrml == -1 && arrml[iarrml].trim() != "") {
jarrml = (" " + pseudo_sentence + " ").indexOf(" " + arrml[iarrml] + " ");
//if (jarrml != -1) alert(arrml[iarrml]);
}
}
if (jarrml == -1) pseudo_sentence = " ";
}

//if (pseudo_sentence.replace("...", "").trim().indexOf(" ") != -1) alert(pseudo_sentence);

}

pseudo_sentence = pseudo_sentence.replace("_", " ").replace("_", " ").replace("_", " ").replace("_", " ").replace("_", " ");

document.getElementById('dunknown').innerHTML = "<table><tr>" + p.replace("undefined", "") + unknownselect.replace("<td> undefined", "<td> ").replace("<td>undefined ", "<td> ") + s.replace("undefined", "") + "</tr></table>";

elem.width = elem.width;
elem.style.backgroundImage = "none";
elem.style.opacity = 1.0;
var colhuh = "#" + carr[Math.floor(eval(derived_sentences[sentencepick].length * 2) / 16)] + carr[Math.floor(eval(derived_sentences[sentencepick].length * 2) % 16)] + "0000"; // + carr[Math.floor(derived_sentences[sentencepick].length / 16)] + carr[Math.floor(derived_sentences[sentencepick].length % 16)] + carr[Math.floor(derived_sentences[sentencepick].length / 16)] + carr[Math.floor(derived_sentences[sentencepick].length % 16)];
//alert(colhuh);
var grdt=context.createLinearGradient(0, 0,elem.width, elem.height);
//var rgrdt=context.createRadialGradient(elem.left, elem.top,elem.width,elem.left + elem.width,elem.top + elem.height,elem.height);
// Create gradient
grdt.addColorStop(0,"white");
grdt.addColorStop(1,colhuh);
//grdt.addColorStop(1,eval("rgb(" + derived_sentences[sentencepick].length + "," + derived_sentences[sentencepick].length + "," + derived_sentences[sentencepick].length + ")"));
//rgrdt.addColorStop(0,"white");
//rgrdt.addColorStop(1,colhuh);
// Fill with gradient
context.fillStyle = grdt;
context.fillRect(0, 0, 1350, 500);

placetext();

}



</script>

<link href='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<style> .ui-dialog .ui-dialog-titlebar-close { display: none; } </style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://www.rjmprogramming.com.au/Javascript/jQuery/Dialog/Modal/jquery-ui-1.11.1.custom/jquery-ui.js"></script>
<script type='text/javascript' src='dotdotdot.js'></script>

</head>
<body align="center" onload="onloading();" style='background-color: silver;'>
<h1 align="center">English Expression or Idiom Dot<a title="Add your own English Expression" onclick="addsome();" href="#">Dot</a>Dot Game</h1>
<h2 align="center" id="score">Score is <span id=sone>0</span> from <span id=stwo>0</span> goes<a target=_blank id='myadot' href='http://www.smart-words.org/quotes-sayings/idioms-meaning.html' title='English Expression ideas ... thanks'>.</a><div id='langdiv'></div></h2>
<div align="center" id='dsentence'></div><div align="center" id='dunknown'></div>

<canvas style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your next English Expression to solve' id="canvaselement" width="1350" 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 scoretoget = 20;

var elem = document.getElementById('canvaselement');
var elemLeft = elem.offsetLeft;
var elemTop = elem.offsetTop;
var 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.width = elem.width;
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];
pick_a_sentence();

//elem.style.backgroundColor = thiscol;


}, false);




function placetext() {
context.font = cf;
context.strokeText(pseudo_sentence.replace("ø", "ø"),gpx,gpy);
//gpy = gpy + 50;
}


function placerealtext() {
context.font = cf;
context.strokeText(real_sentence.replace("ø", "ø"),gpx,(gpy + 70));
//gpy = gpy + 50;
}

updatescore();
</script>
</body>
</html>