,

Lab :

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Basic lab instructions

Make sure to click the Attendance Check-In link on the Labs page to get your participation points.
You may want to bring your textbook to labs to look up syntax and examples.
Have a question? Ask a TA for help, or look at the book or lecture slides.
We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
You don't have to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab; there is no homework from lab.

Today's lab

Today we will create a Hangman game using PHP, forms, cookies, and regular expressions. (If you write the lab as intended, all string checks and manipulations can be done without any loops using PHP's preg_match and preg_replace.)

Download provided code

First download the following PHP file and open it in your editor:
hangman.php
Save it as hangman.php (not .phps).
Open your file transfer program and connect to Webster, so you can test your code.
Upload your hangman.php to Webster.
Open the hangman.php in the browser so you can see your page as you write it.

Throughout this lab, you can try out our runnable solution if you want to see how it behaves.

Understanding the provided code

Take a moment to look over the provided code and understand it.

The HTML is already provided and some PHP code.
It picks a random word from a words.txt dictionary ($word).
The game state includes:
- the number of guesses remaining ($guesses),
- a set of letters available that can be guessed ($available),
- and a clue string showing the correct letters guessed so far ($clue), which is computed based on $guesses and $available.
Use these variables in your own code.

Exercise : Remember the word

Right now the page chooses a new random word every time it is loaded.

Use a cookie to make the page remember the word so that it is chosen once for a given user and that same word is retained every subsequent time the page is loaded.
Each user should get his own word.
If the user closes the browser or clears their cookies, a new word will be chosen.

Recall: Debugging cookies

Chrome: F12 → Resources → Cookies; Firefox: F12 → Cookies

Exercise : Counting guesses

Make the page count how many guesses the user has made, using a cookie.

When the user types a letter and clicks Guess, it submits a form back to hangman.php with a GET parameter named guess.
The count of guesses remaining is stored as a variable $guesses.
For now, every time the user presses the Guess button (every time that query parameter is passed), assume that the guess is "wrong" and decrease the guesses count by 1.
If you update $guesses properly every time, the Hangman image will automatically show the right stick man in the sequence.

Recall: Regular expressions in PHP

function	description
`preg_match(regex, string)`	returns `TRUE` if `string` matches `regex`
`preg_replace(regex, replacement, string)`	returns a new string with all substrings that match `regex` replaced by `replacement`
`preg_split(regex, string)`	returns an array of strings from given `string` broken apart using given `regex` as delimiter (like `explode` but more powerful)

The next exercise uses regular expressions. (lecture slides)

Exercise : Remembering guessed letters

Now let's make the page remember what letters the user has guessed, using a cookie.

Instead of storing what letters the user has guessed, we will keep a string of the letters the user has NOT guessed yet (letters that are "available" to be guessed) as variable $available.
The $available is a long string that starts as "ABCDEFGHIJKLMNOPQRSTUVWXYZ". When a letter is guessed, remove it from this string by replacing it with a non-letter such as a space (" ").
Use a regular expression to replace characters in strings.
Optional validation: If the user tries to guess a letter that has already been guessed, or something that is not a letter, ignore it and don't dock the user 1 guess.

Exercise : Count guesses properly; end of game

Make the game more robust by adding the following code, using a regular expression:

If the user guesses a letter that is part of the word, it is a correct guess, so do not reduce their guesses count.
If the letter guessed is NOT part of the word, reduce the count of guesses by 1.
End of game (optional): Once the user has 0 guesses left, don't allow further guesses to be made. Show a "game over" message in a div with the id of lose .

Exercise : Generate clues

A variable $clue is set to store a "clue string" revealing the letters he/she has guessed correctly so far. Right now it is just set to "???".
Make the clue string show successfully guessed letters as themselves, and show ? for unguessed letters.
Use a regular expression to combine the word ($word) with the guesses the user has made ($available).
(Hint: If you do it cleverly, you can do it in a single line with just one regex function call!)

Exercise : New Game logic

Now let's make it so that the user can start a new game.

When the user clicks New Game, the form POSTs back to hangman.php with a newgame query parameter set to true.
Write code that looks for this parameter, and if it is set, starts the game state over and chooses a new random word.
Be careful to update all of your cookies properly!

Exercise : Letter guess buttons (for l33t H4x0rz)

The UI for making guesses is a clunky text box.

Replace it with 26 letter buttons, pressing each of which guesses the corresponding letter.
Hint: Each letter button must contain its own form. Put the forms into a div with id of letters (so our CSS file will style them).
If you are really awesome, make the letters gray out (disable) when they have already been guessed or when the game is over.
(While you're at it, delete the "hint" area that tells the player the right word and other debug info.)

If you finish them all...

If you finish all the exercises, you can add any other content or code you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

If you want a few extra problems to work on, there are some bonus regex problems on the next two slides.

Great work!

Exercise : Regular Expressions 1

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex. (You don't have to complete all of them, but do a few to get the idea.)

All lines that start with either 'q' or 's', and that also contain a double z ('zz') later within the same word on that line. (try it) (data)
All lines that contain a string of at least 5 vowels (a, e, i, o, or u) in a row. (try it) (data)
Lines that are at least 25 characters long. (try it) (data)
Lines that end with two or more occurrences of "?!", as in, "Huh?!?!" (try it) (data)

Exercise : Regular Expressions 2

Write a regular expression (slides) that would match the following kinds of patterns. You can use the site Rubular to test your regex. (You don't have to complete all of them, but do a few to get the idea.)

a valid amount for a US coin: 1, 5, 10, 25, or 50 cents (try it) (data)
an IP address, of the format 128.208.3.88 (accept any 3-digit numbers between the dots) (try it) (data)
strings that contain at least 3 words, each separated by one or more spaces (try it) (data)
lines that contain a quotation with "quote marks" around it (try it) (data)