Assignment #3 - Forms and CGI
COMP 2513 Introduction to E-Commerce Technology

Description

For this assignment, you will create a "madlib" game. This game will consist of a web page that provides a series of text fields that allow the player to input different kinds of words (nouns, adjectives, verbs, names, places, etc.).  After these text fields are all filled in, the user will then click a "submit" button and a second web page will appear containing a story that uses the words that the player provided.   Your challenge is to utilize HTML Forms and the CGI standard to dynamically create the story using the entered words.

To see some examples of madlibs go to MIT's StoryFun Site

Procedure

  1. View the sample madlib page.
  2. Look through the html source and ensure that you understand its elements (it contains some useful comments).   Save this file as madlib.htm to your store folder on Eagle (Note: Alternatively, you can work with your html and cgi files on you laptop and then copy them to Eagle; this provides a backup of your work).
  3. View the .cgi file that goes with the sample page (Note: the Perl code is surrounded by HTML for browser viewing).
  4. Create a folder in your store directory called: cgi-bin\ and save the cgi Perl code as cgi-bin\madlib.cgi.
  5. Use an editor like WordPad to review and edit the madlib.cgi file.  Ensure you understand how the html and cgi code work together.  All of the lines that start with a # sign are comments (with the exception of the first line).  Remove the html surrounding the Perl code in the madlib.cgi file and save it.
  6. Test the madlib.cgi file to make sure that it works with the madlib.htm file.  To check point your web browser to: http://eagle.acadiau.ca/storeXX/madlib.htm  (where XX is the number of your store)>
  7. After you have gotten the basic madlib working ...  make up you own madlib story and select the nouns, verbs, adjective, etc you wish to act as variables for the story.
  8. Modify the html and the cgi files to fit your story and the interesting words you have selected to be variables.  Make sure the names of the cgi variables match the names of the input fields in your html page.
  9. The <form> tag in your webpage should have its action set to: "http://eagle.acadiau.ca/storexxxxx/cgi-bin/madlib.cgi"
  10. Test your new madlib page again, and if it works, congratulations! You just made a dynamic FORMS/CGI web application!!!
  11. Feel free to go back and customize the assignment through use of your technical knowledge. You'll get the very best mark by demonstrating your use of  technology beyond the sample madlib.
  12. If you run into any problems that you can't solve, contact your TA for assistance.  If this fails to resolve your problem send me an email.

Bonus

For a 10% bonus on the assignment, have your madlib game verify that the player has filled in all of the fields.

Submitting the assignment:

When completed, notify your TA that you have completed the assignment indicating the following:
  1. Your Team Number
  2. Your name and student number
  3. A .zip file containing your .htm and .cgi files
  4. The URL where the html can be found

Marking Scheme
The marking scheme is as follows.  All TAs will review each Madlib to ensure an individual effort and to ensure the fairness of the mark across the class.
    0 - Does not work
    1 - Works with some major technical problems
    2 - Works with minor technical problems
    3 - Works but is sloppy in terms of spelling and grammar
    4 - Works as well as the sample madlib
    5 - Shows technical ability and/or effort beyond the sample madlib
    1 extra point if the bonus part is completed.
Maximum mark is 5+1=6.
 

Summary of Related Links

Sample Page
http://eagle.acadiau.ca/demo/madlib.htm

Sample CGI
http://eagle.acadiau.ca/demo/madlib.cgi.txt

MIT's StoryFun Site
http://stuff.mit.edu/storyfun

CGI sources on the Web:
http://hoohoo.ncsa.uiuc.edu/cgi/
http://www.cgidir.com/
http://cgi.resourceindex.com/