I came across this little game while cruising the internet and thought it would be a nice addition to my site. Putting it all together turned out to be a little more complicated than I expected. Steven Chapman over at About.com has the whole step by step process if you're interested, but for someone wanting to add it to their Movable Type blog, the process is slightly different. My MT setup made it a little easier because I use a PHP include for my header, so it's the same for every page. The script will only work on the index page if you just add it to the head section of the index template and not the archived page as well. The filename for my individual page is 000332add_a_hangman_game_to_your_blog.php. Yours will be different depending on how you have your MT set up. You can edit this page after you set the game up or add the scripts into the head of the Individual Archive Template.
Step 1: Download hangb.js and upload to your server. Save into the same directory as your index files. If you can't upload to your server, you could try adding the script into the head section of your index page. Include this line in your head section to call the script:
<script src="hangb.js" language="javascript" type="text/javascript"> </script>
Step 2: Add the following piece of code into the body section of your page, or your entry screen, where you want the game to appear.
<script src="hangb.js" type="text/javascript"></script><noscript><div align="center"><strong>The Hangman game requires Javascript. </strong>You either have Javascript disabled or the browser you are using does not support Javascript. Please use a Javascript enabled browser to access this game.</div></noscript>
Step 3: The next step is to set up a selection of answers that will go into a script in the head of the page. Continue adding as many answers as you require. You can add up to 50 or 60 different words or phrases.
The script code for the hangman game will appear in the text box below with an additional statement being added for each answer you add. Don't worry if you make a mistake as you can always delete lines from the resulting code if you want to remove answers, just make a note of which entries they are as the answers are "encoded" to make it more difficult to cheat. If you decide you want to start over, simply refresh the current page. The image folder is the place where you will upload the images for the game, e.g./images/.
Once you have finished entering your answers, copy the code from the above text box and save it as a file called hangh.js. Save to the same place that you saved hangb.js.
You now add this script to the head section of the page where the hangman game is to appear using the following code:
<script src="hangh.js" language="javascript" type="text/javascript"> </script>
If you are creating more than one hangman game then you can use different names for the files where you save the answers as long as they end in .js and that you modify the code going into the head of the individual hangman pages to reference the appropriate files you have created. The code that you place into the body of each hangman page will be the same for each game.
Step 4: Add the following piece of CSS code to your stylesheet.
.hanga {font:bold 14pt Courier, "Courier New", monospace;text-align:center;} .hangt {font:normal 16pt Courier, "Courier New", monospace;text-align:center;color:#ff0000;} .hangb {width:400px;height:230px;overflow:hidden;background:#ffffcc;border:#000000 1px solid;}
Step 5: The final step is to obtain the eleven hangman images that the script uses. Upload the files to your image directory. Enjoy the game!
Leave a comment