eMe: A quiz

See more about:

Where are we?

You know quite a lot now. You know some events, and how to do things when the events fire. Let’s put that knowledge to use on your eMe site.

A quiz about you

Make a quiz, with at least five questions. You can try mine (though it has fewer questions).

Make a quiz about something on your interesting stuff list. If you can’t think of anything, make a quiz about yourself. Where you were born, when, like that.

The quiz will be based on the one we did earlier. It looked like this:

Earlier quiz

Figure 1. Earlier quiz

Here are the important bits from the code:

<script type="text/javascript">
  $(document).ready(function() {
    $(".right").click(function() {
      $("#result").text("Right! W00f!");
    });
    $(".wrong").click(function() {
      $("#result").text("Sorry, that's wrong.");
    });
  });
</script>
...
<p>What is 4 x 7?</p>
<p>Please click on the right answer.</p>
<p class="wrong">a. 14</p>
<p class="wrong">b. 47</p>
<p class="right">c. 28</p>
<p class="wrong">d. I will never need to know.</p>
<p id="result"></p>

Figure 2. Quiz starting code

Look at the HTML. In lines 14 to 17, each response is given a class of right or wrong. Line 18 is where we show the result of a click, that is, the “You’re right” or “You’re wrong” message. It has an id of result.

Line 4 shows what happens when the user clicks on the right answer (that is, something with the class of right):

$("#result").text("Right! W00f!");

This says:

Find the element with an id of result, and put the text “Right! W00f!” in it.

Multiple questions

In the new quiz, we have more than one question. That means more than one set of answers, and more than one result area.

Quiz

Figure 3. Quiz

There are two questions in Figure 3. Each one has its own set of answers, and result area.

When the user clicks an answer, the page should change only the matching result area.

Separate events

Figure 4. Separate events

There are many ways to do this. We’ll talk about one that’s easy to understand.

We have to be able to refer to each result area separately. So we’ll give each one a different id. We also need to separate the answers for each question, so we can’t use just two classes, right and wrong. Instead, we’ll create separate right and wrong classes for each question.

Here’s the HTML we’ll use.

<h2>Q 1. When was I born?</h2>
<p class="q1_right">a. 1960</p>
<p class="q1_wrong">b. 1975</p>
<p class="q1_wrong">c. 1985</p>
<p class="q1_wrong">d. I was hatched, not born.</p>
<p id="q1_result" class="result"></p>

<h2>Q 2. What was the first programming language I learned?</h2>
<p class="q2_wrong">a. Java</p>
<p class="q2_wrong">b. JavaScript</p>
<p class="q2_wrong">c. C</p>
<p class="q2_right">d. FORTRAN</p>
<p id="q2_result" class="result"></p>

<h2>Q 3. What is the hex opcode for the Halt instruction on a Z80?</h2>
<p class="q3_wrong">a. CD</p>
<p class="q3_wrong">b. C9</p>
<p class="q3_right">c. 76</p>
<p class="q3_wrong">d. 20</p>
<p id="q3_result" class="result"></p>

Figure 5. HTML for multi-question quiz

Have a look at the result sections, in lines 6, 13, and 20:

<p id="q1_result" class="result"></p>

<p id="q2_result" class="result"></p>

<p id="q3_result" class="result"></p>

Each one has a different id. But we want to style them all the same way, so we give them the same class.

Here’s the code for one of the questions:

<h2>Q 1. When was I born?</h2>
<p class="q1_right">a. 1960</p>
<p class="q1_wrong">b. 1975</p>
<p class="q1_wrong">c. 1985</p>
<p class="q1_wrong">d. I was hatched, not born.</p>
<p id="q1_result" class="result"></p>

Figure 6. HTML for one question

Click on an item with a class of q1_right or q1_wrong, and the text of q1_result should change.

The other questions follow the same pattern:

<h2>Q 2. What was the first programming language I learned?</h2>
<p class="q2_wrong">a. Java</p>
<p class="q2_wrong">b. JavaScript</p>
<p class="q2_wrong">c. C</p>
<p class="q2_right">d. FORTRAN</p>
<p id="q2_result" class="result"></p>

Figure 7. HTML for the another question

Click on an item with a class of q2_right or q2_wrong, and the text of q2_result should change.

Here’s the JavaScript:

$(document).ready(function() {
  $(".q1_right").click(function() {
    $("#q1_result").text("Right! I was born in 1960.");
  });
  $(".q1_wrong").click(function() {
    $("#q1_result").text("Sorry, that's not it.");
  });
  $(".q2_right").click(function() {
    $("#q2_result").text("Right! The first programming language I learned was FORTRAN.");
  });
  $(".q2_wrong").click(function() {
    $("#q2_result").text("Sorry, that's not it.");
  });
  $(".q3_right").click(function() {
    $("#q3_result").text("Right! The Halt instruction on a Z80 is 76 hex.");
  });
  $(".q3_wrong").click(function() {
    $("#q3_result").text("Sorry, that's not it.");
  });
});

Figure 8. Quiz code

The first event handler is:

$(".q1_right").click(function() {
   $("#q1_result").text("Right! I was born in 1960.");
});

So, clicking on something with a class of q1_right changes the text in q1_result. Notice that it’s $(".q1_right") and not $("#q1_right"). Use a . for a class, and a # for an id.

Let’s make an exercise for all this.

eMe: A quiz about you

Make a quiz, with at least five questions.

Use the same styles you created for the text pages with external styles exercise. (You can copy the entire .css file, if you want).

Upload your solution to your server. Put the result below.

(Log in to enter your solution to this exercise.)

Summary

In this lesson, you created an interactive quiz. How cool is that? You are mastering some cool skills.

What now?

Users often make mistakes when they type data into forms. Like giving their year of birth as 1880, instead of 1980. Let’s see how you handle errors like that.


How to...

Lessons

User login

Log in problems? Try here


Dogs