<!doctype html>
<html>
<head>
<style>

div { background-color: yellow; }
select { background-color: pink; }
input { background-color: cyan; }

input[type=checkbox] {
accent-color: red;
}

input[type=radio] {
accent-color: green;
}

input[type=range] {
accent-color: rgb(0, 0, 255);
}

</style>

<script type='text/javascript'>

var dprefix='', which=-1, height=-1.0, distance=-1.0, altitude=-1.0, elevation=0.0, solution=0.0, solutiondegrees=0.0;
var score=(location.search.split('score=')[1] ? location.search.split('difficulty=')[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] : '');

function putto(dwhich) {
difficulty=dwhich;
var imgs=document.getElementsByTagName('img');
for (var ji=0; ji<imgs.length; ji++) {
imgs[ji].style.display='none';
}
document.getElementById('i' + difficulty.substring(0,1).replace('r','').replace('d','') + difficulty.substring(1)).style.display='block';
var divs=document.getElementsByTagName('div');
for (var jdi=0; jdi<divs.length; jdi++) {
divs[jdi].style.display='none';
}
document.getElementById('d' + difficulty.substring(0,1).replace('r','').replace('d','') + difficulty.substring(1)).style.display='block';
choosethings();
}

function checkdifficulty() {
if (difficulty != '') {
document.getElementById('r' + difficulty.substring(0,1).replace('r','').replace('d','') + difficulty.substring(1)).checked=true;
putto('d' + difficulty.substring(0,1).replace('r','').replace('d','') + difficulty.substring(1));
}
}

function working(osel) {
if (osel.value != '') {
document.getElementById('working' + difficulty).value+=osel.value;
}
osel.value='';
}

function choosethings() {
var ions, jons, varsare=["distance","elevation","altitude"];
var blurb="", suffix="<br><br> So what is xxx? <input type=text value='0.000' id=solution onblur=isit(this.value);></input>";
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;

if (document.getElementById('myh3').innerHTML.indexOf('<select') == -1) {
var huhs=" <select id=helper onchange=working(this);><option value=>Optionally select helpers for your Javascript eval() working out ideas</option></select>";
huhs=huhs.replace('</select>','<option value="*">*</option></select>');
huhs=huhs.replace('</select>','<option value="/">/</option></select>');
huhs=huhs.replace('</select>','<option value="+">+</option></select>');
huhs=huhs.replace('</select>','<option value="-">-</option></select>');
huhs=huhs.replace('</select>','<option value="(">(</option></select>');
huhs=huhs.replace('</select>','<option value=")">)</option></select>');
huhs=huhs.replace('</select>','<option value="(0.94 * height)">(0.94 * height)</option></select>');
huhs=huhs.replace('</select>','<option value="height">height</option></select>');
huhs=huhs.replace('</select>','<option value="elevation">elevation</option></select>');
huhs=huhs.replace('</select>','<option value="distance">distance</option></select>');
huhs=huhs.replace('</select>','<option value="altitude">altitude</option></select>');
huhs=huhs.replace('</select>','<option value="Math.PI">Math.PI</option></select>');
huhs=huhs.replace('</select>','<option value="180.0">180.0</option></select>');
huhs=huhs.replace('</select>','<option value="Math.cos">Math.cos</option></select>');
huhs=huhs.replace('</select>','<option value="Math.sin">Math.sin</option></select>');
huhs=huhs.replace('</select>','<option value="Math.atan">Math.atan</option></select>');
document.getElementById('myh3').innerHTML+=huhs;
}

height=0.0;
if (difficulty.indexOf('ard') != -1) {
dprefix='data-';
varsare=["distance","elevation","altitude","height"];
which=Math.floor(Math.random() * varsare.length);
if (which != 3) {
height=eval(eval(Math.floor(Math.random() * 600.0) + 1400.0) / 1000.0);
blurb+="<br>Height: " + height + " metres<br>";
}
} else {
dprefix='';
which=Math.floor(Math.random() * varsare.length);
}
suffix=suffix.replace("xxx", varsare[which].substring(0,1).toUpperCase() + varsare[which].substring(1).replace('levation','levation (in degrees)'));
if (which != 1) {
elevation=eval(eval(Math.floor(Math.random() * 40.0) + 35.0) * Math.PI / 180.0);
blurb+="<br>Elevation: " + eval(elevation * 180.0 / Math.PI) + " degrees<br>";
if (which == 0) {
altitude=eval(eval(Math.floor(Math.random() * 600.0) + 1400.0) / 1.0);
blurb+="<br>Altitude: " + eval(altitude) + " metres<br>";
solution=Math.cos(elevation) * (eval(altitude) - eval(0.94 * height));
solutiondegrees=solution;
} else if (which == 2) {
distance=eval(eval(Math.floor(Math.random() * 6000.0) + 14000.0) / 1.0);
blurb+="<br>Distance: " + eval(distance) + " metres<br>";
solution=Math.sin(elevation) * (eval(distance)) + eval(0.94 * height);
solutiondegrees=solution;
} else {
solution=eval(eval(Math.floor(Math.random() * 600.0) + 1400.0) / 1000.0);
altitude=eval(eval(Math.floor(Math.random() * 600.0) + 1400.0) / 1.0);
distance=Math.cos(elevation) * (eval(altitude) - eval(0.94 * solution));
blurb+="<br>Altitude: " + eval(altitude) + " metres<br>";
blurb+="<br>Distance: " + eval(distance) + " metres<br>";
solutiondegrees=solution;
}
} else {
altitude=eval(eval(Math.floor(Math.random() * 600.0) + 1400.0) / 1.0);
distance=eval(eval(Math.floor(Math.random() * 6000.0) + 14000.0) / 1.0);
blurb+="<br>Altitude: " + eval(altitude) + " metres<br>";
blurb+="<br>Distance: " + eval(distance) + " metres<br>";
solution=Math.atan((eval(altitude) - eval(0.94 * height)) / eval(distance));
solutiondegrees=eval(solution * 180.0 / Math.PI);
}


document.getElementById('d' + difficulty.substring(0,1).replace('r','').replace('d','') + difficulty.substring(1)).innerHTML=blurb + suffix.replace('></input>',' ' + dprefix + 'title=' + solutiondegrees + '></input> ... or Show Us Your ' + document.getElementById('helper').outerHTML.replace('helper','xhelp').replace('Optionally select helpers for your Javascript eval() working out ideas','Javascript') + ' Working eval(<input id=working' + difficulty + ' type=text onblur=preisit(this.value); value=></input>)');
}

function preisit(ch) {
if (Math.abs(eval(ch) - eval(solution)) < 0.001 || Math.abs(eval(ch) - eval(solutiondegrees)) < 0.001) {
score++;
if (difficulty.indexOf('ard') != -1) score++;
document.getElementById('solution').value=eval(ch);
isit(eval(ch));
} else {
alert('No, sorry, try again.');
}
}

function isit(ch) {
goes++;
if (Math.abs(eval(ch) - eval(solution)) < 0.001 || Math.abs(eval(ch) - eval(solutiondegrees)) < 0.001) {
score++;
if (difficulty.indexOf('ard') != -1) score++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
alert('No, sorry, answer was ' + solution);
}
choosethings();
}

</script>

</head>
<body onload=' checkdifficulty(); '>
<h1>Elevation Game - RJM Programming - January, 2017</h1>
<h3 id=myh3>Please pick one of the scenarios below</h3>
<h4 id='score'>Score: 0/0</h4>
<input id='rharder' onchange=" difficulty='harder'; putto('dharder'); " type="radio" name="chooseone" value="Harder"><label for="Harder">Harder <img id=iharder src=hardest.JPG title=Harder></img><div id='dharder'></div></label><br>
<input id='reasier' onchange=" difficulty='easier'; putto('deasier'); " type="radio" name="chooseone" value="Easier"><label for="Easier">Easier <img id=ieasier src=easiest.JPG title=easier></img><div id='deasier'></div></label><br>
</body>
</html>