Add the switchPuzzle() function, which switches the page between the three possible Hitori puzzles. Include the event object as a parameter of the function and add the following commands:

Declare the puzzleID variable equal to the ID of the event object target.

Change the inner HTML of the element with the ID "puzzleTitle" to the value of the value attribute of the event object target.

Use a switch-case structure with the puzzleID variable that loads the appropriate HTML code for each of the three puzzles into the page element with the ID "puzzle". Use the drawHitori() function to generate the HTML code and assume that puzzleID is limited to the values "puzzle1", "puzzle2", and "puzzle3".

After the switch-case structure, call the setupPuzzle() function to set up the features of the selected puzzle.

Enclose all of the commands in the switchPuzzle() function within an if statement that displays a confirm dialog box asking users whether they want to switch puzzles even though their work will be lost. If the confirm dialog box returns a value of true, run the commands within the if statement command block.

Use the setupPuzzle() function to set up the features of the puzzle table. Within the function add the following commands:

Use the querySelectorAll() method to create an object collection of all of the td elements within the hitoriGrid table and save the object collection in the all cells variable.

Use a for loop that loops the allCells object collection and, for each cell, change the background color style to white, the font color to black, and the border-radius value to 0.

Within the for loop, add a mousedown event listener for each cell in the allCells collection that changes the cell's appearance depending on whether the Shift key, the Alt key, or no key is pressed by the user. Add the following commands to the anonymous function for the mousedown event:

Change the background color to white, the font color to black, and the border radius to 0 if the user is pressing the Shift key.

Change the background color to black, the font color to white, and the border radius to 0 if the user is pressing the Alt key.

Otherwise, change the background color to rgb(101, 101, 101), the font color to white, and the border radius to 50%.

To avoid inadvertently selecting the text of the table cells, include a command to prevent the default action of the browser in response to the mousedown event.

Rebecca wants a different mouse cursor depending on whether the user is pressing the Shift key, the Alt key, or no key when the mouse pointer moves over a puzzle cell. Within the for loop, add a mouseover event listener for each puzzle cell that runs an anonymous function that

Changes the cursor to the jpf_eraser.png image or the generic cursor named "alias" if the user is pressing the Shift key.

Changes the cursor to the jpf_block.png image or the generic cursor named "cell" if the user is pressing the Alt key.

Otherwise, changes the cursor to the jpf_circle.png image or the generic cursor named "pointer".

Finally, within the for loop, add an event listener that runs the checkSolution() function in response to the mouseup event to test whether the user has solved the puzzle.

Use the findErrors() function that will highlight incorrect cells by displaying the cell number of an incorrect cell in a red font. Add the following commands:

Use a for loop that goes through all of the cells in the allCells object collection. If the cell belongs to the blocks class but has a background color of rgb(101, 101, 101) or if it belongs to the circles class but has a black background, change the font color to red.

The red font colors should appear only briefly. After the for loop, insert a setTimeout() method with a 1-second interval. Within the setTimeout() method, add an anonymous function that loops through every cell in the allCells collection, changing all cells with a font color of red back to white.

 

var allCells; window.onload = startUp(); function startUp() { document.getElementById("puzzleTitle").innerHTML = "Puzzle 1" document.getElementById("puzzle").innerHTML = drawHitori (hitori1Numbers, hitorilBlocks, hitorilRating); var puzzleButtons = document.getElementsByClassName("puzzles"); for (var i=0; i