Developing the Flag Quiz in PHP (both ways)

We all now the problem, it's described in the text on page 32.

The text is the .pdf we have been using since the beginning of the semester:

http://www.cs.indiana.edu/~dgerman/eowp06.pdf

Some of the things we need are here:

http://silo.cs.indiana.edu:11350/images/

Every time we work out a problem like this we can apply our template:

First step is to determine what our state is made of.

The following are immediate candidates:

message - what we said last to the user
questions - things still to be asked
correct - number of correct answers given by user thus far
total - number of questions presented to the user thus far
key - the correct answer to the current question

The inputs also need to be discussed:

answer - user types the name of the country in a text box, and sends it

So I guess we have what we need to get started.

<? ?> <form> </form>

Basically this includes a code portion, along with a "get ready for more input" portion.

We sketch more of the basic layout:

if ($message) { } else { $message = "Welcome to the game, are you ready?"; }

We also enhance the content of the form as well:

<?=$message?> <p> Press <input type="submit" value="Proceed"> to move on. <input type="hidden" name="message" value="<?=$message?>">

Obviously, we are just acknowledging the initialization of $message.

Perhaps this would be a good time to approach state initialization in general:

$correct = 0; $total = 0; $questions = "Italy,Australia,United States,South Africa,Spain,China,Russia,Brazil"; $key = ""; // there is no key in the beginning

Let's decide to save the state on the client side:

<input type="hidden" name="correct" value="<?=$correct?>"> <input type="hidden" name="total" value="<?=$total?>"> <input type="hidden" name="questions" value="<?=$questions?>"> <input type="hidden" name="key" value="<?=$key?>">

Now let's make some changes. Add (at the top of the code part) these definitions:

  $url = "http://www.cs.indiana.edu/classes/a202-dger/fall2005/notes/flagquiz/images";
  
  $names = array ("Australia", "United States", "Russia", "Spain", "Italy", "South Africa", "Brazil", "China");

Also modify the line that initializes $questions to:

    $questions = join(",", $names);

This way we leave ourselves open to the idea of shuffling, initially.

We should now take care of the user submissions coming after the initial screen.

    if ($key) {
      if ($answer == $key) {
        $correct += 1;
      } else {
    
      }
      $total += 1;
    } else {
     
    }

Next we need to grab the answer key that follows from the remaining questions:

    list($key, $questions) = split(",", $questions, 2);

At the same time we need to update the message, and be ready to ask questions. So we have:

Update the message if the answer is correct:

  $message = "Very good.";

Update the message if the answer is incorrect:

  $message = "No, that was not it.";

Update the message with the new values of the score:

  $message .= " Score currently: $correct out of $total.";

Prepare the question you want to ask:

  $question = "Whose country is this flag: <img src='$url/$key.png'> <input type=text name='answer'> <p>";

Show the question and get ready for (more) user input:

  <?=$question?>

Now the program works almost as intended, except at the end of the quiz.

So we need to not ask a new question if we are not able to:

    if ($questions) {
      // ... 
    } else {
      $question = "The game has ended, new game starting, are you ready? <p>";
      $correct = 0;
      $total = 0;
      $questions = join(",", $names);
      $key = ""; // there is no key in the beginning
    }

Furthermore we need to tie seamlessly into the next game.

      $message = "Welcome to a new game, score currently: $correct out of $total.";

That goes into a previously empty branch of the program.

This is what we have obtained:

http://silo.cs.indiana.edu:11350/examples/one.php

What remains to be done:

shuffle the array of images every single time we restart the game
add a reset button (this will come in handy next, since sessions are sticky)
turn the program into a session-based program (server-side state)

These are very simple things.

A. To shuffle the array you need to invoke the following with each initialization:

shuffle($names);

You can check with php.net on the use of shuffle.

You need to shuffle the array each time you initialize or re-initialize the code.

B. To add a reset button you do two things:

B.1) Add the button to the form:

Press <input type="submit" name="reset" value="Reset"> to reset the game.

B.2) Change the condition in the outer if to:

if ($message && ! $reset) {

C. Finally, to switch from client-side state to server-side state:

C.1. All the hidden fields vanish.

C.2. For each hidden field wiped out add a session registration statement.

session_register("...");

Each such statement register the name for a state variable.

C.3. Make sure the first statement is

session_start();

Also, all of these changes should be made to a copy of the original program.

Overall you should create two programs and post links to them on your website.

You should create symbolic links to them too and post those in protected.

The links in protected should show the source code.

To create the links assume you have one.php in some folder /htdocs/something

Go to protected and establish the link for the source code as follows:

ln -s ../something/one.php one.phps

Then make a link available to the new one.phps

Last updated on Nov 13, 2008, by Adrian German for Essentials of Web Programming