Program Explanation Follow the below-given steps to perform the task of inserting comments. Return to the jpf_hitori_text.js file in your editor. Add the comments in the complete code of JavaScript- "use strict"; /* Author: Date: Global Variables ================ allCells References the TD cells within the Hitori table grid. Function List ============= startUp() Run when the web page is loaded; displays puzzle 1 and loads the event handlers for the web page buttons. setupPuzzle() Sets up a new puzzle, adding the event handlers for every puzzle cell. switchPuzzle(e) Swaps one puzzle for another based on the button being clicked by the user. Confirms the change before swapping in the new puzzle. findErrors() Highlights the errors in the Hitori puzzle in a red font. showSolution() Shows the solution to the Hitori puzzle checkSolution() Checks the current user's puzzle to verify whether it contains the complete and correct solution. drawHitori(numbers, blocks, rating) Returns a text string of the HTML code to display a Hitori puzzle table based on the contents of the numbers, blocks, and rating parameters. */ var allCells; window.addEventListener("load", startUp); function startUp() { //puzzleTitle store the value retreived by getElementByID. var puzzleTitle = document.getElementById("puzzleTitle"); //Text of innerHTML set as blank. puzzleTitle.innerHTML = ""; var puzzle = document.getElementById("puzzle"); puzzle.innerHTML = drawHitori(hitori1Numbers, hitori1Blocks, hitori1Rating); //puzzleButtons store the result fetched by querySelectorAll(). var puzzleButtons = document.querySelectorAll(".puzzles"); /*for loop iterates through the value of i less than the length of the puzzleButtons. */ for (var i=0; i<puzzleButtons.length; i++) { puzzleButtons[i].addEventListener('click', switchPuzzle) } setupPuzzle() var checkSolutionButton = document.getElementById("check"); checkSolutionButton.addEventListener('click', findErrors) var solveSolution = document.getElementById("solve"); solveSolution.addEventListener('click', showSolution) } /*function switchPuzzle() swaps one puzzle for the another. */ function switchPuzzle(e) { if (confirm("Do you want to switch puzzles, your work will be lost")) { var puzzleID = e.target; var puzzleTitle = document.getElementById("puzzleTitle"); puzzleTitle.innerHTML = puzzleID.value; var puzzle = document.getElementById("puzzle"); switch (puzzleID.value) { case "puzzle1": puzzle.innerHTML = drawHitori(hitori1Numbers, hitori1Blocks, hitori1Rating); break; case "puzzle2": puzzle.innerHTML = drawHitori(hitori2Numbers, hitori2Blocks, hitori2Rating); break; case "puzzle3": puzzle.innerHTML = drawHitori(hitori3Numbers, hitori3Blocks, hitori3Rating); break; } setupPuzzle(); } } /* function setupPuzzle() sets the new puzzle by adding cells for each puzzle. */ function setupPuzzle() { allCells = document.querySelectorAll('#hitoriGrid td'); //for loop will iterate through the value of i less than the length of allCells object collection. for (var i=0;i<allCells.length;i++) { //changes the background color. allCells[i].style.backgroundColor = 'white'; //changes the font color. allCells[i].style.color = 'black'; //changes the border radius value. allCells[i].style.borderRadius = '0'; allCells[i].addEventListener('mousedown', function (e) { //condition for the shift key. if (e.shiftKey) { e.target.style.backgroundColor = 'white'; e.target.style.color = 'black'; e.target.style.borderRadius = '0'; } //condition for the alt key. else if (e.altKey) { e.target.style.backgroundColor = 'black'; e.target.style.color = 'white'; e.target.style.borderRadius = '0'; } //condition for the keys other than shift or alt. else { e.target.style.backgroundColor = 'rgb(101,101,101)'; e.target.style.color = 'white'; e.target.style.borderRadius = '50%'; } //To prevent default action of the broswer preventDefault() is used...