HTML and CSS Reference
In-Depth Information
Hector's list to the
Date1
through
Date6
variables. Use a year value of
2015
for
these six dates (you'll set the current year value in a later step).
b. Using the
today
variable as the parameter value, call the
showDateTime()
function and store the value returned by the function in the
thisDay
field of the
eventform
Web form.
c. Using
today
as the first parameter value and
Date1
as the second parameter
value, call the
changeYear()
function. Calling this function sets the correct year
value for the first event in Hector's list. Repeat this step for the
Date2
through
Date6
variables.
d. Call the
countdown()
function using the
today
variable as the first parameter
value and the
Date1
variable as the second. Display the result returned by this
function in the
count1
field of the
eventform
Web form. Running this command
displays the time remaining until the first event in Hector's list. Repeat this step
for the
count2
through
count6
fields using the
today
parameter and the
Date2
through
Date6
variables.
7. Add an event handler to the
<body>
tag that runs the
showCountdown()
function
when the page is loaded by the browser.
8. Save your changes to the file.
9. Open
events.htm
in your Web browser. Verify that it shows the same date, time, and
countdown values shown in Figure 11-37.
10. Return to the
events.htm
file in your text editor. Modify the initial value of the
today
variable so that it always uses the current date and time.
11. Modify the event handler in the
<body>
tag so that it runs the showCountdown()
function every tenth of a second after the page is loaded.
12. Close the file, saving your changes.
13. Reload or refresh
events.htm
in your Web browser and verify that it shows a count-
down clock with the current date and time.
14. Submit your completed files to your instructor, in either printed or electronic form,
as requested.
Case Problem 1
Use the skills you
learned in this
tutorial to create
a trivia quiz with
a timer.
data Files needed for this case Problem: functions.js, modernizr-1.5.js, quiz.css,
tlogo.png, triviatxt.htm
Online Trivia
Karen Larson is the owner of a Web site for trivia lovers called
Trivia
Online
,
where users can submit trivia quizzes and compete against each other for the
title of Trivia Master. Karen has asked for your help in developing a JavaScript application
in which users are scored based on the number of correct trivia answers and the time
needed to complete the quiz.
The trivia questions will be hidden from users until the clock starts. After users submit
their answers, the trivia questions will disappear and an 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
functions.js
. The 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.
