<html>
<head>
<meta charset="UTF-8">
<title>Canvas HTML Element Anatomy 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.meddean.luc.edu/lumen/MedEd/GrossAnatomy/Threes.html
var sentenceparts = new Array(
"General: 3 body planes - frontal",",sagittal",",transverse",
"General: 3 layers of skin - epidermis",",dermis",",hypodermis",
"General: 3 general venous circulations - systemic",",pulmonary",",portal",
"Embryology: 3 germ layers - endoderm",",mesoderm",",ectoderm",
"Embryology: 3 divisions of somites - sclerotome",",dermatome",",myotome",
"Embryology: 3 definitive kidneys - pronephros",",mesonephros",",metanephros",
"Embryology: 3 derivatives of skull - desmo/dermatocranium",",splanchno/viscerocranium",",chondrocranium",
"Embryology: 3 initial embryonic divisions of the brain - prosencephalon",",mesencephalon",",rhombencephalon",
"Back: 3 parts of the erector spinae m. - iliocostalis",",longissimus",",spinalis",
"Back: 3 parts of the transversospinalis m. - semispinalis m.",",multifidus m.",",rotator m.",
"Back: 3 coverings of the spinal cord - dura mater",",arachnoid",",pia",
"Back: 3 spaces surrounding spinal cord - epidural",",subdural",",subarachnoid",
"Back: 3 borders of the scapula- medial (vertebral)",",lateral",",superior",
"Neck: 3 parts of the axillary artery whose 3rd part has 3 branches - subscapular",",anterior humeral circumflex",",posterior humeral circumflex",
"Neck: Brachial plexus has 3 trunks - upper",",middle",",lower",
"Neck: Brachial plexus has 3 cords - lateral",",medial",",posterior",
"Neck: Brachial plexus has 3 branches off medial cord - medial brachial",",medial antebrachial",",medial pectoral",
"Neck: Brachial plexus has 3 branches off posterior cord - upper subscapular",",lower subscapular",",thoracodorsal",
"Neck: 3 branches off the thyrocervical trunk - transverse cervical",",suprascapular",",inferior thyroid",
"Neck: 3 veins drain the thyroid gland - superior (into internal jugular)",",middle (into internal jugular)",",inferior (into left brachiocephalic)",
"Neck: 3 scalene muscles - anterior",",middle",",posterior",
"Neck: 3 muscles attach to spine of C2 - semispinalis cervicis",",obliquus capitis inferior",",rectus capitis posterior major",
"Neck: 3 constrictor muscles - superior",",middle",",inferior",
"Neck: 3 parts of the pharynx - nasopharynx",",oropharynx",",laryngeopharynx",
"Neck: 3 parts to the hyoid bone - body",",greater horn",",lesser horn",
"Neck: 3 structures inside carotid sheath - common carotid artery",",internal jugular vein",",vagus nerve",
"Neck: 3 ganglia in sympathetic cervical chain - superior (magnum)",",middle",",inferior (stellate)",
"Head: 3 parts of the maxillary artery - mandibular",",pterygoid",",pterygopalatine",
"Head: 3 cranial fossae - anterior",",middle",",posterior",
"Head: 3 nuchal lines - inferior",",superior",",highest",
"Head: 3 layers to calvarium - outer table",",diploe",",inner table",
"Head: 3 clinoid processes of the sphenoid bone - anterior",",middle",",posterior",
"Head: 3 cranial nerves pass through jugular foramen - C.N. IX",",C.N. X",",C.N. XI",
"Head: 3 cranial nerves travel in the wall of the cavernous sinus - C.N. III",",C.N. IV",",C.N. V",
"Head: 3 cranial nerves carry parasympathetics to the head - C.N. III",",C.N. VII",",C.N. IX",
"Head: 3 nasal conchae- superior",",middle",",inferior",
"Head: 3 principal components of the temporal bone - squama",",petro/mastoid",",tympanic ring",
"Head: 3 bones of the upper jaw/palate - premaxilla",",maxilla",",palatine",
"Head: 3 salivary glands - parotid",",submaxillary",",sublingual",
"Head: 3 cranial nerves innervate the external tympanum - C.N. V",",C.N. VII",",C.N. X",
"Head: 3 middle ear bones - incus",",malleus",",stapes",
"Head: 3 parts of the ear - outer",",middle",",inner",
"Head: 3 membranes of the cochlea - Reissner",",Tectorial",",Basilar",
"Head: 3 intrinsic muscles of the tongue - longitudinal",",vertical",",transverse",
"Head: 3 muscles elevate the mandible - masseter m.",",temporalis m.",",medial pterygoid m.",
"Head: 3 branches of the posterior auricular artery - stylomastoid branch",",auricular branch",",occipital branch",
"Head: 3 branches of the ophthalmic nerve (VI) - nasociliary n.",",frontal n.",",lacrimal n.",
"Head: 3 superior alveolar nerves - anterior superior alveolar n.",",middle superior alveolar n.",",posterior superior alveolar n.",
"Head: 3 types of deciduous teeth - incisors",",canine",",molars",
"Head: 3 layers of dentition - enamal",",dentin",",pulp",
"Head: 3 general layers of the eye - retinal",",choroidal/ciliary body",",scleral/corneal",
"Head: 3 color receptors in cone cells - red",",blue",",yellow",
"Head: 3 nerves to the larynx - external laryngeal n.",",internal laryngeal n.",",recurrent laryngeal n.",
"Head: 3 cerebral arteries - anterior",",middle",",posterior",
"Head: 3 arteries supply the cerebellum - superior cerebellar",",anterior inferior cerebellar",",posterior inferior cerebellar",
"Shoulder: 3 muscles attach to coracoid process - coracobrachialis",",pectoralis minor",",short head of biceps",
"Shoulder: 3 parts of the axillary a. 3rd part has 3 branches - subscapular a.",",anterior circumflex humeral a.",",posterior circumflex humeral a",
"Shoulder: 3 glenohumeral ligaments - superior",",middle",",inferior",
"Arm: 3 muscles in anterior comparment - biceps brachii",",coracobrachialis",",brachialis",
"Arm: 3 heads of triceps brachii m. - long",",lateral",",medial",
"Arm: 3 muscles attach to greater tubercle of the humerus - supraspinatus",",infraspinatus",",teres minor",
"Arm: 3 parts of the ulnar collateral ligament of the elbow - anterior",",posterior",",oblique",
"Forearm: 3 muscles in deep anterior compartment - flexor digitorum profundus",",flexor pollicis longs",",pronator quadratus",
"Hand: 3 muscles in thenar eminence - opponens pollicis",",flexor pollicis brevis",",abductor pollicis brevis",
"Hand: 3 muscles in hypothenar compartment - flexor digiti minimi",",abductor digiti minimi",",opponens digiti minimi",
"Hand: 3 phalanges in fingers - proximal",",middle",",distal",
"Thorax: 3 compartments - mediastinum",",left pleural cavity",",right pleural cavity",
"Thorax: 3 branches off the aortic arch - brachiocephalic a.",",left common carotid a.",",left subclavian a.",
"Thorax: 3 parts of the aorta - ascending",",arch",",descending",
"Thorax: 3 principal surfaces of the pleura - costal",",diaphragmatic",",mediastinal",
"Thorax: 3 lobes of the right lung - superior",",middle",",inferior",
"Thorax: 3 bronchopulmonary segments of the upper right lobe - apical",",posterior",",anterior",
"Thorax: 3 muscles of interthoracic wall - external intercostal",",internal intercostal",",intercostalis intimus",
"Thorax: 3 main arteries of the heart - circumflex",",anterior interventricular",",right coronary",
"Thorax: 3 splanchnic nerves - greater",",lesser",",least",
"Abdomen: 3 folds in anterior abdominal wall - median (obliterated urachus)",",medial (obliterated umbilical a.)",",lateral (inferior epigastric a.)",
"Abdomen: 3 muscles contribute to linea semilunaris/rectus abdominus aponeurosis - internal oblique",",external oblique",",transversus abdominus",
"Abdomen: 3 openings in diaphragm - aortic",",esophageal",",inferior vena cava",
"Abdomen: 3 arcuate ligaments of diaphragm - median over aorta",",medial over psoas major m.",",lateral over quadratus lumborum m.",
"Abdomen: 3 parts of the stomach - fundus",",body",",pylorus",
"Abdomen: 3 smooth muscle layers of the stomach - oblique",",longitudinal",",circular",
"Abdomen: 3 unpaired branches of the abdominal aorta - celiac a.",",superior mesenteric a.",",inferior mesenteric a.",
"Abdomen: 3 branches of celiac a. - left gastric a.",",splenic a.",",common hepatic a.",
"Abdomen: 3 branches of common hepatic a. - right gastric a.",",proper hepatic a.",",gastroduodenal a.",
"Abdomen: 3 arterial branches supply adrenal glands - inferior phrenic",",aorta",",renal",
"Abdomen: 3 structures lie within porta hepatis - proper hepatic a.",",portal vein",",common bile duct",
"Abdomen: 3 principal veins contribute to the portal vein - splenic v.",",superior mesenteric v.",",inferior mesenteric v.",
"Abdomen: 3 parts of the small intestine - duodenum",",jejunum",",ileum",
"Abdomen: 3 parts of large intestine - ascending",",transverse",",descending",
"Abdomen: 3 coverings of the spermatic cord - external spermatic fascia",",cremasteric fascia",",internal spermatic fascia",
"Pelvis and Perineum: 3 bones in os coxae - pubis",",ilium",",ischium",
"Pelvis and Perineum: 3 parts of the pubis - body",",superior ramus",",inferior ramus",
"Pelvis and Perineum: 3 foramina in the pelvis - obturator foramen",",greater ischiadic foramen",",lesser ischiadic foramen",
"Pelvis and Perineum: 3 gluteus muscles - gluteus maximus",",gluteus medius",",gluteus minimus",
"Pelvis and Perineum: 3 rectal arteries - superior rectal from inferior mesenteric a.",",middle rectal from internal iliac a.",",inferior rectal from internal pudendal a.",
"Pelvis and Perineum: 3 branches of the posterior division of internal iliac a. - iliolumbar",",lateral sacral",",superior gluteal",
"Pelvis and Perineum: 3 openings in the urinary bladder - left ureter",",right ureter",",urethra",
"Pelvis and Perineum: 3 parts of the urethra - prostatic",",membranous",",spongy",
"Pelvis and Perineum: 3 parts of the uterus - fundus",",body",",cervix",
"Pelvis and Perineum: 3 erectile compartments of the penis - corpus spongiosum",",left corpus cavernosum",",right corpus cavernosum",
"Pelvis and Perineum: 3 muscles in superficial perineal pouch - bulbospongiosus",",ischiocavernosus",",superficial transverse perineus",
"Pelvis and Perineum: 3 arteries supply the rectum - superior rectal (from inferior mesenteric)",",middle rectal (from internal iliac)",",inferior rectal (from internal pudendal)",
"Pelvis and Perineum: 3 valves in the rectum - superior",",middle",",inferior",
"Gluteus: 3 gluteal muscles - gluteus maximus",",gluteus medius",",gluteus minimus",
"Gluteus: 3 muscles innervated by superior gluteal n. - gluteus medius",",gluteus minimus",",tensor fascia lata",
"Thigh: 3 hamstring muscles - biceps femoris",",semitendinosus",",semimembranosus",
"Thigh: 3 muscular compartments of the thigh - anterior",",medial",",posterior",
"Thigh: 3 branches of the lateral femoral circumflex a. - descending branch",",transverse branch",",ascending branch",
"Thigh: 3 muscles contribute to the pes anserinus - sartorius",",semitendinosus",",gracilis",
"Leg: 3 muscles in anterior compartment - tibialis anterior",",extensor digitorum",",extensor hallucis",
"Leg: 3 branches of the peroneal artery in the leg - anterior tibial a.",",posterior tibial a.",",peroneal a.",
"Leg: 3 peroneal muscles in the leg - peroneus longus m.",",peroneus brevis m.",",peroneus tertius m.",
"Leg: 3 muscles that comprise the triceps surae - grastrocnemius m.",",soleus m.",",plantaris m.",
"Leg: 3 muscles in the deep posterior compartment - tibialis posterioris m.",",flexor hallucis longus m.",",flexor digitorum longus m.",
"Foot: 3 cuneiform bones - medial",",intermediate",",lateral",
"Foot: 3 phalanges in toes - proximal",",middle",",distal",
"Foot: 3 described arches - medial",",lateral",",transverse"
);
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 href='http://www.meddean.luc.edu/lumen/MedEd/GrossAnatomy/Threes.html' title='Anatomy ideas ... thanks'>.</a>";
}
function addsome() {
var two="", three="", one=prompt("Enter first of your Anatomy sentence parts (adjust accordingly)", "Head: 3 divisions of the trigeminal n. - V1 - ophthalmic - has 3 branches - frontal");
if (one != "") {
two=prompt("Enter second of your Anatomy sentence parts (adjust accordingly, but please start it with ,) that started with " + one, ",nasociliary");
if (two != "") {
three=prompt("Enter third of your Anatomy sentence parts (adjust accordingly, but please start it with ,) that started with " + one + " " + two, ",lacrimal");
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) { // was /
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)] + " " + 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) {
updatescore();
placerealtext();
setTimeout(andthen, 9000);
} else {
score = score + 1;
updatescore();
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;
oklist = ":";
pseudo_sentence = " ";
while (pseudo_sentence.replace("...", "").trim().substring(1).indexOf(",") == -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], "").replace(" ", "").replace(" ", "");
}
}
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 + ":";
}
}
}
} 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 + ":";
}
}
}
}
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">Anatomy Dot<a title="Add your own Anatomy sentence" 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.meddean.luc.edu/lumen/MedEd/GrossAnatomy/Threes.html' title='Anatomy 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 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;
context.strokeText(real_sentence.replace("ø", "ø"),gpx,(gpy + 70));
//gpy = gpy + 50;
}
updatescore();
</script>
</body>
</html>