<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Element Chemical Compounds and Elements Formulae 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.elementalmatter.info/chemical-formula-and-equations.htm
var sentenceparts = new Array(
"", "Na", " is Sodium",
"H₂", "O", " is Water",
"C₆", "H₁₂", "O₆ is Glucose",
"C₂", "H₆", "O is Alcohol",
"Ca", "S", "O₄ is Sulfate Group",
"H₂", "S", " is Hydrogen Sulfide",
"Na", "Cl", " is Salt",
"", "O₂", " is Oxygen",
"C₂", "H₆", "O is Ethanol",
"C₂", "H₄", "O₂ is Vinegar",
"N", "H₃", " is Ammonia",
"", "Mg", " is Magnesium",
"C₂", "H₄", "O₂ is Acetic Acid",
"C₄", "H₁₀", " is Butane",
"N", "O₃⁻", " is Nitrate",
"", "Cu", " is Copper",
"", "N₂", " is Nitrogen",
"C", "O₂", " is Carbon Dioxide",
"H₂", "S", "O₄ is Sulfuric Acid",
"C", "H₄", " is Methane",
"C₁₂", "H₂₂", "O₁₁ is Sucrose",
"C₃", "H₈", " is Propane",
"Na", "H", "CO₃ is Baking Soda",
"", "F", " is Fluoride",
"", "F₂", " is Fluoride",
"H₂", "O₂", " is Peroxide",
"C₈", "H₁₀", "N₄O₂ is Caffeine",
"Na", "Cl", " is Sodium Chloride",
"C₉", "H₈", "O₄ is Aspirin",
"H", "Cl", " is Hydrochloric Acid",
"Zn(", "NO₃", ")₂ is Zinc",
"C", "O", " is Carbon Monoxide",
"Na", "O", "H is Sodium Hydroxide",
"Na", "C", "N is Sodium Cyanide",
"Ca(", "CN", ")₂ is Calcium Cyanide",
"", "Au", " is Gold",
"", "I", " is Iodine",
"", "Sn", " is Tin",
"C₆", "H₆", " is Benzene",
"H₂", "S", " is Hydrogen Sulfide",
"CH₃", "COCH₃", " is Acetone",
"H₃", "P", "O₄ is Phosphoric Acid",
"C₅", "H₁₂", " is Pentane",
"CH₃", "O", "H is Methanol",
"H", "Br", " is Hydrobromic Acid",
"H₂", "C", "O₃ is Carbonic Acid",
"", "Ti", " is Titanium",
"Na", "Cl", "O is Sodium Hypochlorite",
"C₂", "H₆", " is Ethane",
"(NH₄)₂", "S", "O₄ is Ammonium Sulfate",
"C₈", "H₁₈", " is Octane",
"Cu", "S", "O₄ is Copper Sulfate",
"C₂₇", "H₄₆", "O is Cholesterol",
"C₇", "H₆", "O₂ is Benzoic Acid",
"H₂", "S", "O₃ is Sulfurous Acid",
"C₆", "H₁₂", "O₆ is Galactose",
"C₆", "H₈", "O₆ is Ascorbic Acid",
"C", "O₂", " is Dry Ice",
"Na", "N", "O₃ is Sodium Nitrate",
"Ca", "O", " is Calcium Oxide",
"H", "I", "O₃ is Iodic Acid",
"C₃", "H₆", "O₃ is Lactic Acid",
"Mg", "Br₂", " is Lactic Acid",
"H₂", "O", " is Water Vapour",
" ", "C", " is Carbon",
" ", "H", " is Hydrogen",
"Cn", "H₂n", "On is Sugar",
"O₄", "S₂⁻", " is Sulfate",
"N₂", "O", " is Nitrogen",
"C₆", "H₈", "O₇ is Citric Acid",
"C₈", "H₁₈", " is Octane",
"C₁₀", "H₁₆", "O is Camphor",
"Ag", "I", " is Silver Oxide",
"As₄", "O₃", " is Arsenic Trioxide",
"Au₂", "O₃", " is Gold Trioxide",
"Au₂", "S", " is Gold Sulfide",
"", "Br₂", " is Bromine",
"Al₂", "O₃", " is Aluminium foil"
);
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 = "18px Verdana";
function fordisplay(inthing) {
//alert("inthing=" + inthing);
var outthing = inthing, soutthing = inthing;
var ij = outthing.indexOf(" is ");
if (ij > 0) {
outthing = inthing.substring(0, ij).replace(" ", "").replace(" ", "").replace(" ", "").replace(" ", "") + soutthing.substring(ij);
inthing = outthing.replace("...", " ... ").replace(" ", " ").replace(" ", " ");
soutthing = outthing.replace("...", " ... ").replace(" ", " ").replace(" ", " ");
outthing = soutthing;
}
var ijj = outthing.indexOf("...");
ij = outthing.indexOf(" ... ");
if (ij > 0) {
outthing = inthing.substring(0, ij).replace(" ", "").replace(" ", "").replace(" ", "").replace(" ", "") + soutthing.substring(ij);
} else if (ijj > 0) {
outthing = soutthing.replace("...", " ... ").replace(" ", " ").replace(" ", " ");
}
//alert("outthing=" + outthing);
return outthing.trim().replace(" ", "").replace("is ", " is ").replace(" ", " ");
}
function updatescore() {
var sis=document.getElementById('score');
sis.innerHTML = "Score is " + score.toString() + " from " + goes.toString() + " goes<a target=_blank href='http://www.elementalmatter.info/chemical-formula-and-equations.htm' title='Chemical Compounds and Elements Formulae ideas ... thanks'>.</a>";
}
function onloading() {
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) {
sentenceparts[eval(ij + 0)] = sentenceparts[eval(ij + 0)].replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
sentenceparts[eval(ij + 1)] = sentenceparts[eval(ij + 1)].replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
sentenceparts[eval(ij + 2)] = sentenceparts[eval(ij + 2)].replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
//alert(sentenceparts[eval(ij + 0)] + sentenceparts[eval(ij + 1)] + sentenceparts[eval(ij + 2)]);
if (sentenceparts[eval(ij + 1)].indexOf("[") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)].replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").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("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉") + " " + sentenceparts[eval(ij + 2)].replace(bword + " ", "");
}
} else if (sentenceparts[eval(ij + 1)].indexOf("/") > -1) {
prefix[prefix.length] = sentenceparts[eval(ij + 0)].replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").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("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").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("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").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("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉") + " " + sentenceparts[eval(ij + 1)] + " " + sentenceparts[eval(ij + 2)];
}
}
kl = 0;
for (ij=0; ij<prefix.length; ij++) {
if (prefix[ij] != "" || 1 == 1) {
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].trim() != "") {
//cprefix = cprefix + "<option value=" + kl + ">" + prefix[ij] + "</option>";
cprefix = cprefix + "<option value='" + prefix[ij].trim() + "'>" + fordisplay(prefix[ij]) + "</option>";
kl = kl + 1;
}
}
prefix[prefix.length] = "";
ppl = kl;
//cprefix = cprefix + "<option value=" + kl + "></option>";
cprefix = cprefix + "<option value=''></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>";
cmidbit = cmidbit + "<option value='" + midbit[ij].trim() + "'>" + fordisplay(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>";
csuffix = csuffix + "<option value='" + suffix[ij] + "'>" + suffix[ij] + "</option>";
kl = kl + 1;
}
}
csuffix = csuffix + "</select>";
kl = 0;
cderived_sentences = "<select id='sentences' style='display:none;'>";
var spare;
for (ij=0; ij<derived_sentences.length; ij++) {
spare = fordisplay(derived_sentences[ij]);
derived_sentences[ij] = spare;
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(osel.value + " ... " + oklist);
goes = goes + 1;
//alert(pseudo_sentence + " vs " + osel.value + " Vs " + real_sentence + " ... " + pseudo_sentence.replace(" ... ", " " + osel.value + " ").replace("... ", osel.value + " ").replace(" ...", " " + osel.value).trim());
//alert(fordisplay(pseudo_sentence.replace(" ... ", "" + osel.value + "").replace("... ", osel.value + "").replace(" ...", "" + osel.value)).trim() + " VS " + fordisplay(real_sentence).trim());
if (fordisplay(pseudo_sentence.replace(" ... ", "" + osel.value + "").replace("... ", osel.value + "").replace(" ...", "" + osel.value)).trim().indexOf(fordisplay(real_sentence).trim()) == -1) { //oklist.indexOf(":" + osel.value + ":") == -1) {
updatescore();
placerealtext();
//window.open(url, "_blank"); //, "top=400,left=500,height=380,width=680");
setTimeout(andthen, 9000);
} else {
score = score + 1;
updatescore();
real_sentence = "Yay!!!";
placerealtext();
//window.open(url, "_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);
var kk=-1, ll=-1, mm, nn;
var ipos, bg=-1, rest="", okmb="";
while (mb == "") {
okmb = "";
jj=eval(prefix.length - 1);
kk=-1;
ll=-1;
bg = -1;
oklist = ":";
sentencepick = Math.floor((Math.random()*kl)+0);
rest = derived_sentences[sentencepick];
threepick = Math.floor((Math.random()*3)+0);
for (ii=0; ii<suffix.length; ii++) {
ipos = fordisplay(derived_sentences[sentencepick]).indexOf(suffix[ii]);
if (ll == -1 && fordisplay(derived_sentences[sentencepick]).indexOf(suffix[ii]) != -1 && fordisplay(derived_sentences[sentencepick]).length == eval(ipos + suffix[ii].length) && suffix[ii] != "") {
//alert(derived_sentences[sentencepick] + " has suffix of " + suffix[ii]);
ll = ii;
mb = fordisplay(derived_sentences[sentencepick]).replace(suffix[ll], "");
//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], ""));
rest = mb; //rest.replace(mb, "");
//alert(rest);
}
}
for (ii=0; ii<prefix.length; ii++) {
ipos = rest.indexOf(prefix[ii]);
if (fordisplay(rest).indexOf(fordisplay(prefix[ii])) != -1 && prefix[ii] != "" && fordisplay(derived_sentences[sentencepick]).indexOf(fordisplay(prefix[ii])) != -1 && fordisplay(prefix[ii]).length >= bg && rest.replace(prefix[ii], "").trim() != "") {
jj = ii;
bg = fordisplay(prefix[ii]).length;
}
}
mb = fordisplay(rest).replace(fordisplay(prefix[jj]), "").trim();
okmb = "";
for (ii=0; ii<midbit.length; ii++) {
if (midbit[ii] == mb) okmb = mb;
//alert(mb + " vs " + midbit[ii] + " becomes " + okmb);
}
mb = okmb;
if (fordisplay(derived_sentences[sentencepick]) != (prefix[jj] + mb + suffix[ll])) mb = "";
}
//alert(mb + " in middle of " + derived_sentences[sentencepick] + " which should be missing " + suffix[ll] + " and " + prefix[jj]);
for (ii=0; ii<midbit.length; ii++) {
if (midbit[ii].indexOf(mb) > -1 && midbit[ii].length == mb.length) 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 + ":";
}
}
}
}
} 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 + ":";
}
}
}
} 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 + ":";
}
}
}
}
document.getElementById('dunknown').innerHTML = "<table><tr>" + p.replace("undefined", "") + unknownselect.replace("<td> undefined", "<td> ").replace("<td>undefined ", "<td> ") + s.replace("undefined", "") + "</tr></table>";
placetext();
}
function addsome() {
var two="", three="", one=prompt("Enter first of your chemical formula sentences", "O₀₁₂₃₄₅₆₇₈₉⁻");
if (one != "") {
two=prompt("Enter second of your chemical formula sentences that started with " + one.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉"), "C₀₁₂₃₄₅₆₇₈₉⁻");
if (two != "") {
three=prompt("Enter third of your chemical formula sentences that started with " + one.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉") + " " + two.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉"), "H₀₁₂₃₄₅₆₇₈₉⁻ is My Chemical Formula Name");
if (three != "") {
sentenceparts[sentenceparts.length] = one.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
sentenceparts[sentenceparts.length] = two.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
sentenceparts[sentenceparts.length] = three.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉");
onloading();
}
}
}
}
</script>
</head>
<body align="center" onload="onloading();">
<h1 align="center">Chemical Compounds and Elements Formulae Dot<a title="Add your own threesome" onclick="addsome();" href="#">Dot</a>Dot Game</h1>
<h2 align="center" id="score">Score is 0 from 0 goes<a target=_blank href='http://robinhawke.wordpress.com/category/three-sentence-stories/' title='Chemical Compounds and Elements Formulae ideas ... thanks'>.</a></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 threesome 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 rbitof(num) {
var ipos;
var str = "";
if (num >= 0) {
ipos = real_sentence.indexOf(". ");
if (ipos == -1 || num == 2) {
str = real_sentence;
real_sentence = "";
return str;
} else {
str = real_sentence.substring(0, (ipos + 1));
real_sentence = real_sentence.substring((ipos + 1)).trim();
return str;
}
}
return "";
}
function pbitof(num) {
var ipos;
var str = "";
if (num >= 0) {
ipos = pseudo_sentence.indexOf(". ");
if (ipos == -1 || num == 2) {
str = pseudo_sentence;
pseudo_sentence = "";
return str;
} else {
str = pseudo_sentence.substring(0, (ipos + 1));
pseudo_sentence = pseudo_sentence.substring((ipos + 1)).trim();
return str;
}
}
return "";
}
function placetext() {
context.font = cf;
var wasp = pseudo_sentence;
context.strokeText(fordisplay(pseudo_sentence.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉")),gpx,gpy);
pseudo_sentence = wasp;
//gpy = gpy + 50;
}
function placerealtext() {
context.font = cf;
var wasp = real_sentence;
context.strokeText(fordisplay(real_sentence.replace("⁻", "⁻").replace("₀", "₀").replace("₀", "₀").replace("₁", "₁").replace("₁", "₁").replace("₂", "₂").replace("₂", "₂").replace("₃", "₃").replace("₃", "₃").replace("₄", "₄").replace("₄", "₄").replace("₅", "₅").replace("₅", "₅").replace("₆", "₆").replace("₆", "₆").replace("₇", "₇").replace("₇", "₇").replace("₈", "₈").replace("₈", "₈").replace("₉", "₉").replace("₉", "₉")),gpx,(gpy + 170));
real_sentence = wasp;
//gpy = gpy + 50;
}
updatescore();
</script>
</body>
</html>