Project 4: Mad Lib Mania

For this project you will develop a web page that allows people to play a game of Mad Libs. Madlibs were a fill in the part of speech game from out youth, but if you need a quick refresher or haven't a clue what a mad lib is then you might want to check out www.madlibs.org.

Our madlibs web page will initially appear as a screen full of textfields with a button or two at the bottom. Each textfield on this page will correspond to a requested part of speech and will be filled in by the player and from which the hilarious text will be generated.

To get started there are some new skills we need to develop. But first...

Task 1:Create a new web page. Call the file madlib.html You can put the basic skeleton of html tags on this page to get yourself started. We will be learning our new skills on this page and in the end you will create you entire first madlib on this page. Be sure to link to the madlib.html page from your index.html page.

Sidebar On Forms

In order to write effective JavaScript, we need to add one more component to our web page that provides us with an additional level of organization. First let's review what we have with respect to organization now:

The <html> tag wraps around the entire web page. It should be the very first tag and the closing tag should be the very last tag.
The <head> tag occurs at the top of the web page (but after the html tag) and contains the title and any javascript code that you might write.
The <body> tag allows you to define the formatting of the page but also enclosed everything on the web page that should be visible.

We will now add one more tag that wraps around everything that the user can directly interact with. This includes buttons, textfields and other types of input values.

This tag is the <form> tag and should occur once somewhere in the body of your web page. Within the form tag all of your input tags will exist. To make a form tag you should add the following html.

Recall that when we specify a name inside a tag, this gives us a way or referring to that tag at a later time. Recall, we used name tags last week to help solve the image problem.

Henceforth, we can refer to the form tag created above as myform

Don't forget to close off the form tag after you are done with all of your inputs.

Task 2: If you have not already done so then add the appropriate form tags to your web page.

Note:All of your buttons and textfields will appear within the start and end form tag.

Adding textfields

Now that our web page is ready, I want you to add a textfield to the web page. We actually have never made a textfield, but it is suprisingly easy. A textfield is just like a button, but whereas a button had a type="button" a textfield will have a type="textfield". A textfield (like a button) should also be given a value and a name. The value is what will initially appear within the textfield and the name defines how we will refer to this tag.

Remember to give each input you create its own unique name. Also you can give your textfield an initial value of "" which means nothing will initially appear.

Task 3a: Add a single textfield to your web page. Your web page should look something like this when you reach this point.

Task 3b: Place some text just before your textfield so that the user will know what to enter on the web page. To do this, just enter text on the web page, as you normally would, before the input tag. Your web page should now appear like this

Task 3c: Add a button somewhere beneath the text field. The button should be labeled "Manipulate" and should be given a name. The button should not yet to anything when you click on it. Here is my page at the same point.

Manipulating textfields with javascript

At this stage, you have a clickable (but non-functional button), and a textfield that allows you to enter text but also does not seem to have any real purpose.

Now lets add a few javascript functions that will let us do a few things with the textfield and button.

Getting ready to Javascript

Up in the head of your web page we are going to need to add the lines that define the region where we will write javascript. As a reminder here are those lines you you to cut and past into you web page.

Task 4a: Cut and paste the following lines of text into the head portion of your web page.

<script type = 'text/javascript' language='Javascript'>

<!-- 



//-->

</script>

Task 4b:To verify that you have done everything correct add the following line of text in the middle of these four lines.

window.alert("This is a test");

Now save your page and test it. When you load the page you should immediately have a popup box that says this is a test. If that works, then delete the line and continue. If you did not get that message then try to find your error.

Making text appear in the textfield

As a warmup, we are going to build a function which adds the text "Hello There" to your textfield. Recall that functions do things.The thing that this function will do is to modify the value of a specific textfield. We have modified values of other things on our web pages in the past (including the background color and the title). This works similarly. If you have paid close attention you might realize that there is a pattern when you want to change the value of something. In general, changing the value of something is done with code such as

WHAT_YOU_WANT_TO_CHANGE = THE_NEW_VALUE;

In the case of the background color it was:

document.bgColor = "red";

When we deal with textfields it suddenly is no longer obvious how we refer to the thing "WE WANT TO CHANGE." What we will change it into we still be text in double quotes or a generic variable without double quotes.

There is a long and convoluted description we have to provide when we are in the head of our web page and want to refer to things that are named in the body (like the textfield and buttons). Fortunately, there is a pattern to this and once you can identify the pattern every else becomes easy.

Note that in the above example, the textfield should have a name, like textfield1. In order to refer to this textfield from within the head of our web page we use the following description.

document.myform.textfield1.value

Be careful to note where the tag name was inserted. You can insert any tag name into this position. However, the words document, myform, and value will never change. In addition you can only refer to a single tag name per line.

Within a javascript function, you can change (or add) text to any textfield with a line of the form.

document.myform.textfield1.value = "Hello There";

Note that in the line above, document is the web page, myform is the name of the form you put on the web page, and textfield1 is the name of the textfield that you put inside the form.

OK now for your first difficult task of the day.

Task 5: Create a function called addtext. This function should add the text "Hello There" to the textfield on your web page. The function should occur whenever your manipulate button is clicked. This function does not require any outside information and thus its parentheses will be empty. If you want to check this on out, here is my version.

New web pages and using buttons

Ok, let's take a brief break from textfields and look at how we can generate new but temporary web pages using buttons and functions.

We already know how to make buttons call functions and we already know how to write functions. However, there is a new thing we can do inside of the functions that will cause temporary web pages to be created.

There is a command called document.write that when specified with some text will create a temporary html web page.

Its really quite easy to do, here is an example:


document.write("<html>");
document.write("<head> <title>Temporary Web Page</title> </head>");
document.write("<body bgcolor= \"white\">");
document.write("<p>This is a temporary web page");
document.write("<p>Everything on this page is written with html");
document.write("<p>I can even put buttons on this page");
document.write("<p><input type=\"button\" value=\"Click Me\">");
document.write("</body> </html>");

I put the above code into a function and here is the web page I created. Click the button to see what happens. Feel free to look at the source of the pages in this example, they can be instructive. Basically, what happens is that when you click on the button, a function is called that does the document.write's. This puts the written html code onto a page, which is then viewed.

As we look at this code there are a couple of important lessons to be learned.

Everything within the double quotes is written just as if I were putting it on a normal web page. So all aspects of my skeleton web page appear.
When I need a " or a ' to appear somewhere within the web page, I have to put a \ just before the " or ' symbol.
Typos are incredibly easy to make here. Unless you are completely confident in your abilities, you should do a single line at a time and then test the heck out of it.

Task 6: Create a function called webcreate that builds your own simple temporary web page (just like I did). You should not cut and paste from my example however. Make a button so that you can test the function.

Putting the two lessons together

Well if we are ever going to get to the point where we can make a mad lib we need to put the two ideas together.

Task 7: Make a function called createtext and make a button the uses this function. The function should have nothing in its parentheses. To test the function add the line window.alert("Testing Createtext"); to your function. Load you web page and test out your button. If the message pops up then you have successfully completed this step and should remove the window.alert from the function. Otherwise try and figure out what went wrong.

If we want to grab text that is inside a textfield in our body so that we can add it to our temporary web page it is basically a combination of the two ideas.

We know how to access the value in the textfield with something that resembles

document.myform.textfield1.value

and we know how to create a temporary web page with something that resembles

document.write("This could be a webpage");

To combine these ideas we need an intermediate concept known as a variable. We have seen variables before when we passed information into function through the parentheses. It turns out we can use variables to get values from textfields as well. In order to get the value of a textfield and store it in a temporary variable, we add a line such as

var myfirstvalue = document.myform.textfield1.value;

This temporarily stores the value from the textfield into a generic variable called myfirstvalue which we will be able to use as a part of a document.write.

Note: When you put variables inside a function, they should all be placed immediately after the first curly bracket and before anything else in the function.

To use a variable inside a document.write line you just include the variable name without double quotes.

document.write(myfirstvalue);

A couple more thoughts on variables.

There is no limit to the number of variables you can create in a single function.
Every variable you create should have a unique but descriptive name but should not conflict with any other names in your entire web page.
You should follow the standard naming conventions when naming variables.

Task 8: Fill in the code for the function createtext. When the button is clicked a new temporary web page should be created that includes in some way the current text in your textfield. You should repeatedly test you function with different values in your textfield to verify that it works correctly. You can try mine out if you like.

Time to build the madlib

Task 9: Build a web page to allow a user to enter the different parts of speech for a given mad lib and then once they click a button, create a web page containing the completed mad lib. You may build a madlib based on the one given below or you can design on of your own of comparable length. Check out mine in action.

Bonus: When you use the document.write function it temporarily eliminates your original page such that you will have to use the back button on your browser to return to the textfields. Add a link to the bottom of the completed mad lib that will return you to the original page.

Grading: You will only be graded on task 9, the final madlib. The previous tasks (1-8) were to help you better understand the material, by introducing only a little bit of new material at a time.

Due May 4

Today I went to the zoo. I saw a ____________(adjective)

_____________(noun) jumping up and down in its tree. He

_____________(verb: past tense) __________(adverb) through the

large tunnel that led to its __________(adjective)

__________(noun). I got some peanuts and passed them

through the cage to a gigantic gray __________(noun)

towering above my head. Feeding that animal made me

hungry. I went to get a __________(adjective) scoop of ice

cream. It filled my stomach. Afterwards I had to

__________(verb) __________ (adverb) to catch our bus. When

I got home I __________(verb past tense) my mom for a

__________(adjective) day at the zoo.