0

Hey I'm Dean

I'm taking my BSc from distant learning so sometimes it takes forever to get the teachers or other students to help me on stuff I'm stuck on anyways. I'm given a task to show a quiz with a little clock running and to end the quiz and stop the time I think I have the functions right but nothing shows up when I push start quiz

Any help you can give will help a lot

Thanks

Dean

Attachments
/*
   New Perspectives on JavaScript
   Tutorial 2
   Case Problem 1

   Function List:
   showQuiz()
      Used to make the quiz questions visible

   hideQuiz()
      Used to hide the quiz questions
*/


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;
}
<html>
<head>
<!-- 
   New Perspectives on JavaScript
   Tutorial 2
   Case Problem 1

   Online Aptitude Quiz: Page 1
   Author: 
   Date:   

   Filename:         oae.htm
   Supporting files: figa.jpg, figb.jpg, figc.jpg, figd.jpg, figures.jpg, 
                     functions.js, oae.jpg, quiz.css
-->
<title>Online Aptitude Quiz: Page</title>
<link href="quiz.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
	var seconds = 0;
	var clockid = runClock();
function runClock() {
	seconds = ++seconds;
	document.quiz.quizclock.value = seconds;
}
function startClock() {
	document.quiz.quiztable.value = showQuiz();
	setInterval("runClock()",1000);
}
function stopClock() {
	clearInterval("runClock()");
	document.quiz.quiztable.value = hideQuiz();
	var correctAns = gradeQuiz();
	window.alert("You have+correctAns+ correct of 5 in +timer");
}
</script>
</head>

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

<div id="header">
   <p><img src="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" value="Start Quiz" />
      <br />
      <input name="quizclock" id="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="figures.jpg" alt="" />
      </td>
   </tr>
   <tr>
      <td><input type="radio" name="q5" />a) <img src="figa.jpg" alt="" /></td>

      <td><input type="radio" name="q5" />c) <img src="figc.jpg" alt="" /></td>
   </tr>
   <tr>
      <td><input type="radio" name="q5" />b) <img src="figb.jpg" alt="" /></td>
      <td id="cor5"><input type="radio" name="q5" />d) <img src="figd.jpg" alt="" /></td>
   </tr>
   <tr>

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

</form>
</body>
</html>
2
Contributors
2
Replies
3
Views
6 Years
Discussion Span
Last Post by Dwillich87
0

1)Line 21, The clockid should be initial to 0, not a function.

var clockid = 0;

2)Line 23, This is an odd way of your implementation. You could simply use...

seconds += 1;

3)Line 24, The document.quiz does not exists. This is an incorrect reference to an element of HTML using JavaScript. A way to deal with this is to get the element using getElementById() to get what you want from the document.

var elem = document.getElementById("quizclock")
if (elem) {  // ensure the element exists
  elem.value = seconds;  // seconds is a global variable
}

4)Line 28, You are supposed to save the ID returned by setInterval() function if you want to use it in stopClock() function.

clockid = window.setInterval("runClock()",1000);

5)Line 31, clearInterval() is not a built-in function. You need clearTimeout(ID) to stop the clock. The ID is the value you saved from the setInterval() in line 28.

window.clearTimeout(clockid);

6)Line 34, You may use only "alert()" instead of window.alert(). Also you are displaying the whole content in string. You need to concatenate string & variables to correctly display what you want.

alert("You have "+correctAns+" correct of 5 in "+timer);

7)Line 61, Your button doesn't associate with any function of JavaScript. It is just a button. You need an "onclick" event to call your startClock() function.

<input type="button" value="Start Quiz" onclick="startClock()"/>

8)When you are doing show/hide certain HTML elements with JavaScript, do NOT try to modify element.style.visibility. The reason is that IE8 browser may throw an error and will not do it. A good way to work around it is to use CSS by assigning a class to it in order to show/hide. Also, if you use only "visibility" property, the location where the element is located becomes invisible and leave an empty space there. If you have text displayed below the element, you will see an empty space. If you do not want that, you need to also use "display" property.

<style type="text/css">
.hide {
  display: none;  /* if you want to hide the empty space as well */
  visibility: hidden;
}
</style>

<script type="text/javascript">
  ...
  function hide(element) {  // hide the element
    element.className = element.className==""? "hide" : (element.className+" hide")
  }

  function show(element) {  // remove the CSS which hides the element -> show
    element.className = element.className.replace(/\s*hide$/, "")
  }
  ...
</script>

Edited by Taywin: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.