<!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'>
<style> td { vertical-align: top; } </style>
<title>Octopus Anatomy Game - RJM Programming - August, 2018</title>
<!--
How to install the image map:
Copy and paste the img, map and area blocks into the body of your page.
This imagemap is created at Mobilefish.com.
https://www.mobilefish.com/services/image_map/image_map.php
-->
<script type='text/javascript'>
var score=0, goes=0;
var ifkar='';
var fromst='++++++++++++Djibouti%2C%20Djibouti';
var tost='++++++++++++Djibouti%2C%20Djibouti';
function check(oa) {
var dorandd=false;
//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)]);
}
}
//alert('ii=' + ii + ' ' + oa.outerHTML + ' ... ' + maxx + ' - ' + minx + ' = ' + eval(maxx - minx));
}
// 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, while two will offer YouTube based research material regarding the answer as well. Suffix your answer with a space to do this research, anyway, as well.", "");
goes++;
var prevscore=score;
if (ans != null) {
if (ans.indexOf(' ') == 0 && ans.trim() == '') {
dorandd=true;
ans=' ';
} else if (('!' + ans + '~').replace(/\ \~$/g,'') != ('!' + ans + '~') && ans.trim() != '') {
dorandd=true;
ans=ans.trim();
}
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('oct_opus.png');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>";
if (window.self != window.parent) {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + " ... <br>" + oa.getAttribute("data-title").replace(/_/g,' ');
} else {
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,' ')); }
}
if (dorandd) {
tost=fromst.replace('Djibouti%2C%20Djibouti', encodeURIComponent('octopus ' + oa.getAttribute("data-title").replace(/_/g,' ')));
document.getElementById('ifkar').src=ifkar.replace(fromst, tost);
document.getElementById('ifkar').style.display='block';
}
}
function initif() {
ifkar=document.getElementById('ifkar').src;
var rectis=document.getElementsByTagName('table')[0].getBoundingClientRect();
document.getElementById('ifkar').style.position='absolute';
document.getElementById('ifkar').style.left='0px';
document.getElementById('ifkar').style.top='' + eval(20 + eval('' + rectis.bottom)) + 'px';
}
</script>
</head>
<body onload=initif();>
<table style="position:absolute;top:0px;left:0px;"><tr><td>
<!-- START COPY -->
<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">
<!-- Region 1 Siphon -->
<area shape="rect" alt="Siphon" data-title="Siphon" coords="55,64,147,84" data-href="#siphon" target="_blank" onclick="check(this);" />
<!-- Region 2 Buccal_Mass -->
<area shape="rect" alt="Buccal_Mass" data-title="Buccal_Mass" coords="79,105,154,123" data-href="#buccal_mass" target="_blank" onclick="check(this);" />
<!-- Region 3 Beak -->
<area shape="rect" alt="Beak" data-title="Beak" coords="73,133,117,151" data-href="#beak" target="_blank" onclick="check(this);" />
<!-- Region 4 Brain -->
<area shape="rect" alt="Brain" data-title="Brain" coords="153,70,200,91" data-href="#brain" target="_blank" onclick="check(this);" />
<!-- Region 5 Anus -->
<area shape="rect" alt="Anus" data-title="Anus" coords="212,336,242,353" data-href="#anus" target="_blank" onclick="check(this);" />
<!-- Region 6 Muscular_Septum -->
<area shape="rect" alt="Muscular_Septum" data-title="Muscular_Septum" coords="172,370,276,388" data-href="#muscular_septum" target="_blank" onclick="check(this);" />
<!-- Region 7 Cephalic Vein -->
<area shape="rect" alt="Cephalic_Vein" data-title="Cephalic_Vein" coords="196,33,272,53" data-href="#cephalic_vein" target="_blank" onclick="check(this);" />
<!-- Region 8 Poison Gland -->
<area shape="rect" alt="Poison_Gland" data-title="Poison_Gland" coords="247,57,316,76" data-href="#poison_gland" target="_blank" onclick="check(this);" />
<!-- Region 9 Crop -->
<area shape="rect" alt="Crop" data-title="Crop" coords="308,40,334,59" data-href="#crop" target="_blank" onclick="check(this);" />
<!-- Region 10 Digestive Cecum -->
<area shape="rect" alt="Digestive_Cecum" data-title="Digestive_Cecum" coords="344,42,435,58" data-href="#digestive_cecum" target="_blank" onclick="check(this);" />
<!-- Region 11 Dorsal Mantle Cavity -->
<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);" />
<!-- Region 12 Mantle Muscles -->
<area shape="rect" alt="Mantle_Muscles" data-title="Mantle_Muscles" coords="411,77,548,96" data-href="#mantle_muscles" target="_blank" onclick="check(this);" />
<!-- Region 13 Shell Rudiment -->
<area shape="rect" alt="Shell_Rudiment" data-title="Shell_Rudiment" coords="427,96,517,113" data-href="#shell_rudiment" target="_blank" onclick="check(this);" />
<!-- Region 14 Stomach -->
<area shape="rect" alt="Stomach" data-title="Stomach" coords="459,132,506,147" data-href="#stomach" target="_blank" onclick="check(this);" />
<!-- Region 15 Cecum -->
<area shape="rect" alt="Cecum" data-title="Cecum" coords="457,151,494,168" data-href="#cecum" target="_blank" onclick="check(this);" />
<!-- Region 16 Gonad -->
<area shape="rect" alt="Gonad" data-title="Gonad" coords="469,170,506,183" data-href="#gonad" target="_blank" onclick="check(this);" />
<!-- Region 17 Systemic_Heart -->
<area shape="rect" alt="Systemic_Heart" data-title="Systemic_Heart" coords="441,188,527,203" data-href="#systemic_heart" target="_blank" onclick="check(this);" />
<!-- Region 18 Kidney -->
<area shape="rect" alt="Kidney" data-title="Kidney" coords="449,206,487,223" data-href="#kidney" target="_blank" onclick="check(this);" />
<!-- Region 19 Branchial_Heart -->
<area shape="rect" alt="Branchial_Heart" data-title="Branchial_Heart" coords="412,225,500,242" data-href="#branchial_heart" target="_blank" onclick="check(this);" />
<!-- Region 20 Ctenidium -->
<area shape="rect" alt="Ctenidium" data-title="Ctenidium" coords="393,241,449,259" data-href="#ctenidium" target="_blank" onclick="check(this);" />
<!-- Region 21 Ink_Sac -->
<area shape="rect" alt="Ink_Sac" data-title="Ink_Sac" coords="367,258,407,270" data-href="#ink_sac" target="_blank" onclick="check(this);" />
<!-- Region 22 Skull -->
<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>
<!-- END COPY -->
</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>
<iframe style=display:none;width:100%;height:1200px; id=ifkar src='//www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=++++++++++++Djibouti%2C%20Djibouti'></iframe>
<div id=overlays style='z-index:9;'></div>
</body>
</html>