Developing Amazing Mobile Web Pages

ColdFusion Mad Libs (Part 1 Of 2)

Submitted by Charlie Griefer on 2003-08-01.

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!nnPlease 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: </td> <td><input type="text" name="ff_1" /></td> </tr> <tr> <td class="label">A girl's name: </td> <td><input type="text" name="ff_2" /></td> </tr> <tr> <td class="label">Noun: </td> <td><input type="text" name="ff_3" /></td> </tr> <tr> <td class="label">Verb: </td> <td><input type="text" name="ff_4" /></td> </tr> <tr> <td class="label">A Liquid: </td> <td><input type="text" name="ff_5" /></td> </tr> <tr> <td class="label">Noun: </td> <td><input type="text" name="ff_6" /></td> </tr> <tr> <td class="label">Verb (ending in -ing): </td> <td><input type="text" name="ff_7" /></td> </tr> <tr> <td> </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

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><?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" />

<body>

<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>

<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.

Enjoy!

Article first appeared at EasyCFM.com

About the author:
Charlie lives in Phoenix, AZ with his lovely wife and daughter, two dogs, and a pig. He has been using ColdFusion since version 1.5, and likes to think that one day he'll be good at it. A frequent contributor to Easycfm, Charlie enjoys writing ColdFusion tutorials, and helping others in the forums. He invites you to view his own site at http://charlie.griefer.com or drop him an email at charlie@griefer.com.

BLOG TALK

Become a WebProNews blog partner.

Twitter Uncomfortable With 'Tweet' Being Used In Third Party Apps
Looks like Twitter is not looking the other way as much these days. TechCrunch reports that there is some concern at the ...

Flickr Just Now Allowing Connectivity With Twitter

Hulu Receives Good News Concerning Their Online Ad Format

Global Gaming Factory Buys Up Pirate Bay

Pirate Bay Launches The Video Bay

Reports Say Microsoft Could Be Selling Razorfish

Facebook Status Updates Going Public

A Twitter Rant Gone Bad

Important Bing Developer Leaves For eBay

Reasons Twitter Should Start Charging For Their Service

DevWebPro

ColdFusion Mad Libs (Part 1 Of 2)

BLOG TALK

Previous Articles...