<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Array Work - RJM Programming - September, 2020</title>
<style>
th, tr { text-align: center; vertical-align: top; }
textarea { width: 90%; }
.code { background-color: yellow; }
.gcode { border: 12px solid darkgreen; }
.bcode { border: 12px solid darkblue; }
.pcode { border: 12px solid olive; }
.ocode { border: 12px solid purple; }
button { border-style: dashed !important; }
select { border-style: dashed !important; width: 87px; }
</style>
<script type='text/javascript'>
// 1️⃣
var score=0, goes=0, seconds=0, yay=false;
var clickcnt=0;
var csuff="";
var prevval="";
var allplanets=["Mercury","Venus","Earth","Mars","Jupiter","Saturn","Uranus","Neptune","Pluto"];
var names=['Blaire', 'Ash', 'Coco', 'Dean', 'Georgia'];
var popElement="";
var shiftElement="";
var lastcol="white";
var ppsucols=['darkgreen','darkblue','olive','purple'];
function seccount() {
if (yay) {
document.getElementById('score').innerHTML=' ... Goes (10 good, less very good) ' + goes + ' / ' + seconds + ' Seconds';
var anot=prompt('Well done. ' + document.getElementById('score').innerHTML + ' Another game?', ' ');
if (anot == null) { anot=''; }
if (anot != '') { location.href=document.URL.split('#')[0] + Math.floor(Math.random() * 178654); } else { yay=false; }
}
seconds++;
document.getElementById('score').innerHTML=' ... Goes (10 good, less very good) ' + goes + ' / ' + seconds + ' Seconds';
setTimeout(seccount, 1000);
}
function doit() {
var ibutsare=0;
var popsel='<select class=bcode id=selpop onchange=popit(this);><option value="">pop</option><option value="names.pop();">names.pop();</option><option value="popElement=names.pop();">popElement=names.pop();</option></select>';
var shiftsel='<select class=pcode id=selshift onchange=shiftit(this);><option value="">shift</option><option value="names.shift();">names.shift();</option><option value="shiftElement=names.shift();">shiftElement=names.shift();</option></select>';
var unshiftsel="<select class=ocode id=selunshift onchange=unshiftit(this);><option value=\"\">unshift</option><option value=\"names.unshift('Mercury');\">names.unshift('Mercury');</option><option value=\"names.unshift('Venus');\">names.unshift('Venus');</option><option value=\"names.unshift('Earth');\">names.unshift('Earth');</option><option value=\"names.unshift('Mars');\">names.unshift('Mars');</option><option value=\"names.unshift('Jupiter');\">names.unshift('Jupiter');</option><option value=\"names.unshift('Saturn');\">names.unshift('Saturn');</option><option value=\"names.unshift('Uranus');\">names.unshift('Uranus');</option><option value=\"names.unshift('Neptune');\">names.unshift('Neptune');</option><option value=\"names.unshift('Pluto');\">names.unshift('Pluto');</option><option value=\"names.unshift(popElement);\">names.unshift(popElement);</option><option value=\"names.unshift(shiftElement);\">names.unshift(shiftElement);</option></select>";
var pushsel="<select class=gcode id=selpush onchange=pushit(this);><option value=\"\">push</option><option value=\"names.push('Mercury');\">names.push('Mercury');</option><option value=\"names.push('Venus');\">names.push('Venus');</option><option value=\"names.push('Earth');\">names.push('Earth');</option><option value=\"names.push('Mars');\">names.push('Mars');</option><option value=\"names.push('Jupiter');\">names.push('Jupiter');</option><option value=\"names.push('Saturn');\">names.push('Saturn');</option><option value=\"names.push('Uranus');\">names.push('Uranus');</option><option value=\"names.push('Neptune');\">names.push('Neptune');</option><option value=\"names.push('Pluto');\">names.push('Pluto');</option><option value=\"names.push(popElement);\">names.push(popElement);</option><option value=\"names.push(shiftElement);\">names.push(shiftElement);</option></select>";
if (document.URL.indexOf('?sspg=') != -1) {
//alert(1);
document.getElementById('sgame').innerHTML=' try to get to <br><font size=1>names = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];</font>';
var prewoc=(document.getElementById('workon').innerText || document.getElementById('workon').contentWindow || document.getElementById('workon').contentDocument).split('[')[0] + '[';
var woc=prewoc + ']' + (document.getElementById('workon').innerText || document.getElementById('workon').contentWindow || document.getElementById('workon').contentDocument).split(']')[1];
woc=woc.replace('[]', '["' + allplanets[eval(1 + Math.floor(Math.random() * eval(-2 + allplanets.length)))] + '"]');
//alert('5:' + eval(1 + Math.floor(Math.random() * eval(-2 + allplanets.length))));
var another=allplanets[eval(1 + Math.floor(Math.random() * eval(-2 + allplanets.length)))];
//alert(another);
while (woc.indexOf('"' + another + '"') != -1) {
another=allplanets[eval(1 + Math.floor(Math.random() * eval(-2 + allplanets.length)))];
}
//alert(another);
woc=woc.replace('"]', '","' + another + '"]');
while (woc.indexOf('"' + another + '"') != -1) {
another=allplanets[eval(1 + Math.floor(Math.random() * eval(-2 + allplanets.length)))];
}
//alert(another);
woc=woc.replace('"]', '","' + another + '"]');
eval('names=[' + woc.split('[')[1].split(']')[0] + ']');
document.getElementById('workon').innerHTML=woc;
var butsare=document.getElementsByTagName('button');
for (var ij=0; ij<4; ij++) {
for (ibutsare=0; ibutsare<butsare.length; ibutsare++) {
if (document.getElementById('th' + ('' + butsare[ibutsare].id + ' ').substring(1).trim()).innerHTML.indexOf('<select') == -1) {
butsare[ibutsare].style.visibility='hidden';
document.getElementById(('' + butsare[ibutsare].id + ' ').substring(1).trim() + 'code').value='';
document.getElementById(('' + butsare[ibutsare].id + ' ').substring(1).trim() + 'code').rows=1;
document.getElementById(('' + butsare[ibutsare].id + ' ').substring(1).trim() + 'code').style.visibility='hidden';
document.getElementById('th' + ('' + butsare[ibutsare].id + ' ').substring(1).trim()).innerHTML=eval(('' + butsare[ibutsare].id + ' ').substring(1).trim() + 'sel');
}
}
}
setTimeout(seccount, 1000);
}
eval((document.getElementById('workon').innerText || document.getElementById('workon').contentWindow || document.getElementById('workon').contentDocument));
}
function cc(incont) {
var ns="0123456789";
clickcnt++;
csuff=" /" + "/ ";
var ccc='' + clickcnt;
for (var ij=0; ij<ccc.length; ij++) {
csuff+='&#' + eval(48 + eval('' + ns.indexOf(ccc.substring(ij).substring(0,1)))) + ';️⃣';
}
//csuff+='️⃣';
return incont.replace(';', '; ' + csuff);
}
function documentgetElementById(elid, cont) {
var cprefix='', csuffix='';
if (elid != 'workon') {
if (elid.indexOf('push') != -1) {
lastcol=ppsucols[0]; //'lightgreen';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('pop') != -1) {
lastcol=ppsucols[1]; //'lightblue';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('unshift') != -1) {
lastcol=ppsucols[3]; //'orange';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
} else if (elid.indexOf('shift') != -1) {
lastcol=ppsucols[2]; //'pink';
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
}
} else {
cprefix='<font color=' + lastcol + '>';
csuffix='</font>';
}
if (('' + document.getElementById(elid).outerHTML).indexOf('<textarea') == 0) {
cprefix='';
csuffix='';
if (elid == 'workon') {
document.getElementById(elid).value+=cont;
} else {
document.getElementById(elid).value=cont;
}
} else {
while (cont.indexOf(String.fromCharCode(10)) != -1) {
cont=cont.replace(String.fromCharCode(10), '<br>');
}
if (elid == 'workon') {
document.getElementById(elid).innerHTML+=cprefix + cont + csuffix;
} else {
document.getElementById(elid).innerHTML+=cprefix + cont + csuffix;
}
}
}
function pushit(obutsel) {
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
goes++;
prevval=document.getElementById('pushcode').value + String.fromCharCode(10);
document.getElementById('pushcode').value=obutsel.value;
document.getElementById('pushcode').style.visibility='visible';
} else if (('' + obutsel.outerHTML).indexOf('<select') == 0) {
return;
}
eval(document.getElementById('pushcode').value);
documentgetElementById('pushresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
document.getElementById('pushcode').rows=eval(1 + eval('' + document.getElementById('pushcode').rows));
document.getElementById('pushcode').value=prevval + obutsel.value;
obutsel.value='';
if (('' + names).replace(/\ /g,'') == 'Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus,Neptune,Pluto') {
yay=true;
}
}
}
function popit(obutsel) {
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
goes++;
prevval=document.getElementById('popcode').value + String.fromCharCode(10);
document.getElementById('popcode').value=obutsel.value;
document.getElementById('popcode').style.visibility='visible';
} else if (('' + obutsel.outerHTML).indexOf('<select') == 0) {
return;
}
eval(document.getElementById('popcode').value);
documentgetElementById('popresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10) + "console.log('// ' + popElement);" + String.fromCharCode(10) + '/' + '/ ' + popElement + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
document.getElementById('popcode').rows=eval(1 + eval('' + document.getElementById('popcode').rows));
document.getElementById('popcode').value=prevval + obutsel.value;
obutsel.value='';
if (('' + names).replace(/\ /g,'') == 'Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus,Neptune,Pluto') {
yay=true;
}
}
}
function shiftit(obutsel) {
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
goes++;
prevval=document.getElementById('shiftcode').value + String.fromCharCode(10);
document.getElementById('shiftcode').value=obutsel.value;
document.getElementById('shiftcode').style.visibility='visible';
} else if (('' + obutsel.outerHTML).indexOf('<select') == 0) {
return;
}
eval(document.getElementById('shiftcode').value);
documentgetElementById('shiftresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10) + "console.log('// ' + shiftElement);" + String.fromCharCode(10) + '/' + '/ ' + shiftElement + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
document.getElementById('shiftcode').rows=eval(1 + eval('' + document.getElementById('shiftcode').rows));
document.getElementById('shiftcode').value=prevval + obutsel.value;
obutsel.value='';
if (('' + names).replace(/\ /g,'') == 'Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus,Neptune,Pluto') {
yay=true;
}
}
}
function unshiftit(obutsel) {
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
goes++;
prevval=document.getElementById('unshiftcode').value + String.fromCharCode(10);
document.getElementById('unshiftcode').value=obutsel.value;
document.getElementById('unshiftcode').style.visibility='visible';
} else if (('' + obutsel.outerHTML).indexOf('<select') == 0) {
return;
}
eval(document.getElementById('unshiftcode').value);
documentgetElementById('unshiftresult',cc("console.log('// ' + names);" + String.fromCharCode(10) + ('/' + '/ ' + names).replace(/\,/g,', ') + String.fromCharCode(10)));
documentgetElementById('workon',String.fromCharCode(10) + 'names = [' + ("'" + names + "'").replace(/\,/g, "', '") + '];' + csuff);
if (('' + obutsel.outerHTML).indexOf('<select') == 0 && obutsel.value != '') {
document.getElementById('unshiftcode').rows=eval(1 + eval('' + document.getElementById('unshiftcode').rows));
document.getElementById('unshiftcode').value=prevval + obutsel.value;
obutsel.value='';
if (('' + names).replace(/\ /g,'') == 'Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus,Neptune,Pluto') {
yay=true;
}
}
}
</script>
</head>
<body onload=" doit(); ">
<h1>Array Work or <a target=_blank href='./array_work.html?sspg=y'>Solar Systems Planet Game</a></h1>
<h3>RJM Programming - September, 2020<span id=score></span></h3>
<h4>Thanks to <a target=_blank title='Useful link, thanks' href='//www.positronx.io/javascript-array-push-pop-shift-unshift-methods/'>https://www.positronx.io/javascript-array-push-pop-shift-unshift-methods/</a></h4><br><br>
<table style=width:100%; border=25>
<tr><th colspan=5>
<tr><th>Work on ...<span id=sgame></span></th><th id=thpush><button id=bpush class=gcode onclick=pushit(this);>push</button></th><th id=thpop><button id=bpop class=bcode onclick=popit(this);>pop</button></th><th id=thshift><button id=bshift class=pcode onclick=shiftit(this);>shift</button></th><th id=thunshift><button id=bunshift class=ocode onclick=unshiftit(this);>unshift</button></th></tr>
<tr><td><div contenteditable=true data-rows=25 id=workon>var names = ['Blaire', 'Ash', 'Coco', 'Dean', 'Georgia']; // 0️⃣</div></td><td><textarea class=gcode id=pushcode>names.push('Annie', 'Li');</textarea><br><div data-rows=15 id=pushresult></div></td><td><textarea class=bcode id=popcode>popElement=names.pop();</textarea><br><div data-rows=15 id=popresult></div></td><td><textarea class=pcode id=shiftcode>shiftElement=names.shift();</textarea><br><div data-rows=15 id=shiftresult></div></td><td><textarea class=ocode id=unshiftcode>names.unshift('Zachary', 'Millicent');</textarea><br><div data-rows=15 id=unshiftresult></div></td></tr>
</table>
</body>
</html>