showQuiz() not working

Timer and submit not working

Page 1 of 1

5 Replies - 4021 Views - Last Post: 15 October 2010 - 07:16 PM

#1 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 133
  • Joined: 12-April 10

showQuiz() not working

Posted 14 October 2010 - 09:20 AM

My code was working fine, but then I tried to validate and received one error. "name" attribute not valid in strict. So I changed the <form id= "quiz" action="" name="quiz"> to <div id="quiz"> as you will see in the following code. Now when I hit take quiz, the questions appear but the timer will not start. Cant figure out where my error is.
<head>
   <title>Online Aptitude Quiz: Page</title>
   <link href="./styles/quiz.css" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="./scripts/functions.js"></script> 
<script type="text/javascript">

    var seconds = 0;
    var clockId;

    function runClock() {
    seconds++;
    document.quiz.quizclock.value= seconds;
}
    function startClock() {
    showQuiz();
    clockId = setInterval ("runClock()",1000);
}
    function stopClock() {
    clearInterval (clockId);
    correctAns = gradeQuiz();
    alert( "You have " + correctAns + " correct of 5 in " + seconds + " seconds.");
}
</script></head>
<body>

<form action ="">

<div id="header">
   <p><img src="./images/oae.jpg" alt="Online Aptitude Exam" />
   <span>Grunwald Testing, Inc.</span><br />
   1101 Science Drive<br />
   Oakdale, CA 88191
   </p>
</div>

<div id="intro">
   <p>This is a timed quiz of intelligence and perception. Your final score will
   be based on the number of correct answers and the time required to submit those
   answers.</p>
   <p>To start the quiz, click the <b>Start Quiz</b> button below, which will 
   reveal the first page of quiz questions and start the timer. When you have 
   completed the questions, click the <b>Submit Answers</b> button on the quiz 
   form.</p>

   <p id="buttons">
      <input type="button" onclick="startClock()" value="Start Quiz" />
      <br />
      <input id="quizclock" name="quizclock" value="0" />
   </p>
</div>

<div id="questions">
   <h1>Page 1: Pattern Recognition</h1>
   <table id="quiztable">
   <tr>
      <th rowspan="3">1.</th>
      <td colspan="2">Enter the next number in this sequence: 1, 3, 4, 7, 11, 18, ...</td>
   </tr>
   <tr>
      <td><input type="radio" name="q1" />a) 22</td>
      <td><input type="radio" name="q1" />c) 28</td>
   </tr>
   <tr>
      <td id="cor1"><input type="radio" name="q1" />B)/> 29</td>
      <td><input type="radio" name="q1" />d) 32</td>
   </tr>
   <tr>
      <th rowspan="3">2.</th>
      <td colspan="2">Enter the final three numbers in this sequence: 8, 5, 4, 9, 1, 7, 6, ...</td>
   </tr>
   <tr>
      <td id="cor2"><input type="radio" name="q2" />a) 10, 3, 2</td>
      <td><input type="radio" name="q2" />c) 2, 3, 10</td>
   </tr>
   <tr>
      <td><input type="radio" name="q2" />B)/> 2, 10, 3</td>
      <td><input type="radio" name="q2" />d) 10, 2, 3</td>
   </tr>
   <tr>
      <th rowspan="3">3.</th>
      <td colspan="2">Enter the next letter in this sequence: j, f, m, a, m, j, j, ...</td>
   </tr>
   <tr>
      <td><input type="radio" name="q3" />a) j</td>
      <td><input type="radio" name="q3" />c) f</td>
   </tr>
   <tr>
      <td><input type="radio" name="q3" />B)/> m</td>
      <td id="cor3"><input type="radio" name="q3" />d) a</td>
   </tr>
   <tr>
      <th rowspan="3">4.</th>
      <td colspan="2">What letter in this set does not belong?: A, B, D, G, J, S, O</td>
   </tr>
   <tr>
      <td id="cor4"><input type="radio" name="q4" />a) A</td>
      <td><input type="radio" name="q4" />c) J</td>
   </tr>
   <tr>
      <td><input type="radio" name="q4" />B)/> B</td>
      <td><input type="radio" name="q4" />d) O</td>
   </tr>
   <tr>
      <th rowspan="3">5.</th>
      <td colspan="2">What is the next figure in the following sequence?:<br />
         <img src="./images/figures.jpg" alt="" />
      </td>
   </tr>
   <tr>
      <td><input type="radio" name="q5" />a) <img src="./images/figa.jpg" alt="" /></td>
      <td><input type="radio" name="q5" />c) <img src="./images/figc.jpg" alt="" /></td>
   </tr>
   <tr>
      <td><input type="radio" name="q5" />B)/> <img src="./images/figb.jpg" alt="" /></td>
      <td id="cor5"><input type="radio" name="q5" />d) <img src="./images/figd.jpg" alt="" /></td>
   </tr>
   <tr>
      <td style="text-align: center;" colspan="3">
           
         <hr />
         <input type="button" onclick="stopClock()" value="Submit Answers" />
         
      </td>
   </tr>
   </table>
</div>

</form>

<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html>
This is the .JS code
function showQuiz() {
   document.getElementById("quiztable").style.visibility="visible";
}

function hideQuiz() {
   document.getElementById("quiztable").style.visibility="hidden";
}

function gradeQuiz() {
   correct=0;
   if (document.quiz.q1[2].checked) correct++;
   if (document.quiz.q2[0].checked) correct++;
   if (document.quiz.q3[3].checked) correct++;
   if (document.quiz.q4[0].checked) correct++;
   if (document.quiz.q5[3].checked) correct++;
   
   document.getElementById("cor1").style.backgroundColor="yellow";
   document.getElementById("cor2").style.backgroundColor="yellow";
   document.getElementById("cor3").style.backgroundColor="yellow";
   document.getElementById("cor4").style.backgroundColor="yellow";
   document.getElementById("cor5").style.backgroundColor="yellow";

   for (i=0; i<document.quiz.elements.length; i++) document.quiz.elements[i].disabled=true;

   return correct;
}



Is This A Good Question/Topic? 0
  • +

Replies To: showQuiz() not working

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: showQuiz() not working

Posted 14 October 2010 - 01:11 PM

What does you <doc...> HTML tag look like in your latest version?
Does not seem to be included in the code you provided.
:helpsmilie:

Also, you still need the name='quiz' parameter in the <form...> tag because it is referenced that way in your "document.quiz....=..." assignments.

This post has been edited by JMRKER: 14 October 2010 - 01:24 PM

Was This Post Helpful? 0
  • +
  • -

#3 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 133
  • Joined: 12-April 10

Re: showQuiz() not working

Posted 14 October 2010 - 03:13 PM

View PostJMRKER, on 14 October 2010 - 12:11 PM, said:

What does you <doc...> HTML tag look like in your latest version?
Does not seem to be included in the code you provided.
:helpsmilie:

Also, you still need the name='quiz' parameter in the <form...> tag because it is referenced that way in your "document.quiz....=..." assignments.

Here is my DOC type
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

My first form code did have <form id ="quiz" name="quiz" action="">
But the name attribute does not validate in strict, so I took it out, thats when my code stopped working. Not sure if I am declaring my varables, not sure why its not working.
Was This Post Helpful? 0
  • +
  • -

#4 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: showQuiz() not working

Posted 14 October 2010 - 06:37 PM

I have not put this through a validator,
but it does display the time passage in seconds (if you remember to "start" the timer)

I also changed the correct answer decisions slightly.
Also added some <label>'s around the radio buttons to make it a little easier
to choose a selection (remove if you believe it effect the time display adversely)

Checked out on PC (FF and MSIE) and iMac (FF) and appears to work fine
although you did not provide the CSS or images files for final testing.
<html>
<head>
<title>Online Aptitude Quiz: Page</title>
<link href="./styles/quiz.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"> <!-- src="./scripts/functions.js"></script --> 
// From: http://www.dreamincode.net/forums/topic/194979-showquiz-not-working/page__gopid__1140603&#entry1140603

function $_(IDS) { return document.getElementById(IDS); }

function getRBtnName(GrpName) {
  var sel = document.getElementsByName(GrpName);
  var fnd = -1;
  var str = '';
  for (var i=0; i<sel.length; i++) {
    if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
  }
  return fnd;   // return option index of selection
// comment out next line if option index used in line above  
//  return str;
} 

function showQuiz() {
   document.getElementById("quiztable").style.visibility="visible";
}

function hideQuiz() {
   $_("quiztable").style.visibility="hidden";
}

function gradeQuiz() {
   var q = '';
   var Ans = '';
   var Answers = ['2','0','3','0','3'];
   correct=0;
   for (var i=0; i<Answers.length; i++) {
     q = 'q'+(i+1);
     Ans = getRBtnName(q);
     if (Ans = Answers[i]) correct++;  // alert(Ans+' : '+Answers[i]+' : '+correct);  // for testing purposes
     q = 'cor'+(i+1);
     $_(q).style.backgroundColor="yellow";
   }
   for (i=0; i<document.quiz.elements.length; i++) document.quiz.elements[i].disabled=true;
   return correct;
}
</script>

<script type="text/javascript">
var seconds = 0;
var clockId;

function runClock() {
    seconds++;
    document.quiz.quizclock.value= seconds;
}
function startClock() {
    showQuiz();
    clockId = setInterval ("runClock()",1000);
}
function stopClock() {
    clearInterval (clockId);
    correctAns = gradeQuiz();
    alert( "You have " + correctAns + " correct of 5 in " + seconds + " seconds.");
    $_('quizclock').value = seconds+' seconds.';
}
</script>
</head>
<body>

<form name="quiz" action ="">

<div id="header">
   <p><img src="./images/oae.jpg" alt="Online Aptitude Exam" />
   <span>Grunwald Testing, Inc.</span><br />
   1101 Science Drive<br />
   Oakdale, CA 88191
   </p>
</div>

<div id="intro">
   <p>This is a timed quiz of intelligence and perception. Your final score will
   be based on the number of correct answers and the time required to submit those
   answers.</p>
   <p>To start the quiz, click the <b>Start Quiz</b> button below, which will 
   reveal the first page of quiz questions and start the timer. When you have 
   completed the questions, click the <b>Submit Answers</b> button on the quiz 
   form.</p>

   <p id="buttons">
      <input type="button" onclick="startClock()" value="Start Quiz" />
      <input id="quizclock" name="quizclock" value="0 seconds." />
   </p>
</div>

<div id="questions">
   <h1>Page 1: Pattern Recognition</h1>
   <table id="quiztable">
   <tr>
      <th rowspan="3">1.</th>
      <td colspan="2">Enter the next number in this sequence: 1, 3, 4, 7, 11, 18, ...</td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q1" />a) 22</label></td>
      <td><label><input type="radio" name="q1" />c) 28</label></td>
   </tr>
   <tr>
      <td id="cor1"><label><input type="radio" name="q1" /> B)/> 29</label></td>
      <td><label><input type="radio" name="q1" />d) 32</label></td>
   </tr>

   <tr>
      <th rowspan="3">2.</th>
      <td colspan="2">Enter the final three numbers in this sequence: 8, 5, 4, 9, 1, 7, 6, ...</td>
   </tr>
   <tr>
      <td id="cor2"><label><input type="radio" name="q2" />a) 10, 3, 2</label></td>
      <td><label><input type="radio" name="q2" />c) 2, 3, 10</label></td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q2" /> B)/> 2, 10, 3</label></td>
      <td><label><input type="radio" name="q2" />d) 10, 2, 3</label></td>
   </tr>

   <tr>
      <th rowspan="3">3.</th>
      <td colspan="2">Enter the next letter in this sequence: j, f, m, a, m, j, j, ...</td>
   </tr>   <tr>
      <td><label><input type="radio" name="q3" /> a) j</label></td>
      <td><label><input type="radio" name="q3" /> c) f</label></td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q3" /> B)/> m</label></td>
      <td id="cor3"><label><input type="radio" name="q3" /> d) a</label></td>
   </tr>

   <tr>
      <th rowspan="3">4.</th>      
      <td colspan="2">What letter in this set does not belong?: A, B, D, G, J, S, O</td>
   </tr>
   <tr>
      <td id="cor4"><label><input type="radio" name="q4" /> a) A</label></td>
      <td><label><input type="radio" name="q4" /> c) J</label></td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q4" /> B)/> B</label></td>
      <td><label><input type="radio" name="q4" /> d) O</label></td>
   </tr>

   <tr>
      <th rowspan="3">5.</th>
      <td colspan="2">What is the next figure in the following sequence?:
                      <br />  <img src="./images/figures.jpg" alt="E I E I" border="1" /> </td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q5" />
        a) <img src="./images/figa.jpg" alt="E" border="1" /></label></td>
      <td><label><input type="radio" name="q5" />
        c) <img src="./images/figc.jpg" alt="F" border="1" /></label></td>
   </tr>
   <tr>
      <td><label><input type="radio" name="q5" />
        B)/> <img src="./images/figb.jpg" alt="D" border="1" /></label></td>
      <td id="cor5"><label><input type="radio" name="q5" />
        d) <img src="./images/figd.jpg" alt="O" border="1" /></label></td>
   </tr>

   <tr>
      <td style="text-align: center;" colspan="3">
       <hr /> <input type="button" onclick="stopClock()" value="Submit Answers" />
      </td>
   </tr>
   </table>
</div>

</form>

<p> <a href= "../index.html">Home</a> </p>
</body>
</html>


Remove the borders around the images. I wanted to check out where the images would be displayed (if I had access to them).

Good Luck!
:)
Was This Post Helpful? 0
  • +
  • -

#5 nikc121  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 133
  • Joined: 12-April 10

Re: showQuiz() not working

Posted 15 October 2010 - 10:52 AM

Thanks JMRKER for all that hard work, but according to my instructions I should only have to add some functions to the HTML file and not changed the .JS file. And I cannot use the "name" attribute in the form element. Is there a way to declare the document.quiz and still get it to work. Any further help would be great,,, thanks again
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: showQuiz() not working

Posted 15 October 2010 - 07:16 PM

View Postnikc121, on 15 October 2010 - 09:52 AM, said:

Thanks JMRKER for all that hard work, but according to my instructions I should only have to add some functions to the HTML file and not changed the .JS file. And I cannot use the "name" attribute in the form element. Is there a way to declare the document.quiz and still get it to work. Any further help would be great,,, thanks again

Why did you not post your instructions and limitations along with your question? You receive advise based upon the question you pose.

If you cannot use the name=xxx of the <form> tag,
then you cannot reference the elements with document.xxx.....

My suggestions would be to go to a more standard reference using the ID parameters,
then you can reference the elements with document.getElementById(ID)... and avoid the <form> tag name argument.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1