<!doctype html>
<html>
<head>
<title>The Animated Button Game - RJM Programming - November, 2017 ... inspired by https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1</title>

<script type='text/javascript'>

var score=0, goes=0, thisanswer='', lastht=9999;
var meanings=[], sofar="", sofars="", inask="", scoresuffix="", dothese=[], ithis=0, qsofar="", qsofard="";

function pushthem() {
var spans=document.getElementsByTagName('span');
for (var isp=0; isp<spans.length; isp++) {
if (spans[isp].outerHTML.indexOf(' data-meaning="') != -1) {
meanings.push(spans[isp].outerHTML.split(' data-meaning="')[1].split('"')[0]);
document.getElementById('myselect').innerHTML+='<option value="' + spans[isp].outerHTML.split(' data-meaning="')[1].split('"')[0] + '">' + spans[isp].outerHTML.split(' data-meaning="')[1].split('"')[0] + '</option>';
} else if (spans[isp].outerHTML.indexOf(" data-meaning='") != -1) {
meanings.push(spans[isp].outerHTML.split(" data-meaning='")[1].split("'")[0]);
document.getElementById('myselect').innerHTML+='<option value="' + spans[isp].outerHTML.split(" data-meaning='")[1].split("'")[0] + '">' + spans[isp].outerHTML.split(" data-meaning='")[1].split("'")[0] + '</option>';
}
}
inask=location.search.split('more=')[1] ? decodeURIComponent(location.search.split('more=')[1].split('&')[0]) : '';
if (inask != "") {
if (inask.indexOf('`') != -1) {
if (inask.split('`').length >= 2) {
scoresuffix=' versus ' + inask.split('`')[1];
document.getElementById('score').innerHTML+=scoresuffix;
}
if (inask.split('`').length > 2) {
dothese=inask.split(',')[2];
}
inask=inask.split('`')[0];
}
var inasksin, inasks=inask.split('|');
for (var iin=0; iin<inasks.length; iin++) {
inasksin=inasks[iin].split('~');
if (inasksin.length >= 2) {
if (sofars == "") sofars='<style></style>';
if (inasksin.length == 2) {
meanings.push(inasksin[1]);
document.getElementById('myselect').innerHTML+='<option value="' + inasksin[1] + '">' + inasksin[1] + '</option>';
sofar+='   <button onmouseover="hoverthis(' + eval(-1 + meanings.length) + ');" onclick="" class="button button' + meanings.length + '" style="vertical-align:middle"><span data-meaning="' + inasksin[1] + '">' + inasksin[0].split(' ')[0] + ' ' + inasksin[0].split(' ')[1] + ' </span></button><br>';
sofars=sofars.replace('</style>', ' .button' + meanings.length + ' { background-color: #' + eval(meanings.length % 10) + 'e' + eval(meanings.length % 10) + 'b' + eval(meanings.length % 10) + "c; } .button" + meanings.length + " span:after { content: '" + inasksin[0].replace(inasksin[0].split(' ')[0] + ' ' + inasksin[0].split(' ')[1] + ' ','') + "'; } ");
} else {
meanings.push(inasksin[2]);
document.getElementById('myselect').innerHTML+='<option value="' + inasksin[2] + '">' + inasksin[2] + '</option>';
sofar+='   <button onmouseover="hoverthis(' + eval(-1 + meanings.length) + ');" onclick="" class="button button' + meanings.length + '" style="vertical-align:middle"><span data-meaning="' + inasksin[2] + '">' + inasksin[0] + ' </span></button><br>';
sofars=sofars.replace('</style>', ' .button' + meanings.length + ' { background-color: #' + eval(meanings.length % 10) + 'e' + eval(meanings.length % 10) + 'b' + eval(meanings.length % 10) + "c; } .button" + meanings.length + " span:after { content: '" + inasksin[1] + "'; } ");
}
}
}
if (sofar != "") {
document.body.innerHTML+=sofar + sofars;
}
}
chooseone();
}

function emailit(mode) {
if (mode == 0) {
document.getElementById('aemail').href=document.getElementById('aemail').href.replace('challenge','') + encodeURIComponent(document.URL.split('#')[0].split('?')[0]);
document.getElementById('aemail').click();
} else {
document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?more=' + encodeURIComponent(inask) + encodeURIComponent('`') + encodeURIComponent(document.getElementById('score').innerHTML.split('Score: ')[1].split(' ')[0]) + encodeURIComponent('`') + encodeURIComponent(qsofar));
document.getElementById('aemail').click();
}
}

function ask() {
var mores=" ", newask=inask, nadelim="";
if (inask.indexOf('~') != -1) nadelim="|";
while (mores != "") {
mores=prompt("Enter your saying or phrase (with optional ~ delimiter to separate button word(s) from transition animation added) then ~ then explanation to use as a clue for this phrase or proverb","An apple ~a day keeps the doctor away.~Eating nutritious food will make you healthier.");
if (mores == null) {
mores="";
} else if (mores.split('~').length >= 2) {
newask+=nadelim + mores;
nadelim="|";
} else {
mores="";
}
}
if (newask != inask) {
inask=newask;
location.href=document.URL.split('#')[0].split('?')[0] + '?more=' + encodeURIComponent(newask);
}
}

function hoverthis(which) {
if (lastht != which) {
lastht=which;
goes++;
if (thisanswer == meanings[which]) {
score++;
}
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + scoresuffix;
chooseone();
}
}

function chooseone() {
var selis=9999;
if (ithis < dothese.length) {
selis=dothese[ithis];
ithis++;
} else {
while (selis == 9999 || selis == lastht) {
selis=Math.floor(Math.random() * meanings.length);
}
ithis++;
}
qsofar+=qsofard + selis;
qsofard=",";
thisanswer=meanings[selis];
document.getElementById('myselect').value=thisanswer;
}

</script>

<style>
select {
width:70%;
border: 2px solid pink;
}

.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}

.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: 'in Spain falls mainly on the plain.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
height: 245px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}


.button1 {
background-color: #f4511e;
}

.button1 span:after {
content: 'in Spain falls mainly on the plain.';
}

.button2 {
background-color: #511ef4;
}

.button2 span:after {
content: 'make light work.';
}

.button3 {
background-color: #51f41e;
}

.button3 span:after {
content: 'in the hand is worth two in the bush.';
}


.button4 {
background-color: #154f1e;
}

.button4 span:after {
content: 'in time saves nine.';
}

.button5 {
background-color: #1577e1;
}

.button5 span:after {
content: 'gather no moss.';
}

.button6 {
background-color: #cea5b1;
}

.button6 span:after {
content: 'and no play makes Jack a dull boy.';
}

.button7 {
background-color: #ceab51;
}

.button7 span:after {
content: 'is the mother of invention.';
}

.button8 {
background-color: #1eab5c;
}

.button8 span:after {
content: 'is worth a thousand words.';
}

</style>
</head>
<body onload="pushthem();">

<h1>The Animated Button Game <a style="cursor:pointer;text-decoration:none;background-color:yellow;" onclick="ask();" title="Add your own phrase or proverb, with its explanation clue.">+</a> <a style="cursor:pointer;text-decoration:none;" onclick="emailit(0);" title="Email game link">📧</a> <a style="cursor:pointer;text-decoration:none;" onclick="emailit(1);" title="Email localizations and scores as a challenge">📧<sup>+</sup></a></h1>
<h2>RJM Programming - November, 2017</h2>
<h3>Thanks to <a target=_blank title='https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1' href='https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1'>https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_animate1</a></h3>
<h4 id='score'>Score: 0/0</h4>
<a style="display:none;" id="aemail" href="mailto:fillin@email.to?subject=Email%20game%20link%20for%20Animated%20Button%20Game%20challenge&body=">Email</a>
<p>Which button below suits <select id='myselect' disabled='disabled'><option value=''>Please select a suitable button below</option></select><br><br>

   <button onmouseover="hoverthis(0);" onclick="" class="button button1" style="vertical-align:middle"><span data-meaning="The song is a turning point in the plotline of the musical. Professor Higgins and Colonel Pickering have been drilling Eliza Doolittle incessantly with speech exercises, trying to break her Cockney accent speech pattern. The key lyric in the song is 'The rain in Spain stays mainly in the plain', which contains five words that a Cockney would pronounce with [æɪ] or [aɪ][1] – more like 'eye' [aɪ] than the Received Pronunciation diphthong [eɪ].">The rain </span></button>
   <button onmouseover="hoverthis(1);" onclick="" class="button button2" style="vertical-align:middle"><span data-meaning="A task is soon accomplished if several people help.">Many hands </span></button>
   <button onmouseover="hoverthis(2);" onclick="" class="button button3" style="vertical-align:middle"><span data-meaning="Used to mean that it is better to hold onto something one has than to risk losing it by trying to get something better.">A bird </span></button>
   <button onmouseover="hoverthis(3);" onclick="" class="button button4" style="vertical-align:middle"><span data-meaning="If you sort out a problem immediately it may save extra work later.">A stitch </span></button>
   <button onmouseover="hoverthis(4);" onclick="" class="button button5" style="vertical-align:middle"><span data-meaning="People who are always moving, with no roots in one place or another, avoid responsibilities and cares.">Rolling stones </span></button>
   <button onmouseover="hoverthis(5);" onclick="" class="button button6" style="vertical-align:middle"><span data-meaning="It means that without time off from work, a person becomes both bored and boring.">All work </span></button>
   <button onmouseover="hoverthis(6);" onclick="" class="button button7" style="vertical-align:middle"><span data-meaning="A need or problem encourages creative efforts to meet the need or solve the problem.">Necessity </span></button>
   <button onmouseover="hoverthis(7);" onclick="" class="button button8" style="vertical-align:middle"><span data-meaning="A complex idea can be conveyed with just a single still image or that an image of a subject conveys its meaning or essence more effectively than a description does.">A picture </span></button>
</body>
</html>