Pages

Thursday, January 5, 2012

How To: Create a Fill-in-the-Blank Game Online


This post will [attempt to] teach you (assuming you already have a website) how to code a game similar to the popular Mad Libs. Why would you want to do this? Simple - because Mad Libs is fun (when you choose the right words anyway ;) )!

"So, first, what do I need exactly?"
Well, young one, you must have a place to type your code (like Notepad or a site editor) and a way of viewing typed code. Preferably, you have a website in place.

"That's easy! I already--."
Wait a minute, I'm not finished! You also need to be able to use PHP.

"Awwh :(, my host doesn't allow PHP."
I'm sorry :(

"Just kidding!"
Yay!

Now, onto business.




STEP ONE

Make up a story. If you're lazy (like me) you can just borrow a paragraph from one of your old essays. For the purpose of this how-to, I'm just going to quickly make something up:
I went to the store and bought some eggs. Then I went home and cooked dinner. The eggs were delicious.

STEP TWO

Now you must think about how you want your game to be played. Delete some places, adjectives, nouns, verbs, and so on that you believe could be replaced and come out funny. Try not to under-do or overdo it.
I went to the [place] and bought some [noun]. Then I went to [place 2] and [verb] dinner. The [same noun] were [adjective].
Label the deletions like I did (if you don't, you'll just end up going back to do it later, so might as well do it now), noting whether it is noun 1 or verb 2. Make any corrections necessary so the story will be as grammatically correct as possible.

STEP THREE

Open up a "blank page" [on Notepad or your site editor or whatever it is you use] with all your code written in it (but no content, obviously). So you should have something like...

HTML pagePHP page
<html>
<head>
</head>

<body>
<h1> My First Fill-in-the-Blank Game </h1>
</body>

</html>
<?php include('header.php'); ?>

<h1> My First Fill-in-the-Blank Game </h1>

<?php include('footer.php'); ?>

This is going to be the page your visitor sees after they input all of the verbs and adjectives and all of that, so you may want to call it "result.php" or "result.html". Go ahead and paste your story, and add any other fancy coding you'd like, such as bolding the would-be user inputs. Be sure to leave the labeled deletions in place.

STEP FOUR

Leave your "result" page open, and open up another blank page. This new page will be where your visitor types in the words prompted, so you may call it "game.php" or "game.html". Paste the following code onto your page: <form action="result.html" method="post">
 <input type="text" name="place1" /> Place
 <br /><input type="text" name="noun1" /> Noun
 <br /><input type="text" name="place2" /> Place
 <br /><input type="text" name="verb1" /> Verb
 <br /><input type="text" name="noun1" /> Same Noun
 <br /><input type="text" name="adjective1" /> Adjective
 <br /><input type="submit" />
</form> 


If you named your result.html page something differently, replace the result.html with whatever you named the page in the appropriate space in the form.

Replace place1, noun1, place2, verb1, noun1, and adjective1 with the appropriate labels from your story. These are important labels that you'll be using again for result.php. Also replace the words: Place, Noun, Place, Verb, Same Noun, and Adjective.

STEP FIVE

Almost done!  Go back to your result.php page and replace each labeled deletion with this code: <?php echo $_POST["place1"]; ?>
Of course, you'll be replacing place1 with your own labels, the same ones from game.php.

Done!

Now all that's left to do is to go back, test your pages, fix any errors, and sit back and enjoy!

No comments:

Post a Comment