Back to DFS's Workshop Page
Back to Agenda Page

Coloring Recursively Problem

Write a pair of scripts to be used through a web browser to allow the user to color the quarters of a square formed by the square's two diagonals. This mini-project will prepare you to tackle a data mapping project.

• There are to be four triangular quadrants.
• There are to be four colors for the user to choose from.
• There should be a "reset" link to allow the user to start over.
• Allow the user to click the quadrants of the square a maximum of four (4) times before he must restart the script.
• One script will be sent information by the other so that the square can be drawn using the equivalent of a base map.

To see how this should work, view this exemplar solution.

This proposed solution consists of eleven (11) files:

1. A base picture which has a square and its diagonals drawn in it
2. Eight (8) pictures for selecting the color to use -- four for when a color is clicked and four for when it is not
3. A PHP script which displays the picture of the (modified) square and four of the color-selection pictures; it allows the user to select a color to use and to select the quadrant to be colored
4. A PHP script which colors the quadrants of the square using the selected colors

The Main PHP Script

One of the interesting features of this solution is the fact that the script calls itself recursively. See the Recursive Factorial for a discussion of the recursive use of a script.

To understand how and why information is passed from the script to itself, have a look at the source code of the page before and after a quadrant has been clicked.

The picture of the square is made clickable using the map tag. Look at the source code of the main page to see how the attributes are specified.

The Graphics Script

The graphics script, paintsquare.php in this solution, is called in the main script with parameters which specify the colors picked and the order in which they are picked.

The script does the following:

1. Receive the parameters from the main script
2. Load the base picture into RAM
3. Populate an array with coordinates to be used when coloring the quadrants with a floodfill function
4. Initialize colors for coloring the quadrants (and a background color)
5. Color the quadrants
6. Output the image to the browser