<!doctype html>
<head>
<title>ESL Vocabulary Game - Under the Stairs++ - Reworking the HTML Map Tag - RJM Programming - November, 2015</title>
<script type='text/javascript'>
var mydivbit='';
var utsifo=null;
var ovt=null;
var aconto=null;
var startwith = location.search.split('startwith=')[1] ? location.search.split('startwith=')[1].split('&')[0] : "";
var wasih='';
var choice='';
var images, maps, areas;
var contents='';
var objects=new Array();
var thisobj='';
var lastobj='';
var htmlchoice='under_the_stairs.html';
var lasthtmlchoice='under_the_stairs.html';
var snum=-1;
var midis='';
var amin=false;
var lastx=0.0, lasty=0.0;
var smallesth=-1.0;
var doneonce=0;
var places=["Living Room","wordpress/livingroom.html","Living Room Corner","livingroom_corner.html","Bathroom Corner","bathroom_corner.html","Kitchen Corner","KitchenCorner/index.html","Laundry Corner","wordpress/laundry_things.html","Study Corner","studycorner.html","Where is Wally?","where_is_wally.html"];
function dostuff(iois) {
if (iois != null) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
utsifo=document.getElementById('utsif');
if (choice.indexOf('.htm') != -1 && htmlchoice != 'under_the_stairs.html') {
doneonce = 0;
contents=aconto.body.innerHTML;
if (contents != "") process();
}
}
}
}
}
function overtopforabit() {
if (document.URL.indexOf('?') == -1) {
mydivbit = '<div id="ovti" style="opacity:0.8;position:absolute;z-index:5;top:0;left:0;width:100%;height:1133;"></div>';
var selih="<option value=''>Vocabulary [Under the Stairs] Game - optionally choose mode of use [Click and Be Prompted (selected in 20 seconds)] vs Find Prompted Object ... below ...</option><option value='" + utsifo.src.replace('.html','') + "'>Under the Stairs - Click and Be Prompted</option><option value='" + utsifo.src + "'>Under the Stairs - Find Prompted Object</option>";
var prefixbit='';
for (var ip=0; ip<eval(places.length); ip+=2) {
prefixbit='';
if (places[eval(ip + 0)].indexOf('Wally') == -1) prefixbit="<option value='" + places[eval(ip + 1)].replace('.html','') + "'>" + places[eval(ip + 0)] + " - Click and Be Prompted</option>";
selih+=prefixbit + "<option value='" + places[eval(ip + 1)] + "'>" + places[eval(ip + 0)] + " - Find Prompted Object</option>";
}
//mydivbit = mydivbit.replace("</div>", "<br><br><br><br> <select style='font-size:18px;background-color:yellow;' onchange='chooseone(this);' id='mysel'><option value=''>Under the Stairs Vocabulary Game - optionally choose mode of use [Click and Be Prompted (selected in 20 seconds)] vs Find Prompted Object ... below ...</option><option value='" + utsifo.src.replace('.html','') + "'>Click and Be Prompted</option><option value='" + utsifo.src + "'>Find Prompted Object</option></select></div>");
mydivbit = mydivbit.replace("</div>", "<br><br><br><br> <select style='font-size:18px;background-color:yellow;' onchange='chooseone(this);' id='mysel'>" + selih + "</select></div>");
document.body.innerHTML += mydivbit;
setTimeout(andthen, 20000);
}
}
function andthen() {
if (document.getElementById('mysel') != null) choice=document.getElementById('mysel').value;
chooseone(document.getElementById('selo'));
}
function chooseone(selo) {
if (selo != null) {
choice=selo.value;
htmlchoice=choice.replace(".html","").replace(".htm","") + ".html";
if (htmlchoice != lasthtmlchoice) {
lasthtmlchoice=htmlchoice;
document.getElementById('utsif').src=htmlchoice;
}
}
if (choice.indexOf('.htm') != -1 && htmlchoice == 'under_the_stairs.html') {
contents=aconto.body.innerHTML;
}
document.getElementById('mysel').style.display='none';
document.getElementById('mysel').innerHTML='';
if (contents != "" && htmlchoice == 'under_the_stairs.html') process();
}
function process() {
var theseobjs;
if (doneonce == 0) {
doneonce=1;
images=aconto.getElementsByTagName('img');
maps=aconto.getElementsByTagName('map');
maps[0].title='Todo';
midis=maps[0].id;
areas=aconto.getElementsByTagName('area');
for (var ia=0; ia<areas.length; ia++) {
if (areas[ia].href != null) {
if (areas[ia].href != "") objects.push(areas[ia].href.replace('http://www.merriam-webster.com/dictionary/','').replace('http://encyclopedia.thefreedictionary.com/','').replace('http://www.thefreedictionary.com/','').replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ") + ";" + areas[ia].coords);
}
}
setTimeout(nextone, 1000);
selone();
}
}
function nextone() {
var theseobjs;
theseobjs=objects[snum].split(';');
if (maps[0].title == '') {
selone();
} else if (maps[0].title == 'lookup') {
window.open('http://www.thefreedictionary.com/' + theseobjs[0].replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+').replace(' ','+'),'_blank','top=20,left=20,width=400,height=400');
selone();
} else if (Math.abs(eval(lastx - document.getElementById('x').value)) > 0.001 || Math.abs(eval(lasty - document.getElementById('y').value)) > 0.001) {
maps[0].title = 'other';
x=document.getElementById('x').value;
y=document.getElementById('y').value;
var retv=calcdist();
lastx=document.getElementById('x').value;
lasty=document.getElementById('y').value;
}
setTimeout(nextone, 1000);
}
function selone() {
var theseobjs;
snum = Math.floor(Math.random() * objects.length) + 0;
while (thisobj == lastobj) {
theseobjs=objects[snum].split(';');
thisobj=theseobjs[0];
if (thisobj == lastobj) {
if (htmlchoice.indexOf('wally') != -1) {
lastobj='';
} else {
snum = Math.floor(Math.random() * objects.length) + 0;
}
}
}
//alert(images[0].src + ' ... ' + maps[0].id + ' ... ' + areas[0].coords + ' ... ' + areas[0].href.replace('http://www.thefreedictionary.com/','').replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," ").replace("+"," "));
if (htmlchoice.indexOf('wally') != -1) {
alert("Where's Wally?");
} else {
alert("Please click '" + thisobj + "'.");
}
lastobj=thisobj;
maps[0].title='Todo';
maps[0].innerHTML=justchooseone(); // huh?
}
function find_dist(x1, y1, x2, y2) {
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}
function herons_formula_triangle_area(x1, y1, x2, y2, x3, y3) {
var a=Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
var b=Math.sqrt((x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2));
var c=Math.sqrt((x3 - x1) * (x3 - x1) + (y3 - y1) * (y3 - y1));
var s=eval((a + b + c) / 2.0);
return Math.sqrt(s * (s - a) * (s - b) * (s - c));
}
function calcdist() {
var theseobjs, area=0.0, base=0.0, height=0.0, smallestijh=-1;
var thesexy;
if (amin) return false;
amin=true;
eval("aconto.getElementById('" + midis + "').title='other';");
smallesth=-1.0;
theseobjs=objects[snum].split(';');
thesexy=theseobjs[1].split(',');
for (var ijh=2; ijh<eval(-2 + (thesexy.length / 1)); ijh+=2) {
area=herons_formula_triangle_area(x, y, thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
base=find_dist(thesexy[eval(-2 + ijh)], thesexy[eval(-1 + ijh)], thesexy[ijh], thesexy[eval(1 + ijh)]);
if (eval(base) > 0.001) {
height=eval((2.0 * area) / base);
if (eval(height) < eval(smallesth) || eval(smallesth) < 0.0) {
smallesth=height;
//alert(x + ',' + y + ' ... ' + theseobjs[1] + ' ... ' + area + ' ... ' + base + ' ... ' + smallesth);
}
}
}
var cnf;
if (eval(smallesth) < 3) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is boiling. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 10) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is very hot. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 20) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is very warm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 40) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is warm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 80) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is lukewarm. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 120) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is cool. Cancel gives up, other answer will give dictionary view.","");
} else if (eval(smallesth) < 160) {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is cold. Cancel gives up, other answer will give dictionary view.","");
} else {
cnf=prompt("Sorry, this is not " + thisobj + ", and it is freezing. Cancel gives up, other answer will give dictionary view.","");
}
if (cnf == null) {
eval("aconto.getElementById('" + midis + "').title='';");
} else {
if (cnf.length == 0) {
cnf=cnf;
amin=false;
return true;
} else {
eval("aconto.getElementById('" + midis + "').title='lookup';");
}
}
amin=false;
return false;
}
function justchooseone() {
var theseobjs;
theseobjs=objects[snum].split(';');
var ih='<area shape="poly" alt="What is that?" title="' + thisobj + '" coords="' + theseobjs[1] + '" href="javascript:void(0);" onClick="alert(' + "'" + "Well done!" + "'" + '); document.getElementById(' + "'" + midis + "'" + ').title=' + "''" + '; " /><area shape="default" nohref alt="" onclick=" if (event.clientX || event.clientY) { parent.document.getElementById(' + "'" + 'x' + "'" + ').value=event.clientX; parent.document.getElementById(' + "'" + 'y' + "'" + ').value=event.clientY; } else { parent.document.getElementById(' + "'" + 'x' + "'" + ').value=event.pageX; parent.document.getElementById(' + "'" + 'y' + "'" + ').value=event.pageY; } return false; " />';
return ih;
}
</script>
</head>
<body onload=" wasih= document.getElementById('mydiv').innerHTML; if (startwith.length != 0) { document.getElementById('utsif').src=startwith; } overtopforabit(); ">
<div id='mydiv' style='height:1133; width:1692;'>
<iframe id='utsif' src='under_the_stairs.html' title='Under The Stairs' onload='dostuff(this);' height='1133' border='0' width='1692'></iframe>
</div>
<br><input type='button' value='Another Place' style='background-color:pink;' onclick=" location.href='./pre_under_the_stairs.html'; ">
<input type='hidden' id='x' value='0.0'></input><input type='hidden' id='y' value='0.0'></input>
</body>
</html>