Building a simple quiz with jQuery

Over the course of our nine weeks at HackerYou, we each take a few minutes to show our classmates, instructors and mentors something. My turn came yesterday. The presentations that preceded mine (both yesterday and over the past few weeks) have all been thoughtful, useful talks on productivity, avoiding procrastination, making the most of design principles and doing cool things with CSS.

Then I went and showed everyone how to waste time. (Seriously. I went right after Christina’s helpful talk on productivity tools.)

UPDATE: I’ve put it on GitHub.

The backstory behind my Star Trek quiz dates back to a few years ago. The gist is that during a group conversation about the bizarre names nail polish colours have, John and I started thinking that at least a couple could pass as the titles of Star Trek episodes. The idea for a Mental Floss-style quiz was born, then forgotten about, then resurrected one night last year because I was bored.

It was done with HTML, CSS and JavaScript/jQuery. Here’s how.

First, I had to compile a list of Star Trek episodes that could pass as nail polish colours and nail polish colours that could pass as Star Trek episodes. I compiled them into JavaScript objects and gave each one some properties.

So there’s the name, a one-word answer ID and a multi-word answer that could fit into a sentence. All the objects are stored in an array.

Next up, I coded the HTML. There’s some code for the header and footer, of course, but this is the main markup behind the actual quiz itself:

As you can see, the h2 tags are empty. We’ll use jQuery to fill them with content shortly. The other key thing is that the option divs (which weren’t really buttons, just styled to resemble them) each have an ID relating to their subject matter. This is a huge part of making the quiz go.

Finally, there’s a div/button that lets people call up another name and try the game again.

That’s all well and good, but there’s no content there. Back to the .js file we go.

jQuery gave me the option of specifying default settings I want in place when the page loads. A couple of things are happening here:

1. I use some of JavaScript’s built-in math functions to generate a random number. By using square-bracket notation and that random number, I can assign one of the objects from my content array to a variable.
2. Again using square-bracket notation, I assign the “answer” property from the selected object to another variable.
3. The same thing happens with the “fullAnswer” property — the one that makes sense in a complete sentence.
4. I grab the element in the HTML file with an ID of “name” — the first h2 — and use the .html() method to populate it with the “name” property from that object.
5. I hide the “generate” button, which allows the user to generate another name, and the “results” div. We don’t need them yet.

This injects content into my HTML, which I originally coded to be blank. And so we get something like this:

Now I have to add code that makes the buttons work.

Here, we’re triggering some stuff whenever someone clicks on anything in the HTML with a class of “choice” — like the buttons. You can put a function inside the jQuery .click() method that sort of saves information about the thing that was clicked on.

We can use that to figure out the ID of the clicked item. I’ve saved that to a variable called “chosenAnswer.”

I now have to reverse the original settings from when the page loaded: the user needs to see the “result” div, but not the “name” and “options” divs.

Then there’s the conditional. If the ID of the button the user clicked on is equal to the answer property for that object, the result div’s HTML changes to tell them that they were right. If not, it changes to something else to tell them they weren’t. Notice that I used the “fullAnswer” property here to create a grammatically correct sentence with the right answer.

Finally, we show the “generate” div so they can play again if they want to.

Here’s what happens when the user clicks on that:

Look familiar? It should. We’re just restoring the original settings that we set up in the $(document).ready function.

This is a super simple quiz. It doesn’t keep score and it doesn’t track which objects it has and hasn’t used. It’s not perfect. But it gives me the flexibility of adding more names later on without having to worry about the number of questions. And it’ll load something different every time you call it up.

So there it is: some fun with Math.random(), jQuery show/hide methods and event handlers. Happy Trekking.