<!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=[];
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>';
}
}
chooseone();
}
function hoverthis(which) {
if (lastht != which) {
lastht=which;
goes++;
if (thisanswer == meanings[which]) {
score++;
}
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
chooseone();
}
}
function chooseone() {
var selis=9999;
while (selis == 9999 || selis == lastht) {
selis=Math.floor(Math.random() * meanings.length);
}
thisanswer=meanings[selis];
document.getElementById('myselect').value=thisanswer;
}
</script>
<style>
select {
width:70%;
border: 2px solid pink;
}
.button1 {
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;
}
.button1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button1 span:after {
content: 'in Spain falls mainly on the plain.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button1:hover span {
padding-right: 25px;
height: 245px;
}
.button1:hover span:after {
opacity: 1;
right: 0;
}
.button2 {
display: inline-block;
border-radius: 4px;
background-color: #511ef4;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button2 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button2 span:after {
content: 'make light work.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button2:hover span {
padding-right: 25px;
height: 245px;
}
.button2:hover span:after {
opacity: 1;
right: 0;
}
.button3 {
display: inline-block;
border-radius: 4px;
background-color: #51f41e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button3 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button3 span:after {
content: 'in the hand is worth two in the bush.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button3:hover span {
padding-right: 25px;
height: 245px;
}
.button3:hover span:after {
opacity: 1;
right: 0;
}
.button4 {
display: inline-block;
border-radius: 4px;
background-color: #154f1e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button4 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button4 span:after {
content: 'in time saves nine.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button4:hover span {
padding-right: 25px;
height: 245px;
}
.button4:hover span:after {
opacity: 1;
right: 0;
}
.button5 {
display: inline-block;
border-radius: 4px;
background-color: #1577e1;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button5 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button5 span:after {
content: 'gather no moss.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button5:hover span {
padding-right: 25px;
height: 245px;
}
.button5:hover span:after {
opacity: 1;
right: 0;
}
.button6 {
display: inline-block;
border-radius: 4px;
background-color: #cea5b1;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button6 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button6 span:after {
content: 'and no play makes Jack a dull boy.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button6:hover span {
padding-right: 25px;
height: 245px;
}
.button6:hover span:after {
opacity: 1;
right: 0;
}
.button7 {
display: inline-block;
border-radius: 4px;
background-color: #ceab51;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button7 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button7 span:after {
content: 'is the mother of invention.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button7:hover span {
padding-right: 25px;
height: 245px;
}
.button7:hover span:after {
opacity: 1;
right: 0;
}
.button8 {
display: inline-block;
border-radius: 4px;
background-color: #1eab5c;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button8 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button8 span:after {
content: 'is worth a thousand words.';
position: absolute;
opacity: 0;
top: 60px;
right: -20px;
transition: 0.5s;
}
.button8:hover span {
padding-right: 25px;
height: 245px;
}
.button8:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body onload="pushthem();">
<h1>The Animated Button Game</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>
<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="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="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="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="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="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="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="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="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>