QUANPROFILES,
Try the online version at: http://www.arantius.com/ee
<html>
<head>
<script type="text/javascript">
var lastClicked="", tries=0, missed=0;
function doClick(i) {
if (i.clicked) return;
if (i.id==lastClicked) return;
switch (i.id) {
case "i1": if ("i4"==lastClicked) { good(1, 4); lastClicked=""; return; } break;
case "i2": if ("i5"==lastClicked) { good(2, 5); lastClicked=""; return; } break;
case "i3": if ("i6"==lastClicked) { good(3, 6); lastClicked=""; return; } break;
case "i4": if ("i1"==lastClicked) { good(4, 1); lastClicked=""; return; } break;
case "i5": if ("i2"==lastClicked) { good(5, 2); lastClicked=""; return; } break;
case "i6": if ("i3"==lastClicked) { good(6, 3); lastClicked=""; return; } break;
}
if (""!=lastClicked) {
tries++; missed++;
alert("Wrong choice!");
i.clicked=true;
i.src="cloud-dis.png";
document.getElementById(la
document.getElementById(la
lastClicked="";
if (3==tries) finished();
return;
}
lastClicked=i.id;
}
function good(el1, el2) {
tries++;
alert("Good!");
document.getElementById("i
document.getElementById("i
if (3==tries) finished();
}
function finished() {
for (var i=1; i<7; i++) {
document.getElementById("i
}
if (0==missed) {
alert("Good job you got them all right!");
} else {
alert("Good effort, but you only got "+(tries-missed)+" of "+tries+" right.");
}
}
</script>
<style type="text/css">
td { text-align: center; }
</style>
</head>
<body>
<table>
<tr>
<td><img src="cloud1.png" id="i1" onclick="javascript:doClic
<td><img src="cloud2.png" id="i2" onclick="javascript:doClic
<td><img src="cloud3.png" id="i3" onclick="javascript:doClic
</tr>
<tr>
<td><img src="cloud1.png" id="i4" onclick="javascript:doClic
<td><img src="cloud2.png" id="i5" onclick="javascript:doClic
<td><img src="cloud3.png" id="i6" onclick="javascript:doClic
</tr>
</table>
</body>
</html>
Main Topics
Browse All Topics
by: SweatCoderPosted on 2004-12-01 at 08:32:42ID: 12717590
i don't have time to write out all the code for you, but i know these principles will work:
- declare global js variables outside the scope of any function
- use these vars to hold "number times clicked"
- 1 var for each image
- use <SPAN> or <DIV> to show/hide images. use STYLE="display:none" for hiding, etc. can be done via js as well.