23
I'd like to have an image appear after the student answers each short answer question correctly. I can't seem to get it to work properly. See code below.
Thanks!
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
var score = 0;
var answer = new Array("1","2","3","4","5","6","7","8");
//Check and display score
function check(){
for(i=0;i<answer.length;i++){
if(document.myform.elements[i].value.toLowerCase()==answer[i]){
score++;
document.getElementById("showpicture1").style.visi bility="visible";
document.getElementById("showpicture2").style.visi bility="visible";
document.getElementById("showpicture3").style.visi bility="visible";
document.getElementById("showpicture4").style.visi bility="visible";
}else{
if(document.myform.elements[i].value!=""){
document.myform.elements[i].value="Wrong!";
document.getElementById("showpicture").style.visib ility="hidden";
}
}
}
alert(score + " out of " + answer.length + ".");
score = 0;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="myform" method="post" action="">
<table width="432" border="0" align="center">
<tr>
<td width="183">
<div align="center">
<p>1+0=
<input type="text" name="1" size="8" onBlur="check()">
</p>
<p><img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture1"> </p>
</div>
</td>
<td width="106">
<div align="center">1+1=
<input type="text" name="2" size="8" onBlur="check()">
<p><img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture2"> </p>
</div>
</td>
<td width="129">
<div align="center">1+2=
<input type="text" name="3" size="8" onBlur="check()">
<p><img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture3"> </p>
</div>
</td>
</tr>
<tr>
<td width="183">
<div align="center">1+3=
<input type="text" name="4" size="8" onBlur="check()">
<p><img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture4"> </p>
</div>
</td>
<td width="106">
<div align="center">1+4=
<input type="text" name="5" size="8" onBlur="check()">
<p><img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture"> </p>
</div>
</td>
<td width="129">
<div align="center">1+5=
<input type="text" name="6" size="8">
</div>
</td>
</tr>
<tr>
<td width="183">
<div align="center">1+6=
<input type="text" name="7" size="8">
</div>
</td>
<td width="106">
<div align="center">1+7=
<input type="text" name="8" size="8">
</div>
</td>
<td width="129">
<div align="center">1+8=
<input type="text" name="9" size="8">
</div>
</td>
</tr>
</table>
<p align="center">Student ID
<input type="text" name="studentID">
<input type="submit" name="Submit2" value="Submit Answers">
<INPUT TYPE="button" VALUE="Check Score" onClick="check();">
</p>
</form>
<form name="form1" method="post" action="">
<input type="radio" name="radio" value="1" onclick="rocket()">
<img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="showpicture">
</form>
<p> </p>
</body>
</html>
