<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Element Phrasal Verb 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">
// Thanks to https://www.englishclub.com/vocabulary/phrasal-verbs-list.htm
var sentenceparts = new Array(
"ask", "me", "out",
"asked", "", "around",
"add", "up to", "a hill of beans",
"back", "up", "your car",
"backed", "me", "up",
"blow", "", "up",
"blew", "balloons", "up",
"broke","down","on hearing the bad news",
"broke","down","with a flat tyre",
"broke","into","the house",
"broke","in","two nights ago",
"breaking","up","is hard to do",
"break","out","of jail",
"break","out in","a rash",
"bringing","me","down",
"brought","me","up",
"brings","up","the subject of school",
"call","","around",
"call","me","back",
"call","it","off",
"called","on","me to answer",
"call","on","our neighbours",
"call","you","up",
"calm","","down",
"do not care","for","that man",
"catch","","up",
"check","","in",
"check","","out",
"check","out","the apartment",
"check","out","that guy with the sunglasses",
"cheer","","up",
"cheer","you","up",
"chip","","in",
"clean","it","up",
"come","across","as arrogant",
"come","","apart",
"come","down with","a cold",
"come","","forward",
"come","from","Sydney",
"count","on","there being resistance to the idea",
"cross","it","out",
"cut","back on","fizzy drinks",
"cut","the tree","down",
"cut","in","while dancing",
"cut","in","to the line of traffic",
"cuts","in","when it reaches freezing point",
"cut","the wort","off",
"cut","off","the telephone line",
"cut","off","my brother in the middle of a rant",
"cut","this adverisement","out",
"done","over","by those thugs",
"do","away with","formalities",
"do","your coat","up",
"dress","","up",
"drop","","back",
"drops","","in",
"dropped","","by",
"dropping","","over",
"drop","my cousin","off",
"drop","","out",
"eat","","out",
"fall","","apart",
"fall","","down",
"fall","out","of my pants",
"fall","out","later in life",
"figure","it","out",
"fill","it","in",
"filled","out","in pencil",
"fill","the tank","up",
"find","","out",
"find","it","out",
"get","my point","across",
"get","my arguments","over",
"got","along","with her",
"got","on","quite well",
"get","","around",
"get","","away",
"get","away with","murder",
"get","","back",
"get","back at","his enemies",
"get","back into","a study regime",
"get","on","the train",
"get","over","that illness",
"get","over","the disappointment of losing",
"get","round to","saying sorry",
"get","","together",
"got","up","early",
"get","up","to give the elderly woman a seat",
"give","him","away",
"give","the bride","away",
"gave","the plot","away",
"give","my pen","back",
"give","","in",
"give","out","free samples",
"gave","up","smoking",
"give","","up",
"go","after","your dream",
"go","against","all common sense",
"go","","ahead",
"go","","back",
"go","","out",
"go","out with","her boyfriend",
"go","over","the test paper",
"go","over","the time limit",
"go","without","breakfast",
"grow","","apart",
"grow","","back",
"grow","","up",
"grow","out of","nothing",
"grow","into","a wonderful adult",
"hand","in","the assignment",
"hand","out","lollies",
"hand","over","your passport",
"hang","","in",
"hang","","on",
"hang","","out",
"hang","","up",
"hold","my dog","back",
"holding","back","the years",
"hold","","on",
"keep","on doing","your best",
"kept","a secret","from my parents",
"keep","out","of that room",
"let","me","down",
"log","in","to work",
"log","on","to the website",
"log","out","from work",
"log","off","from the website",
"look","after","your pet",
"look","down on","others",
"look","for","problems",
"look","forward to","cooler afternoons",
"look","into","how to proceed",
"look","","out",
"look","out for","the older person",
"look","it","over",
"looks","it","up",
"look","up to","your elders",
"make","it","up",
"mix","it","up",
"pass","","away",
"pass","","out",
"passed","up","the job",
"pay","them","back",
"pay","for","services rendered",
"pick","it","out",
"point","it","out",
"put","it","down",
"put","it","off",
"put","the cat","out",
"put","it all","together",
"put","up with","silliness",
"put","on","makeup",
"run","into","trouble",
"run","over","time",
"run","over","the bicycle",
"run","through","the meadow",
"run","","away",
"run","","out",
"send","it","back",
"set","it","up",
"shop","","around",
"show","","off",
"sleep","","over",
"sort","it","out",
"stick","to","the plan",
"switch","it","off",
"switch","that sign","on",
"take","after","his father",
"take","the jigsaw","apart",
"take","the letter","back",
"take","off","your socks",
"take","out","the garbage",
"take","the family","out",
"tear","it","up",
"think","","back",
"think","it","over",
"throw","it","away",
"turn","down","the job offer",
"turn","the radio","down",
"turn","the television","off",
"turn","the microwave","on",
"turn","the music","up",
"turned","","up",
"try","the dress","on",
"try","the new cleaner","out",
"use","it","up",
"wake","","up",
"warm","it","up",
"warms","","up",
"wear","","off",
"works","","out",
"work","","out",
"working","it","out"
);
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='https://www.englishclub.com/vocabulary/phrasal-verbs-list.htm' title='Phrasal Verb ideas ... thanks'>.</a>";
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='https://www.englishclub.com/vocabulary/phrasal-verbs-list.htm';
}
function addsome() {
var two="", three="", one=prompt("Enter first of your phrasal verb parts (adjust accordingly)", "beam");
if (one != "") {
two=prompt("Enter second of your phrasal verb parts (adjust accordingly) that started with " + one, "me");
if (two != "") {
three=prompt("Enter third of your phrasal verb 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 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>";
placetext();
}
</script>
</head>
<body align="center" onload="onloading();">
<h1 align="center">Phrasal Verb Dot<a title="Add your own phrasal verb" 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='https://www.englishclub.com/vocabulary/phrasal-verbs-list.htm' title='Phrasal Verb 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 phrasal verb to solve' id="canvaselement" width="1350" height="700" 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];
elem.style.backgroundColor = thiscol;
pick_a_sentence();
}, 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>