University of Washington, CSE 154

Lab 5: Hangman (Cookies; Regular Expressions)

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.

Valid HTML5 Valid CSS

Basic lab instructions

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.)

expected output

Download provided code

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

Understanding the provided code

screenshot

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

Exercise : Remember the word

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

screenshot

Recall: Debugging cookies

Cookies in Chrome Cookies in Firefox

Exercise : Counting guesses

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

screenshot

Exercise : Remembering guessed letters

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

screenshot

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)

Exercise : Count guesses properly; end of game

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

screenshot

Exercise : Generate clues

screenshot

Exercise : New Game logic

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

screenshot

Exercise : Letter guess buttons (for l33t H4x0rz)

The UI for making guesses is a clunky text box.

screenshot

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.)

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.)