<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<title>Octopus Anatomy Game - RJM Programming - August, 2018</title>


<script type='text/javascript'>

var score=0, goes=0;

function check(oa) {
//alert(document.getElementById('ui').width + ' ... ' + document.getElementById('ui').style.top + ' ... ' + document.getElementById('ui').style.left);
var rectarr=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
var words=oa.getAttribute("data-title").replace(",","").replace("(","").replace(")","").toLowerCase().split('_');
var minx=-1, miny=-1, maxx=-1, maxy=-1, jj=0;
var carray=oa.coords.split(',');
if (carray.length > 4) {
carray.push(carray[0]);
carray.push(carray[1]);
}
var considered=' ... (' + carray.length + ') ';
for (var ii=0; ii<carray.length; ii++) {
jj = eval(eval(ii - eval(ii % 2)) / 2);
considered+=' =' + jj + '= ';
if (carray.length == 4) {
if (ii == 0) {
minx=eval(carray[ii]);
maxx=eval(carray[ii]);
} else if (ii == 1) {
miny=eval(carray[ii]);
maxy=eval(carray[ii]);
} else if (ii == 2) {
if (eval(carray[ii]) < minx) minx=eval(carray[ii]);
if (eval(carray[ii]) > maxx) maxx=eval(carray[ii]);
} else {
if (eval(carray[ii]) < miny) miny=eval(carray[ii]);
if (eval(carray[ii]) > maxy) maxy=eval(carray[ii]);
}
} else if (eval(ii % 2) == 0 && (jj == 0 || jj == 1 || jj == eval(-1 + eval(carray.length / 2)) || jj == eval(-2 + eval(carray.length / 2)) || jj == eval(-3 + eval(carray.length / 2)))) {
if (ii == 0) {
considered+='' + carray[ii] + ',' + carray[eval(1 + ii)];
minx=eval(carray[ii]);
maxx=eval(carray[ii]);
miny=eval(carray[eval(1 + ii)]);
maxy=eval(carray[eval(1 + ii)]);
} else {
considered+=',' + carray[ii] + ',' + carray[eval(1 + ii)];
if (eval(carray[ii]) < minx) minx=eval(carray[ii]);
if (eval(carray[ii]) > maxx) maxx=eval(carray[ii]);
if (eval(carray[eval(1 + ii)]) < miny) miny=eval(carray[eval(1 + ii)]);
if (eval(carray[eval(1 + ii)]) > maxy) maxy=eval(carray[eval(1 + ii)]);
}
}
}
if (minx < 75) {
maxx=75;
} else if (minx < 460) {
minx=460;
}
if (maxx > eval(0 + document.getElementById('ui').width)) maxx = eval(0 + document.getElementById('ui').width);
if (maxy > eval(0 + document.getElementById('ui').height)) maxy = eval(0 + document.getElementById('ui').height);
//if (carray.length > 4) {
// alert(carray + ' ... ' + minx + ',' + miny + ',' + ',' + maxx + ',' + maxy + considered);
//}
//if (oa.title.indexOf('rimmer') != -1) alert(oa.title + ' ... ' + "<div style=\"border:1px solid red;position:absolute;z-index:9;background-repeat:no-repeat;background:URL('floor_wall_roof_framing_members.jpg');background-position:-" + minx + "px -" + miny + "px;left:" + minx + "px;top:" + miny + "px;width:" + eval(maxx - minx) + "px;height:" + eval(maxy - miny) + "px;display:block;\"></div>");
var ans=prompt("What did you point at? One blank character is the answer to give up and reveal answer.", "");
goes++;
var prevscore=score;
if (ans != null) {
var bwords=ans.replace(",","").replace("(","").replace(")","").toLowerCase().split(' ');
for (var kk=0; kk<bwords.length; kk++) {
if (bwords[kk] != "") {
for (var mm=0; mm<words.length; mm++) {
if (words[mm] == bwords[kk]) score++;
}
}
}
}
if (prevscore != score || ans == " ") {
document.getElementById('overlays').innerHTML+="<div style=\"position:absolute;z-index:9;background-repeat:no-repeat;background:URL('floor_wall_roof_framing_members.jpg');background-position:-" + minx + "px -" + miny + "px;left:" + eval(0 + minx) + "px;top:" + eval(6 + miny) + "px;width:" + eval(maxx - minx) + "px;height:" + eval(maxy - miny) + "px;display:block;\"></div>";
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + " ... " + oa.getAttribute("data-title").replace(/_/g,' ');
//if (ans == " ") { alert(oa.getAttribute("data-title").replace(/_/g,' ')); }
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
//if (prevscore == score) { alert(oa.getAttribute("data-title").replace(/_/g,' ')); }
}
}
</script>

</head>
<body>
<table style="position:absolute;top:0px;left:0px;"><tr><td>

<img style="top:0px;left:0px;margin-top:0px; margin-left:0px;" id=ui src="octopus.jpg" usemap="#vv84563" width="557" height="424" alt="click map" border="0" />
<map id="vv84563" name="vv84563">

<area shape="rect" alt="Siphon" data-title="Siphon" coords="55,64,147,84" data-href="#siphon" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Buccal_Mass" data-title="Buccal_Mass" coords="79,105,154,123" data-href="#buccal_mass" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Beak" data-title="Beak" coords="73,133,117,151" data-href="#beak" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Brain" data-title="Brain" coords="153,70,200,91" data-href="#brain" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Anus" data-title="Anus" coords="212,336,242,353" data-href="#anus" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Muscular_Septum" data-title="Muscular_Septum" coords="172,370,276,388" data-href="#muscular_septum" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Cephalic_Vein" data-title="Cephalic_Vein" coords="196,33,272,53" data-href="#cephalic_vein" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Poison_Gland" data-title="Poison_Gland" coords="247,57,316,76" data-href="#poison_gland" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Crop" data-title="Crop" coords="308,40,334,59" data-href="#crop" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Digestive_Cecum" data-title="Digestive_Cecum" coords="344,42,435,58" data-href="#digestive_cecum" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Dorsal_Mantle_Cavity" data-title="Dorsal_Mantle_Cavity" coords="370,56,509,75" data-href="#dorsal_mantle_cavity" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Mantle_Muscles" data-title="Mantle_Muscles" coords="411,77,548,96" data-href="#mantle_muscles" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Shell_Rudiment" data-title="Shell_Rudiment" coords="427,96,517,113" data-href="#shell_rudiment" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Stomach" data-title="Stomach" coords="459,132,506,147" data-href="#stomach" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Cecum" data-title="Cecum" coords="457,151,494,168" data-href="#cecum" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Gonad" data-title="Gonad" coords="469,170,506,183" data-href="#gonad" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Systemic_Heart" data-title="Systemic_Heart" coords="441,188,527,203" data-href="#systemic_heart" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Kidney" data-title="Kidney" coords="449,206,487,223" data-href="#kidney" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Branchial_Heart" data-title="Branchial_Heart" coords="412,225,500,242" data-href="#branchial_heart" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Ctenidium" data-title="Ctenidium" coords="393,241,449,259" data-href="#ctenidium" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Ink_Sac" data-title="Ink_Sac" coords="367,258,407,270" data-href="#ink_sac" target="_blank" onclick="check(this);" />

<area shape="rect" alt="Skull" data-title="Skull" coords="194,57,216,81" data-href="#skull" target="_blank" onclick="check(this);" />
<area shape="default" nohref alt="" />
</map>

</td><td style='z-index:20;background-color:yellow;padding:10px 10px 10px 10px;'><h1>Octopus Anatomy Game</h1><br><h3>RJM Programming</h3><br><h3>August, 2018</h3><br><br><p>Click label and match <br>diagram words to score</p><br><br><p id=score>Score: 0/0</p>
</td></tr></table>
<div id=overlays style='z-index:9;'></div>
</body>
</html>