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.
Search WWH ::

Custom Search