<!doctype html>
<html>
<head>
<title>The Article Game - RJM Programming - July, 2017</title>
<script type='text/javascript'>
var sayitc="";
var sentences=["(A/An/One/The/;The) fox saw what (a/an/one/the/;the) crow had done, and he walked away.",
"There was once (a/an/one/the/;a) crow who stole (a/an/one/the/;a) wedge of cheese from my kitchen window.",
"(A/An/One/The/;One) day last year it was (a/an/one/the/;a) very hot afternoon in June.",
"I was hurrying to get home. I was about (a/an/one/the/;an) hour late - well, to be precise exactly (a/an/one/the/;an) hour and ten minutes.",
"I had taken the train that arrived at the station at 6.15.  Anyway, there was (a/an/one/the/;a) woman standing under the trees, and there were several children with her.",
"I saw (a/an/one/the/;the) child clearly - she was (a/an/one/the;a) lovely dark-haired girl - but I only heard the others.",
"Suddenly (a/an/one/the/;a) strange thing happened.",
"The girl took some stones and leaves out of her pocket, and threw (a/an/one/the/;one) stone after another into the air.",
"They're (a/an/one/the/;) farmers.",
"He worked as (a/an/one/the/;a) taxi driver.",
"(A/An/One/The/;A) man called while you were out.",
"Who opened (a/an/one/the/;the) window?",
"She flew off with (a/an/one/the/;the) cheese to (a/an/one/the/;a) nearby tree.",
"(A/An/One/The/;The) fox saw what (a/an/one/the/;the) crow had done, and he walked away.",
"\"Oh, Mistress Crow, you have such lovely black feathers, such tender feet, such (a/an/one/the/;a) beautiful yellow beak, and such fine black eyes!  You must have (a/an/one/the/;a) beautiful voice.  Would you please sing for me?\"",
"(A/An/One/The/;The) crow felt very proud.  She opened her beak and sang CAW-CAW-CAW.",
"Of course (a/an/one/the/;the) cheese dropped down, (a/an/one/the/;the) fox snatched it up and ate every bite.",
"She lives in (a/an/one/the/;the) centre of Glasgow.",
"\"Which coat is yours?  (A/An/One/The/;The) red one?\"",
"\"Do you see (a/an/one/the/;the) man standing near (a/an/one/the/;the) door?\"",
"\"He works as (a/an/one/the/;an) assistant in (a/an/one/the/;the) same shop as I do.\"",
"He's (a/an/one/the/;the) oldest resident in (a/an/one/the/;) Germany.",
"I'd like (a/an/one/the/;a) glass of water.",
"He's got (a/an/one/the/;a) long nose.",
"She's got (a/an/one/the/;an) interesting face.",
"She's got (a/an/one/the/;) dark hair.",
"Today is (a/an/one/the/;the) only day that I'm free.",
"I like (a/an/one/the/;) music.",
"People have to live in (a/an/one/the/;) society.",
"I like (a/an/one/the/;the) music that the orchestra is playing.",
"Who invented (a/an/one/the/;the) telescope?",
"(A/An/One/The/;The) Internet is (a/an/one/the/;a) magnet for many young people.",
"Do you like living in (a/an/one/the/;the) country?",
"He's from (a/an/one/the/;) Texas.",
"She's in (a/an/one/the/;) prision.",
"Sonia lives in (a/an/one/the/;the) Czech Republic.",
"Li lives in (a/an/one/the/;) China.",
"(A/An/One/The/;The) waters of (a/an/one/the/;the) Thames flow past Oxford."];
var dotime=-1;
var dotimer=null;
var listofsolved=",";
var score=0;
var goes=sentences.length;
var thesentence=-1;
var answer1="", answer1or="";
var answer2="", answer2or="";
var vs1="", vs1or="";
var vs2="", vs2or="";
var gtw=null;
var gtwd=null;
var x=0.0, y=0.0;
var wordposlist=";";
var langis='en';
var words=new Array();
var fromtext="Please select a broadcast below ...";
var totext="Please select a broadcast below ...";
var inboxurl="";
var outboxurl="";
var identity="";
var datetimebit="";
var subject="";
var cf = "14px Courier New";
var stcmd=new Array();
var numcmd=0;
var thiscmd=0;
var ourcword="";
var listenurl="";
var delim='';
var elem, which=0, ie, elemLeft=0, elemTop=0, context=null;
function checkanswer(tval) {
  var tvals=tval.split(",");
  if (document.getElementById('words').value.indexOf("(") != -1) {
  if (tvals.length == 1) {
   if (vs1 != "") {
    if (tvals[0].toLowerCase() == answer1.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs1, answer1);
drawsomewords(document.getElementById('words').value);
     vs1="";
    } else if (tvals[0].toLowerCase() == answer1or.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs1, answer1or);
drawsomewords(document.getElementById('words').value);
     vs1="";
    } else if (tval.toLowerCase().indexOf("hint") != -1) {
     alert("Try thinking about '" + answer1 + "'.");
    } else {
     alert("Sorry ... the answer " + tvals[0] + " is not correct.  Try again.");
    }
   } else if (vs2 != "") {
    if (tvals[0].toLowerCase() == answer2.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2);
drawsomewords(document.getElementById('words').value);
     vs2="";
    } else if (tvals[0].toLowerCase() == answer2or.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2or);
drawsomewords(document.getElementById('words').value);
     vs2="";
    } else if (tval.toLowerCase().indexOf("hint") != -1) {
     alert("Try thinking about '" + answer2 + "'.");
    } else {
     alert("Sorry ... the answer " + tvals[0] + " is not correct.  Try again.");
    }
   }
  } else if (tvals.length == 2) {
   if (vs1 != "") {
    if (tvals[0].toLowerCase() == answer1.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs1, answer1);
     vs1="";
   if (vs2 != "") {
    if (tvals[1].toLowerCase() == answer2.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2);
drawsomewords(document.getElementById('words').value);
     vs2="";
    } else if (tvals[1].toLowerCase() == answer2or.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2or);
drawsomewords(document.getElementById('words').value);
     vs2="";
    } else if (tval.toLowerCase().indexOf("hint") != -1) {
     alert("Try thinking about '" + answer2 + "'.");
    } else {
     alert("Sorry ... the answer " + tvals[1] + " is not correct.  Try again.");
    }
   }
    } else if (tvals[0].toLowerCase() == answer1or.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs1, answer1or);
     vs1="";
   if (vs2 != "") {
    if (tvals[1].toLowerCase() == answer2.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2);
     vs2="";
    } else if (tvals[0].toLowerCase() == answer2or.toLowerCase()) {
     document.getElementById('words').value=document.getElementById('words').value.replace(vs2, answer2or);
     vs2="";
    } else if (tval.toLowerCase().indexOf("hint") != -1) {
     alert("Try thinking about '" + answer2 + "'.");
    } else {
     alert("Sorry ... the answer " + tvals[1] + " is not correct.  Try again.");
    }
   }
    } else if (tval.toLowerCase().indexOf("hint") != -1) {
      alert("Try thinking about '" + answer1 + "'.");
   } else {
     alert("Sorry ... the answer " + tvals[0] + " is not correct.  Try again.");
    }
   }
  }
  
  if (document.getElementById('words').value.indexOf("(") == -1) {
    score++;
    listofsolved+=thesentence + ",";
    if (eval(score) >= eval(goes)) {
     if (eval(dotime) >= 0) {
      if (dotimer != null) {
        clearInterval(dotimer);
        dotimer=null;
      }
      sayitc="Congratulations on completing all " + goes + " answers correctly in " + dotime + " seconds (" + eval(dotime / 60) + " minutes) (" + eval(dotime / 3600) + " seconds).";
      setTimeout(sayit, 3000);
      //alert("Congratulations on completing all " + goes + " answers correctly in " + dotime + " seconds (" + eval(dotime / 60) + " minutes) (" + eval(dotime / 3600) + " seconds).");
      //location.href='./the_article_game.html';
     } else {
      sayitc="Congratulations on completing all " + goes + " answers correctly.";
      setTimeout(sayit, 3000);
      //alert("Congratulations on completing all " + goes + " answers correctly.");
      //location.href='./the_article_game.html';
     }
    } else {
      // back here
if (eval(score) < eval(goes)) document.getElementById('sanswer').innerHTML='Answer (' + eval(1 + score) + '/' + goes + ')';
if (1 == 1) {
thesentence=-1;
setTimeout(skipit, 3000);
} else {
document.getElementById('answer').value='';
thesentence=eval(Math.floor(Math.random() * eval(sentences.length)) + 0);
while (listofsolved.indexOf("," + thesentence + ",") != -1) {
 thesentence=eval(Math.floor(Math.random() * eval(sentences.length)) + 0);
}
if (1 == 2) listofsolved+=thesentence + ",";
document.getElementById('words').value=amend(sentences[thesentence]);
drawsomewords(document.getElementById('words').value);
document.getElementById('answer').focus();
setTimeout(atf,400);
    }
  }
  }
  }
}
function sayit() {
  alert(sayitc);
  location.href='./the_article_game.html';
}
function skipit() {
if (eval(1 + score) < eval(goes)) {
var prevsentence=thesentence;
document.getElementById('answer').value='';
thesentence=eval(Math.floor(Math.random() * eval(sentences.length)) + 0);
while (listofsolved.indexOf("," + thesentence + ",") != -1 && eval(thesentence) != eval(prevsentence)) {
 thesentence=eval(Math.floor(Math.random() * eval(sentences.length)) + 0);
}
if (1 == 2) listofsolved+=thesentence + ",";
document.getElementById('words').value=amend(sentences[thesentence]);
drawsomewords(document.getElementById('words').value);
document.getElementById('answer').focus();
setTimeout(atf,400);
}
}
function atf() {
document.getElementById('answer').focus();
}
function amend(instuff) {
  var outstuff=instuff;
  answer1="";
  answer2="";
  answer1or="";
  answer2or="";
  vs1="";
  vs2="";
  vs1or="";
  vs2or="";
  var sparts=instuff.split(";"), sbits, xbits, presbits;
  if (sparts.length > 1) {
    presbits=sparts[0].split("(");
    vs1="(" + presbits[eval(-1 + presbits.length)].replace(/_/g, " ") + ")";
    sbits=sparts[1].split(")");
    outstuff=outstuff.replace(";" + sbits[0], "");
    xbits=sbits[0].split("/");
    answer1=xbits[0].replace(/_/g, " ");
    if (xbits.length > 1) answer1or=xbits[1].replace(/_/g, " ");
  }
  if (sparts.length > 2) {
    presbits=sparts[1].split("(");
    vs2="(" + presbits[eval(-1 + presbits.length)].replace(/_/g, " ") + ")";;
    sbits=sparts[2].split(")");
    outstuff=outstuff.replace(";" + sbits[0], "");
    xbits=sbits[0].split("/");
    answer2=xbits[0].replace(/_/g, " ");
    if (xbits.length > 1) answer2or=xbits[1].replace(/_/g, " ");
  }
  //alert(instuff + " ... vs ... " + outstuff.replace(/_/g, " "));
  return outstuff.replace(/_/g, " ");
}
function whatistheword(thex, they) {
  var thewlist, theclist, xword="", swords;
  thewordis="";
  ourcword="";
  if (wordposlist != ";") {
   thewlist=wordposlist.split(";");
   for (var ij=0; ij<thewlist.length; ij++) {
     if (thewlist[ij] != "") {
       theclist=thewlist[ij].split(",");
       if (theclist.length >= 5) {
         xword=thewlist[ij].replace(theclist[0] + "," + theclist[1] + "," + theclist[2] + "," + theclist[3] + ",", "");
         if (ourcword == "" && eval(thex) >= eval(theclist[0]) && eval(thex) <= eval(theclist[2]) && eval(they) >= eval(theclist[1]) && eval(they) <= eval(theclist[3])) {
           //alert(xword);
           swords=xword.split(",");
           ourcword=swords[0].replace("(","").replace(")","");
           if (gtwd != null) gtwd.close();
           gtwd=window.open('http://www.thefreedictionary.com/' + ourcword, 'Dictionary ' + ourcword, "top=100,left=550,width=400,height=400");
           if (gtw != null) gtw.close();
           //gtw=window.open('http://translate.google.com/translate_tts?tl=' + langis + '&q=' + ourcword, ourcword, "top=100,left=5,width=400,height=400");
           if (document.getElementById('langis').value == 'en') {
           gtw=window.open('http://translate.google.com/translate_tts?tl=en&q=' + ourcword, ourcword, "top=100,left=5,width=400,height=400");
           } else {
           gtw=window.open('https://translate.google.com/#en/' + document.getElementById('langis').value + '/' + ourcword, ourcword, "top=100,left=5,width=800,height=400");
           }
         }
       }
     }
   }
  }
  return thewordis;
}
function doslowly() {
  if (eval(thiscmd) < eval(numcmd)) {
    eval(stcmd[thiscmd]);
    thiscmd++;
    setTimeout(doslowly, 103);
  } 
}
function eachsec() {
  dotime++;
  var bthis="                                                                                        ";
  var wthis=dotime + " seconds elapsed ... Score: " + score + " Of: " + goes + " solved so far";
  context.clearRect(0, 340, elem.width, elem.height);
  context.strokeText(bthis.substring(0, wthis.length),5,350);
  context.strokeText(dotime + " seconds elapsed ... Score: " + score + " Of: " + goes + " solved so far",5,350);
}
function drawsomewords(somewords) {
    var thisline="",thewords=somewords.replace(/<br>\\n/g, "\\n").replace("  "," ").replace("  "," ").replace("  "," ").replace("  "," ").replace("  "," ").replace("  "," ").replace("  "," ");
    var factor=1,jextra,iextra=-1,iextras=new Array(),kextra=0, thelines, jj, tx, ty, stuffs, stuff="", nextx=10, nexty=-20, kk, onex=0, linewords, thel=0, accumline="", stx=0, sty=0;
    context.clearRect(0, 0, elem.width, elem.height);
    context.fillStyle="#FFFFFF";
    wordposlist=";";
    document.getElementById('themaindiv').innerHTML='';
    if (1 == 2) {
    context.strokeStyle = "blue";
    context.font = cf;
    thelines=thewords.split("\\n");
    if (thelines.length == 1) thelines=thewords.split("\n");
    for (jj=0; jj<thelines.length; jj++) {
      iextra=-1;
      stuffs=thelines[jj].split("`"); //(",");
      if (stuffs.length >= 3) {
      stuff=thelines[jj].replace("" + stuffs[0] + "`" + stuffs[1] + "`", ""); // + "," + stuffs[1] + ",", "");
      context.strokeText(stuff,stuffs[0],stuffs[1]);
      nextx=eval(stuffs[0]);
      nexty=eval(20 + eval(stuffs[1]));
      } else {
      stuff=thelines[jj];
      context.strokeText(stuff,nextx,Math.abs(eval(nexty)));
      nexty=eval(20 + Math.abs(eval(nexty)));
      }
    }
    } else {
    onex=nextx;
    thiscmd=0;
    numcmd=0;
    context.strokeStyle = "blue";
    context.font = cf;
    thelines=thewords.split("\\n");
    if (thelines.length == 1) thelines=thewords.split("\n");
    //document.title='';
    for (jj=0; jj<thelines.length; jj++) {
      thisline="";
      kextra=0;
      iextra=-1;
      thel=0;
      accumline="";
      linewords=thelines[jj].split(" ");
      if (eval(thelines[jj].length) > 56) {
        iextra=thelines[jj].length;
        jextra=eval(-1 + linewords.length);
        while (eval(iextra) > 56) {
         iextra-=eval(1 + linewords[jextra].length);
         jextra--;
        }
      }
      stuffs=thelines[jj].split("`"); //(",");
      if (stuffs.length >= 3) {
      stuff=thelines[jj].replace("" + stuffs[0] + "`" + stuffs[1] + "`", ""); // + "," + stuffs[1] + ",", "");
      if (eval(nexty) < 0) {
        nextx=eval(stuffs[0]);
        onex=nextx;
        nexty=eval(stuffs[1]);
      }
      } else {
      stuff=thelines[jj];
      if (eval(nexty) < 0) {
        onex=nextx;
        nexty=eval(Math.abs(eval(nexty)));
      }
      }
      for (kk=0; kk<stuff.length; kk++) {
            if (kk == iextra) {
      if (thisline == "") {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<br>";
      } else {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<a style='text-decoration:none;' href='#' onclick=\" openit('" + thisline.replace(/'/g, """) + "');  \" title='" + thisline + "'>👂</a><br>";
      }
      nextx=eval(onex);
      nexty=eval(20 + nexty);
      sty=eval(nexty - 20);
      stx=eval(0);
      thisline="";
             if (stuff.substring(iextra).length > 56) {
        factor++;
        iextra=stuff.length;
        jextra=eval(-1 + linewords.length);
        while (eval(iextra) > eval(factor * 56)) {
         iextra-=eval(1 + linewords[jextra].length);
         jextra--;
        }
        }
            } else if (thisline.length > 56 && (stuff.substring(kk, eval(1 + kk)) == "/" || stuff.substring(kk, eval(1 + kk)) == ".")) {
            
      if (thisline == "") {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<br>";
      } else {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<a style='text-decoration:none;' href='#' onclick=\" openit('" + thisline.replace(/'/g, """) + "');  \" title='" + thisline + "'>👂</a><br>";
      }
      nextx=eval(onex);
      nexty=eval(20 + nexty);
      sty=eval(nexty - 20);
      stx=eval(0);
      thisline="";
             if (stuff.substring(iextra).length > 56) {
        factor++;
        iextra=stuff.length;
        jextra=eval(-1 + linewords.length);
        while (eval(iextra) > eval(factor * 56)) {
         iextra-=eval(1 + linewords[jextra].length);
         jextra--;
        }
        }
            }
            
            
            
            if (stuff.substring(kk, eval(1 + kk)) == " ") {
             if (accumline != "") {
              wordposlist+=stx + "," + sty + "," + eval(8 + nextx) + "," + eval(2 + nexty) + "," + accumline + ";";
              //document.title="wordposlist=" + wordposlist;
              context.fillRect(eval(4 + stx),eval(4 + sty),eval(-4 + Math.abs(eval(eval(8 + nextx)) - eval(stx))),eval(-4 + Math.abs(eval(eval(2 + nexty)) - eval(sty)))); 
              accumline="";
              thel++;
              sty=eval(nexty - 22);
              stx=eval(nextx + 8);
             }
            } else if (thel < linewords.length) {
             accumline+=stuff.substring(kk, eval(1 + kk));
             if (accumline == linewords[thel]) {
              wordposlist+=stx + "," + sty + "," + eval(8 + nextx) + "," + eval(2 + nexty) + "," + accumline + ";";
              //document.title="Wordposlist=" + wordposlist;
              context.fillRect(eval(4 + stx),eval(4 + sty),eval(-4 + Math.abs(eval(eval(8 + nextx)) - eval(stx))),eval(-4 + Math.abs(eval(eval(2 + nexty)) - eval(sty)))); 
              accumline="";
              thel++;
              sty=eval(nexty - 22);
              stx=eval(nextx + 8);
             }
            } else {
             accumline+=stuff.substring(kk, eval(1 + kk));
            }
            thisline+=stuff.substring(kk, eval(1 + kk));
	        if (eval(1 + numcmd) > eval(stcmd.length)) {
	         stcmd.push('context.strokeText("' + stuff.substring(kk, eval(1 + kk)) + '",' + nextx + ',' + nexty + ')');
	        } else {
	         stcmd[numcmd]='context.strokeText("' + stuff.substring(kk, eval(1 + kk)) + '",' + nextx + ',' + nexty + ')';
	        }
	  numcmd++;
	  if (numcmd == 1) {
	   setTimeout(doslowly, 103);
	  }
      //context.strokeText(stuff.substring(kk, eval(1 + kk)),nextx,nexty);
      //alert(nextx + "," + nexty + "," + stuff.substring(kk, eval(1 + kk)));
      nextx+=8;
      }
      if (thisline == "") {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<br>";
      } else {
      document.getElementById('themaindiv').innerHTML=document.getElementById('themaindiv').innerHTML + "<a style='text-decoration:none;' href='#' onclick=\" openit('" + thisline.replace(/'/g, """) + "');  \" title='" + thisline + "'>👂</a><br>";
      }
      nextx=eval(onex);
      nexty=eval(20 + nexty);
      sty=eval(nexty - 20);
      stx=eval(0);
      thisline="";
    }
    }
}
function openit(thew) {
  if (gtw != null) gtw.close();
           if (document.getElementById('langis').value == 'en') {
           gtw=window.open('http://translate.google.com/translate_tts?tl=en&q=' + encodeURIComponent(thew), "One Line", "top=100,left=5,width=400,height=400");
           } else {
           gtw=window.open('https://translate.google.com/#en/' + document.getElementById('langis').value + '/' + encodeURIComponent(thew), "One Line", "top=100,left=5,width=800,height=400");
           }
}
function fixdatetimebit() {
  var d = new Date();
  document.getElementById('datetimebit').value = ' @ ' + d.toLocaleString();
}
function validatetheform() {
  var purlst, qe="q=", wd=400;
  if (document.getElementById('words').value == "") {
    document.getElementById('words').style.border='2px solid red';
    return false;
  } else {
           if (gtwd != null) gtwd.close();
           //if (langis == 'en') gtwd=window.open('http://www.thefreedictionary.com/' + ourcword, 'Dictionary ' + ourcword, "top=100,left=550,width=400,height=400");
           if (gtw != null) gtw.close();
           //alert('http://translate.google.com/translate_tts?tl=' + langis + '&q=' + encodeURIComponent(document.getElementById('words').value));
           var purl='http://translate.google.com/translate_tts?tl=' + langis + '&q=' + encodeURIComponent(document.getElementById('words').value);
           purlst=purl.split(qe);
           if (document.getElementById('langis').value != 'en') {
           purl='https://translate.google.com/#en/' + document.getElementById('langis').value + '/' + encodeURIComponent(document.getElementById('words').value);
           qe="/" + document.getElementById('langis').value + '/';
           purlst=purl.split(qe);
           wd=800;
           }
           var purls=purl.split("%0A%0A");
           if (purls.length > 1) {
           var ioff=0;
           for (var iu=eval(-1 + purls.length); iu>=0; iu--) {
             purlst[1] = purlst[0] + qe;
             if (purls[iu].length > 0) {
               gtw=window.open(purlst[0] + qe + purls[iu].replace(purlst[1],""), "The Whole Thing " + eval(1 + iu) + " of " + purls.length, "top=" + eval(ioff + 100) + ",left=" + eval(ioff + 5) + ",width=" + wd + ",height=400");
               ioff+=5;
             }
           }
           } else if (document.getElementById('langis').value == 'en') {
           gtw=window.open('http://translate.google.com/translate_tts?tl=en&q=' + encodeURIComponent(document.getElementById('words').value), "The Whole Thing", "top=100,left=5,width=" + wd + ",height=400");
           } else {
           gtw=window.open('https://translate.google.com/#en/' + document.getElementById('langis').value + '/' + encodeURIComponent(document.getElementById('words').value), "The Whole Thing", "top=100,left=5,width=" + wd + ",height=400");
           }
  }
  return true;
}
</script>
</head>
<body style='background-color: white;'>
<div id='mybkgrd' style="opacity: 0.1; z-index: -1; position: absolute; top:0;left:0;width:98%;height:1200px;border:15px solid purple;"></div>
<h1 align='center'>The Article <a id='atimer' href='#' onclick=' dotime=0; dotimer=setInterval(eachsec,1000); ' title='Optionally time yourself to solve questions' style='text-decoration:none;'>Timer</a> Game</h1>
<h2 align='center'>RJM Programming - July, 2017</h2>
<h3 align='center'>English Sentences with Article choice cloze game.</h3>
<h4 align='center'>Thanks to "How English Works ... A Grammar Practice Book" by Michael Swan and Catherine Walter (ISBN: 978-0-19-431456-5) and "Techniques and Resources in Teaching Grammar" by Marianne Celce-Murcia and Sharon Hilles (ISBN: 978-0-19-434191-2)</h4>
<div align='center' id='mydiv'>
<table cellspacing=5 cellpadding=5>
<tbody>
<tr><th style='background-color:#f5e5d5; border: 3px solid green;'>Fix () Part of English Sentence</th><th id='titlebit' style='background-color:#f5e5d5; border: 3px solid green;'>Words will display (at yellow canvas below)</th></tr>
<tr><td style='background-color:#f5e5d5; border: 3px solid green;'><span id='sanswer'>Answer</span>: <input style="width: 100px;background-color:yellow;" onblur=" if (this.value.length > 0 || 1 == 1) { checkanswer(this.value); } " type='text' name='answer' id='answer' value='' title='If desperate get hint by typing ... hint'></input><div id='noneednow' style='display:none;'>I am a: <select id='iam' name='iam' onchange='whatami(this.value);'><option value=''>Please choose role below ...</option><option value='broadcast'>Broadcaster</option><option value='listen'>Listener</option></select></div><div style='display:none;' id='broadcastdiv'><form target='writer' action='#' method='GET' onsubmit="return validatetheform()"><div id='noneednow2' style='display:none;'>Subject: <input style='width:55%;' type='text' value='' name='subject' id='subject'></input></div><br>Sentence (<a href='#' onclick='skipit();' title='Need to think about this one'>skip for now</a>): <br><textarea readonly onkeyup="document.getElementById('titlebit').innerHTML='You can now click words (at yellow canvas below) <br>or hearing buttons (left of yellow canvas)'; drawsomewords(this.value);" id='words' name='words' rows=14 cols=28></textarea><br><div id='noneednow3' style='display:none;'>My Name/Email: <input style='width:55%;' type='text' value='' name='emailname' id='emailname'></input></div><input type='hidden' name='datetimebit' id='datetimebit' value=''></input><br><div id='noneednow9' style='display:block;' align='center'><input id='actionbut' style='background-color:pink;' onclick='fixdatetimebit();' type='submit' value='Hear 👂 Your English Sentence'></input><br><br><select onchange=" if (this.value == 'en') { document.getElementById('actionbut').value='Hear 👂 Your English Sentence';   } else { document.getElementById('actionbut').value='Translate 🌐 Your English Sentence to ...';  }  " style="background-color:white;color:blue;" id="langis" name="langis" title="Translations 🌐 courtesy of Google Translate at http://translate.google.com/"><option value="en">Hear 👂 English vs Translation 🌐 to ...</option><option value="af">Afrikaans</option><option value="sq">Albanian</option><option value="ar">Arabic</option><option value="hy">Armenian</option><option value="az">Azerbaijani</option><option value="eu">Basque</option><option value="be">Belarusian</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-CN">Chinese (Simplified)</option><option value="zh-TW">Chinese (Traditional)</option><option value="hr">Croatian</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="et">Estonian</option><option value="tl">Filipino</option><option value="fi">Finnish</option><option value="fr">French</option><option value="gl">Galician</option><option value="ka">Georgian</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="iw">Hebrew</option><option value="hi">Hindi</option><option value="hu">Hungarian</option><option value="is">Icelandic</option><option value="id">Indonesian</option><option value="ga">Irish</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="la">Latin</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="mk">Macedonian</option><option value="ms">Malay</option><option value="mt">Maltese</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sr">Serbian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sw">Swahili</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="ur">Urdu</option><option value="vi">Vietnamese</option><option value="cy">Welsh</option><option value="yi">Yiddish</option></select></div></form><p id='bstatus'></p></div><div id='dmail' align='center' style='word-wrap: break-word;background-color:#fffff0;width:100%;'></div><table style="width:100%;"><tr><th style='width:50%;'><div id='noneednow5' style='display:none;'>Mail In</div></th><th style='width:50%;'><div id='noneednow6' style='display:none;'>Mail Out</a></th></tr><tr><td id='mailin' style='width:50%;word-wrap: break-word;'></td><td id='mailout' style='width:50%;word-wrap: break-word;'></td></tr></table></div></td><td valign='top' id='themaintd'><div id='themaindiv'></div><canvas id='mycanvas' valign='top' width=500 height=360 style='background-color:yellow;position:absolute;top:270px;left:48%;width:500px;height:360px; border: 3px solid green;'></canvas></td></tr>
</tbody>
</table>
</div>
<script type='text/javascript'>
function whatami(urole) {
    if (urole == 'broadcast') {
      document.getElementById('broadcastdiv').style.display='block';
    } else {
      var d = new Date();
      var rnum=Math.floor(Math.random() * 19000) + 1;
      document.getElementById('broadcastdiv').innerHTML='<iframe src="broadcast_list.html?rnum=' + rnum + d.toLocaleString() + '" onload="listenerplace(this);" id="listeneriframe"></iframe>';
    }
}
function read_mail(instuff) {
  var outstuff=instuff;
  if (instuff != "") {
  var d, redofd="", ofd="", prefixb="";
  var spare=document.getElementById('mailin').innerHTML;
  var inlines=instuff.split("\n");
  d = new Date();
  redofd="<font size=1 color=red>" + d.toLocaleString() + "</font><br>";
  for (var i=eval(-1 + inlines.length); i>=0; i--) {
    if (inlines[i].replace("<br>","") != "") {
    spare=prefixb + ofd + inlines[i] + "<br>" + spare;
    prefixb="";
    ofd="";
    } else if (1 == 2) {
    d = new Date();
    ofd="<font size=1 color=green>" + d.toLocaleString() + "</font><br>";
    }
  }
  document.getElementById('mailin').innerHTML="<br>" + redofd + spare;
  }
  return outstuff;
}
function send_mail(outstuff) {
  var instuff=outstuff;
  if (outstuff != "") {
  var d, redofd="", ofd="", prefixb="";
  var spare=document.getElementById('mailout').innerHTML;
  var inlines=instuff.split("\n");
  d = new Date();
  redofd="<font size=1 color=red>" + d.toLocaleString() + "</font><br>";
  for (var i=eval(-1 + inlines.length); i>=0; i--) {
    if (inlines[i].replace("<br>","") != "") {
    spare=prefixb + ofd + inlines[i] + "<br>" + spare;
    ofd="";
    prefixb="";
    } else if (1 == 2) {
    d = new Date();
    ofd="<font size=1 color=green>" + d.toLocaleString() + "</font><br>";
    }
  }
  document.getElementById('mailout').innerHTML="<br>" + redofd + spare;
  }
  return instuff;
}
function inboxcheck() {
  if (inboxurl != "") {
    if (1 == 2 && document.getElementById('inbox').src.indexOf("listen_to.php") != -1) {
    document.getElementById('mailinout').innerHTML='<iframe onload=check_mail_in(this) style=display:none id=inbox src=' + inboxurl + ' title=inbox></iframe><iframe onload=check_mail_out(this) style=display:none id=outbox src=' + inboxurl.replace('mb_in', 'mb_out') + ' title=outbox></iframe>';
    } else {
    document.getElementById('inbox').src=inboxurl;
    }
    inboxurl="";
  }
}
function outboxcheck() {
  if (outboxurl != "") {
    if (1 == 2 && document.getElementById('outbox').src.indexOf("listen_to.php") != -1) {
    document.getElementById('mailinout').innerHTML='<iframe onload=check_mail_in(this) style=display:none id=inbox src=' + outboxurl.replace('mb_out', 'mb_in') + ' title=inbox></iframe><iframe onload=check_mail_out(this) style=display:none id=outbox src=' + outboxurl + ' title=outbox></iframe>';
    } else {
    document.getElementById('outbox').src=outboxurl;
    }
    outboxurl="";
  }
}
function check_mail_in(iois) {
  if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument); 
    if (aconto != null) {
     if (aconto.document) { aconto = aconto.document; }
     if (aconto.body != null && inboxurl == "") {
       var d = new Date();
       var rnum=Math.floor(Math.random() * 19000) + 1;
       var preqs=iois.src.split('?');
       inboxurl=preqs[0] + '?rnum=' + rnum + d.toLocaleString();
       setTimeout(inboxcheck, 1964);
       if (aconto.body.innerHTML != "") {
         document.title="mail in is " + read_mail(aconto.body.innerHTML);
         iois.src='./listen_to.php?rnum=-1' + rnum + d.toLocaleString();
       }
     }
    }
  }
}
function check_mail_out(iois) {
  if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument); 
    if (aconto != null) {
     if (aconto.document) { aconto = aconto.document; }
     if (aconto.body != null && outboxurl == "") {
       var d = new Date();
       var rnum=Math.floor(Math.random() * 19000) + 1;
       var preqs=iois.src.split('?');
       outboxurl=preqs[0] + '?rnum=' + rnum + d.toLocaleString();
       setTimeout(outboxcheck, 1969);
       if (aconto.body.innerHTML != "") {
         document.title="mail out is " + send_mail(aconto.body.innerHTML);
         iois.src='./listen_to.php?rnum=-2' + rnum + d.toLocaleString();
       }
     } 
    }
  }
}
function listenerplace(iois) {
  if (iois != null) {
    var aconto = (iois.contentWindow || iois.contentDocument); 
    if (aconto != null) {
     if (aconto.document) { aconto = aconto.document; }
     if (aconto.body != null) {
       //alert(aconto.body.innerHTML);
       document.getElementById('broadcastdiv').innerHTML=aconto.body.innerHTML.replace(fromtext,totext.substring(0,fromtext.length)).replace(/\n/g, "<br>");
       if (totext != fromtext) drawsomewords(totext);
       totext="Please select a broadcast below ...";
       document.getElementById('broadcastdiv').style.display='block';
     }
    }
  }
}
window.onload = (function(){
var frombit="", whenbit="", subjectbit="", emailbit="";
listenurl=location.search.split('listenurl=')[1] ? location.search.split('listenurl=')[1].split('&')[0] : "";
identity=location.search.split('identity=')[1] ? location.search.split('identity=')[1].split('&')[0] : "";
datetimebit=location.search.split('dtb=')[1] ? location.search.split('dtb=')[1].split('&')[0] : "";
subject=location.search.split('subject=')[1] ? location.search.split('subject=')[1].split('&')[0] : "";
if (listenurl != "") {
  document.getElementById('iam').value='listen';
  totext=decodeURIComponent(listenurl).replace(/<br>\\n/g, "\\n");
  if (subject == "") {
    subjectbit="";
  } else {
    subjectbit="<br>" + decodeURIComponent(subject);
    emailbit+=encodeURIComponent(decodeURIComponent(subject));
  }
  if (datetimebit == "") {
    whenbit="";
  } else {
    whenbit="<br> ... at " + decodeURIComponent(datetimebit);
    emailbit+=encodeURIComponent(" ... at " + decodeURIComponent(datetimebit));
  }
  if (identity == "") {
    frombit="";
  } else {
    if (decodeURIComponent(identity).indexOf("@") != -1) {
    frombit="<br> ... via <a href='mailto:" + decodeURIComponent(identity) + "?subject=" + encodeURIComponent("Re: ") + emailbit + "&body=" + encodeURIComponent("Regarding \n\n" + '"' + "\n") + encodeURIComponent(totext.replace(/\\n/g, "\n").replace(/\n/g, "\n")) + encodeURIComponent("\n" + '"' + "\n\n ... can I just say ...\n\n\n") + "' title='Optional email (reply)'>" + decodeURIComponent(identity) + "</a>";
    } else {
    frombit="<br> ... via " + decodeURIComponent(identity);
    }
  }
  document.getElementById('titlebit').innerHTML='Feedback (at yellow canvas below)' + subjectbit + frombit + whenbit;
  whatami('listen');
  //setTimeout(andthen, 2000);
} else {
  document.getElementById('iam').value='broadcast';
  whatami('broadcast');
}
//score=location.search.split('score=')[1] ? location.search.split('score=')[1].split('&')[0] : score;
//goes=location.search.split('goes=')[1] ? location.search.split('goes=')[1].split('&')[0] : goes;
ie = (function(){  // thanks to http://stackoverflow.com/questions/5574842/best-way-to-check-for-ie-less-than-9-in-javascript-without-library
    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : undef;
}());
if (ie < 9) {
    elem=document.getElementById('mydiv');
    elem.attachEvent('onclick', function(event) {
       if (event.clientX || event.clientY) {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       } else {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       }
       });
} else {
    elem=document.getElementById('mycanvas');
    context = elem.getContext("2d");
    elemLeft = elem.offsetLeft;
    elemTop = elem.offsetTop;
    elem.addEventListener('mousedown', function(event) {
       if (event.clientX || event.clientY) {
       x = event.clientX - elemLeft;
       y = event.clientY - elemTop;
       } else {
       x = event.pageX - elemLeft;
       y = event.pageY - elemTop;
       }
       //alert("x=" + x + " and y=" + y + " and elemLeft=" + elemLeft + " and elemTop=" + elemTop);
       whatistheword(x,y);
       }, false);
}
thesentence=eval(Math.floor(Math.random() * eval(sentences.length)) + 0);
if (1 == 2) listofsolved+=thesentence + ",";
document.getElementById('words').value=amend(sentences[thesentence]);
drawsomewords(document.getElementById('words').value);
document.getElementById('answer').focus();
document.getElementById('sanswer').innerHTML='Answer (' + eval(1 + score) + '/' + goes + ')';
   }());
</script>
<!--iframe style='display:none;' title='Broadcast Writer' id='writer' name='writer' src='./listen_to.php'></iframe-->
<div id='mailinout'>
</div>
</body>
</html>