Make images appear after students answer short answer questions correctly

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • windsorben
    New Member
    • Nov 2006
    • 23
    #1

    Make images appear after students answer short answer questions correctly

    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>Untitl ed Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script language="javas cript">
    <!--
    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<answe r.length;i++){
    if(document.myf orm.elements[i].value.toLowerC ase()==answer[i]){
    score++;
    document.getEle mentById("showp icture1").style .visibility="vi sible";
    document.getEle mentById("showp icture2").style .visibility="vi sible";
    document.getEle mentById("showp icture3").style .visibility="vi sible";
    document.getEle mentById("showp icture4").style .visibility="vi sible";

    }else{
    if(document.myf orm.elements[i].value!=""){
    document.myform .elements[i].value="Wrong!" ;
    document.getEle mentById("showp icture").style. visibility="hid den";
    }
    }
    }
    alert(score + " out of " + answer.length + ".");
    score = 0;
    }
    //-->
    </script>
    </head>

    <body bgcolor="#FFFFF F" 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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 1"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 2"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 3"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 4"> </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.gi f" width="185" height="167" style="visibili ty: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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture ">
    </form>
    <p>&nbsp;</p>
    </body>
    </html>
    Tags: None
    • vee10
      New Member
      • Oct 2006
      • 141
      #2
      hi,

      i hope this is the solution

      Code:
      <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/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++;
var p=i+1;
var str="showpicture"+p;
document.getElementById(str).style.visibility="visible";
}
else
{
if(document.myform.elements[i].value!=""){
document.myform.elements[i].value="Wrong!";
var p=i+1;
var str="showpicture"+p;
document.getElementById(str).style.visibility="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="pics/pic00153.jpg"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="pics/pic00292.jpg" 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="pics/pic00491.jpg" 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="pics/pic02995.jpg" 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="pics/pic04827.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture5" /> </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" />

</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="Img1" alt="picture" />
</form>
<p>&nbsp;</p>
</body>
</html>










      Originally posted by windsorben
      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>Untitl ed Document</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script language="javas cript">
      <!--
      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<answe r.length;i++){
      if(document.myf orm.elements[i].value.toLowerC ase()==answer[i]){
      score++;
      document.getEle mentById("showp icture1").style .visibility="vi sible";
      document.getEle mentById("showp icture2").style .visibility="vi sible";
      document.getEle mentById("showp icture3").style .visibility="vi sible";
      document.getEle mentById("showp icture4").style .visibility="vi sible";

      }else{
      if(document.myf orm.elements[i].value!=""){
      document.myform .elements[i].value="Wrong!" ;
      document.getEle mentById("showp icture").style. visibility="hid den";
      }
      }
      }
      alert(score + " out of " + answer.length + ".");
      score = 0;
      }
      //-->
      </script>
      </head>

      <body bgcolor="#FFFFF F" 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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 1"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 2"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 3"> </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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture 4"> </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.gi f" width="185" height="167" style="visibili ty: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.gi f" width="185" height="167" style="visibili ty:hidden;" id="showpicture ">
      </form>
      <p>&nbsp;</p>
      </body>
      </html>

        Comment

        • windsorben
          New Member
          • Nov 2006
          • 23
          #3
          Perfect! Thanks a million!
          Ben

          Originally posted by vee10
          hi,

          i hope this is the solution

          Code:
          <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/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++;
var p=i+1;
var str="showpicture"+p;
document.getElementById(str).style.visibility="visible";
}
else
{
if(document.myform.elements[i].value!=""){
document.myform.elements[i].value="Wrong!";
var p=i+1;
var str="showpicture"+p;
document.getElementById(str).style.visibility="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="pics/pic00153.jpg"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="pics/pic00292.jpg" 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="pics/pic00491.jpg" 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="pics/pic02995.jpg" 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="pics/pic04827.jpg" width="185" height="167" style="visibility:hidden;" id="showpicture5" /> </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" />

</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="Img1" alt="picture" />
</form>
<p>&nbsp;</p>
</body>
</html>

            Comment

            Previous template Next
            Working...