<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Skeleton Map - RJM Programming - July, 2017 ... Thanks to HLTAAP001 Recognise healthy body systems - Reading 1: Apply knowledge of the basic structure of the healthy human body NSW DET 2007</title>

<script type='text/javascript'>
var labelids=[], labelminx=[], labelminy=[], labelmaxx=[], labelmaxy=[], choice=-1, ioff=0, spareioff=0;
var lasttop=-1, lastleft=-1, lastwidth=-1, lastheight=-1;
var sparelasttop=-1, sparelastleft=-1, sparelastwidth=-1, sparelastheight=-1;
var goes=0, score=0, lasto=null, sparelasto=null;
var whichway=0, chosenlist=" ", total=0;
var ways=["lasto.innerHTML=labelids[choice]", "lasto.style.display='none'", "lasto.style.backgroundColor='transparent'", "lasto.style.opacity=0.35", "ioff=1"];
var aways=["lasto.innerHTML=''", "lasto.style.display='block'", "lasto.style.backgroundColor='yellow'", "lasto.style.opacity=0.65", "ioff=1"];

function check(omap) {
if (1 == 2) alert(omap.getAttribute("data-title"));
}

function pretimethings() {
var opval='';
if (lasto != null && whichway == 3) {
opval=lasto.style.opacity;
if (('' + opval).length > 0) {
if (eval(opval) > 0.64) {
sparelasto=lasto;
//document.title='?' + '' + opval;
lasto.style.opacity=eval(eval('' + opval) + 0.05);
//document.title=lasto.style.opacity;
} else if (eval(opval) < 0.36) {
if (eval(opval) <= 0.05 || ('' + opval).indexOf('-') != -1) {
//alert(1111);
lasto.innerHTML='';
lasto.style.opacity=0;
lasto.zIndex=9;
} else {
//sparelasto=lasto;
lasto.style.opacity=eval(eval('' + opval) - 0.05);
//document.title=' ... ' + opval;
}
}
}
}
if (sparelasto != null && whichway == 3) {
opval=sparelasto.style.opacity;
if (eval(opval) > 0.64 || ('' + opval).indexOf('-') != -1) {
if (eval(opval) >= 0.95) {
// alert(11111);
sparelasto.innerHTML='';
sparelasto.style.opacity=1;
sparelasto.zIndex=9;
sparelasto=null;
} else {
//document.title=opval;
sparelasto.style.opacity=eval(eval('' + opval) + 0.05);
}
}
}
if (lasto != null && whichway == 4 && sparelasto == null) {
if (lasto.getAttribute("data-title") != document.getElementById('schoices').value && lasto.getAttribute("data-title") != choice) {
document.title="lasto.getAttribute('data-title')=" + lasto.getAttribute("data-title") + " != document.getElementById('schoices').value=" + document.getElementById('schoices').value;
if (eval(eval(-2 * ioff) + lastwidth) >= 0 && eval(eval(-2 * ioff) + lastheight) >= 0) {
lasto.style.top='' + eval(ioff + lasttop) + 'px';
lasto.style.left='' + eval(ioff + lastleft) + 'px';
lasto.style.width='' + eval(eval(-2 * ioff) + lastwidth) + 'px';
lasto.style.height='' + eval(eval(-2 * ioff) + lastheight) + 'px';
//document.title=('' + eval(ioff + lasttop) + 'px,' + '' + eval(ioff + lastleft) + 'px,' + '' + eval(eval(-2 * ioff) + lastwidth) + 'px,' + '' + eval(eval(-2 * ioff) + lastheight) + 'px');
if (ioff > 0) ioff++;
if (ioff < 0) ioff--;
if (sparelasto == null && 1 == 6) {
sparelasto=lasto;
spareioff=ioff;
sparelasttop=lasttop;
sparelastleft=lastleft;
sparelastwidth=lastwidth;
sparelastheight=lastheight;
lasto=null;
whichway=-4;
}
//alert(98);
} else {
lasto.style.backgroundColor='transparent';
lasto.style.border='1px solid red';
lasto.style.top='' + eval(lasttop) + 'px';
lasto.style.left='' + eval(lastleft) + 'px';
lasto.style.width='' + eval(lastwidth) + 'px';
lasto.style.height='' + eval(lastheight) + 'px';
//lasto.style.display='none';
//location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&way=' + whichway + '&choice=' + choice;
}
}
}
if (sparelasto != null && whichway == 4) {
if (sparelasto.getAttribute("data-title") != document.getElementById('schoices').value && sparelasto.getAttribute("data-title") != choice) {
document.title="sparelasto.getAttribute('data-title')=" + sparelasto.getAttribute("data-title") + " != document.getElementById('schoices').value=" + document.getElementById('schoices').value;
if (spareioff > 0) spareioff++;
if (spareioff < 0) spareioff--;
if (eval(eval(-2 * spareioff) + sparelastwidth) >= 0 && eval(eval(-2 * spareioff) + sparelastheight) >= 0) {
sparelasto.style.top='' + eval(spareioff + sparelasttop) + 'px';
sparelasto.style.left='' + eval(spareioff + sparelastleft) + 'px';
sparelasto.style.width='' + eval(eval(-2 * spareioff) + sparelastwidth) + 'px';
sparelasto.style.height='' + eval(eval(-2 * spareioff) + sparelastheight) + 'px';
//document.title=' ... ' + ('' + eval(spareioff + sparelasttop) + 'px,' + '' + eval(spareioff + sparelastleft) + 'px,' + '' + eval(eval(-2 * spareioff) + sparelastwidth) + 'px,' + '' + eval(eval(-2 * spareioff) + sparelastheight) + 'px');
//alert(298);
} else {
sparelasto.style.backgroundColor='transparent';
sparelasto.style.border='1px solid red';
sparelasto.style.top='' + eval(sparelasttop) + 'px';
sparelasto.style.left='' + eval(sparelastleft) + 'px';
sparelasto.style.width='' + eval(sparelastwidth) + 'px';
sparelasto.style.height='' + eval(sparelastheight) + 'px';
//sparelasto.style.display='none';
sparelasto=null;
//location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&way=' + whichway + '&choice=' + choice;
}
}
}
whichway=Math.abs(whichway);
}

function timethings() {
pretimethings();
setTimeout(timethings, 2000);
}

function waway() {
eval(aways[whichway]);
pretimethings();
}

function wway() {
eval(ways[whichway]);
}

function giveup() {
goes++;
if (lasto != null) {
waway(); //lasto.innerHTML='';
lasto=null;
}
lasto=document.getElementById('d' + labelids[choice]);
wway(); //lasto.innerHTML=labelids[choice];
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
choose();
}

function dcheck(dmap) {
if (1 == 2) alert(dmap.getAttribute("data-title"));
if (lasto != null) {
waway(); //lasto.innerHTML='';
lasto=null;
}
goes++;
if (dmap.getAttribute("data-title").toLowerCase() == labelids[choice].toLowerCase()) {
score++;
lasto=dmap;
wway(); //dmap.innerHTML=labelids[choice];
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
choose();
} else {
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
alert('Bad luck. Try again.');
}
}

function make_divs() {
var iareas, icsv, csvbit, oareas=document.getElementsByTagName('area');
score=location.search.split('score=')[1] ? eval(location.search.split('score=')[1].split('&')[0]) : score;
goes=location.search.split('goes=')[1] ? eval(location.search.split('goes=')[1].split('&')[0]) : goes;
choice=location.search.split('choice=')[1] ? eval(location.search.split('choice=')[1].split('&')[0]) : choice;
whichway=location.search.split('way=')[1] ? eval(location.search.split('way=')[1].split('&')[0]) : whichway;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
if (whichway == 4) {
chosenlist=',';
} else {
chosenlist='';
}
for (iareas=0; iareas<oareas.length; iareas++) {
if (oareas[iareas].getAttribute("data-title") != '') {
total++;
labelids.push(oareas[iareas].getAttribute("data-title"));
labelminx.push(0);
labelminy.push(0);
labelmaxx.push(0);
labelmaxy.push(0);
csvbit=oareas[iareas].coords.split(',');
for (icsv=0; icsv<csvbit.length; icsv+=2) {
if (icsv == 0) {
labelminx[eval(-1 + labelids.length)]=(eval(csvbit[icsv]));
labelminy[eval(-1 + labelids.length)]=(eval(csvbit[eval(1 + icsv)]));
labelmaxx[eval(-1 + labelids.length)]=(eval(csvbit[icsv]));
labelmaxy[eval(-1 + labelids.length)]=(eval(csvbit[eval(1 + icsv)]));
} else {
if (eval(csvbit[icsv]) < labelminx[eval(-1 + labelids.length)]) labelminx[eval(-1 + labelids.length)]=(eval(csvbit[icsv]));
if (eval(csvbit[eval(1 + icsv)]) < labelminy[eval(-1 + labelids.length)]) labelminy[eval(-1 + labelids.length)]=(eval(csvbit[eval(1 + icsv)]));
if (eval(csvbit[icsv]) > labelmaxx[eval(-1 + labelids.length)]) labelmaxx[eval(-1 + labelids.length)]=(eval(csvbit[icsv]));
if (eval(csvbit[eval(1 + icsv)]) > labelmaxy[eval(-1 + labelids.length)]) labelmaxy[eval(-1 + labelids.length)]=(eval(csvbit[eval(1 + icsv)]));
}
}
//alert('' + eval(labelmaxy[eval(-1 + labelids.length)] - labelminy[eval(-1 + labelids.length)]) + 'px' + ' === ' + labelids[eval(-1 + labelids.length)] + ' ' + labelminx[eval(-1 + labelids.length)] + ',' + labelminy[eval(-1 + labelids.length)] + ',' + labelmaxx[eval(-1 + labelids.length)] + ',' + labelmaxy[eval(-1 + labelids.length)] + ' ... ' + '<div id="d' + labelids[eval(-1 + labelids.length)] + '" style="position:absolute;z-index:9;top:' + labelmaxy[eval(-1 + labelids.length)] + 'px;left:' + labelminx[eval(-1 + labelids.length)] + 'px;width:' + eval(labelmaxx[eval(-1 + labelids.length)] - labelminx[eval(-1 + labelids.length)]) + 'px;height:' + eval(labelmaxy[eval(-1 + labelids.length)] - labelminy[eval(-1 + labelids.length)]) + 'px;background-colour:yellow;"></div>');
document.getElementById('mydivs').innerHTML+='<div data-title="' + labelids[eval(-1 + labelids.length)] + '" id="d' + labelids[eval(-1 + labelids.length)] + '" onclick="dcheck(this);" style="font-color:blue;font-size:10px;cursor:pointer;border:1px solid red;position:absolute;z-index:9;top:' + labelminy[eval(-1 + labelids.length)] + 'px;left:' + labelminx[eval(-1 + labelids.length)] + 'px;height:' + eval(labelmaxy[eval(-1 + labelids.length)] - labelminy[eval(-1 + labelids.length)]) + 'px;width:' + eval(labelmaxx[eval(-1 + labelids.length)] - labelminx[eval(-1 + labelids.length)]) + 'px;background-color:yellow;"></div>';
document.getElementById('schoices').innerHTML+='<option value="' + labelids[eval(-1 + labelids.length)] + '" data-title="' + labelids[eval(-1 + labelids.length)] + '" id="o' + labelids[eval(-1 + labelids.length)] + '" ">' + labelids[eval(-1 + labelids.length)].replace(/_/g,' ') + '</option>';
}
}
if (eval(choice) < 0) {
choose();
} else {
//alert(labelids[choice]);
if (chosenlist.trim() != '') chosenlist+=choice + ',';
document.getElementById('schoices').value=labelids[choice];
lasttop=labelmaxy[choice];
lastleft=labelminx[choice];
lastwidth=eval(labelmaxx[choice] - labelminx[choice]);
lastheight=eval(labelmaxy[choice] - labelminy[choice]);
}
if (whichway != 0) document.getElementById('way').value='' + whichway;
timethings();
}

function choose() {
sparelasto=lasto;
spareioff=ioff;
sparelasttop=lasttop;
sparelastleft=lastleft;
sparelastwidth=lastwidth;
sparelastheight=lastheight;
//alert(chosenlist);
if (chosenlist.trim() == '') {
choice=Math.floor(Math.random() * labelids.length);
} else if (eval(-1 + chosenlist.substring(1).split(',').length) == total && total != 0) {
choice=Math.floor(Math.random() * labelids.length);
location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&way=' + whichway + '&choice=' + choice;
} else {
if (chosenlist.trim() != '') {
choice=-1;
while ((chosenlist + ',-1,').indexOf(',' + choice + ',') != -1) {
choice=Math.floor(Math.random() * labelids.length);
}
chosenlist+=choice + ',';
}
}
document.getElementById('schoices').value=labelids[choice];
lasttop=labelmaxy[choice];
lastleft=labelminx[choice];
lastwidth=eval(labelmaxx[choice] - labelminx[choice]);
lastheight=eval(labelmaxy[choice] - labelminy[choice]);
}
</script>
</head>
<body onload='make_divs();' style='background-color:#f0f0f0;'>

<table id='mytable' border=0>
<tbody>
<tr><td style='vertical-align:top;position:absolute;top:0px;left:0px;'>

<img id='myimage' src="skeleton.jpg" usemap="#kz77817" width="240" height="320" data-alt="click map" border="0" />
<map id="kz77817" name="kz77817">

<area shape="poly" data-alt="sternum" data-title="sternum" coords="158,56,200,56,200,69,158,67" data-href="#sternum" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="scapula" data-title="scapula" coords="175,70,220,70,218,84,177,85" data-href="#scapula" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="humerus" data-title="humerus" coords="174,91,221,92,218,105,176,106" data-href="#humerus" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="ulna" data-title="ulna" coords="178,125,205,124,204,139,179,136" data-href="#ulna" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="radius" data-title="radius" coords="187,144,222,145,218,160,185,158" data-href="#radius" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="phalanges" data-title="phalanges" coords="191,180,238,185,238,195,192,195" data-href="#phalanges" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="patella" data-title="patella" coords="166,213,199,213,199,225,166,224" data-href="#patella" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="tibia" data-title="tibia" coords="160,232,184,234,184,243,160,245" data-href="#tibia" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="tarsals" data-title="tarsals" coords="167,269,202,270,203,283,168,281" data-href="#tarsals" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="skull" data-title="skull" coords="142,21,170,23,170,34,142,35" data-href="#skull" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="feet_phalanges" data-title="feet_phalanges" coords="3,271,69,275,68,289,3,286" data-href="#feet_phalanges" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="metatarsals" data-title="metatarsals" coords="21,248,76,250,74,263,22,263" data-href="#metatarsals" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="femur" data-title="femur" coords="53,194,83,192,84,207,54,208" data-href="#femur" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="metacarpals" data-title="metacarpals" coords="0,169,47,170,47,185,1,184" data-href="#metacarpals" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="carpals" data-title="carpals" coords="17,151,54,151,54,164,20,164" data-href="#carpals" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="pelvis" data-title="pelvis" coords="7,129,38,128,38,144,9,143" data-href="#pelvis" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="ribs" data-title="ribs" coords="37,89,58,93,57,108,37,108" data-href="#ribs" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="clavicle" data-title="clavicle" coords="39,58,74,57,74,77,38,79" data-href="#clavicle" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="vertebrae" data-title="vertebrae" coords="139,42,191,39,190,53,141,53" data-href="#vertebrae" target="_blank" onclick="check(this);" />

<area shape="poly" data-alt="fibula" data-title="fibula" coords="166,250,199,250,199,263,166,263" data-href="#fibula" target="_blank" onclick="check(this);" />
<area shape="default" nohref data-alt="" data-title="" />
</map>

</td><td style="margin:8 8 8 8;padding:18 18 18 18;position:absolute;top:14px;left:300px;background-color:lightgray;">
<h1>Skeleton Map <select id='way' onchange=" whichway=eval(this.value); if (1 == 1) { location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&way=' + whichway + '&choice=' + choice; } "><option value='0'>via Text</option><option value='1'>via Visibility</option><option value='2'>via Transparency</option><option value='3'>via Fade</option><option value='4'>via Shrinking</option></select></h1>
<h3>RJM Programming - July, 2017</h3>
<h3>Thanks to <a target=_blank title='mobilefish' href='http://www.mobilefish.com/services/image_map/image_map.php'>Mobilefish</a> and <i>HLTAAP001 Recognise healthy body systems - Reading 1: Apply knowledge of the basic structure of the healthy human body NSW DET 2007</i></h3>
<h4 id='score'>Score: 0/0</h4>
<select id='schoices' onchange='if (this.value.length == 0) { giveup(); } '><option value=''>Please select correct label on skeleton for what is shown below, or to give up ...</option></select>
</td></tr></tbody></table>
<div id='mydivs'></div>
</body>
</html>