HTML and CSS Reference
In-Depth Information
7. Click the OK button to load the second puzzle.
8. Click the Puzzle 3 button to load the third puzzle; but in response to the confir-
mation dialog box, click the Cancel button. Verify that the second puzzle remains
displayed on the Web page.
Using an Alert Dialog Box
The last feature that Rebecca wants you to add is a notification when a user has success-
fully solved a puzzle. A puzzle is solved when the background color is gray for all cells
in the marked class, and white for all cells in the empty class. If even one cell is not the
correct color, the puzzle is not solved. You'll test for this condition by examining every
cell in the table using the following code:
var allCells = document.querySelectorAll(“#hanjieGrid td”);
var solved = true;
for (var i = 0; i < allCells.length; i++) {
var cellColor = allCells[i].style.backgroundColor;
var cellClass = allCells[i].className;
if ((cellClass == “marked” && cellColor !== “rgb(101, 101, 101)”)
|| (cellClass == “empty” && cellColor !== “white”)) {
solved = false;
This code sets the initial value of the solved variable to the Boolean value true , and then
employs a for loop to test whether every table cell is the correct color for its cell class. If
one counter-example is found, the value of the solved variable is changed to false and
the code breaks off the for loop; there is no reason to continue the for loop after find-
ing an incorrectly colored cell.
If the value of the solved variable is still true after completing the for loop, the fol-
lowing code will display an alert box informing the user that the puzzle has been solved:
if (solved) alert(“Congratulations! You solved the puzzle!”);
You'll add this code to the checkSolution() function and then call the checkSolution()
function whenever a user clicks any one of the table data cells.
Search WWH ::

Custom Search