ColdFusion Mad Libs (Part 1 of 2)

Hello ColdFusion people. Here?s a nice little time-waster that you can put up on your site that is sure to amuse your visitors and keep them coming back for more.

For those that may not be aware, Mad Libs were very popular in the late 70?s and early 80?s (yes, I *am* that old). A Mad Lib is a story with certain words omitted. The type of word is specified (eg noun, verb, adjective, etc). One person asks another person (or group of people) to provide those words, and proceeds to fill in the blanks. The result is often amusing (and more often than not, kind of dirty).

If you want to see this in action, check out http://charlie.griefer.com/madlibs_1.cfm.

At it?s most basic, this is a very easy application to create. It requires only two templates?a form (to collect the missing words), and the form?s action page (to display the completed story).

On with the show. This very simple example is going to use the nursery rhyme Jack & Jill to create our Mad Lib:

madlibs_1.cfm:
*****************************************
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv=
"Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript" type="text/javascript">
    function validateFields(form) {
                for (var i=0; i<form.elements.length; i++) {
                if (form.elements[i].value == "") {
                    alert('All Fields Are Required!\n\nPlease Fill in Field #' + (parseInt(i) + 1));
                    form.elements[i].focus();
                    return false;
                }
    }
        return true;
    }
</script>

<style type="text/css">
    body, td, input { font-family:verdana; font-size:11px; }
    input { color:#0000cc; }
    .label { font-weight:bold; }
</style>

</head>

<body>


<form action="madlibs_2.cfm" method="post" onsubmit="return validateFields(this);">
<table border="0">
    <tr>
        <td class=
"label">A boy's name:&nbsp;</td>
        <td>
<input type="text" name="ff_1" /></td>
    </tr>
    <tr>
        <td class=
"label">A girl's name:&nbsp;</td>
        <td>
<input type="text" name="ff_2" /></td>
    </tr>
    <tr>
        <td class=
"label">Noun:&nbsp;</td>
        <td>
<input type="text" name="ff_3" /></td>
    </tr>
    <tr>
        <td class=
"label">Verb:&nbsp;</td>
        <td>
<input type="text" name="ff_4" /></td>
    </tr>
    <tr>
        <td class=
"label">A Liquid:&nbsp;</td>
        <td>
<input type="text" name="ff_5" /></td>
    </tr>
    <tr>
        <td class=
"label">Noun:&nbsp;</td>
        <td>
<input type="text" name="ff_6" /></td>
    </tr>
    <tr>
        <td class=
"label">Verb (ending in -ing):&nbsp;</td>
        <td>
<input type="text" name="ff_7" /></td>
    </tr>
    <tr>
        <td>
&nbsp;</td>
        <td>
<input type="submit" value="proceed >>" style="color:#000000;" /></td>
    </tr>
</table>

</form>

</body>
</html>

***************************************

You?ll see that this is a simple form, asking for only 7 values. It includes a simple JavaScript form field validation, which is pretty important. If any fields are left blank, the effect on the next page will not be the effect desired. Although it?s very basic, it does the job. It executes when the form is submitted (see inside the <form> tag the onsubmit=?return validateFields(form);?). If a field is blank, it alerts the user, and places the cursor in the empty field. If you have any questions about the JavaScript form validation, I?m more than happy to answer them in the forums.

That?s about all for page 1. Now onto page 2:

madlibs_2.cfm
***************************************
<cfsilent>

<cfif NOT structKeyExists(form,
'ff_1')>
    <cflocation url=
"madlibs_1.cfm" addtoken="no" />
    <cfabort />
</cfif>

</cfsilent>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>

<html xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<title>
Untitled</title>
<meta http-equiv=
"Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
    body { font-family:verdana,arial,helvetica; font-size:11px; }
    b { color:#ff0000; font-variant:small-caps; background-color:#ffffcc; }
    h3 { color:#0000cc; font-size:14px; font-weight:bold; text-decoration:underline; }
    a { color:#0000ff; text-decoration:underline; }
    a:hover { color:#ff0000; text-decoration:none; }
</style>
</head>

<body>

<h3>
Your Mad Lib:</h3>

<cfoutput>
<div style="border:1px ##000000 solid; width:450px; padding:8px;">
<b>#form.ff_1#</b> and <b>#form.ff_2#</b> went up the <b>#form.ff_3#</b> to <b>#form.ff_4#</b> a pail of <b>#form.ff_5#</b>.
<br />
<b>#form.ff_1#</b> fell down and broke his <b>#form.ff_6#</b> and <b>#form.ff_2#</b> came <b>#form.ff_7#</b> after.
</div>
</cfoutput>

<br /><br />


<a href="madlibs_1.cfm">play again</a>

</body>
</html>

****************************************

Also very straightforward. One thing to point out is the <cfsilent> block at the top of the page. This is done because I am writing XHTML compliant code, which stipulates that the very first line must be <?xml version="1.0" encoding="utf-8"?>. Without <cfsilent>, the <cfif> block would generate whitespace, rendering my code non-compliant.

And just what is that <cfif> you ask? That?s checking to make sure that that the user is coming from the form. It?s the same logic as <cfif NOT isDefined(?form.ff_1?)>, but the syntax that I used (<cfif NOT structKeyExists(form, ?ff_1?)>) is much faster. Rather than having to parse a string (which isDefined() must do), the structKeyExists() function can quickly check the form structure to ensure that the key specified is in there. That may be a whole ?nother tutorial. If you?d like to discuss this further, or would like me to elaborate further, either contact me, or post a note on the forums.

The rest of it is straight CF form output. We are simply outputting the various form field values into the story of Jack and Jill, in the appropriate places. It just might end up looking like this:

"PABLO and SHANIA TWAIN went up the STREET to DRINK a pail of BEER. 
PABLO fell down and broke his COMPUTER and SHANIA TWAIN came SQUARE-DANCING after."


That?s it. You?ve can now add Mad Libs to your Web site. Also see part two of this tutorial, which demonstrates how to let the user save the completed Mad Lib to a database. This way your site visitors can browse through past Mad Libs and see how creative (or dirty) others have been J

Enjoy!

About This Tutorial
Author: Charlie Griefer (CJ)
Skill Level: Beginner 
 
 
 
Platforms Tested: CF5,CFMX
Total Views: 120,302
Submission Date: May 29, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 15
Discuss This Tutorial
Advertisement

Sponsored By...
Deep Tissue Massage and Swedish Massage Services just $39 for a 50 minute massage!