Mini-Lab 2: Mad Libs


In this mini-lab you will modify JavaScript functions to experiment with strings, variables, and functions (both defining functions and calling them).

If your code isn't working as expected, try opening up Firefox's error console to check for (potentially) helpful error messages. If you get stuck, don't hesitate to ask the instructor or a teaching assistant for help.

Getting Started:

  1. Copy the Mad Libs web page to your COMP 105 workspace. Just as with Mini-Lab 1, you can do this in either of two ways:
  2. View the page source. Scroll down to the bottom third of the page, find where the BODY tag begins, and make sure you understand the HTML code there.

Experimenting with Variables:

Generate a Personalized Greeting:

  1. Find the "Generate Greeting" button in the BODY and its associated function definition in the HEAD. Read the function carefully to understand what it does. Note that while the alert function is a "Do Something" method (it does something for us), the prompt function is a "Return Something" method (it returns a value to us). That value is being stored in a variable, and is then being used in the next call to alert.
  2. Modify the function associated with the "Generate Greeting" button to provide a personalized greeting. Ask for a name, then use the name in an appropriate greeting. For example, if the user enters Mary , she should see an alert window that contains a message such as Hello Mary, I am glad to see you!.
    Tip: Don't forget that the "+" symbol can be used to combine two or more strings.
  3. Make sure your function has appropriate comments.

Mad Libs:

  1. Find the "Generate a Mad Lib" button in the BODY and its associated function definition in the HEAD. (A Mad Lib is a fun word game, in which you construct a nonsensical short story -- or in our case, just a sentence or two -- by filling in random words in certain spots. See the Wikipedia article for more information.)
  2. Modify the madLib function to construct a simple Mad Libs story. You should prompt for three words: one noun, one verb, and one adjective. Each word should be stored in an appropriately named variable. Then use an alert box to display a short story constructed using the words the user entered. A sample session might look like the following:
    [prompt] Please enter a noun.       [user enters] monkey
    [prompt] Please enter a verb.       [user enters] jump
    [prompt] Please enter an adjective. [user enters] happy
    [alert]  When I was walking to work today I saw a monkey!  It was
             very happy and it made me want to jump.
    [alert]  It's your turn to jump over the happy monkey.
    Be creative! If you wish, you may prompt for additional words and create a more involved story.
  3. Make sure your function has appropriate comments.

Publish to your web site:

  1. Make sure that you have updated the "Author:" and "With assistance from:" comments at the top of your source file.
  2. Edit the course "home page" you created in Lab 1 and add a link to your MadLibs page. For example,

    COMP 105 Assignments

    • Link to Mini-Lab 1: Numbers and Strings
    • Link to Mad Libs Mini-Lab

    In the link, refer to your new page with a relative pathname which is just the name of the file (e.g., <a href="MadLibs.html">). This tells the browser that the file to look for is in the same directory or folder as the current file (your main COMP 105 web page, in this case). You do not want to give a full or absolute pathname, like <a href="file:///Desktop/MadLibs.html">, because the location of your file on the server will not be the same as on your own laptop or classroom computer.

    If you worked in a team, each member of your group should do this, so each of you has a link to your MadLibs page.

  3. Upload both your modified COMP 105 web page and your page for this Mini-Lab to the server (remember that its host name for uploading is Test that the link to the Mini-Lab works on the server by clicking on it from your home page.