How to re-use the "ungraded quiz question with feedback" example

Step one: add your content to the page's markup

Each question answer or distractor need sto be in its own <dt> element. The corresponding feedback needs to be in the <dd> element that follows. The feedback for the correct answer needs to have the class "correct" added to it for styling purposes. You can add as many <dt> and <dd> pairs as you like, but remember that they always need to be paired. A <dd> or <dt> without a partner will be so lonely that it will cause errors on your page! :)

<dl id="question">

  <dt>True</dt>
  <dd>You fool! How could you say it's true?</dd>
  
  <dt>False</dt>
  <dd class="correct">You are SO smart, it's scary.</dd>

</dl>

 

Step two

There is no step two! Simple, huh?

Feel free to edit any of the page's HTML before and after the <dl>. Remember, though, that you need to keep all the support files with your quiz page. This means you need to keep the JavaScript files, CSS files, and any images you wish to use properly linked to your HTML page. If you copy my demonstration page, everything should already be set up for you.

 

For developers: How it all works

Part one: clean, sematic markup

The question is contained in a <dl> element ('definition list'). The <dl> element was originally designed for dictionary-style definitions, and has two child elements: <dt> for the title of the term, and <dd> for the definition of the term. It looks like this in standard practice:

<dl>
  <dt>Definition List</dt>
  <dd>"This element is used to define a definition list [...] </dd>
</dl>
Definition List
"This element is used to define a definition list, a list of terms defined by dt and definitions of those terms defined by dd." source

A definition list is perfect for our situation: by wrapping the answers and feedback in a <dl>, we can keep the relationships between the answers and feedback clear. Using different elements for the answers and the feedback also makes it easy to style via CSS without using a ton of classes or extra markup. Take a look at the following code:.

<dl>
    <dt>Sean Connery</dt>
    <dd class="correct">Great choice! ...</dd>
    
    <dt>George Lazenby</dt>
    <dd>People give Georgie a bad rap; ...</dd>
    
    <dt>Roger Moore</dt>
    <dd>Suave and charming, Roger Moore ...</dd>
    
    <dt>Timothy Dalton</dt>
    <dd>The biggest knock against Dalton's ...</dd>

    <dt>Pierce Brosnan</dt>
    <dd>Brosnan is the Bond box-office king, ...</dd>

    <dt>Daniel Craig</dt>
    <dd><em>Casino Royale</em> was ...</dd>
</dl>

Pretty easy to follow, huh? Note that I added two things to this <dl>: an ID of "question" in the <dl> element, and a class of "correct" in the appropriate <dt> element to indicate the correct answer (any <dt> without the class name "correct" will be considered a distractor).

The ID and class will be used by CSS and JavaScript to manipulate the display of the items, which leads us to...

Part two: Use CSS to format the answers and feedback

Simple CSS was applied to the <dl> and its children to make the <dl> feel like a quiz. The highlights:

  • The <dt>s were formatted to look like clickable blocks, including using the 'pointer' cursor as an indicator of 'clickability.'
  • The <dd>s are hidden by default using "display: none"; they only expand when given the class "active", which overrides "display: none" with "display: block"
  • Small icons were added to the answers and feedback to help spice up the visuals (source)
  • The feedback was color-coded to improve the user experience

Part three: Add a wee bit of JavaScript

To make the answers/distractors clickable, we need to use a little bit of JavaScript. When a <dt> is clicked, we will make the related <dd> visible by using JavaScript to apply the class "active" to it. We'll also apply a class of "active" to the clicked <dt> so we can style it differently, if desired.

(Note: CSS adjacent sibling selectors would simplify this process even further, but as of this writing they aren't supported in all browsers yet.)

To make my life easier, I decided to use the MooTools framework (v1.1.1). Frameworks such as MooTools and jQuery simplify some tedious and/or repetitive processes, making production work quicker and code less verbose. Using MooTools also means I can use the handy DomReady feature, and can add cool transition effects such as fades and slides. For now, though, we'll keep things simple and avoid the effects.

This demonstration requires three JavaScript functions:

  1. initQuiz has one purpose in life: to make the entire <dl> clickable. Instead of looping through all of the elements in the <dl> and applying an onclick handler to each and every item, we can use event delegation to apply ONE onclick handler to the entire <dl>. If the <dl> or any of its child elements are clicked, the single onclick is invoked. This is why we need our second function: getEventTarget
  2. getEventTarget is a utility function that will help us figure out which element was clicked. It's designed to work with both Internet Explorer and competing browsers such as Firefox and Webkit. When it determines which element was clicked, it returns a reference to that element as an object we can work with. initQuiz examines the element returned by getEventTarget, and if we can confirm the clicked element was a <dt> (an answer), we will invoke the next function, toggleFeedback.
  3. toggleFeedback is where the big action happens; it ensures no other elements have the class "active", then activates our clicked <dt> and its sibling <dd> by applying the class "active" to each of them.

When all of the functions are ready to go, we just need to ensure the initQuiz function is invoked when the page loads. We do this using the MooTools DomReady event:

window.addEvent('domready', initQuiz);

And that's it! If you'd like more details on the JavaScript, check the source file; I've added plenty of comments.