HTML and CSS Reference
In-Depth Information
Rebecca wants you to create an interface for this puzzle that is very similar to the one
you created for the hanjie puzzle. She already has stored three puzzles in a JavaScript file
named
puzzles.js
, and within that file she has created the variables shown in Figure 13-38.
Figure 13-38
Hitori puzzle variables
Variable
Description
hitori1Rating
hitori2Rating
hitori3Rating
The difficulty ratings of the three puzzles (Easy, Medium, Hard)
hitori1Numbers
hitori2Numbers
hitori3Numbers
Multidimensional arrays containing the numeric grids of the three puzzles
hitori1Blocks
hitori2Blocks
hitori3Blocks
Multidimensional arrays specifying the locations of the blocks within the
three puzzles
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
puzzles.
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
Web page.
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
when clicked.
g. Add an event handler to the button with the id
solve
to run the showSolution()
function when clicked.
