The trivia questions will be hidden from users until the clock starts. After users submit their answers, the trivia questions will disappear and alert box will appear showing the number of correct answers and the time, in seconds, taken to complete the quiz. Karen already has collected some of the functions you’ll need for this page in a separate file named function.js. This file contains three functions:
– The resetQuiz() function resets the quiz, setting the timer clock back to zero.– The showQuiz () function displays the quiz questions on the Web page.– The gradeQuiz () function returns the number of correct answers in a submitted quiz, highlights the correct answers on the page, and disables the quiz, preventing users from changing their answers.
You’ll write the code to start and stop the quiz timer as well as to call the functions that show and grade a completed quiz.
Complete the following:
1. Use the text editor to open the trivia.htm file from the tutorial.11case1 folder, enter your name and the date in the head section, an then save the file as trivia.htm in the same folder.
2. Above the closing </head> tag, insert an external script element that points to the functions.js file in the tutorial.11case1 folder.
3. Below this script element, insert another script element. Within the script element, declare two variables. The first variable, seconds, will be used later to store the current elapsed time that the user has worked on the exam. The second variable, clockId, will be used later to reference the commands repeatedly run to update the clock value. Set the initial value of the seconds variable to 0. Do not set an initial value for the clockId variable.
4. Create a function named runClock() that will update the time value in the Web page’s clock. There are no parameters. Add the following commands to the function:a. Use a unary operator to increase the value of the seconds variable by 1.b. Change the value of the quizclock field in the quiz form to the value of the seconds variable.
5. Create a function named startClock() that will start the Web page clock and then repeatedly update the elapsed time displayed in the clock. There are no parameters to this function. Add the following commands to the function:a. Call the showQuiz() function to display the questions in the online exam.b. Call the runClock() function every second, storing the ID of this timed-interval command in the clockId variable.
6. Create a function named stopClock() that will stop the timer, display the user’s score, and disable the exam to prevent further entry. There are no parameters to this function. Add the following commands to the function:a. Halt the repeated calls to the runClock() function. (Hint: Use the clearInterval() method described in this tutorial.)b. Call the gradeQuiz() function, storing the value returned by the function in a variable named correctAns.c. Display an alert box containing the text stringYou have correctAns correct of 5 in timer seconds.where correctAns is the value of the correctAns variable and timer is the value of the quizclock field in the quiz form.
7. Locate the input button for the Start Quiz button. Add an event handler attribute that runs the startClock() function when the button is clicked.
8. Locate the input button for the Submit Answers button. Add an event handler attribute that runs the stopClock() function when the button is clicked.
9. Add an onload event attribute to the <body> tag to run the resetQuiz() function when the page is loaded by the browser.
10. Save your changes to the file.
11. open trivia.htm in your Web browser. Verify that clicking the Start Quiz button displays the quiz questions and starts the timer. Then verify that clicking the Submit Answers button stops the timer, disables the exam, and displays an alert box with the number of correct answers and the elapsed time to complete the exam. Finally, verify that refreshing or reloding the Web page restores the form and the timer to their original condition.
12. Submit your completed files to your instructor, in either printed or electronic form, as requested.