| This article is about creating a web page that | | | | and the sixteen characters of each starting position |
| implements a kids version of the popular Sudoku | | | | also include '0's (later displayed by the web page as an |
| game. Much of what is discussed will apply to the | | | | empty cell). Each solution along with its seven starting |
| implementation of many different types of on-line | | | | positions is represented in the Javascript by a string of |
| games. I did not invent this kids version of Sudoku, so if | | | | length 128 characters ((1solution+7starts)x16=128). |
| you are already familiar with Sudoku played on a four | | | | Here is an example of a string representing a solution |
| by four grid of cells you can skip to the section below | | | | and its seven starting |
| entitled "Sudoku For Kids: User Interface." If you are | | | | 020000"; |
| familiar with the standard (nine by nine) version of | | | | This is not a very space efficient way of representing |
| Sudoku but not familiar with the four by four version | | | | the data, but all 288 solutions and their starting positions |
| you can skip to the section below entitled, "Sudoku For | | | | require only about forty kilobytes of data transfer to |
| Kids: Four By Four Version." If this is all new to you | | | | the user's computer. When compared to the hundreds |
| then just keep on reading. | | | | of kilobytes required to download images associated |
| Standard Sudoku | | | | with our product advertisement, the forty kilobytes is |
| The standard version of Sudoku is played on a nine by | | | | not enough to significantly impact the user experience. |
| nine grid where in a fully solved puzzle each cell of the | | | | Representing the data as ASCII text made data |
| grid contains an integer between one and nine | | | | manipulation by Javascript functions simple. |
| (inclusive). The rule that defines a correct solution is: | | | | Here is what happens when you click on each button |
| each of the nine cell rows (horizontal collection of cells) | | | | (click on "Sudoku For Kids" in the author's resource |
| must contain each integer from one to nine once and | | | | box and then "View Source" in your browser if you |
| only once, each column (vertical collection of cells) | | | | would like to follow along in the HTML/Javascript |
| must contain each integer from one to nine once and | | | | code): |
| only once, and each three by three sub-group of cells | | | | New (calls function NewPuzzle): |
| must contain each integer from one to nine once and | | | | 1) Generate a random number from 0-287 to pick one |
| only once. There are nine sub-groups, three rows of | | | | of the 288 unique solutions. |
| three sub-groups per row (each sub-group is a three | | | | 2) Generate a random number from 0-6 to pick one |
| by three collection of individual cells) which cover the | | | | of the seven starting positions for the solution. |
| entire nine by nine grid of cells. | | | | 3) Initialize "solution" and "startpt" using parts of the |
| Sudoku For Kids: Four By Four Version | | | | forty kilobytes of downloaded data (which parts are |
| My version of Sudoku For Kids uses a four by four | | | | used is specified by the random numbers chosen in |
| grid of cells where in a fully solved puzzle each cell of | | | | steps 1 and 2 above). "solution" and "startpt" are each |
| the grid contains an integer between one and four | | | | arrays of sixteen numbers (possible values are 1-4 for |
| (inclusive). Analogous to the standard version, Sudoku | | | | solution and 0-4 for startpt). |
| For Kids requires each row, column and sub-group to | | | | 4) Call function ResetPuzzle (see next button). |
| contain each integer from one to four. In Sudoku For | | | | Reset (calls function ResetPuzzle): |
| Kids a sub-group is also a quadrant (the four | | | | 1) Set font color to black for all cells (might have |
| quadrants being upper-left, upper-right, lower-left and | | | | previously been red if incorrect answer). |
| lower-right). | | | | 2) For all cells if part of starting position fill in number |
| Sudoku For Kids: User Interface | | | | and make cell read only, otherwise make cell blank and |
| I put the game at the top of the page on the right side | | | | writable. |
| and display an advertisement of our product just to | | | | 3) Set number of hints received and PreChecks done |
| the left of the game. The game grid's four quadrants | | | | to zero. |
| have four different background colors to make it | | | | Hint (calls function HintPlease): |
| easier for young kids to consider those groups of four | | | | 1) Repeatedly generate random number from 0-15 until |
| cells when making sure all four integers are present. | | | | it corresponds to a blank cell or until you have tried |
| Four buttons appear just under the grid: "New" (start a | | | | 1,000 times. |
| new puzzle) / "Reset" (start the same puzzle again | | | | 2) If you failed to find a blank cell in step 1, go through |
| from the beginning) / "Hint" (fill in one of the empty cells | | | | each cell from 0-15 looking for a blank cell. |
| for me) / "Check" (display incorrect cells in red, or tell | | | | 3) If you have found a blank cell, copy the value from |
| me if the puzzle is completely solved). The "Hint" and | | | | the corresponding cell in "solution" to the cell in the |
| "Check" buttons are important for young kids. Any child | | | | displayed grid. |
| who can use a computer mouse and click on a button | | | | 4) Increment number of hints received. |
| can solve the puzzle, the limiting case being asking for | | | | Check (calls function CheckPuzzle): |
| hints until the entire grid is filled in. If the puzzle is solved | | | | 1) Make all cells' font color black. |
| and the user clicks on "Check" an alert box is | | | | 2) For each cell if value doesn't match "solution" (and if |
| displayed that congratulates the user for solving the | | | | the cell is not blank) then change the font color to red. |
| puzzle and tells him how many hints were received | | | | 3) If all cells matched "solution" then congratulate the |
| and how many times "Check" was clicked before the | | | | user. |
| final time when the puzzle had been solved. The hope | | | | 4) Increment the number of PreChecks. |
| is that the child will continue playing until "Hints: 0 / | | | | Sudoku For Kids: Creating the Puzzles |
| PreChecks: 0" is displayed at which time the child might | | | | I used a "C" program to generate the strings used by |
| be ready to move on to playing standard Sudoku. | | | | the Javascript to represent the solutions and start |
| Instructions are displayed just under the game, not at | | | | points. You can download the "C" source code from |
| the top. This is for the benefit of returning users who | | | | php/SudokuForKids.c relative to our home page link in |
| need not be distracted by reading the instructions | | | | the author's resource box. You may freely use this |
| again. | | | | code for any legal purpose without restriction but also |
| Sudoku For Kids: Operation of the Web Page | | | | with no warranties. |
| In order to make the web page self contained, all | | | | The code starts by finding the 288 unique Sudoku For |
| puzzles that the game can display are downloaded as | | | | Kids solutions, then for each solution it tries all possible |
| part of the Javascript in the HTML file (both solutions | | | | combinations of four starting cells and tests which |
| and starting positions are downloaded). The fact that | | | | starting positions can only result in this one ending |
| the user's browser need not communicate with the | | | | solution. After finding all possible starting positions for all |
| server while playing also allows the user to save the | | | | solutions, it writes each solution and seven associated |
| web page to his computer and play later even if he is | | | | starting positions to a file as a string in the format |
| no longer connected to the Internet. | | | | presented above (see pzl[147]="312..." above). |
| The four by four Sudoku For Kids game has only 288 | | | | The structure that represents the Sudoku For Kids grid |
| unique solutions (legal ways to fill in all sixteen cells). All | | | | contains a three dimensional array containing every |
| of the solutions can be "forced" by initially filling in four | | | | possible value that can be present in each grid cell |
| cells (four cells of the solution can be chosen such that | | | | ell]). When a puzzle is solved, num_vals_still... is equal to |
| only this particular one of the 288 possible solutions is | | | | 1 for all cells. SudokuSolver is a recursive function (it |
| consistent with the values chosen for the four initially | | | | calls itself) that finds all solutions by "guessing" each |
| filled in cells). Some of the 288 solutions have 12 | | | | possible value of each cell one at a time and then |
| different four-cells-filled-in-starting-positions and some | | | | calling itself on the "guess"-containing puzzle |
| have 128 different four-cells-filled-in-starting-positions. | | | | (num_vals_still... for that cell is equal to 1 and the |
| None of the 288 unique solutions can be uniquely | | | | "guess" is now the value in that cell), terminating a |
| specified using less than four cells in the starting | | | | branch of the tree when it encounters an unsolvable |
| position. | | | | position (num_vals_still... for some cell is equal to 0, |
| I chose to only implement starting positions with the | | | | which means some previous guess was incorrect). |
| minimum four filled in cells for two reasons. 1) Sudoku | | | | Sudoku For Kids: Conclusion |
| For Kids is already far easier than standard Sudoku | | | | In conclusion, because creating the Sudoku For Kids |
| because of the decreased size of the playing grid; it | | | | solutions and starting positions was computationally |
| seemed reasonable to make it otherwise as hard as | | | | expensive it was beneficial to create them in advance |
| possible. 2) Any user wishing to play an easier puzzle | | | | (not in real-time) so that the HTML and Javascript |
| can click on the "Hint" button to fill in additional cells | | | | running on the user's computer had little to do in order |
| before beginning to fill in cells manually. | | | | to implement the game, thus allowing the game to run |
| I chose to implement all 288 solutions with seven | | | | quickly in the user's browser. Downloading the solutions |
| starting positions for each solution allowing "thousands | | | | and starting positions within the web page also |
| of puzzles" (288x7=2016). The encoding I chose for | | | | eliminated the need for server-client communication |
| each puzzle uses an ASCII character for each cell, | | | | after web page download was complete, allowing the |
| sixteen characters to describe the entire grid. The | | | | user to save the web page and continue to play after |
| sixteen characters of the solution are each '1'/'2'/'3'/'4' | | | | ceasing to be connected to the Internet. |