Unit 5. Review "A" The Japanese Puzzle

Unit 5. Review "A" The Japanese Puzzle 

Tutorial 5 Review - A

The Japanese puzzle factory

1.    Use your text editor to open the files stabletxt.css and sudokutxt.htm from your student data files.  Enter your name and the date in the comment section of each file.  Save the files as stable.css and sudoku.htm, respectively, in the same folder.

2.    Return to the Sudoku.htm file and add links to the jpc.css and stable.css style sheets.

3.    Scroll down to the section element.  Directly below the opening <section> tag, insert a table element that will be used to display the Sudoku puzzle.  Give the table element the class name spuzzle.

4.    Add a caption to the spuzzle table containing the text Sudoku.

5.    Create a table head row group containing a single row.  The row should display 10 heading cells.  The first cell should be blank and the remaining nine cells should display the digits from 1 to 9.

6.    Create a table body row group containing nine table rows with the first cell in each row containing a table heading cell displaying the letters A through I.

7.    After the initial table cell in the first, fourth, and seventh rows, insert three table data cells spanning three rows and three columns each.  Altogether, these nine data cells will store the nine 3x3 boxes that are part of the Sudoku puzzle.

8.    In the first row of the table body, put the three table data cells in the greenBox, goldBox and greenBox classes, respectively.  In the fourth row, the three data cells belong to the goldBox, greenBox and goldBox classes. In the seventh row, the three data cells belong to the greenBox, goldBox and greenBox classes.

9.    Go to each of the nine table data cells you created in the last two steps.  Within each data cell, insert a nested table belonging to the subTable class.  Within each nested table, insert three rows and three columns of data cells.  Enter the digits from the figure on the attached sheet in the appropriate table cells.  Where there is no digit, leave the table cell empty.                            

10.Save your changes to the file.  Go to the stable.css style sheet.

11.Create a style rule to collapse the borders of the spuzzle and subTables.

12.Add a 5 pixel outset gray border to the table data cells within the spuzzle table.

13.Set the font size of the table header cells within the spuzzle to 8 pixels and the font color to gray.

14.Set the height of the table header cells within the table body row group of the spuzzle table to 40 pixels.

15.For the table data cells within the subTable table, add the following styles:

a)    set the font size to 20 pixels and the font color to blue.

b)   set the width and height to 40 pixels and center the cell text both horizontally and vertically.

c)   add a 1 pixel solid black border around the cell.

16.For table data cells nested within the goldBox class of table cells, display the background image file gold.jpg centered within the cell and not tiled.  (Hint: use background position values of 50% for both the horizontal and vertical directions.)

17.For table data cells nested within the greenBox class of data cells, set the background image to the green.jpg file, once again centered within the cell without tiling.

18.Add descriptive comments throughout your style sheet to document your work.

19.Save your changes to the file and then reload sudoku.htm in your Web browser to see the layout and design of the Sudoku table.