HTML and CSS Reference
Rebecca wants you to create an interface for this puzzle that is very similar to the one
named puzzles.js , and within that file she has created the variables shown in Figure 13-38.
Hitori puzzle variables
The difficulty ratings of the three puzzles (Easy, Medium, Hard)
Multidimensional arrays containing the numeric grids of the three puzzles
Multidimensional arrays specifying the locations of the blocks within the
Rebecca also has provided you with the drawHitori() function, which writes the HTML
code for a Web table containing a hitori puzzle. The function has two parameters—
numbers , which is a multidimensional array of the numbers that will appear in the table,
and blocks , which is a multidimensional array indicating the location of each block in
the puzzle grid. Rebecca also has created the style sheet for this table and stored the
style rules in the hitori.css ile.
Your job will be to complete the application by writing the code to display the puzzles
in Rebecca's Web page, and to provide the interface for users to work with to solve the
Complete the following:
1. Using your text editor, open hitoritxt.htm and hitoritxt.js from the tutorial.13\review
folder, enter your name and the date in the comment section of each file, and then
save the files as hitori.htm and hitori.js , respectively.
2. Go to the hitori.htm file in your text editor. Take some time to study the structure
and content of the file. Add a link element to the head section linking the file to
the hitori.css style sheet file, and then add two script elements to connect to the
puzzles.js and hitori.js files. Save your changes.
3. Go to the hitori.js file in your text editor. Add a command to run the init() function
when the document is initially loaded by the browser.
4. Create the init() function. This function is similar to the init() function created in the
tutorial, and is used to display the first puzzle and add event handlers to the buttons
on the Web page. The function should do the following:
a. Write the text Hitori Puzzle 1 into the first h1 element on the Web page.
b. Write the value of the hitori1Rating variable into the first h2 element on the
c. Insert the HTML code returned by the drawHitori() function into the figure box
with the puzzle id. Use hitori1numbers and hitori1blocks as parameter values
for the drawHitori() function.
d. Create event handlers for the three buttons belonging to the puzzles class to run
the swapPuzzle() function when clicked.
e. Call the setupPuzzle() function.
f. Add an event handler to the button with the id peek to run the peek() function
g. Add an event handler to the button with the id solve to run the showSolution()
function when clicked.