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 templatesa 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:
-==-
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:
-==-
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
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.
