<!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 name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes," />
<script type='text/javascript'>
var theme="ESL";
var last=null;
var wis='100%';
var his='100%';
var did='mydiv';
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/html-adjectives-vs-adverbs-lesson-plan-checkboxes-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();
//}
}
}
}
</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'><option value='Tutorial Web Applications'>Tutorial Web Applications</option><option value='Tutorials'>Tutorials</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 + "</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 + "</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 + "</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(outhtml);
setTimeout(andthen, 200);
</script>
</body>
</html>