<!doctype html>
<html>
<head>
<title>Future Choices Game - Choice of Two via Timed Clicking of Correct One - RJM Programming - November, 2015 - Thanks to http://stackoverflow.com/questions/20217869/how-to-spin-an-image-horizontally-with-css</title>

<style>
.but1 {
background-color: pink;
border: 2px solid green;
text-decoration: none;
color: blue;
}
.but2 {
background-color: orange;
border: 2px solid green;
margin-top: +15px;
text-decoration: none;
color: blue;
}

strike {
color: red;
}

table {
background-color: lightgreen;
}

.dirh {
-moz-animation: spinHorizontal 2.8s infinite linear;
-o-animation: spinHorizontal 2.8s infinite linear;
-webkit-animation: spinHorizontal 2.8s infinite linear;
animation: spinHorizontal 2.8s infinite linear;
}

@keyframes spinHorizontal {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
</style>

<script type='text/javascript'>

var score=0, goes=0, putback='', timesecs=0, firstgo=true, zero=0, fullcycle=4800, bitcycle=eval(fullcycle / 4);

var sentences=[
"Look at the quote. It [will cost/is going to cost/1] $14000 to fix the roof.",
"We think it [will cost/is going to cost/0] around $200 for a new gate.",
"Jen [will have/is going to have/1] a baby.",
"In all likelihood, the baby [will have/is going to have/0] Jen's eyes.",
"[I will play/I'm playing/1] squash with Jules on Saturday.",
"[He'll win./He's winning./0] The result is always the same.",
"Don't let on about it to him. [He'll tell/He's going to tell/0] everyone he meets.",
"What's going on? The bus [won't stop/isn't going to stop/1]!",
"In an ideal world one day everybody [will have/is going to have/0] suitable housing.",
"[She'll get married/She's getting married/1] next Wednesday with just a few close friends invited.",
"[It will rain/It's going to rain/1] if the clouds are anything to go by.",
"That cold front has arrived, and there is a good chance [it will snow/it's going to snow/0]."
];

var aswas=new Array();
var answers=new Array();
var goodanswers=new Array();

var strike='';
var passeds='';
var thistitle='Future Choices';

function changes() {
if (firstgo) {
firstgo=false;
for (var i=0; i<sentences.length; i++) {
twosome=aswas[i].split(';');
document.getElementById('centertd' + eval(1 + i)).innerHTML=twosome[0];
document.getElementById('centertd' + eval(1 + i)).title=twosome[0];
document.getElementById('centertd' + eval(1 + i)).style.fontSize='28px';
document.getElementById('centertd' + eval(1 + i)).style.backgroundColor='pink';
}
}
timesecs+=bitcycle;
//document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.replace('Future','F@ture').replace('Futuristic','Future').replace('F@ture','Futuristic');
if (eval(timesecs) >= fullcycle) {
zero=eval(1 - zero);
for (var ii=0; ii<sentences.length; ii++) {
twosome=aswas[ii].split(';');
//alert(document.getElementById('centertd' + eval(1 + ii)).style.backgroundColor); // rgb(255, 192, 203)
if (document.getElementById('centertd' + eval(1 + ii)).style.backgroundColor != 'lightgreen' && document.getElementById('centertd' + eval(1 + ii)).style.backgroundColor != 'rgb(144, 238, 144)') {
document.getElementById('centertd' + eval(1 + ii)).innerHTML=twosome[zero];
document.getElementById('centertd' + eval(1 + ii)).title=twosome[zero];
if (zero == 0) {
document.getElementById('centertd' + eval(1 + ii)).style.backgroundColor='pink';
} else {
document.getElementById('centertd' + eval(1 + ii)).style.backgroundColor='orange';
}
}
}
timesecs=0;
}
setTimeout(changes, bitcycle);
}

function doputback() {
if (putback != '') {
eval(putback);
putback='';
}
}

function check(thiso, correctone, isfinal) {
var twosome, was='', numis=0;
if (document.getElementById('centertd1').innerHTML.indexOf('<a ') == -1) {
numis=eval(thiso.id.replace('centerdiv','').replace('centertd',''));
doputback();
goes++;
//alert(thiso.title + ' ... numis=' + numis + ' ' + goodanswers[eval(-1 + numis)]);
if (thiso.title == goodanswers[eval(-1 + numis)]) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
thiso.setAttribute('class', 'noclass');
document.getElementById('centertd' + numis).style.backgroundColor='lightgreen';
document.getElementById('centertd' + numis).onclick="alert('Done that.');";
} else {
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
alert('Try again.');
}
} else {
var idis, otherid, versusone;
idis=thiso.id;
otherid=idis.replace('but1for', 'buttwofor').replace('but2for', 'butonefor').replace('butone', 'but1').replace('buttwo', 'but2');
versusone=document.getElementById(otherid).title;
if (strike != '') {
versusone='';
var ip=thiso.title.indexOf('NOT ');
if (ip != -1) {
if (ip == 0) {
versusone=thiso.title.replace('NOT ','');
} else {
var abits=thiso.title.split('NOT ');
versusone=abits[eval(-1 + abits.length)];
}
}
}
if (isfinal == 0) {
//alert(otherid);
doputback();
putback="document.getElementById('" + otherid + "').innerHTML=strike + document.getElementById('" + otherid + "').innerHTML.replace('<strike>','').replace('</strike>','') + strike.replace('<strike','</strike');"
document.title=otherid + ' ... ' + doputback;
//alert(putback);
setTimeout(doputback, 2000);
document.getElementById(otherid).innerHTML=document.getElementById(otherid).innerHTML.replace('<strike>','').replace('</strike>','');
} else if (strike != '') {
doputback();
goes++;
if (versusone != correctone) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
was=document.getElementById(otherid).innerHTML;
was=was.replace('<strike>','');
was=was.replace('</strike>','');
document.getElementById(otherid).innerHTML=was;
document.getElementById(idis).innerHTML='';
} else {
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
alert('Try again.');
}
} else {
doputback();
goes++;
if (versusone != correctone) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
was=document.getElementById(idis).innerHTML;
was=was.replace('<strike>','');
was=was.replace('</strike>','');
document.getElementById(idis).innerHTML=was;
document.getElementById(otherid).innerHTML='';
} else {
document.getElementById('score').innerHTML='Score: ' + score + ' Goes: ' + goes;
alert('Try again.');
}
}
}
}

function buildpage() {
strike=location.search.split('strike=')[1] ? '<strike>' : '';
passeds=location.search.split('sentences=')[1] ? location.search.split('sentences=')[1].split('&')[0] : '';
if (passeds != '') eval('sentences=[' + decodeURIComponent(passeds) + ']');
thistitle=location.search.split('title=')[1] ? location.search.split('title=')[1].split('&')[0] : 'Future Choices';
if (thistitle != 'Future Choices') thistitle=decodeURIComponent(thistitle);
var tbo=document.getElementById('mytbody');
var bits, postbits, choices;
if (thistitle != 'Future Choices') document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.replace('Future Choices', thistitle);
if (strike != '') {
document.getElementById('score').innerHTML=document.getElementById('score').innerHTML.replace('Correct One (as it appears)','Wrong One');
}
for (var i=0; i<sentences.length; i++) {
bits=sentences[i].split(']');
if (eval(bits.length) == 2) {
postbits=bits[0].split('[');
if (eval(postbits.length) == 2) {
choices=postbits[eval(-1 + postbits.length)].split('/');
if (eval(choices.length) == 3) {
aswas.push(choices[0] + ";" + choices[1]);
goodanswers.push(choices[eval(0 + eval(choices[2]))]);
if (strike != '') {
answers.push(choices[eval(choices[2])]);
tbo.innerHTML+='<tr><td align="right" id="lefttd' + eval(1 + i) + '">' + postbits[0] + '</td><td align="center" id="centertd' + eval(1 + i) + '"><a onmouseover="check(this,answers[' + i + '],0);" onclick="check(this,answers[' + i + '],1);" class="but1" href="#" id="centerbut1for' + eval(1 + i) + '" title="' + choices[1] + ' NOT ' + choices[0] + '"><strike>' + choices[0] + '</strike></a><br><a onmouseover="check(this,answers[' + i + '],0);" onclick="check(this,answers[' + i + '],1);" class="but2" href="#" id="centerbut2for' + eval(1 + i) + '" title="' + choices[0] + ' NOT ' + choices[1] + '"><strike>' + choices[1] + '</strike></a></td><td id="righttd' + eval(1 + i) + '">' + bits[1] + '</td></tr>';
} else {
answers.push(choices[eval(1 - eval(choices[2]))]);
tbo.innerHTML+='<tr><td align="right" id="lefttd' + eval(1 + i) + '">' + postbits[0] + '</td><td class="dirh" align="center" id="centertd' + eval(1 + i) + '" onclick="check(this,answers[' + i + '],1);"><a onmouseover="check(this,answers[' + i + '],0);" onclick="check(this,answers[' + i + '],1);" class="but1" href="#" id="centerbut1for' + eval(1 + i) + '" title="' + choices[1] + '">' + strike + choices[0] + strike.replace('<strike','</strike') + '</a><br><a onmouseover="check(this,answers[' + i + '],0);" onclick="check(this,answers[' + i + '],1);" class="but2" href="#" id="centerbut2for' + eval(1 + i) + '" title="' + choices[0] + '">' + strike + choices[1] + strike.replace('<strike','</strike') + '</a></td><td id="righttd' + eval(1 + i) + '">' + bits[1] + '</td></tr>';
}
}
}
}
}
if (strike == '') setTimeout(changes, bitcycle);
}

function background() {
var stuff="Quoting How English Works by Michael Swan and Catherine Walter ... \nfuture: comparison of structures\n\nWe can often use more than one structure to talk about the same future event.\n\nPresent forms emphasise present ideas like intention, certainty and plans.\n\nIn predictions, we prefer present forms when there is outside evidence for what will happen - when we can see something coming.\n\nWe prefer will when we are talking about what is inside our heads: our beliefs, guesses, knowledge etcetera.";
alert(stuff);
}

function toggle() {
if (document.URL.indexOf('strike=') != -1) {
location.href=document.URL.replace('strike=','nowayjose=');
} else if (document.URL.indexOf('STRIKE=') != -1) {
location.href=document.URL.replace('STRIKE=','nowayjose=');
} else if (document.URL.indexOf('?') == -1) {
location.href=document.URL + '?strike=y';
} else {
location.href=document.URL + '&strike=y';
}
}

function owndata() {
var ours=prompt('Optionally specify your own sentences in format like below (where number at end of slash grouping is zero-start indicator of correct answer of two before it, and [] lead should be adhered to ... ' + "\n\n" + '"Look at the quote. It [will cost/is going to cost/1] $14000 to fix the roof.","We think it [will cost/is going to cost/0] around $200 for a new gate."','');
var spare, postspare, lh='';
if (ours != null) {
if (ours != '') {
if (document.URL.indexOf('sentences=') != -1) {
spare=document.URL.split('sentences=');
postspare=spare[1].split('&');
lh=document.URL.replace('sentences=' + postspare[0], 'sentences=' + encodeURIComponent(ours));
} else if (document.URL.indexOf('SENTENCES=') != -1) {
spare=document.URL.split('SENTENCES=');
postspare=spare[1].split('&');
lh=document.URL.replace('SENTENCES=' + postspare[0], 'sentences=' + encodeURIComponent(ours));
} else if (document.URL.indexOf('?') == -1) {
lh=document.URL + '?sentences=' + encodeURIComponent(ours);
} else {
lh=document.URL + '&sentences=' + encodeURIComponent(ours);
}
owntitle(lh);
}
}
}

function owntitle(du) {
var ours=prompt('Optionally specify your own title. Optionally suffix it by ~ to toggle mode of use among Horizontal Flip Click or Strike Reject (from what it is now).',thistitle);
var spare, postspare;
if (du == "") du = document.URL;
if (ours != null) {
if (ours.indexOf('~') != -1) {
if (du.indexOf('strike=') != -1) {
du=du.replace('strike=','nowayjose=');
} else if (du.indexOf('STRIKE=') != -1) {
du=du.replace('STRIKE=','nowayjose=');
} else if (du.indexOf('?') == -1) {
du=du + '?strike=y';
} else {
du=du + '&strike=y';
}
ours=ours.replace(/~/g, "");
if (ours == '') location.href=du;
}
if (ours != '') {
if (du.indexOf('title=') != -1) {
spare=du.split('title=');
postspare=spare[1].split('&');
du=du.replace('title=' + postspare[0], 'title=' + encodeURIComponent(ours));
} else if (document.URL.indexOf('TITLE=') != -1) {
spare=du.split('TITLE=');
postspare=spare[1].split('&');
du=du.replace('TITLE=' + postspare[0], 'title=' + encodeURIComponent(ours));
} else if (du.indexOf('?') == -1) {
du=du + '?title=' + encodeURIComponent(ours);
} else {
du=du + '&title=' + encodeURIComponent(ours);
}
location.href=du;
}
}
}
</script>
</head>
<body style='background-color: yellow;' onload='setTimeout(buildpage,250);'>
<div class='dxirh' align='center'>
<h1 id='myh1' style='color:yellow; background-color: violet;' align='center'><br><a style="text-decoration:none;" href='#' onclick="owntitle('');" title='Enter your own title.'>Future Choices</a> <font size=1>Thanks to <a href="#" onclick="background();">"How English Works"</a> by Michael Swan and Catherine Walter</font><br><br></h1>
<h4 style='color:yellow; background-color: violet;' align='center'><br>RJM Programming <a style="text-decoration:none;" href='#' onclick='toggle();' title='Toggle Mode of Use among [Horizontal Flip Click] and Strike Reject'>-</a> November<a style="text-decoration:none;" href='#' onclick='owndata();' title='Send Your Own Sentences'>,</a> 2015<br><br></h1>
<h4 id='score' style='color:yellow; background-color: violet;' align='center'>Please Click the Correct One (as it appears) - Score: 0 Goes: 0</h4>
</div>
<div align='center' id='mydiv'>
<table id='mytable' border=1>
<tbody id='mytbody'>
</tbody>
</table>
</div>
</body>
</html>