HTML and CSS Reference
In-Depth Information
Case Problem 4
Use your
knowledge of
the JavaScript
document object
model to create
a word search
puzzle for a
children's
Web site.
Data Files needed for this case Problem: headmenu.jpg, kglogo.jpg, kgstyles.css,
links.jpg, modernizr-1.5.js, searchtxt.js, title.jpg, words.js, wordsearch.css, wordtxt.htm
Kiddergarden
Pete Burnham of the Web site Kiddergarden
has asked for your help
in developing a word search game for his site. He envisions an app that automatically
writes the HTML code to create a grid of letters containing a group of hidden words, and
to create the list of the words to be found in the grid. He wants users to be able to click
on individual letters in the puzzle as they find the hidden words, and to be able to click
the accompanying word in the list to check it off as they go.
He already has created a sample word search puzzle and word list, which are stored
in the
words.js
file. The title of the puzzle has been stored in the
puzzleTitle
variable. The
list of words is saved in an array named
wordList
. The grid of letters has been stored in a
multidimensional array named
letterGrid
. Finally, the location of the hidden words has
been saved in a multidimensional array named
wordGrid
.
Pete also has created the drawWordSearch()
function, which returns the HTML code
for the Web table containing the word search letters. The function has two parameters:
letters
, containing a multidimensional array of the letters, and
words
, containing a
multidimensional array of word locations within the grid. The Web table has the id
wordsearchtable
, and data cells within that table that contain the letters from hidden
words all belong to the
wordCell
class.
Your task is to use these building blocks to create the project by writing the code that
allows users to interact with the puzzle and to display the puzzle solution if they get
stuck. Figure 13-43 shows a preview of a possible solution to this project.
Figure 13-43
word search puzzle
