<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&onclick=y&maxval=0&e2=1&e1=+5&e0=+6",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=4&e1=+64&e0=+60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+16&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+16&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+6&e0=+10",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+7&e0=+12",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+4&e0=+4",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=6&e1=+9&e0=-60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=6&e1=+9&e0=-60",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+4&e0=+5",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=2&e1=+8&e0=-42",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&maxval=0&e2=1&e1=+11&e0=+28",
"http://www.rjmprogramming.com.au/PHP/ParabolaLineGraph/parabola_lgraph.php?minval=-1&onclick=y&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 inemail="";
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 punknown='', poklist='', purl='';
var offx = 0.0;
var offy = 0.0;
var okay = 1;
var gpx = 30;
var gpy = 30;
var gpttext = "";
var cf = "22px Verdana";
var doit=false;
if (!String.fromCodePoint) { // thanks to http://xahlee.info/js/js_unicode_code_point.html
// ES6 Unicode Shims 0.1 , © 2012 Steven Levithan , MIT License
String.fromCodePoint = function fromCodePoint () {
var chars = [], point, offset, units, i;
for (i = 0; i < arguments.length; ++i) {
point = arguments[i];
offset = point - 0x10000;
units = point > 0xFFFF ? [0xD800 + (offset >> 10), 0xDC00 + (offset & 0x3FF)] : [point];
chars.push(String.fromCharCode.apply(null, units));
}
return chars.join("");
}
}
function emailsome() {
setTimeout(stemailsome, 100);
return;
}
function prestemailsome(iois) {
inemail=iois.value;
//alert(inemail + ' ... ' + doit);
if (inemail.indexOf('@') != -1) {
iois.placeholder=inemail;
iois.value='';
iois.style.readonly=true;
}
stemailsome();
}
function stemailsome() {
//if (doit) {
//doit=false;
var eis=inemail;
if (eis.indexOf('@') == -1) { prompt("Please enter an emailee to quiz as below.", ""); }
if (eis == null) { eis=""; }
if (eis.indexOf('@') != -1) {
//alert(1);
inemail=eis;
//alert(11);
document.getElementById('eto').value=eis;
//alert(document.getElementById('unknown').innerHTML.replace(/\ \+\ /g, ' <span class=plus>+</span> '));
//document.getElementById('unknown').innerHTML=document.getElementById('unknown').innerHTML.replace(/\ \+\ /g, ' ' + String.fromCodePoint(10133) + ' ');
document.getElementById('formtable').value=encodeURIComponent('<body><meta charset="utf-8"/><form action=' + document.URL.split('?')[0].split('#')[0] + ' method=GET>' + document.body.innerHTML.split('<if' + 'rame ')[0].replace(document.getElementById('demail').outerHTML,'').replace(' id="unknown"',' name="unknown" id="unknown"').replace(/\ \+\ /g, ' ' + String.fromCodePoint(10133) + ' ') + '<input type=hidden name=oklist value="' + oklist + '"></input><input type=hidden name=url value="' + url + '"></input><br><br><input style="margin-left:300px;display:inline-block;background-color:yellow;width:10%;" type=submit value=Check></input></form></body>');
// alert(1111);
document.getElementById('iformit').submit(); // 'pbclick').click();
//alert(document.getElementById('formtable').innerHTML);
}
//}
}
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 andscore() {
goes = goes + 1;
if (poklist.indexOf(":" + punknown + ":") == -1) {
updatescore();
if (purl != "") {
document.getElementById('x_blank').style.display='block';
document.getElementById('x_blank').src = purl; // + "#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 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>";
if (document.URL.indexOf('oklist=') != -1 && document.URL.indexOf('unknown=') != -1) {
// http://www.rjmprogramming.com.au/HTMLCSS/quadratic_chalkboard.htm?unknown=0&oklist=%3A&url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2FParabolaLineGraph%2Fparabola_lgraph.php%3Fminval%3D-1%26maxval%3D0%26e2%3D1%26e1%3D+4%26e0%3D+5
poklist=location.search.split('oklist=')[1] ? decodeURIComponent(location.search.split('oklist=')[1].split('&')[0]) : '';
punknown=location.search.split('unknown=')[1] ? decodeURIComponent(location.search.split('unknown=')[1].split('&')[0]) : '';
purl=location.search.split('url=')[1] ? decodeURIComponent(location.search.split('url=')[1].split('&')[0]) : '';
setTimeout(andscore, 3000);
}
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].replace(/\ \+\ /g, ' <span class=plus>+</span> ') + "</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].replace(/\ \+\ /g, ' <span class=plus>+</span> ') + "</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].replace(/\ \+\ /g, ' <span class=plus>+</span> ') + "</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();
//setInterval(stemailsome, 5000);
}
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();"><style> .plus:after { content: '\2b'; } </style>
<h1 align="center">Quadratic Equation Dot<a title="Add your own quadratic equation" onclick="addsome();" href="#">Dot</a>Dot Sentence <div style=display:inline-block; id=demail><a title="Ask an emailee" onclick="if (inemail.indexOf('@') != -1) { stemailsome(); } else { document.getElementById('askemail').style.display='inline-block'; document.getElementById('askemail').focus(); }" href="#">📧</a> <input style='display:none;' id=askemail placeholder=Emailee type=text onblur=' doit=true; prestemailsome(this); '></input></div> 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>
<div id=duc style=display:none;></div><form target=iemailit id=iformit style=display:none; action=//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php method=POST>
<input type=hidden name=inline value=''></input><input id=eto type=hidden name=toe value=''></input><input type=hidden name=subj value='Quadratic Equation Quiz'></input>
<textarea id=formtable style=display:none; name=cont></textarea><input style=display:none; type=submit value=Quiz id=pbquiz></input></form>
<iframe name=iemailit style=display:none; src=></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 backin() {
if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
if (myxhr.responseText) {
var dbits = myxhr.responseText.split('\"data\":');
if (dbits.length > 1) {
// replace all '_' with '/' and all '-' with '+' thanks to https://stackoverflow.com/questions/757675/website-screenshots
//document.getElementById('duc').innerHTML='<img id=\"imgduc\" onload=\"beforeftit(this);\" title=\"Click to make this image, thanks to Google Page Insights, the content above\" onclick=\"ftit(this);\" src=\"data:image/jpeg;base64,' + dbits[1].split('\"')[1].split('\"')[0].replace(/\_/g,'/').replace(/\-/g,'+') + '\"></img>';
document.getElementById('formtable').innerHTML=formreply + '<img style="width:100%;" id="imgduc" onload="beforeftit(this);" title="Click to make this image, thanks to Google Page Insights, the content above" onclick="ftit(this);" src="data:image/jpeg;base64,' + dbits[1].split('"')[1].split('"')[0].replace(/\_/g,'/').replace(/\-/g,'+') + '"></img>';
//document.getElementById('formtable').rows='10';
//document.getElementById('duc').style.display='inline-block';
//alert(document.getElementById('iformit').outerHTML);
document.getElementById('pbquiz').click();
//window.open('data:image/jpeg;base64,' + dbits[1].split('\"')[1].split('\"')[0].replace(/\_/g,'/').replace(/\-/g,'+'),'_blank','top=200,left=200,width=320,height=180');
//document.getElementById('formtable').innerHTML=encodeURIComponent('<body><style> body: { background: URL(data:image' + document.getElementById('duc').outerHTML.split('data:image')[1].split(String.fromCharCode(34))[0].replace(/\ /g,'+') + '); } </style></body>');
}
}
}
}
}
function beforeftit(ithis) {
ithis.style.width=('' + ithis.width).replace('px','') + 'px';
ithis.style.height=('' + ithis.height).replace('px','') + 'px';
}
function ajaxit(urlin) {
if (urlin.length > 0) {
aurl=urlin;
if (window.XMLHttpRequest) {
myxhr = new window.XMLHttpRequest;
}
else {
try {
myxhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (othermicrosoft) {
try {
myxhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (failed) {
myxhr = false;
}
}
}
var xurl = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + encodeURIComponent(urlin) + '&screenshot=true';
if (myxhr) {
myxhr.onreadystatechange = backin;
myxhr.open('GET', xurl, true);
myxhr.send(null);
}
}
}
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>