HTML and CSS Reference
In-Depth Information
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 string
You 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 attri-
bute 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 reloading 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.
Case Problem 2
Use JavaScript
to create an
online standard
calculator.
data Files needed for this case Problem: bboard.png, calctxt.htm, modernizr-1.5.js,
mtlogo.png, mtstyles.css
The Math Table
Theresa Kaine runs The Math Table, a Web site containing math resources
for homeschooling families and educators. She wants to add an online calculator to the
site and has asked for your help in designing a simple prototype. Theresa already has
designed the Web page and would like you to write the JavaScript code to make the cal-
culator work. A preview of Theresa's sample Web page is shown in Figure 11-39.
