<html>
<head>
<meta charset="UTF-8">
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<title>Canvas HTML Element Quadratic Equation 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>
<script language="JavaScript">
// Thanks to http://www.mathsisfun.com/algebra/quadratic-equation.html
var sentenceparts = new Array(
"x² + 5x + 6 =", "(x + 2)(x + 3) =", "0 (where x=-2 and -3)",
"4x² + 64x + 60 =", "(x + 15)(4x + 4)", "0 (where x=-15 and -1)",
"x² + 16x + 28 =", "0=/(x + 9)(x + 7)-35 =", "(x + 14)(x + 2) (where x=-14 and -2)",
"x² + 6x + 10 =", "(x + 6 - i)(x + 6 + i) =", "0 (where i=square root of -1 and x=-6+i and -6-i)",
"x² + 7x + 12 =", "(x + 4)(x + 3) =", "0 (where x=-4 and -3)",
"x² + 4x + 4 =", "(x + 2)(x + 2) =", "0 (where x=-2)",
"6x² + 9x - 60 =", "0=/(6x - 3)(x + 2)-54 =", "(2x - 5)(3x + 12) (where x=2.5 and -4)",
"x² + 4x + 5 =", "(x + 2 - i)(x + 2 + i) =", "0 (where i=square root of -1 and x=-2+i and -2-i)",
"2x² + 8x - 42 =", "(2x - 6)(x + 7) =", "0 (where x=3 and -7)",
"x² + 11x + 28 =", "0=/(x + 6)(x + 5)-2 =", "(x + 7)(x + 4) (where x=-7 and -4)"
);
var urls = new Array(
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+5&e0=+6",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=4&e1=+64&e0=+60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+16&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+16&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+6&e0=+10",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+7&e0=+12",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+4&e0=+4",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=6&e1=+9&e0=-60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=6&e1=+9&e0=-60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+4&e0=+5",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=2&e1=+8&e0=-42",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+11&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&maxval=0&e2=1&e1=+11&e0=+28"
);
var url = "";
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 counteq(ins) {
var cis=0, outs=ins.replace("=", "");
if (outs != ins) {
if (outs.replace("=", "") != outs) return ins;
}
return "...";
}
function updatescore() {
var sis=document.getElementById('score');
sis.innerHTML = "Score is " + score.toString() + " from " + goes.toString() + " goes<a target=_blank href='http://www.mathsisfun.com/algebra/quadratic-equation.html' title='Quadratic Equation ideas ... thanks'>.</a><a target=_blank href='http://www.purplemath.com/modules/solvquad.htm' title='More Quadratic Equation ideas'>.</a><a target=_blank href='http://mathbitsnotebook.com/Algebra1/Quadratics/QDcomplex.html' title='Complex Quadratic Equation ideas'>.</a>";
}
function addsome() {
var two="", three="", one=prompt("Enter first of your 'quadratic equation sentence parts' (adjust the 1 and +3 and +2 accordingly)", "1x² + 3x + 2 =");
if (one != "") {
two=prompt("Enter second of your 'quadratic equation sentence parts' (adjust the 1x and +2 and +1 accordingly) that started with " + one, "(1x + 2)(1x + 1) =");
if (two != "") {
three=prompt("Enter third of your 'quadratic equation sentence parts' (adjust the 0 and -2 and -1 accordingly) that started with " + one + " " + two, "0 (where x=-2 and -1)");
if (three != "") {
sentenceparts[sentenceparts.length] = one;
sentenceparts[sentenceparts.length] = two;
sentenceparts[sentenceparts.length] = three;
urls[urls.length] = "";
onloading();
}
}
}
}
function onloading() {
sentencepick = 0;
threepick = 0;
url = "";
ppl = 0;
oklist = ":";
pseudo_sentence = "";
real_sentence = "";
twothings = ["", ""];
cderived_sentences = "";
derived_sentences = [];
prefix = [];
midbit= [];
midlist = ":";
suffix = [];
cprefix = "";
cmidbit = "";
csuffix = "";
bword="";
unknownselect = "<select id='unknown'></select>";
for (ij=0; ij<sentenceparts.length; ij+=3) {
if (sentenceparts[eval(ij + 1)].indexOf("[") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)].replace("²", "²");
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] + " " + 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)].replace("²", "²") + " " + sentenceparts[eval(ij + 2)].replace(bword + " ", "");
}
} else if (sentenceparts[eval(ij + 1)].indexOf("/") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)].replace("²", "²");
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("`");
//alert(99);
derived_sentences.push(sentenceparts[eval(ij + 0)] + " " + two_things[0] + " " + sentenceparts[eval(ij + 2)]);
//alert("... " + derived_sentences[derived_sentences.length - 1]);
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)].replace("²", "²") + " " + two_things[1] + " " + sentenceparts[eval(ij + 2)];
//alert(midlist + " ... " + derived_sentences[derived_sentences.length - 1]);
} else {
//alert(sentenceparts[eval(ij + 0)]);
prefix[prefix.length] = sentenceparts[eval(ij + 0)].replace("²", "²");
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)].replace("²", "²") + " " + 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() {
document.getElementById('x_blank').style.display='none';
elem.height = 700; // 700;
elem.click();
}
function check_answer(osel) {
if (osel.value != "") {
//alert(oklist);
goes = goes + 1;
if (oklist.indexOf(":" + osel.value + ":") == -1) {
updatescore();
if (url != "") {
document.getElementById('x_blank').style.display='block';
document.getElementById('x_blank').src = url; // + "#chart_div";
//document.getElementById('canvaselement').height=100;
}
placerealtext();
//window.open(url, "x_blank"); //, "top=400,left=500,height=380,width=680");
setTimeout(andthen, 9000);
} else {
score = score + 1;
updatescore();
real_sentence = "Yay!!!";
placerealtext();
//document.getElementById('x_blank').style.display='block';
//document.getElementById('x_blank').src = url + "#chart_div";
//window.open(url, "x_blank"); //, "top=400,left=500,height=380,width=680");
setTimeout(andthen, 2000);
}
}
}
function pick_a_sentence() {
var p="", s="", mb="", ii, jj=eval(prefix.length - 1), kk=-1, ll=-1, mm, nn;
oklist = ":";
pseudo_sentence = "...";
while (counteq(pseudo_sentence.trim()) == "...") {
sentencepick = Math.floor((Math.random()*kl)+0);
threepick = Math.floor((Math.random()*3)+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], "").replace("= ", "=");
//alert(midbit.length + ":" + threepick + " " + derived_sentences[sentencepick] + " originally, then mb=*" + mb + "* derived_sentences[" + sentencepick + "].replace('" + prefix[jj] + "' + ' ','').replace('" + suffix[ll] + "' + ' ','').replace(' ', '').replace(' ', '')=" + derived_sentences[sentencepick].replace(prefix[jj] + " ", "").replace(suffix[ll], ""));
}
}
for (ii=0; ii<midbit.length; ii++) {
if (midbit[ii].indexOf(mb) > -1) kk = ii;
}
//alert(derived_sentences[sentencepick]);
real_sentence = derived_sentences[sentencepick];
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>");
//alert("kk=" + kk + " and ll=" + ll + " and pseudo_sentence=" + pseudo_sentence + " and s=" + s + " and unknownselect=" + unknownselect);
if (jj == eval(prefix.length - 1)) {
//alert("jj=" + jj);
//alert("prefix=" + 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 + ":";
url = urls[mm];
}
}
}
}
} 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>");
//alert("kk=" + kk + " and ll=" + ll + " and pseudo_sentence=" + pseudo_sentence + " and s=" + s + " and unknownselect=" + unknownselect);
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 + ":";
url = urls[mm];
}
}
}
} 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>");
//alert("kk=" + kk + " and ll=" + ll + " and pseudo_sentence=" + pseudo_sentence + " and s=" + s + " and unknownselect=" + unknownselect);
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 + ":";
url = urls[mm];
}
}
}
}
}
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">Quadratic Equation Dot<a title="Add your own quadratic equation" onclick="addsome();" href="#">Dot</a>Dot Sentence Game</h1>
<h2 align="center" id="score">Score is 0 from 0 goes<a target=_blank href='http://www.mathsisfun.com/algebra/quadratic-equation.html' title='Quadratic Equation ideas ... thanks'>.</a></h2>
<div align="center" id='dsentence'></div><div align="center" id='dunknown'></div>
<iframe frameborder=0 src="javascript:false" style="display:none;height:620;width:880;position:absolute;top:66;left:20;opacity:0.5;z-index:2;" id="x_blank"></iframe>
<canvas style='border: 5px solid green; background-color: black; opacity: 0.3;' title='Click for your next sentence 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;
if (real_sentence.indexOf("Yay") == -1) {
elem.width = elem.width;
elem.height = 700;
elem.style.backgroundImage = "none";
context.font = cf;
context.strokeText(real_sentence.replace("²", "²"),gpx,(eval(gpy + 70 * 0 - 10 * 1)));
} else {
context.strokeText(real_sentence.replace("²", "²"),gpx,(gpy + 70));
}
//gpy = gpy + 50;
}
updatescore();
</script>
</body>
</html>