Fundamentals of Computer Science 1 (CS151 2003S)

Homework 2: A Web-Based Mad Libs

Assigned: Tuesday, 11 February 2003
Due: Monday, 17 February 2003
No extensions!

Summary: For years, children of various ages have thrilled to the wonder of Mad Libs (probably a registered trademark; ask Kirsten's uncle). In this assignment, you will implement a Web-based version of Mad Libs using HTML, Scheme, and CGI.

Purposes: To give you some experience with useful Scheme. To help you further consider the relationships between Scheme and HTML.

Collaboration: I encourage you to work in groups of two or three. You may not work in groups of four. If you are feeling antisocial or having trouble arranging commont imes to work, you may work alone. If you do work in a group, you should try working with someone you haven't worked with before. You may discuss the assignment with anyone you wish. You may also obtain help from anyone you wish, but you should clearly document that help.

Turning it in: Send me the URL of your site's Front Door. It is likely that I will include links to your site somewhere in the course web, so it will be accessible everywhere. We can also see how long it takes to get indexed by search engines.


About Mad Libs

For those of you not familiar with Mad Libs, here's how they work:

  1. Someone (e.g., the manufacturer of Mad Libs), prepares a story with holes for various parts of speech. For example,

    Once upon a time, name1 and name2 went for a walk in the geographic-location. Suddenly, a adjective noun1 appeared in a puff of smoke. exclamation cried name1. Then the noun1 appeared to transitive-singular-verb them. ...

  2. Someone else, who we'll call the interrogator, asks a group of friends for each kind of word. The friends reply to each. For example,

    Give me an adjective. cute.
    Give me a transitive singular verb. defenestrate.
    Give me a proper name. Jack.
    Give me another proper name. Jill.
    Give me a geographic location. ocean.
    Give me an adjective. supercilious.
    Give me a noun. table Give me an exclamation, like Wow!: Wicked neat!

  3. The interrogator then fills in each part of the story and reads the result to his or her friends. For example,

    Once upon a time, Jack and Jill went for a walk in the ocean. Suddenly, a supercillious table appeared in a puff of smoke. Wicked neat! cried jack. Then the table appeared to defenestrate them. ...

Thrilling, isn't it?

Extending Mad Libs for the Web

As you can tell Mad Libs seems to be a natural candidate for implementation on the Web. One can use a form to prompt for the various kinds of input and a CGI script to put everything together.

Your assignment is to build a Mad Libs page for the Web. That is, you need to create a story, a form, and a Scheme program that generates the story when given appropriate input.

Basic Requirements

Your form should require the player to enter at least five different words.

You should use at least two different kinds of input on the form (e.g., both fields and buttons).

Try to have fun with this assignment.

Step-by-Step Instructions

Step 1: Prepare a Story

Write a story with blanks for the various parts of speech. You may find it easiest to start with a story and then start replacing various words with their part of speech.

For example, we might start with

Jack ate. Jack slept.

In this case, we observe that we have one proper noun and two verbs.

proper-noun intransitive-verb-1. proper-noun intransitive-verb-2.

Step 2: Identify Parts of Story

Make a list of the parts of speech as they appear in your story.

In the example, we have:

Step 3: Write a Scheme Procedure to Generate the Story

Write a Scheme procedure, (story part-of-speech-1 ... part-of-speech-n), which generates the string for an HTML page for the story.

For example,

(define story
  (lambda (proper-noun intransitive-verb-1 intransitive-verb-2)
      (head (string-append proper-noun "'s story"))
      (body (string-append
             (paragraph (string-append proper-noun " "
                                       intransitive-verb-1 "."))
             (string #\newline)
             (paragraph (string-append proper-noun " "
                                       intransitive-verb-2 ".")))))))

You do not need to document this procedure with the six P's.

You should test that the procedure works correctly from within DrScheme.

> (display (story "Sam" "taught" "ranted"))

<html lang=en>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sam's story</title></head>
<p>Sam taught.</p><p>Sam ranted.</p>

Note that if you rely on my Web utilities (and you should), you'll need to include the following line at the top of your file.

(load "/home/rebelsky/Web/Scheme/")

Step 4: Add (page)

Write a (page) procedure that calls story using appropriate CGI parameters. For example

(define page
  (lambda ()
    (story (get-cgi-variable 'proper-noun "PROPER-NOUN")
           (get-cgi-variable 'intransitive-verb-1 "INTRANSITIVE-VERB")
           (get-cgi-variable 'intransitive-verb-2 "INTRANSITIVE-VERB"))))

You do not need to document this procedure with the six P's.

Test page from within DrScheme.

Step 5: Add the CGI Glue

Create a file named story.cgi (or anything else that you'd like) whose primary purpose is to run the page procedure in your Scheme program. Here's what CGI glue files typically look like:


You should, of course, fill in the name of your Scheme file. However, you should leave the first path as /home/rebelsky/bin/schemeweb.

Share both the .ss and .cgi files and make the .cgi file executable. For example.

% cd public_html
% chmod a+r
% chmod a+r story.cgi
% chmod a+x story.cgi

Load your CGI file from the Web. You should see your story with the default values filled in.

Step 6: Test Without Forms

You can often test CGI scripts without building the corresponding form by adding the inputs as part of the URL. Many of you noted this when testing.

Try adding the following to the URL: (1) a question mark; (2) the name of one of your CGI variables; (3) an equals sign; and (4) a value. For example,

If all is going well, you should see a slightly different version of your story.

Step 7: Build the Input Page

Now you're ready to build an HTML page that will submit information to your CGI script. Recall that you use a form tag to indicate which script the information should be submitted to. For example,

<form method="get" action="story.cgi">

For each of the variables in your story procedure, create an input field (or set of checkboxes or ....). For example,

Enter an intransitive verb: <input type="text" name="intransitive-verb-1">
Enter another intransitive verb: <input type="text" name="intransitive-verb-2">
Select a name: 
  <input type="radio" name="proper-noun" value="Sam"> Sam
  <input type="radio" name="proper-noun" value="Joe"> William
  <input type="radio" name="proper-noun" value="Jonathan"> Jonathan
  <input type="radio" name="proper-noun" value="Daniel"> Daniel

Add a submit button.

<input type="submit" value="Tell Me A Story">

Remember to share your HTML page.

Step 8: Test Test Test

Try different values to see if your page works.

Step 9: Expand Your Page

If you have time and inclination, add more cool features to your story. I've suggested some in the next section.

Extra Stuff

If you are feeling particularly enthusiastic about this assignment. you might try adding any or all of the following features.



Tuesday, 11 February 2003 [Samuel A. Rebelsky]


Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Tue May 6 09:28:29 2003.
The source to the document was last modified on Mon Feb 17 18:56:29 2003.
This document may be found at

Valid HTML 4.0 ; Valid CSS! ; Bobby WorldWide Approved AAA

As far as I can tell, this document conforms to level Triple-A of the W3C's Web Content Accessibility Guidelines 1.0 available at

Samuel A. Rebelsky,