<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Body Cavities Game - RJM Programming - July, 2017</title>

<script type='text/javascript'>

var firstoff=true;
var score=0;
var goes=0;
var mychoice=-1;
var thisorgan="";
var organinfo=["liver;D",
"stomach;D",
"small intestine;D",
"pancreas;D",
"gall bladder;D",
"kidneys;D",
"adrenal glands;D",
"heart;C",
"lungs;C",
"brain;F",
"spinal cord;G",
"urinary bladder;E",
"large intestine;D",
"uterus;E"];

function test(mthis) {
goes++;
if (organinfo[mychoice].split(";")[1] == mthis.alt || organinfo[mychoice].split(";")[1] == mthis.id) {
score++;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + ' ... Well done!';
document.getElementById('organ').value="";
choose();
} else {
var aorganinfo=document.getElementsByTagName('area'), hint='';
for (var i=0; i<aorganinfo.length; i++) {
if (aorganinfo[i].id == organinfo[mychoice].split(";")[1]) {
hint='Hint ... where is the ' + aorganinfo[i].title + '?';
}
}
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + ' ... Bad luck. Try again. ' + hint;
}
}

function choose() {
if (firstoff) {
firstoff=false;
for (var i=0; i<organinfo.length; i++) {
document.getElementById('organ').innerHTML+='<option value="' + organinfo[i].split(";")[0] + '">' + organinfo[i].split(";")[0].substring(0,1).toUpperCase() + organinfo[i].split(";")[0].substring(1) + '</option>';
}
}
mychoice=Math.floor(Math.random() * organinfo.length);
document.getElementById('organ').value=organinfo[mychoice].split(";")[0];
}
</script>
<style>
#lhtd {
filter: brightness(148%);
-webkit-filter: brightness(148%);
-moz-filter: brightness(148%);
-o-filter: brightness(148%);
-ms-filter: brightness(148%);
border: 0px solid #8096B1;
-moz-transform: rotate(350deg);
-o-transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}

table {
background: url('body_cavities.jpg');
background-size:60px 60px;
background-repeat: repeat;
background-color: #C1E0FA;
background: -webkit-gradient(#CAE6F3, #C1E0FA);
background: -o-linear-gradient(#CAE6F3, #C1E0FA);
background: -moz-linear-gradient(#CAE6F3, #C1E0FA);
background: linear-gradient(#CAE6F3, #C1E0FA);
}

#rhtd {
background-color: lightblue;
}
</style>
</head>
<body onload='choose();'>
<table border=40 cellpadding=20 cellspacing=20><tbody><tr><td id='lhtd'>

<img title="Thanks to Study Guide Individual Support in Australia by TAFE NSW (ISBN: 978-1742365275)" src="body_cavities.jpg" usemap="#yx17172" width="278" height="461" alt="click map" border="0" />
<map id="yx17172" name="yx17172">

<area shape="poly" id="B" alt="B" title="Dorsal cavity" coords="95,48,89,42,100,34,111,26,136,25,155,34,163,42,168,58,175,76,169,99,157,110,144,116,148,130,157,147,164,163,174,192,171,229,161,255,146,295,147,326,151,363,142,396,125,413,119,433,80,429,93,379,106,384,122,373,119,353,135,345,133,330,129,315,134,289,143,267,154,241,158,206,156,181,142,155,131,140,127,125,129,104,147,99,160,71,147,49,122,42,102,46" target="_blank" onclick="test(this);" />

<area shape="poly" id="C" alt="C" title="Thoracic cavity" coords="79,222,99,219,108,223,119,230,125,243,127,253,133,228,137,207,136,182,131,158,123,151,110,158,100,173,90,187,79,205,76,220,78,222" target="_blank" onclick="test(this);" />

<area shape="poly" id="A" alt="A" title="Ventral cavity" coords="133,161,137,159,124,138,122,115,126,92,121,79,106,73,97,75,87,67,78,79,69,84,74,93,74,106,73,117,87,130,94,144,87,171,67,197,48,227,47,240,55,260,50,284,40,307,36,341,44,378,47,407,47,425,69,429,89,377,77,369,67,349,65,324,69,290,71,261,77,230,77,211,88,186,106,165,121,153,132,156" target="_blank" onclick="test(this);" />

<area shape="poly" id="E" alt="E" title="Pelvic cavity" coords="68,358,89,343,105,343,117,347,121,362,120,376,109,383,95,378,78,371,70,364" target="_blank" onclick="test(this);" />

<area shape="poly" id="D" alt="D" title="Abdominal cavity" coords="67,359,79,349,99,343,114,346,105,326,104,302,110,274,123,252,116,234,93,227,93,227,77,234,72,254,71,289,68,312,66,339,68,356" target="_blank" onclick="test(this);" />

<area shape="poly" id="F" alt="F" title="Cranial cavity" coords="126,105,139,98,154,85,155,62,139,41,107,42,90,53,89,67,101,71,121,73,126,87,127,101" target="_blank" onclick="test(this);" />

<area shape="poly" id="G" alt="G" title="Spinal cavity" coords="133,338,127,311,136,282,149,248,158,211,152,175,137,146,127,115,129,94,122,106,126,136,138,158,151,185,151,216,143,249,128,286,123,318,130,341" target="_blank" onclick="test(this);" />
<area shape="default" nohref alt="" />
</map>

</td><td id='rhtd'>
<h1>Body Cavities Game</h1>
<h3>RJM Programming - July, 2017</h3>
<h3 id='score'>Score: 0/0</h3>
<h4>Please click or touch which human body cavity contains the human anatomy part below.</h4>
<select id='organ'><option value=''>Please choose human anatomy part ...</option></select>
</td></tr></tbody></table>
</body>
</html>