<!doctype html>
<html>
<head>
<title>Themed Supervisor - RJM Programming - February, 2016</title>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes," />
<script data-type='script' id='myscr1' src="middle_interest.js?total=9&delay=1100&theme=ESL&oc1=ITblog/htmljavascript-hearing-and-listening-primer-tutorial/&te1=HTMLCSS/listen_to.html&bv1=Hearing,%20Listening&oc2=ITblog/english-learning-listening-class-love-at-first-bite/&te2=TESOL/ListeningTask2/&bv2=Love%20at%20First%20Bite&oc3=ITblog/english-learning-listening-class-tapioca-five-ways/&te3=TESOL/ListeningTask/&bv3=Tapioca%20Five%20Ways" type="text/javascript"></script>
<script data-type='script' id='myscr2' src="middle_interest.js?total=9&delay=1200&theme=ESL&oc1=ITblog/html-adjectives-vs-adverbs-lesson-plan-checkboxes-tutorial/&te1=HTMLCSS/adjective_or_adverb.html&bv1=Adjectives%20or%20Adverbs&oc2=ITblog/htmljavascript-sentence-conjunction-game-tutorial/&te2=HTMLCSS/Canvas/Game/Chalkboard/conjunction_chalkboard.html&bv2=Conjunctions&oc3=ITblog/htmljavascript-present-perfect-progressive-primer-tutorial/&te3=HTMLCSS/present_perfect_progressive_or_simple_or_non_progressive.html&bv3=Perfect%20Perfect%20Progressive" type="text/javascript"></script>
<script data-type='script' id='myscr3' src="middle_interest.js?total=9&delay=1300&theme=ESL&oc1=ITblog/htmljavascript-choice-of-several-tutorial/&te1=HTMLCSS/button_choice_of_two.html%3fmode%3dradio&bv1=Modal%20Auxiliary%20Verb&oc2=ITblog/english-past-tense-irregular-verb-spelling-game/&te2=ITblog/english-past-tense-irregular-verb-spelling-game/%23content&bv2=Past%20Tense%20Irregular&oc3=ITblog/htmljavascript-sentence-preposition-ing-game-tutorial/&te3=HTMLCSS/SentencePrepositioning/&bv3=Preposition%27ing" type="text/javascript"></script>
<script data-type='script' id='myscr4' src="middle_interest.js?total=9&delay=1400&theme=ESL&oc1=ITblog/esl-vocabulary-getting-warmer-image-tutorial/&te1=pre_under_the_stairs.html&bv1=Get%20Warmer&oc2=ITblog/htmljavascript-english-collective-noun-game-tutorial/&te2=HTMLCSS/collective_nouns.html&bv2=Collective%20Nouns&oc3=ITblog/english-learning-vocabulary-living-room/&te3=wordpress/livingroom.html&bv3=Living%20Room" type="text/javascript"></script>
<script data-type='script' id='myscr5' src="middle_interest.js?total=9&delay=1500&theme=ESL&oc1=&te1=&bv1=" type="text/javascript"></script>
<script data-type='script' id='myscr6' src="middle_interest.js?total=9&delay=1600&theme=ESL&oc1=ITblog/php-pictogram-word-decoding-game-primer-tutorial/&te1=PHP/decodepictowords.php&bv1=Pictogram%20Decode&oc2=ITblog/past-present-tense/&te2=ITblog/past-present-tense/%23content&bv2=Past%20and%20Present%20Tense&oc3=ITblog/mixed-up-song-lyrics-game-primer-tutorial/&te3=HTMLCSS/hart_via_ella.html&bv3=Song%20Lyrics" type="text/javascript"></script>
<script data-type='script' id='myscr7' src="middle_interest.js?total=9&delay=1700&theme=ESL&oc1=ITblog/php-target-word-game-mobile-friendly-tutorial/&te1=PHP/target_share_challenge.php&bv1=Target%20Words%20Game&oc2=ITblog/htmljavascript-scrabbling-snakes-game-email-tutorial/&te2=HTMLCSS/word_jumble.html&bv2=Scrabbling%20Snakes&oc3=ITblog/word-guessing-game-for-two-primer-tutorial/&te3=HTMLCSS/wordguessgame.html&bv3=Word%20Game%20for%20Two" type="text/javascript"></script>
<script data-type='script' id='myscr8' src="middle_interest.js?total=9&delay=1800&theme=ESL&oc1=ITblog/language-word-association-game-tutorial/&te1=PHP/YQL/Thesaurus/word_association.php&bv1=Word%20Associations&oc2=ITblog/htmljavascript-homonyms-game-tutorial/&te2=HTMLCSS/homonym_game.html&bv2=Homonyms&oc3=ITblog/yahoo-yql-json-thesaurus-and-translation-tutorial/&te3=PHP/YQL/Thesaurus/Ajax_yql_thesaurus.html&bv3=Thesaurus" type="text/javascript"></script>
<script data-type='script' id='myscr9' src="middle_interest.js?total=9&delay=1900&theme=ESL&oc1=ITblog/htmljavascript-esl-reveal-game-tutorial/&te1=HTMLCSS/let_us.html&bv1=Sentence%20Reveals&oc2=ITblog/php-rhopalic-letter-sentence-game-primer-tutorial/&te2=PHP/rhopalic_letter_sentence.php&bv2=Rhopalic%20Letter%20Sentence&oc3=ITblog/acronyms-lookup-follow-up-tutorial/&te3=PHP/JSON/Acronym/&bv3=Acronyms" type="text/javascript"></script>
<script type='text/javascript'>
var theme="ESL";
var last=null;
var wis='100%';
var his='100%';
var did='mydiv';
var dis='';
var leeway=90;
var hleeway=330;
var threebuttons="<button>1</button><button>2</button><button>3</button>";
var threebuttons_ii_ii="<button>1</button><button>2</button><button>3</button>";
// Listening and hearing
var threebuttons_i_i="<button title='http://www.rjmprogramming.com.au/HTMLCSS/listen_to.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-hearing-and-listening-primer-tutorial/')>Hearing and Listening</button><button title='http://www.rjmprogramming.com.au/TESOL/ListeningTask2/' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/english-learning-listening-class-love-at-first-bite/')>Love at First Bite</button><button title='http://www.rjmprogramming.com.au/TESOL/ListeningTask/' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/english-learning-listening-class-tapioca-five-ways/')>Tapioca Five Ways</button>";
// Vocabulary
var threebuttons_ii_i="<button title='http://www.rjmprogramming.com.au/pre_under_the_stairs.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/esl-vocabulary-getting-warmer-image-tutorial/')>Getting Warmer</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/collective_nouns.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-english-collective-noun-game-tutorial/')>Collective Nouns</button><button title='http://www.rjmprogramming.com.au/wordpress/livingroom.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/english-learning-vocabulary-living-room/')>Living Room</button>";
// Collaboration
var threebuttons_iii_i="<button title='http://www.rjmprogramming.com.au/PHP/target_share_challenge.php' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/php-target-word-game-mobile-friendly-tutorial/')>Target Word Game</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/word_jumble.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-scrabbling-snakes-game-email-tutorial/')>Scrabbling Snakes</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/wordguessgame.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/word-guessing-game-for-two-primer-tutorial/')>Word Game for Two</button>";
// Thesaurus and dictionary
var threebuttons_iii_ii="<button title='http://www.rjmprogramming.com.au/PHP/YQL/Thesaurus/word_association.php' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/language-word-association-game-tutorial/')>Word Association</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/homonym_game.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-homonyms-game-tutorial/')>Homonyms</button><button title='http://www.rjmprogramming.com.au/PHP/YQL/Thesaurus/Ajax_yql_thesaurus.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/yahoo-yql-json-thesaurus-and-translation-tutorial/')>Thesaurus</button>";
// Grammar
var threebuttons_i_ii="<button title='http://www.rjmprogramming.com.au/HTMLCSS/adjective_or_adverb.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/html-adjectives-vs-adverbs-lesson-plan-checkboxes-tutorial/')>Adjectives vs Adverbs</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/Canvas/Game/Chalkboard/conjunction_chalkboard.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-sentence-conjunction-game-tutorial/')>Conjunctions</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/present_perfect_progressive_or_simple_or_non_progressive.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-present-perfect-progressive-primer-tutorial/')>Present Perfect Progressive</button>";
// More Grammar
var threebuttons_i_iii="<button title='http://www.rjmprogramming.com.au/HTMLCSS/button_choice_of_two.html?mode=radio' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-choice-of-several-tutorial/')>Modal Auxiliary Verbs</button><button title='http://www.rjmprogramming.com.au/ITblog/english-past-tense-irregular-verb-spelling-game/#content' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/english-past-tense-irregular-verb-spelling-game/')>Past Tense Irregular</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/SentencePrepositioning/' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-sentence-preposition-ing-game-tutorial/')>Preposition'ing</button>";
// Ordering
var threebuttons_ii_iii="<button title='http://www.rjmprogramming.com.au/PHP/decodepictowords.php' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/php-pictogram-word-decoding-game-primer-tutorial/')>Pictogram Decoding</button><button title='http://www.rjmprogramming.com.au/ITblog/past-present-tense/#content' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/past-present-tense/')>Past and Present Tense</button><button title='http://www.rjmprogramming.com.au/HTMLCSS/hart_via_ella.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/mixed-up-song-lyrics-game-primer-tutorial/')>Song Lyrics</button>";
// Sentences
var threebuttons_iii_iii="<button title='http://www.rjmprogramming.com.au/HTMLCSS/let_us.html' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/htmljavascript-esl-reveal-game-tutorial/')>Sentence Reveal</button><button title='http://www.rjmprogramming.com.au/PHP/rhopalic_letter_sentence.php' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/php-rhopalic-letter-sentence-game-primer-tutorial/')>Rhopalic Letter Sentence</button><button title='http://www.rjmprogramming.com.au/PHP/JSON/Acronym/' onclick=ifis(this,'http://www.rjmprogramming.com.au/ITblog/acronyms-lookup-follow-up-tutorial/')>Acronyms</button>";
function ifis(ib,toif) {
if (last) {
last.style.border='';
}
last=ib;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
if (document.getElementById('mymode').value.indexOf('eb') != -1) {
window.open(ib.title, '_blank');
} else {
window.open(toif, '_blank');
}
} else if (document.getElementById('mymode').value.indexOf('eb') != -1) {
if (ib.title.indexOf('rjmprogramming.com.au') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById(did).innerHTML="<iframe id='myif' src='" + ib.title + "' style='width:" + wis + ";height:" + his + ";'></iframe>";
} else {
document.getElementById('myif').src=ib.title;
document.getElementById('myif').style.width=wis;
}
} else if (ib.title.indexOf('/') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById(did).innerHTML="<iframe id='myif' src='" + ib.title + "' style='width:" + wis + ";height:" + his + ";'></iframe>";
} else {
document.getElementById('myif').src=ib.title;
document.getElementById('myif').style.width=wis;
}
} else {
document.getElementById(did).innerHTML="<embed id='myif' src='" + ib.title + "' style='width:" + wis + ";height:" + his + ";'></embed>";
}
} else {
if (toif.indexOf('rjmprogramming.com.au') != -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById(did).innerHTML="<iframe id='myif' src='" + toif + "' style='width:" + wis + ";height:" + his + ";'></iframe>";
} else {
document.getElementById('myif').src=toif;
document.getElementById('myif').style.width=wis;
}
} else if (toif.indexOf('/') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.getElementById(did).innerHTML="<iframe id='myif' src='" + toif + "' style='width:" + wis + ";height:" + his + ";'></iframe>";
} else {
document.getElementById('myif').src=toif;
document.getElementById('myif').style.width=wis;
}
} else {
document.getElementById(did).innerHTML="<embed id='myif' src='" + toif + "' style='width:" + wis + ";height:" + his + ";'></embed>";
}
}
ib.style.border='2px red solid';
}
function andthen() {
var ihtml="<div id='mydiv' style=' overflow: auto; -webkit-overflow-scrolling:touch; background-color: yellow; position: absolute; z-index:8; left: lis; top: tis; width: wis; height: his;'><iframe id='myif' src='http://www.rjmprogramming.com.au/HTMLCSS/listen_to.html' style='width:100%;height:100%;'></iframe></div>";
var elem1 = document.getElementById("myh1");
var tis = eval(eval(window.getComputedStyle(elem1, null).getPropertyValue("height").replace('px','')) + 45);
elem1 = document.getElementById("mytable");
var lis = 10; // eval(window.getComputedStyle(elem1, null).getPropertyValue("left").replace('px',''));
//his = eval(window.getComputedStyle(elem1, null).getPropertyValue("height").replace('px',''));
//wis = eval(window.getComputedStyle(elem1, null).getPropertyValue("width").replace('px',''));
ihtml=ihtml.replace('his','' + eval(eval(window.getComputedStyle(elem1, null).getPropertyValue("height").replace('px','')) - leeway) + 'px').replace('wis','' + eval(eval(window.getComputedStyle(elem1, null).getPropertyValue("width").replace('px','')) - hleeway) + 'px').replace('lis','' + eval(lis + hleeway / 2) + 'px').replace('tis','' + eval(tis + leeway / 2) + 'px');
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
wis='' + eval(eval(window.getComputedStyle(elem1, null).getPropertyValue("width").replace('px','')) - hleeway) + 'px';
his = '' + eval(eval(window.getComputedStyle(elem1, null).getPropertyValue("height").replace('px','')) - leeway) + 'px';
ihtml=ihtml.replace('width:100%;', 'width:' + wis + ';').replace('height:100%;', 'width:' + his + ';');
}
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
ihtml=''
wis='100%';
his='100%';
}
document.body.innerHTML+=ihtml;
atstart();
}
function atstart() {
var tds=document.getElementsByTagName('td');
if (tds.length > 0) {
var bts=document.getElementsByTagName('button');
if (bts.length > 0) {
//if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
// tds[0]=tds[0];
//} else {
bts[0].onclick();
//}
}
}
}
function itdepends(inh) {
var ct='Change this', cellno=1, pregs, gs, hw='', cellmemno=1, outh=inh, cells, kc, ic, thisbutton, precells, jc=0, lastsuff='', postcell, suff='<br>', xlast=' setTimeout(andthen, 200); ', zlast='', lastc='';
var inask=location.search.split('ask=')[1] ? location.search.split('ask=')[1].split('&')[0] : ' ';
if (inask != ' ') {
cells=inh.split('</h1>');
thisbutton=cells[0] + '</h1>';
dis=thisbutton.replace(/"/g, "' + String.fromChar(34) '");
lastc="<scr" + "ipt type='text/javascript'> var dis" + jc + "=" + '"' + dis + '"' + "; document.write(prompt(" + '"' + "Change this Theme and/or its dropdown?" + '"' + ",dis" + jc + ")); </scr" + "ipt>";
outh=outh.replace(thisbutton, lastc);
lastc='';
cells=inh.split('</td>');
for (ic=0; ic<cells.length; ic++) {
if (cells[ic].indexOf('</button>') != -1) {
precells=cells[ic].split('</button>');
for (kc=0; kc<precells.length; kc++) {
if (precells[kc].replace('</div>','').indexOf('<button') != -1) {
postcell=(' ' + precells[kc]).split('<button');
thisbutton='<button' + postcell[1] + '</button>';
suff='';
ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + eval(-1 + precells.length) + ') in cell ' + cellno + ' of 9 ... nothing is allowed';
if (outh.indexOf(thisbutton + '<br>') != -1) {
suff='<br>';
thisbutton += suff;
lastsuff=suff;
} else if (outh.indexOf(thisbutton + '<') == -1) {
gs=outh.split(thisbutton);
pregs=gs[1].split('<');
//alert(pregs[0]);
suff=pregs[0];
thisbutton += suff;
lastsuff=suff;
} else {
ct='Change this ' + hw + 'web application button ' + cellmemno + ' (of ' + cellmemno + ') in cell ' + cellno + ' of 9 ... nothing is allowed ... to add more, best delimiter between buttons is ' + lastsuff + ' ';
}
jc++;
dis=thisbutton.replace(/"/g, "' + String.fromChar(34) '");
lastc="<scr" + "ipt type='text/javascript'> var dis" + jc + "=" + '"' + dis + '"' + "; document.write(prompt(" + '"' + ct + "?" + '"' + ",dis" + jc + ")); </scr" + "ipt>";
outh=outh.replace(thisbutton, lastc);
//alert(outh);
if (suff != '') {
cellmemno++;
} else {
cellno++;
cellmemno=1;
lastsuff='';
if (cellno == 5) {
hw='hidden ';
} else {
hw='';
}
}
}
}
}
}
}
if (lastc != '') outh=outh.replace(lastc, lastc.replace('</scr', xlast + '</scr'));
//alert(outh);
return outh;
}
</script>
</head>
<body style='background-color: yellow;'>
<script type='text/javascript'>
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
did='dmiddle';
threebuttons_ii_ii="New Window";
}
var outhtml="<h1 id='myh1' align='center'>" + theme + " <select id='mymode' onchange=" + '"' + " if (this.value.length == 0) { location.href='middle_interest.html?ask=y'; } " + '"' + "><option value='Tutorial Web Applications'>Tutorial Web Applications</option><option value='Tutorials'>Tutorials</option><option value=''>Interactive Mode Asking</option></select></h1><table border=1 align='center' style='background-color: pink; position: relative; z-index: 1; width:100%;height:700px;' id='mytable'>";
outhtml+="<tr style='vertical-align: top;'><td>" + threebuttons_i_i.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td><td align='center' style='float: top;'>" + threebuttons_ii_i.replace('</button><button','</button> <button').replace('</button><button','</button> <button').replace('</button><button','</button> <button') + "</td><td align='right'>" + threebuttons_iii_i.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td></tr>";
outhtml+="<tr style='vertical-align: middle;'><td>" + threebuttons_i_ii.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td><td id='middle' align='center'><div id='dmiddle' style=' overflow: auto; -webkit-overflow-scrolling:touch; background-color: yellow; '>" + threebuttons_ii_ii.replace('</button><button','</button> <button').replace('</button><button','</button> <button').replace('</button><button','</button> <button') + "</div></td><td align='right'>" + threebuttons_iii_ii.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td></tr>";
outhtml+="<tr style='vertical-align: bottom; '><td style='float: bottom;text-align: left;'>" + threebuttons_i_iii.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td><td style='float: bottom; text-align: center;'>" + threebuttons_ii_iii.replace('</button><button','</button> <button').replace('</button><button','</button> <button').replace('</button><button','</button> <button') + "</td><td style='float: bottom; text-align: right;'>" + threebuttons_iii_iii.replace('</button><button','</button><br><button').replace('</button><button','</button><br><button') + "</td></tr>";
outhtml+="</table>";
document.write(itdepends(outhtml));
if ((location.search.split('ask=')[1] ? location.search.split('ask=')[1].split('&')[0] : ' ') == ' ') setTimeout(andthen, 200);
</script>
</body>
</html>