HTML and CSS Reference
In-Depth Information
background color for the
blocks
class cells is
black
. If an incorrect cell is found,
change the value of the solved variable to
false
and break off the program loop.
d. After the loop has finished running, display an alert box containing a congratula-
tory message if the value of the solved variable is still
true
.
9. Create the
peek()
function. The purpose of this function is to highlight errors in the
user's solution. Incorrect cells will have their numbers displayed in a red font. Add
the following commands to the function:
a. Create an object collection named
blockcells
for all data cells in the
hitoriGrid
table belonging to the
blocks
class.
b. For each cell in the
blockCells
object collection, test whether the background
color is
white
. If it is, then the cell is wrong so the font color should be changed
to
red
.
c. Create an object collection named
circlecells
for all data cells from the
hitoriGrid
table belonging to the
circles
class.
d. For each cell in the
circleCells
object collection, test whether the background
color is
black
. If it is, change the font color to
red
.
e. After a half-second delay, run the unpeek() function.
10. Create the
unpeek()
function. The purpose of this function is to remove the hints cre-
ated by the peek() function and to restore the font colors to their previous state. Add
the following commands to the function:
a. Create an object collection named
allcells
referencing all of the data cells in the
hitoriGrid
table.
b. For each data cell in the
allCells
collection, test whether the font color is
red
. If
the color is
red
and the cell belongs to the
blocks
class, change its color to
black
;
otherwise, change its font color to
white
.
11. Create the
showsolution()
function. The purpose of this function is to show the com-
plete puzzle solution. Add the following commands to the function:
a. Create an object collection named
circlecells
for all of the data cells in the
hitoriGrid
table belonging to the
circles
class.
b. For each cell in the
circleCells
collection: i) set the font color to
black
; ii) set the
background color to
white
; and iii) set the background image to
url(circle.png)
.
c. Create an object collection named
blockcells
for all of the data cells in the
hitoriGrid
table belonging to the
blocks
class.
d. For each cell in the
blockCells
collection: i) set the font color to
white
; ii) set the
background color to
black
; and iii) set the background image to
none
.
12. Add comments throughout the file documenting your work.
13. Save your changes to the file, and then load
hitori.htm
in your Web browser.
14. Verify that you can switch puzzles by clicking the
Puzzle
buttons at the top of the
page, and that you are prompted to confirm whether you want to change your puz-
zle. Verify that you can view the complete solution to each puzzle by clicking the
Show Solution
button.
15. Verify that when you click each cell, the background changes from gray, to a circle,
to black. (Note: If you click the number within each cell, your browser might select
the cell number in addition to changing the cell background.)
16. Verify that you can test for errors by clicking the
Peek!
button, and that your errors
are displayed in a red font for about half a second.
17. Solve the first puzzle using the solution provided in Figure 13-37. Verify that you
receive a congratulatory message upon successfully completing the puzzle.
18. You are welcome to solve the second and third puzzles on your own, but they are
not part of the assignment. Submit your completed files to your instructor, in either
printed or electronic form, as requested.
