<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type='text/javascript' src='/img_svg.js?rand=56476586853212122'></script>
<title>The Cell Game - RJM Programming - July, 2017</title>

<script type='text/javascript'>

var firstoff=true;
var score=0;
var goes=0;
var mychoice=-1;
var thiscellpart="";
// Thanks to https://www.tes.com/lessons/oGfJlIYN6qp--g/parts-of-a-cell and https://www.google.com.au/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwjen9qvq5TVAhVDi5QKHdjwDQYQjxwIAw&url=https%3A%2F%2Fwww.tes.com%2Flessons%2F-rMnlmxaSLKBlw%2Fparts-of-the-cell&psig=AFQjCNGQqKts0jfiVCSVm7aGS6LqC2KhwA&ust=1500519087062215 for help with array
var cellinfo=["nucleus;H",
"nucleolus;I",
"mitochondrion;B",
"plastid;J",
"nuclear pore;K",
"vesicle;C",
"golgi apparatus;A",
"chromatin;D",
"cell membrane;F",
"cytoplasm;G",
"endoplasmic reticulum;E"];

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

function choose() {
if (firstoff) {
firstoff=false;
for (var i=0; i<cellinfo.length; i++) {
document.getElementById('organ').innerHTML+='<option value="' + cellinfo[i].split(";")[0] + '">' + cellinfo[i].split(";")[0].substring(0,1).toUpperCase() + cellinfo[i].split(";")[0].substring(1) + '</option>';
}
}
mychoice=Math.floor(Math.random() * cellinfo.length);
document.getElementById('organ').value=cellinfo[mychoice].split(";")[0];
}
</script>
</head>
<body onload='choose();'>
<table border=40 cellpadding=20 cellspacing=20><tbody><tr><td>

<img src="the_cell.jpg" usemap="#ao51710" width="585" height="496" alt="click map" border="0" />
<map id="ao51710" name="ao51710">

<area shape="poly" id="I" alt="I" data-title="Nucleolus" coords="264,176,279,171,291,183,288,198,270,197,255,190,259,177" target="_blank" />

<area shape="poly" alt="A" data-title="Golgi apparatus" coords="268,43,237,63,229,83,248,106,282,112,316,85,323,75,308,61,310,47,289,49,275,47" target="_blank" onclick="label(this);" />

<area shape="poly" id="B" alt="B" data-title="Mitochondrion" coords="113,112,125,98,145,95,167,95,173,111,160,121,129,118,118,117" target="_blank" onclick="label(this);" />

<area shape="poly" id="C" alt="C" data-title="Vesicle" coords="135,139,140,129,159,131,166,141,165,153,159,161,146,162,134,158" target="_blank" onclick="label(this);" />

<area shape="poly" id="D" alt="D" data-title="Chromatin" coords="229,184,244,201,261,209,292,214,326,199,333,177,316,167,300,155,286,159,284,154,270,149,270,156,265,152,257,154,257,163,250,164,250,158,236,171,239,184" target="_blank" onclick="label(this);" />

<area shape="poly" id="E" alt="E" data-title="Endoplasmic reticulum" coords="146,194,91,205,97,245,120,282,150,295,160,319,205,337,223,317,258,332,263,286,235,301,228,279,206,289,197,269,169,256,179,249,157,214,146,226,141,218,150,205" target="_blank" onMouseOut="label(this);" />

<area shape="poly" id="F" alt="F" data-title="Cell wall" coords="59,201,81,262,125,318,178,348,257,367,326,364,407,340,464,292,490,223,468,321,417,397,344,444,250,462,164,440,103,389,64,305,55,232" target="_blank" onMouseOut="label(this);" />

<area shape="poly" id="G" alt="G" data-title="Cytoplasm" coords="60,203,74,148,102,104,131,86,192,47,271,24,360,42,429,92,487,180,479,254,438,320,354,359,259,368,142,333,85,268,63,221,70,219,81,240,98,244,112,267,118,290,128,307,145,293,158,319,207,337,226,320,253,330,274,341,290,343,302,314,330,315,322,343,338,353,385,338,379,314,414,280,439,279,458,246,435,238,438,217,475,224,469,197,446,196,439,150,414,112,383,83,359,66,321,45,295,32,279,32,277,44,268,44,263,31,222,42,220,52,190,60,177,71,167,82,135,95,117,103,116,119,137,125,125,146,101,143,89,143,84,153,93,163,74,190,81,206,74,216,64,217" target="_blank" onclick="label(this);" />

<area shape="poly" id="H" alt="H" data-title="Nucleus" coords="228,169,248,154,253,161,257,160,254,153,262,150,266,159,271,159,269,147,283,149,282,159,293,154,304,158,312,170,316,178,325,171,333,182,336,168,312,152,293,146,267,143,247,151,230,164" target="_blank" onclick="label(this);" />

<area shape="poly" id="J" alt="J" data-title="Plastid" coords="450,262,447,249,434,249,429,259,430,272,443,271" target="_blank" onclick="label(this);" />

<area shape="poly" id="K" alt="K" data-title="Nuclear pore" coords="229,279,237,298,253,289,262,293,260,308,271,312,273,273,286,273,294,289,316,272,329,255,313,260,307,275,298,281,295,269,305,256,303,251,286,257,280,269,266,275,245,280" target="_blank" onclick="label(this);" />

</map>

</td><td style='background-color: lightgreen;'>
<h1>The Cell Game</h1>
<h3>RJM Programming - July, 2017</h3>
<h3 id='score'>Score: 0/0</h3>
<h4>Please click or touch the cell part below.</h4>
<select id='organ'><option value=''>Please choose cell part ...</option></select>
</td></tr></tbody></table>
</body>
</html>