CISC103, Fall 2005

Activity 6: Mad Libs

Introduction

In this activity, you'll be given some sample code that generates

"Mad Libs", are word games popular with the 9-12 year old set. Adults can enjoy them too if they allow themselves to be silly enough.

In this lab, you'll be given some source code for a Mad Lib from a textbook I'm evaluating for future use in CISC103. You'll then be asked to create you own Mad Lib web page following the model.

Learning objectives

By the time you complete this activity, you should know how to do the following in JavaScript:

• work with string concatenation
• work with forms in JavaScript
• work with functions and event handlers

You should also know how to put JavaScript into an XHTML file that will pass validation at validator.w3.org.

Step-by-Step Instructions

Step 1: Look over the ml.html web page

Look at the page: http://copland.udel.edu/~pconrad/cisc103/05F/activities/activity06/

Try making a Mad Lib from this page. Also do a "view source" and read through and try to understand the XHTML and JavaScript source.

Step 2: Add the changes necessary so that this html validates

Using the sample template from the 10.20 lecture, make this page validate. "Tentative" validation based on implied UTF-8 encoding is good enough; you may need to leave out the <?xml version="1.0" encoding="UTF-8"?> declaration if you want the page to work in Internet Explorer.

Hints:

1. Instead of <center>, try <div style="text-align:center;">. Be sure to properly nest when you replace <center> with <div>
   You can also put align="center" as an attribute of the table element, though for this you'll need to use XHTML Transitional instead of XHTML strict.
2. You can also put
3. Make sure attribute values are in quotation marks (form element, table element, etc.)
4. <hr> is not properly nested, but <hr /> or <hr></hr> both are.
5. You can't put an <hr /> inside an <h1></h1>, but you can put it right afterwards.
6. The same rule applies to the input element; it must be closed by something like the following (note the highlighted forward slash at the end of the tag.) <input type = "checkbox" name = "chkEvil" value = "evil" /> or by putting </input> after it.
7. <script> doesn't validate, but <script type="text/javascript"> does
8. the name attribute of form appears to work ok with the Transitional DTD instead of the Strict DTD
9. a form element must have an action attribute, even if its value is the empty string ""
10. <option> open tags need to be closed with </option> close tags
11. attribute values in XHTML need to be lowercase (hint: consider especially the event handler attributes.)

Step 3: Load ml.html to your web page on copland

Make this page appear at the link:

http://copland.udel.edu/~userid/cisc103/activity06/ml.html

You know what to do by now (if not, consult previous activities).

Step 4: Write your own mad lib page; call it ml2.html

Now write a page similar to ml.html that creates your own mad lib. It should have at least as many entries for customized text, and be at least about the same length. You may want to adjust the attributes of the textarea element if needed to make more room for your story.

Step 5: Upload ml2.html to your web site on copland

Now, to submit the file, use the same process you used in step 2 to upload this file to the following URL:

http://copland.udel.edu/~userid/cisc103/activity06/ml2.html

Evaluation and Grading

This activity counts as a regular lab grade out of 100 pts, broken down as follows:

Mad Lib code is Copyright 2001 by Prima Publishing, from JavaScript Programming for the Absolute Beginner, by Andy Harris. ISBN 0-7615-3410-5

Copyright 2005, Phillip T. Conrad, CIS Dept., University of Delaware. Permission to copy for non-commercial, non-profit, educational purposes granted, provided appropriate credit is given; all other rights reserved.