HTML and CSS Reference
In-Depth Information
4. Insert a function named
reportResult()
that displays the results of each guess. The
function has no parameters and should include the following commands:
a. Set the value of the
guess
variable to the value of the
guess
field in the
guessform
Web
form. Use the
eval()
method to convert the text in the field to a
numeric value.
b. Declare a variable named
result
that will contain the result of the user's guess.
Use a nested conditional operator to set the value of
result
to the text
right!
if
guess
equals
randNum
; if
guess
is greater than
randNum
,
set the value of
result
to the text string
too high
; otherwise, set the value of
result
to the text
string
too low
.
c. Reduce the value of the
guesses
field in the
guessform
Web form by 1 to indicate
that the user has one fewer guess left.
d. Set the value of the
result
field in the
guessform
Web form to the value of the
result
variable.
e. Call the
checkEndGame()
function to test whether the game has been concluded
by the user.
5. Create a function named
resetGame()
. The purpose of this function is to reset the
game with a new random number and a new set of guesses. The function has no
parameters and should include the following commands:
a. Set the value of the
guesses
field in the
guessform
Web form to
10
.
b. Set the value of the
guess
field in the
guessform
Web form to an empty text
string (
“”
).
c. Set the value of the
result
field to an empty text string (
“”
).
d. Call the
generateRandom()
function.
6. Add an
onload
event handler to the
<body>
tag to run the
generateRandom()
func-
tion when the browser initially loads the page.
7. Add an
onclick
event handler to the
input
element for the Guess button to run the
reportResult()
function when that button is clicked.
8. Add an
onclick
event handler to the Play Again button to run the
resetGame()
function when the button is clicked.
9. Save your changes to the file, and then load
guess.htm
in your Web browser. Verify
that the page generates a random number, and that it reports whether your guess is
too high, too low, or correct when you enter a number in the
guess
field and click
the
Guess
button. Further verify that the number of guesses remaining counts down
by 1 starting from 10 and going to 0.
10. Submit your completed project to your instructor, in either printed or electronic
form, as requested.
Test your
knowledge
of JavaScript
by creating a
countdown
clock for the
opening of a
shopping mall.
Case Problem 4
data Files needed for this case Problem: logo.jpg, mall.txt, mall1.png, mall2.png,
mall3.png, malltxt.htm, modernizr-1.5.js, timetxt.js
The Cutler Shopping Mall
Alice Samuels is the director of promotion for the Cutler
Shopping Mall, a large new mall opening on March 23 at 9:00 a.m. in Cutler, Iowa. She
has asked you to design the Web page announcing the mall's opening. She's provided
the text of the page as well as several graphic images; however, she also wants you to
program a countdown clock that displays the days, hours, and minutes until the mall
opens. The final design of the site is up to you, and you may supplement the provided
material with your own.
