<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Above the Fold Scrolling Quiz - RJM Programming - April, 2020</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>
div.sticky { /* Thanks to https://www.w3schools.com/css/css_positioning.asp */
position: -webkit-sticky; /* Safari */
position: sticky;
top: 50;
background-color: green;
border: 2px solid #4CAF50;
}
td {
text-align: center;
}
</style>
<script type='text/javascript'>
var lastchoice='';
var cursy=0, maxsy=0;
var trslots=[];
var cursuff=1;
var totqs=0, askedq=0, sofarqs=',-1,', diva='', kcnt=0, neg=1, movedelay=-800;
var divoptt='', divoptb='';
var score=0, xgoes=0, lastquestion='';
var myguess=-3;
var myscore=0;
var outof=0;
function assess(smy) {
var vp=document.getElementById('myp');
if (smy.value == myguess) {
myscore = myscore + 1;
vp.innerHTML = " Congratulations!<br> Score " + myscore + "/" + outof;
} else {
vp.innerHTML = " Bad luck!<br> Score " + myscore + " /" + outof;
}
myguess = -2;
}
function apickone() {
var d = new Date();
var n = d.getMilliseconds();
//alert(n);
//alert('http://www.rjmprogramming.com.au/Games/Battleshipsandcruisers/index2.php?clue=' + (n % 100));
myguess = (n % 100);
var vs=document.getElementById('mys');
vs.value = -1;
outof = outof + 1;
lastchoice='' + myguess;
return myguess;
}
function checkpos() {
var userans='';
var qrect=document.getElementById('mya').getBoundingClientRect();
var vsminyis=0, vsmaxyis=0;
var delayis=2000;
var minyis=qrect.x;
var maxyis=minyis;
maxyis+=qrect.width;
//alert('' + minyis + '/' + maxyis);
var ijk, vsrect=null, answerwas='';
xgoes++
var tds=document.getElementsByTagName('td');
cursuff=tds.length;
for (ijk=1; ijk<=cursuff; ijk++) {
if (tds[eval(-1 + ijk)]) {
if (tds[eval(-1 + ijk)].innerHTML.replace(/\ \;/g, '') != '') {
if (tds[eval(-1 + ijk)].innerHTML.replace(/\ \;/g, '').trim() == tds[eval(-1 + ijk)].innerHTML.replace(/\ \;/g, '').trim()) {
tds[eval(-1 + ijk)].style.backgroundColor='white';
vsrect=tds[eval(-1 + ijk)].getBoundingClientRect();
vsminyis=vsrect.x;
vsmaxyis=vsminyis;
vsmaxyis+=vsrect.width; // 800=1 200=4
//alert('' + tds[eval(-1 + ijk)].id + ': ' + tds[eval(-1 + ijk)].innerHTML + ' ' + vsminyis + '/' + vsmaxyis + ' vs ' + minyis + '/' + maxyis);
if ((vsminyis >= minyis && vsminyis <= maxyis) || (vsmaxyis >= minyis && vsmaxyis <= maxyis)) {
userans+=tds[eval(-1 + ijk)].innerHTML.replace(/\ \;/g, '');
//score+=eval(800 / Math.abs(movedelay)); //score++;
} else if ((minyis >= vsminyis && minyis <= vsmaxyis) || (maxyis >= vsminyis && maxyis <= vsmaxyis)) {
userans+=tds[eval(-1 + ijk)].innerHTML.replace(/\ \;/g, '');
//score+=eval(800 / Math.abs(movedelay)); //score++;
} //else {
//answerwas=' ... correct answer is ' + document.getElementById('tdanswerslot' + ijk).innerHTML.trim();
//delayis=7000;
//document.getElementById('divscore').innerHTML=('Bad luck' + answerwas).replace(' answer', ' ' + document.getElementById('smode').outerHTML.replace(' id=', ' data-id=').replace(' value="' + movedelay + '"', ' value="' + movedelay + '" selected') + ' Answer');
//kcnt++;
//}
//console.log(vsrect);
//console.log(qrect);
}
}
}
}
//alert('user answer is ' + userans + ' vs ' + lastchoice);
if (('' + userans) == ('' + lastchoice)) {
score+=eval(800 / Math.abs(movedelay)); //score++;
window.scrollTo(0,0);
} else {
answerwas=' ... correct answer is ' + lastchoice + ' (not ' + userans + ') for "' + lastquestion + '"';
delayis=7000;
window.scrollTo(0,0);
}
document.getElementById('xgoes').innerHTML='Score: ' + score + '/' + xgoes + answerwas;
document.getElementById('divoptt').innerHTML=divoptt; //document.getElementById('topt').style.position='absolute';
document.getElementById('divoptb').innerHTML=divoptb; //document.getElementById('bott').style.position='absolute';
setTimeout(pickquestion, delayis);
}
function pickquestion() {
document.getElementById('mya').click();
}
function dogbcralot() {
cursuff=1;
var tablerect=document.getElementById('tableanswer').getBoundingClientRect();
var trtemplate=document.getElementById('trslot1').outerHTML;
trslots.push(document.getElementById('trslot1').getBoundingClientRect());
while (trslots[eval(-1 + cursuff)].bottom + trslots[eval(-1 + cursuff)].height < tablerect.height) {
//alert('here');
document.getElementById('divanswer').innerHTML=document.getElementById('divanswer').innerHTML.replace('<tr><td', trtemplate.replace(/slot1/g, 'slot' + eval(1 + cursuff)) + '<tr><td');
cursuff++;
trslots.push(document.getElementById('trslot' + cursuff).getBoundingClientRect());
tablerect=document.getElementById('tableanswer').getBoundingClientRect();
maxsy=document.getElementById('trslot' + cursuff).getBoundingClientRect().bottom;
}
diva=document.getElementById('divanswer').innerHTML;
pickquestion();
}
function getScrollTop() { // thanks to https://stackoverflow.com/questions/871399/cross-browser-method-for-detecting-the-scrolltop-of-the-browser-window
if(typeof pageYOffset!= 'undefined'){
//most browsers except IE before #9
return pageYOffset;
}
else{
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
function ongoingmove() {
//alert(('' + window.scrollTop));
cursy=getScrollTop(); //eval(('' + window.scrollTop).replace('px',''));
cursy+=eval(neg * eval('' + 30));
if (cursy > maxsy) {
cursy-=60;
neg=-1;
}
if (document.getElementById('smode').value.replace('-800','').trim() != '') {
if (neg != 0) { window.scrollTo(0, cursy); }
setTimeout(ongoingmove, Math.abs(movedelay));
}
}
function moving(tv) {
if (document.getElementById('smode').value != tv) {
document.getElementById('smode').value=tv;
}
if (tv.replace('-800','').trim() != '') {
movedelay=eval('' + tv.replace('-',''));
ongoingmove();
}
}
function fixit(tdi) {
var rectis;
if (('' + tdi.id).indexOf('t') != -1) {
tdi.style.backgroundColor='orange';
rectis=document.getElementById('topt').getBoundingClientRect();
document.getElementById('topt').style.left='' + rectis.x + 'px';
document.getElementById('topt').style.position='fixed';
} else if (('' + tdi.id).indexOf('x') != -1) {
tdi.style.backgroundColor='orange';
rectis=document.getElementById('bott').getBoundingClientRect();
document.getElementById('bott').style.left='' + rectis.x + 'px';
document.getElementById('bott').style.position='fixed';
}
}
function getc(iois) {
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
if (aconto.body.innerHTML.trim() != '') {
//alert(aconto.body.innerHTML);
lastquestion=aconto.body.innerHTML.split('</p>')[0].split('>')[eval(-1 + aconto.body.innerHTML.split('</p>')[0].split('>').length)];
document.getElementById('swording').innerHTML=lastquestion;
}
}
}
}
}
function thisonl() {
divoptt=document.getElementById('divoptt').innerHTML;
divoptb=document.getElementById('divoptb').innerHTML;
var rectisa=document.getElementById('mya').getBoundingClientRect();
document.getElementById('overlayband').innerHTML='<div style="position:fixed;opacity:0.2;z-index:-5;top:150px;left:' + rectisa.left + 'px;width:' + rectisa.width + 'px;height:100vh;background-color:orange;"></div>';
rectisa=document.getElementById('xgoes').getBoundingClientRect();
document.getElementById('xgoes').style.left='' + rectisa.left + 'px';
document.getElementById('xgoes').style.top='' + rectisa.top + 'px';
document.getElementById('xgoes').style.position='fixed';
rectisa=document.getElementById('myh2').getBoundingClientRect();
document.getElementById('myh2').style.left='' + rectisa.left + 'px';
document.getElementById('myh2').style.top='' + rectisa.top + 'px';
document.getElementById('myh2').style.position='fixed';
rectisa=document.getElementById('myh1').getBoundingClientRect();
document.getElementById('myh1').style.left='' + rectisa.left + 'px';
document.getElementById('myh1').style.top='' + rectisa.top + 'px';
document.getElementById('myh1').style.position='fixed';
document.getElementById('mya').click();
}
</script>
</head>
<body style="width:100%;height:100%;" onload="if (1 == 1) { thisonl(); } else { dogbcralot(); }">
<script type='text/javascript'>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.write("<h2 id='myh1' title='Backgound image courtesy of Clipart Panda at http://www.clipartpanda.com/clipart_images/downloads-15907232' align='center'>Above the Fold Scrolling Quiz<font size=1> (Via questions of <a target=_blank title='Numbers guessing game' href='https://www2.stetson.edu/~efriedma/numbers.html'>What's Special About This Number?</a> ... thanks)</font></h2>");
} else {
document.write("<h1 id='myh1' title='Backgound image courtesy of Clipart Panda at http://www.clipartpanda.com/clipart_images/downloads-15907232' align='center'>Above the Fold Scrolling Quiz (Via questions of <a target=_blank title='Numbers guessing game' href='https://www2.stetson.edu/~efriedma/numbers.html'>What's Special About This Number?</a> ... thanks)</h1>");
}
</script>
<h2 id='myh2' align='center'>RJM Programming - April, 2020</h2>
<h3 align='center' id=xgoes>Score: 0/0</h3>
<div id=fixedcluewording style="text-align:center;vertical-align:top;border:20px inset red;position:fixed;top:200px;left:0px;width:96%;height:100px;background-color:yellow;z-index:234;text-align:left;font-size:24px;"><span id=swording style='margin-left:50px;margin-top:30px;background-color:transparent;'> Clue Wording Goes Here </span> <button onclick="neg=0; checkpos();" style="background-color:lightgreen;border:2px solid blue;">Lock in My Answer Scrolling</button><br>
<a id='mya' style='margin-left:48%;border-bottom:2px solid blue;' href='#fixedcluewording' onclick=" if (1 == 1) { document.getElementById('myiframe').src='//www.rjmprogramming.com.au/Games/Battleshipsandcruisers/index2.php?clue=' + apickone(); } else { window.open('//www.rjmprogramming.com.au/Games/Battleshipsandcruisers/index2.php?clue=' + apickone(),'Clue' + myguess,'top=288,left=800,width=400,height=70',true); } "> </a>
</div>
<div id='divoptt'><table id=topt style="text-align:center;vertical-align:top;border:20px inset green;position:absolute;top:360px;left:0px;width:196%;height:100px;background:linear-gradient(to right, yellow, pink);z-index:234;text-align:left;font-size:24px;">
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t0>0</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t1>1</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t2>2</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t3>3</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t4>4</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t5>5</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t6>6</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t7>7</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t8>8</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as first number' onclick='fixit(this);' id=t9>9</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table></div>
<div id='divoptb'><table id=bott style="text-align:center;vertical-align:top;border:20px inset green;position:absolute;top:490px;left:0px;width:196%;height:100px;background:linear-gradient(to right, yellow, pink);z-index:234;text-align:left;font-size:24px;">
<tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x0>0</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x1>1</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x2>2</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x3>3</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x4>4</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x5>5</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x6>6</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x7>7</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x8>8</td><td> </td><td style='background-color:white;cursor:pointer;border:1px solid blue;' title='Click to lock me in as second number' onclick='fixit(this);' id=x9>9</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table></div>
<button id=fixedclue style="text-align:center;border:20px inset red;position:fixed;top:620px;left:0px;width:99%;height:100px;background-color:yellow;z-index:234;font-size:24px;" onclick="neg=0; pickquestion();">Clue</button>
</div>
<select style="display:none;font-size:12px; color: black;" id='mys' onchange='assess(this);'><option value="-1">Answer?</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
</select>
<div id=divscore style='z-index:467;position:fixed;left:30px;top:200px;background-color:yellow;'></div>
<iframe id=myiframe style='display:none;' onload='getc(this);' src=''></iframe>
<div id=overlayband></div>
</body>
</html>