Mad Libs Activity

Introduction

In this activity 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 102 workspace. Just as with the previous web page, you can do this in either of two ways:
   • Either right-click (or control-click) on the link and save the file to the same place where your home page for this course is,
   • Or create a new web page (in Aptana, Brackets, or DreamWeaver, for example), then replace the contents of the page with the contents of the Mad Libs page (go to the page, view the Page Source, and select the whole thing to copy and paste). Be sure that your new file name ends in .html.

     Tip: Here are some handy keyboard shortcuts:
         Select-All: Command-A (Mac), Control-A (Windows)
         Copy: Command-C (Mac), Control-C (Windows)
         Paste: Command-V (Mac), Control-V (Windows)
     

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.
   OR
   [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 a previous activity and add a link to your MadLibs page. For example,

   COMP 102 Assignments

   • Link to Numbers and Strings Activity
   • Link to Mad Libs Activity

   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 102 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 student.cs.kzoo.edu 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. After the link, list your teammates in parentheses; for example, "MadLibs Activity (with Gandalf and Galadriel)".

3. Upload both your modified COMP 102 web page and your page for this activity to the student.cs.kzoo.edu server. Test that the link to this activity works on the server by clicking on it from your home page there. (Make sure that your browser is looking at the page on student.cs.kzoo.edu, not your local version.)