HTML and CSS Reference
In-Depth Information
Introducing the Document Object Model
You meet with Rebecca to discuss her idea for a Hanjie Puzzle page. Hanjie is played
on a square grid in which each grid cell is either darkened or left empty. At the top of
each column and to the left of each row is a series of numbers that indicate how the cells
in that column or row should be filled in. A column heading containing the text 3 7 2 ,
for example, means that there are blocks of three darkened cells, seven darkened cells,
and two darkened cells in the column. The exact location of the blocks and the space
between them is not provided and must be derived using logic and the clues provided by
the other column and row headings. A successfully solved puzzle will display a pixelated
image (see Figure 13-1). Most hanjie puzzles include a hint about the image and an indi-
cation of the puzzle's difficulty.
Figure 13-1
a hanjie puzzle
marked blocks
within this column
marked blocks
within this row
Figure 13-2 previews the application—or app —that you'll develop for Rebecca. Users
will be able to click one of three buttons to select a different puzzle. Initially the puzzle
will be hidden, with all of the cells displayed in gold. When a user clicks a table cell, the
color will change to gray to indicate a marked cell; if the user clicks the same cell again,
the color will change to white to indicate an empty cell. A third click on the same cell
will change the color back to gold to denote an unknown cell. Rebecca wants users to
be able to check their progress, so she wants you to provide a button that enables users
to preview the solution with errors indicated in either red or pink. If a user wants to quit,
he or she should be able to click another button to view the puzzle solution.
Search WWH ::

Custom Search