A2 – Madlib

Objectives: Gain experience using Strings and String functions in JavaScript.

Description: This program is intended to provide you with experience using Strings as well as text fields, labels, text areas, and command buttons. And don't forget the css.

Part I: Background

To adlib means "to improvise all or part of a speech". Madlib is a play on words, and is a word game where you provide several words by type (e.g., a verb, noun, place ...) and then the words get inserted into a brief story. You often end up with something silly, goofy, stupid, or downright strange. In fact, madlibs seem almost funnier when you start out with a very serious story, so instead of using ones that I found online I wrote the following depressing story:

Just as the old man slumped tiredly in his comfortable chair his wife shrieked from the kitchen, "Keep your smelly feet off the furniture!" "Quiet old woman!" he yelled back, leaning forward to glare at her through the doorway. "I'll put my smelly feet on the furniture if I want to. I don't need you telling me what to do!" Suddenly he felt a searing pain in his chest and he slumped back in his chair, his face ashen. "Old woman," he gasped, "call for help!"

She dialed the phone and heard "9-1-1. What is your emergency?"

"I need help! My husband, Ted, is having a heart attack. Send someone quickly !"

"Yes, ma'am! An ambulance is on its way!"

The old woman hung up and rushed to her husband’s side. "Hang on, old man," she began, but noticed that his smelly old feet were no longer on the furniture.

Now that's depressing! But with the use of madlib it becomes something like

Just as the peevish astronaut slumped rudely in his comfortable fishbowl his aunt shrieked from the closet "Keep your colorless bellybutton off the hamster!" "Quiet old rutabaga!" he yelled back, leaning forward to skate at her through the vent. "I'll put my colorless bellybutton on the hamster if I want to. I don't need you telling me what to do!" Suddenly he felt an enormous pain in his earlobe and he slumped back in his fishbowl, his pelvis indigo. "Old rutabaga," he gasped, "call for a wedding!"

She dialed the toaster and heard "9-1-1. What is your graduation?"

"I need help! My aardvark, Cromwell, is having an ankle attack. Send someone skittishly!"

"Yes, ma'am! A cruise ship is on its way!"

The old rutabaga hung up the toaster and rushed to her aardvark's side. "Hang on, peevish astronaut," she began, but noticed that his colorless old bellybutton was no longer on the hamster.

Part II: Process

Creating a madlib involves taking a pre-created string and inserting the random words into it. This requires string manipulation.

Download and modify the program that creates a madlib. I started it for you, but you have to finish it. There are several parts missing, and you will replace those parts.

  • Add a feature to convert every piece of user input (except the name) to lower case.
  • Finish adding the remaining keywords to the "story" variable.

I also added a few extra features to force you to use string functions.

  • The first feature allows the user to enter a word or phrase and then highlights the next occurrence of that phrase in the text area.
  • The next feature allows the user to edit the madlib in the text area. For example, the above madlib generated a few odd sounding phrases like "having a ankle attack." The replace feature allowed me to correct it to "having an ankle attack." Just because we're generating gibberish does not mean that it should not be grammatically correct!
  • There is also a feature that allows the user to print ONLY the heading and the text area. That is going to require you to set up a special css sheet for printing purposes to hide everything except the heading and the text area. Yikes! (Hint: In your css you will want to set a width for the text area of about 90% and also include "overflow:auto;"

Modify the code that I provided (link) to make the madlib work. Notice that I supplied default values in the text fields for testing purposes. You can change those or delete them. In fact, you can write your own story and use it instead of mine if you want the extra work. It's kind of fun!

Useful Tips


Be sure that your code is documented thoroughly, i.e., carefully comment your script like the example.

In all programs you should include a comment block at the beginning or your program with your name, the assignment number, and a brief description of the purpose of the program.

You should embed comments in your code whenever the purpose of subsequent lines may be unclear to reviewers.

Don't just write the code – be SURE you understand what is going on!

Initial Field

In all programs in this course you must be sure that the cursor automatically appears in the initial field.

When the program starts the cursor must be in the initial field, in this case the adjective1 field. You can accomplish this using a line like

Odds & Ends

Test the program on multiple browsers.

You can access the JavaScript error console in Firefox via Tools Console.

Be sure to use CSS to style your page and include either the XHTML Transitional or the XHTML Strict DOCTYPE.

Please refer to the grading rubric for grading details.