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.
Overview:
For those of you not familiar with Mad Libs, here's how they work:
- 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. ...
- 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!
- 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?
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.
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.
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.
Make a list of the parts of speech as they appear in your story.
In the example, we have:
- proper-noun
- intransitive-verb-1
- intransitive-verb-2
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)
(make-page
(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"))
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sam's story</title></head>
<body>
<p>Sam taught.</p><p>Sam ranted.</p>
</body>
</html>
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/webutils.ss")
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.
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:
#!/bin/bash
/home/rebelsky/bin/schemeweb story.ss
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 story.ss
% 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.
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,
http://www.cs.grinnell.edu/~username/story.cgi?proper-noun=Sam
If all is going well, you should see a slightly different version of your
story.
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">
...
</form>
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">
<br>
Enter another intransitive verb: <input type="text" name="intransitive-verb-2">
<br>
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.
Try different values to see if your page works.
If you have time and inclination, add more cool features to your story.
I've suggested some in the next section.
If you are feeling particularly enthusiastic about this assignment. you
might try adding any or all of the following features.
- Make different paragraphs appear depending on certain selected values.
For example, you might ask whether someone prefers a happy or a sad
ending and present different text in the two situations. You might also
look at nouns and determine the proper indefinite article (
a
or
an
).
- Incorporate style sheets into your page.
- Customize the style sheet for the page based on input. For example,
if someone enters
green
as a color, you might make the page
green.
- Use a variety of kinds of input (not just fields and buttons, but
also pop-up menus and such).
- Create a multi-page story that carries values from page to page.
(You'll need to use hidden fields to store values between pages.)
- Incorporate numerical calculations of some sort.
- Anything else you deem relevant.
Tuesday, 11 February 2003 [Samuel A. Rebelsky]
;
;
