By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,195 Members | 577 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,195 IT Pros & Developers. It's quick & easy.

Make images appear after students answer short answer questions correctly

P: 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>&nbsp;</p>
</body>
</html>
Nov 2 '06 #1
Share this Question
Share on Google+
2 Replies

100+
P: 141
hi,

i hope this is the solution

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <script language="javascript" type="text/javascript">
  6. <!--
  7.  
  8. var score = 0;
  9. var answer = new Array("1","2","3","4","5","6","7","8");
  10. //Check and display score
  11. function check(){
  12.  
  13. for(i=0;i<answer.length;i++){
  14. if(document.myform.elements[i].value.toLowerCase()==answer[i]){
  15. score++;
  16. var p=i+1;
  17. var str="showpicture"+p;
  18. document.getElementById(str).style.visibility="visible";
  19. }
  20. else
  21. {
  22. if(document.myform.elements[i].value!=""){
  23. document.myform.elements[i].value="Wrong!";
  24. var p=i+1;
  25. var str="showpicture"+p;
  26. document.getElementById(str).style.visibility="hidden";
  27. }
  28. }
  29. }
  30. alert(score + " out of " + answer.length + ".");
  31. score = 0;
  32. }
  33. //-->
  34. </script>
  35. </head>
  36.  
  37. <body bgcolor="#FFFFFF" text="#000000">
  38. <form name="myform" method="post" action="">
  39. <table width="432" border="0" align="center">
  40. <tr> 
  41. <td width="183"> 
  42. <div align="center">
  43. <p>1+0= 
  44. <input type="text" name="1" size="8" onblur="check()" />
  45. </p>
  46. <p><img src="pics/pic00153.jpg"width="185" height="167" style="visibility:hidden;" id="showpicture1" /> </p>
  47. </div>
  48. </td>
  49. <td width="106"> 
  50. <div align="center">1+1= 
  51. <input type="text" name="2" size="8" onblur="check()" />
  52. <p><img src="pics/pic00292.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture2" /> </p>
  53. </div>
  54. </td>
  55. <td width="129"> 
  56. <div align="center">1+2= 
  57. <input type="text" name="3" size="8" onblur="check()" />
  58. <p><img src="pics/pic00491.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture3" /> </p>
  59. </div>
  60. </td>
  61. </tr>
  62. <tr> 
  63. <td width="183"> 
  64. <div align="center">1+3= 
  65. <input type="text" name="4" size="8" onblur="check()" /> 
  66. <p><img src="pics/pic02995.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture4" /> </p>
  67. </div>
  68. </td>
  69. <td width="106"> 
  70. <div align="center">1+4= 
  71. <input type="text" name="5" size="8" onblur="check()" />
  72. <p><img src="pics/pic04827.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture5" /> </p>
  73. </div>
  74. </td>
  75. <td width="129"> 
  76. <div align="center">1+5= 
  77. <input type="text" name="6" size="8" />
  78. </div>
  79. </td>
  80. </tr>
  81. <tr> 
  82. <td width="183"> 
  83. <div align="center">1+6= 
  84. <input type="text" name="7" size="8" />
  85.  
  86. </div>
  87. </td>
  88. <td width="106"> 
  89. <div align="center">1+7= 
  90. <input type="text" name="8" size="8" />
  91. </div>
  92. </td>
  93. <td width="129"> 
  94. <div align="center">1+8= 
  95. <input type="text" name="9" size="8" />
  96. </div>
  97. </td>
  98. </tr>
  99. </table>
  100. <p align="center">Student ID 
  101. <input type="text" name="studentID" />
  102. <input type="submit" name="Submit2" value="Submit Answers" />
  103.  
  104. </p>
  105. </form>
  106. <form name="form1" method="post" action="">
  107. <input type="radio" name="radio" value="1" onclick="rocket()" />
  108. <img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="Img1" alt="picture" />
  109. </form>
  110. <p>&nbsp;</p>
  111. </body>
  112. </html>
  113.  
  114.  
  115.  










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>&nbsp;</p>
</body>
</html>
Nov 2 '06 #2

P: 23
Perfect! Thanks a million!
Ben

hi,

i hope this is the solution

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Untitled Document</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <script language="javascript" type="text/javascript">
  6. <!--
  7.  
  8. var score = 0;
  9. var answer = new Array("1","2","3","4","5","6","7","8");
  10. //Check and display score
  11. function check(){
  12.  
  13. for(i=0;i<answer.length;i++){
  14. if(document.myform.elements[i].value.toLowerCase()==answer[i]){
  15. score++;
  16. var p=i+1;
  17. var str="showpicture"+p;
  18. document.getElementById(str).style.visibility="visible";
  19. }
  20. else
  21. {
  22. if(document.myform.elements[i].value!=""){
  23. document.myform.elements[i].value="Wrong!";
  24. var p=i+1;
  25. var str="showpicture"+p;
  26. document.getElementById(str).style.visibility="hidden";
  27. }
  28. }
  29. }
  30. alert(score + " out of " + answer.length + ".");
  31. score = 0;
  32. }
  33. //-->
  34. </script>
  35. </head>
  36.  
  37. <body bgcolor="#FFFFFF" text="#000000">
  38. <form name="myform" method="post" action="">
  39. <table width="432" border="0" align="center">
  40. <tr> 
  41. <td width="183"> 
  42. <div align="center">
  43. <p>1+0= 
  44. <input type="text" name="1" size="8" onblur="check()" />
  45. </p>
  46. <p><img src="pics/pic00153.jpg"width="185" height="167" style="visibility:hidden;" id="showpicture1" /> </p>
  47. </div>
  48. </td>
  49. <td width="106"> 
  50. <div align="center">1+1= 
  51. <input type="text" name="2" size="8" onblur="check()" />
  52. <p><img src="pics/pic00292.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture2" /> </p>
  53. </div>
  54. </td>
  55. <td width="129"> 
  56. <div align="center">1+2= 
  57. <input type="text" name="3" size="8" onblur="check()" />
  58. <p><img src="pics/pic00491.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture3" /> </p>
  59. </div>
  60. </td>
  61. </tr>
  62. <tr> 
  63. <td width="183"> 
  64. <div align="center">1+3= 
  65. <input type="text" name="4" size="8" onblur="check()" /> 
  66. <p><img src="pics/pic02995.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture4" /> </p>
  67. </div>
  68. </td>
  69. <td width="106"> 
  70. <div align="center">1+4= 
  71. <input type="text" name="5" size="8" onblur="check()" />
  72. <p><img src="pics/pic04827.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture5" /> </p>
  73. </div>
  74. </td>
  75. <td width="129"> 
  76. <div align="center">1+5= 
  77. <input type="text" name="6" size="8" />
  78. </div>
  79. </td>
  80. </tr>
  81. <tr> 
  82. <td width="183"> 
  83. <div align="center">1+6= 
  84. <input type="text" name="7" size="8" />
  85.  
  86. </div>
  87. </td>
  88. <td width="106"> 
  89. <div align="center">1+7= 
  90. <input type="text" name="8" size="8" />
  91. </div>
  92. </td>
  93. <td width="129"> 
  94. <div align="center">1+8= 
  95. <input type="text" name="9" size="8" />
  96. </div>
  97. </td>
  98. </tr>
  99. </table>
  100. <p align="center">Student ID 
  101. <input type="text" name="studentID" />
  102. <input type="submit" name="Submit2" value="Submit Answers" />
  103.  
  104. </p>
  105. </form>
  106. <form name="form1" method="post" action="">
  107. <input type="radio" name="radio" value="1" onclick="rocket()" />
  108. <img src="../../Desktop/myschoolgoal/space_derby1.gif" width="185" height="167" style="visibility:hidden;" id="Img1" alt="picture" />
  109. </form>
  110. <p>&nbsp;</p>
  111. </body>
  112. </html>
  113.  
  114.  
  115.  
Nov 2 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.