So most of you know that before Nerdy and the Greek got ahold of me, I was an MBA student here. The group that I was in for my leadership class had a presentation today. We were supposed to give a workshop on "Discrimination in the Workplace and How to Prevent It."

My team wanted to do a Jeopardy style game as part of this presentation. Being the token nerd in the class, my job was to implement the game.

See it here in all its glory: http://lug.wsu.edu/~ben/jeopardy/

To play1, you simply click on a tile. The answer on that tile will be displayed. Click on the tile to switch between the answer and the question. Click anywhere off the tile to close it and return to the game. Once all the questions have been answered (answers have been questioned?) the final answer is displayed.

The game itself is pretty simple. It uses jQuery and Thickbox to implement the popups and a little bit of custom javascript for the rest.

To disable the tiles after they are used, I replace the image with a blank tile and disable the link. This was a bit tricky. If I just directly disabled the link, then Thickbox didn't work properly and I didn't get popups. What I did instead was changed the class of the link to a known value, and then scheduled a function to iterate through half a second later and unbind any links with that known value. Pretty slick solution, I think.

This function also checks to see if all the tiles have been used. If so, it enables the final tile. It does this by simply changing the style of the link to 'display: block' instead of 'display: none' and telling Thickbox about the new link. It is a slightly crufty solution, but gimme a break. It was a "add this feature in the next 15 minutes" kind of thing.

Each of the tiles is stored in a separate HTML file that is displayed in the Thickbox popup. I chose to do it this way to keep the logic and presentation separated as much as possible and to make the main page load slightly faster. The tile HTML files are simple enough that the other members of my team could edit them, so it (theoretically) offloaded some of the work as well.

The main page also preloads some of the files used by the tiles with this code:

I find it interesting that there still is not a generic File() object that can be used for this purpose. If anyone knows a better way to preload an MP3 file, please post a comment. I'm genuinely curious. I don't see loading it in an embed tag without triggering playback as a better solution, because I think that would invoke whatever audio subsystem your browser uses for nothing. Comments?

Anyways, it was a fun little game and according to the prof, it rocked the house. W00t.

1. 1. Read about the game on Wikipedia if you don't know the rules.