Create a web site that plays the game Super Tic Tac. The game has an opening page index.php that presents a form where you enter your name. Clicking Start Game then takes you to the actual game page tictac.php.
The game presents a playing board with 36 squares. Each square can be blank, an X, or a O. The board is filled in with an initial solution of some X’s and O’s. The rules of the game are:
- Each row and column has the same number of X’s and O’s. If the board has 6 columns, a correct solution will have 3 X’s and 3 O’s.
- There be no more than 2 X’s or 2 O’s in a row.
- No column or row is repeated.
For cells other than the initial values, clicking on an empty cell sets it to an X. Clicking on it again sets it to an O. Clicking a third time returns it be blank. The goal of the player is to select the correct X and Y values for each cell. Notice: Clicking on a cell that has an initial value does nothing! When all cells have an X or O in them, any wrong cells should have the CSS class wrong, so they will display with a red background:
<td class=”wrong”>X</td>
You will likely have something other than just “X” here (like maybe a button to click?).
At the head of each column and each row there are two numbers. The first one (green) is the current number of X’s in the row or column. The second is the current number of O’s. Note that the intial solution does not set those values. It is your responsibility. These numbers make it much easier to solve the puzzle, since if you see that you have 3 X’s, you know all other cells must be an O.
There is an operational version of the game available so you can see how it works.
There is only one solution for this game. This image presents what a solved puzzle should look like:
There is only one solution for the game. You are not to create additional solutions.
Since I want this exam to focus on programming, I am providing starter files for your web site. They are initial version of index.php, tictac.css, tictac.php and the image files. I have also included jQuery in case you need it. These files are, of course, subject to modification.
Important grading criteria
Clicking on a tile that is part of the initial puzzle should not do anything at all.
Be sure you fill in the name where it currently says Put Name Here.
The Goodbye link returns you to the home page.
All form methods must be POST. I should be able to reload any page at any time without having to resubmit the forms. Your solution must use Post-Redirect-Get (a POST page or pages).
Hints and Suggestions
You can implement this entirely in PHP or use JavaScript to handle the button presses or any mix you choose.
The starter page gives every button a name of “cell” and a valid of “row,column”. The top-left cell has a value of “1,1”. You can use the PHP explode function to get the two values from this string. You are free to change this, but I found it an easy way to indicate what button has been pressed.
If the last cell you click on is an O, you’ll have to click to get an X first, then the O. The cell will indicate a wrong answer for the X, then correct answer for the O. That’s is the way my solution works and is perfectly okay.
You are welcome to inspect the source for the example solution. Since I implemented my sample solution in PHP, you will not be able to see the actual implementation logic, but you are welcome to see how the HTML tags, classes, etc. should work.