Exploring the Document Object Model - HTML, CSS, and Dynamic HTML - page 939

5. Create the swapPuzzle() function. As with the function from the tutorial case, the
purpose of this function is to swap one puzzle for another. Add the following com-
mands to the function:
a. Display a confirm dialog box asking users whether they wish to lose their work
on the puzzle. If the user clicks the OK button, have the function run the remain-
ing commands.
b. Create variables named title , rating , numbers , and blocks . The title variable
should store the text string “Hitori value ”—where value is the value assigned to
the button being clicked. The rating variable should reference the puzzle variable
containing the rating for the puzzle button being clicked. The numbers variable
should reference the puzzle variable containing the numbers array for the button
being clicked. Finally, the blocks variable should reference the puzzle variable
containing the blocks array for the button being clicked.
c. Set the text of the first h1 element in the document to the value of the title
variable.
d. Set the text of the first h2 element in the document to the value of the rating
variable.
e. Use the drawHitori() function with the numbers and blocks variables as parameter
values to return the HTML code for the puzzle Web table. Place the text of the
HTML code within the puzzle figure box.
f. Call the setupPuzzle() function.
6. Create the setupPuzzle() function. The purpose of this function is to set up the ini-
tial appearance and behavior of the puzzle. Add the following commands to the
function:
a. For every data cell within the hitoriGrid table, set the background color to the
value rgb(211, 211, 211) ; set the font color to black ; and set the background
image to none .
b. For every data cell, add an event handler to run the changeBackground() function
when clicked.
7. Create the changebackground() function. The purpose of this function is to cycle
through three possible backgrounds for each cell as it is clicked by a user. Use the
this keyword to reference the active cell. Add the following commands to the func-
tion within an if else structure:
a. If the background color of the cell is the color value rgb(211, 211, 211) , then: i)
change the background color to white ; ii) change the font color to black ; and iii)
change the background image to url(circle.png) .
b. Else if the background color is white, then: i) change the background color to
black ; ii) change the font color to white ; and iii) change the background image
to none .
c. Else: i) change the background color to the value rgb(211, 211, 211) ; ii) change
the font color to black ; and iii) change the background image to none .
d. After the if else structure, insert a command to call the checkSolution()
function.
8. Create the checksolution() function. The purpose of this function is to test, with each
mouse click of a table cell, whether a user has successfully solved the puzzle. Add
the following commands to the function:
a. Create a variable named allcells containing the object collection of all table data
cells in the hitoriGrid table.
b. Create a variable named solved , setting its initial value to the Boolean value
true . The purpose of the variable is to track whether the puzzle is solved or not.
c. Loop through the contents of the allCells object collection. For each cell, test
whether the background color for the circles class cells is white , and whether the