<!doctype html>
<html>
<head>
<title>Golden Ratio Game - RJM Programming - January, 2017</title>
<style>
input { border: 5px solid orange; z-index:7; }
div {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
text-align: center;
text-indent: 0px;
text-rendering: optimizeLegibility;
text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
text-transform: none;
font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
font-size: 32px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
border-bottom-color: black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: black;
border-left-style: solid;
border-left-width: 1px;
border-right-color: black;
border-right-style: solid;
border-right-width: 1px;
border-top-color: black;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-style: solid;
border-top-width: 1px;
background-clip: border-box;
background-origin: padding-box;
background-size: auto;
}
</style>
<script type='text/javascript'>
var hdiff=0.05;
var ediff=0.15;
var thediff=ediff;
var dcone=-1, altgratis=0.0, gratis=1.6180339887, oneside=0, ming=eval(eval(gratis * 1000.0) - 200.0), maxg=eval(eval(gratis * 1000.0) + 200.0), which=Math.floor(Math.random() * 3), loss=Math.floor(Math.random() * 2), bcols=["green","blue","aqua","olive","magenta","cyan","yellow","red","brown","purple","orange"];
var score=(location.search.split('score=')[1] ? location.search.split('score=')[1].split('&')[0] : 0);
var goes=(location.search.split('goes=')[1] ? location.search.split('goes=')[1].split('&')[0] : 0);
var difficulty=(location.search.split('difficulty=')[1] ? location.search.split('difficulty=')[1].split('&')[0] : 1);
function choosethings() {
var ions, jons, onetwothree=["","",""],colis=["","",""],brgs=[0.0,0.0,0.0];
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
document.getElementById('difficulty').value=difficulty;
thediff=ediff;
if (difficulty > 0) which=Math.floor(Math.random() * 3);
if (difficulty >= 3) {
document.getElementById('mytable').style.width='100%';
thediff=hdiff;
brgs[0]=Math.floor(Math.random() * 360.0);
brgs[1]=Math.floor(Math.random() * 360.0);
brgs[2]=Math.floor(Math.random() * 360.0);
}
document.getElementById('mytbody').innerHTML="<tr id='row1'><td id='cell_1_1'></td><td id='cell_1_2'></td><td id='cell_1_3'></td></tr><tr id='row2'><td id='cell_2_1'></td><td id='cell_2_2'></td><td id='cell_2_3'></td></tr><tr id='row3'><td id='cell_3_1'></td><td id='cell_3_2'></td><td id='cell_3_3'></td></tr>";
onetwothree[0]="cell_" + eval(Math.floor(Math.random() * 3) + 1) + "_" + eval(Math.floor(Math.random() * 3) + 1);
colis[0]=bcols[Math.floor(Math.random() * bcols.length)];
for (ions=1; ions<=2; ions++) {
onetwothree[ions]=onetwothree[0];
while (onetwothree[ions] == onetwothree[0] || onetwothree[ions] == onetwothree[eval(-1 + ions)]) {
onetwothree[ions]="cell_" + eval(Math.floor(Math.random() * 3) + 1) + "_" + eval(Math.floor(Math.random() * 3) + 1);
colis[ions]=bcols[Math.floor(Math.random() * bcols.length)];
}
}
oneside=eval(Math.floor(Math.random() * 200.0) + 200.0);
if (loss == 0) {
document.getElementById(onetwothree[which]).innerHTML="<div id='d" + eval(1 + which) + "' onclick=' isit(" + eval(1 + which) + "); ' style='height:" + oneside + "px;width:" + eval(oneside / gratis) + "px;border:1px solid black;background-color:" + colis[which] + ";'>" + eval(1 + which) + "</div>";
} else {
document.getElementById(onetwothree[which]).innerHTML="<div id='d" + eval(1 + which) + "' onclick=' isit(" + eval(1 + which) + "); ' style='height:" + oneside + "px;width:" + eval(oneside * gratis) + "px;border:1px solid black;background-color:" + colis[which] + ";'>" + eval(1 + which) + "</div>";
}
if (difficulty >= 3) rotateit(brgs[which], eval(1 + which));
for (ions=0; ions<3; ions++) {
if (ions != which) {
loss=Math.floor(Math.random() * 2);
altgratis=gratis;
while (eval(Math.abs(altgratis - gratis)) < eval('' + thediff)) {
altgratis=eval(eval(Math.floor(Math.random() * eval(maxg - ming)) + ming) / 1000.0);
if (loss == 0) {
document.getElementById(onetwothree[ions]).innerHTML="<div id='d" + eval(1 + ions) + "' onclick=' isit(" + eval(1 + ions) + "); ' style='height:" + oneside + "px;width:" + eval(oneside / altgratis) + "px;border:1px solid black;background-color:" + colis[ions] + ";'>" + eval(1 + ions) + "</div>";
} else {
document.getElementById(onetwothree[ions]).innerHTML="<div id='d" + eval(1 + ions) + "' onclick=' isit(" + eval(1 + ions) + "); ' style='height:" + oneside + "px;width:" + eval(oneside * altgratis) + "px;border:1px solid black;background-color:" + colis[ions] + ";'>" + eval(1 + ions) + "</div>";
}
if (difficulty >= 3) rotateit(brgs[ions], eval(1 + ions));
}
}
}
}
function rotateit(ourbrg, dwhich) {
var ourwhich=('' + dwhich).replace('d','');
document.getElementById('d' + dwhich).style.opacity=0.8;
try { document.getElementById('d' + dwhich).style.webkitTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e10) { } //
try { document.getElementById('d' + dwhich).style.MozTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e1000) { }
try { document.getElementById('d' + dwhich).style.msTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e100) { }
try { document.getElementById('d' + dwhich).style.OTransform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e10000) { }
try { document.getElementById('d' + dwhich).style.transform = (" rotate(" + (ourbrg) + "deg)"); } catch(e10) { } //translate(" + tx + "," + ty + "); "); } catch(e1) { }
}
function isit(ch) {
goes++;
if (ch == eval(1 + which)) {
score=eval(eval('' + score) + eval('' + difficulty));
score++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
var ihbits="", jhbits, tdbits=document.getElementsByTagName('td');
for (jhbits=0; jhbits<tdbits.length; jhbits++) {
ihbits+=tdbits[jhbits].innerHTML;
}
alert('No, sorry, answer was ' + eval(1 + which) + ' ... ' + ihbits);
}
choosethings();
}
</script>
</head>
<body onload=' choosethings();' style='background-color:#d7d7d7;'>
<h1>Golden Ratio <select id='difficulty' onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&difficulty=' + this.value; "><option value=0>Easiest</option>"><option value=1>Easy</option><option value=2>Hard</option><option value=3>Hardest</option></select> Game - RJM Programming - January, 2017</h1>
<h3 id='score'>Score: 0/0</h3>
<span id='myspan'>Which rectangle below is closest to the <a target=_blank title='Golden Ratio information from Wikipedia ... thanks' href='https://en.m.wikipedia.org/wiki/Golden_ratio'>Golden Ratio</a>? <input type=button id=b1 value='1' onclick='isit(1);'></input> <input type=button id=b2 value='2' onclick='isit(2);'></input> <input type=button id=b3 value='3' onclick='isit(3);'></input></span>
<br><br>
<table id='mytable' style='background-color:#c0c0c0;'><tbody id='mytbody'>
<tr id='row1'><td id='cell_1_1'></td><td id='cell_1_2'></td><td id='cell_1_3'></td></tr>
<tr id='row2'><td id='cell_2_1'></td><td id='cell_2_2'></td><td id='cell_2_3'></td></tr>
<tr id='row3'><td id='cell_3_1'></td><td id='cell_3_2'></td><td id='cell_3_3'></td></tr>
</tbody></table>
</html>