Skip to content

Answer Set

The Answer Set is a miniature quiz, with more detailed feedback, progress ui and larger content area than cards.

How to Use an Answer Set

Answers Sets are quizzes: They ask a series of multiple choice questions and give the user a score at the end. Because they’re quizzes, they don’t provide feedback for each question other than correct & incorrect.

Answer Sets share some foundational code with Cards — however the header in an Answer Set is not graphic (and is reserved for the progress indicator). So no graphic is required — though the body of each card can accept a graphic and some column-based layout.

Answer Sets have custom feedback based on the number of responses the user answered correctly. So in a 3 question Answer Set (like the one above) there are 4 potential custom feedback opportunities ( one if the user got 3 correct, one if they got 2 correct, one if they got 1 correct and one if they answered none correctly). However, there is no tailoring the feedback based on which question they got correct.

Answer Sets do not save their responses to the LMS.

Do

  •  Use Answer Sets to evaluate a user’s knowledge.
  • Use Multiple Choice questions within the Answer Set (single correct preferred, but not required).

Don’t

  • Use Answer Sets in place of a Card Carousel — they cannot contain information cards.
  • Use Answer Sets if the questions or responses are overlarge — no scrolling.

Unstyled Example

Answer Set Title

Introduction

Example Code

<div id="answer-set-unstyled" class="answer-set slide-in-out">
  <div class="state-container">
    <div class="card-state">
      <div class="card-header">
        <h2>Answer Set Title</h2>
      </div>
      <div class="card-body">
        <p>Introduction</p>
      </div>
      <div class="card-footer">
        <span class="spacer">&nbsp;</span>
        <button class="btn" data-next="">Begin</button>
      </div>
    </div>
    <div class="card-state" hidden>
      <div class="card-header">
        <h3>Question 1</h3>
      </div>
      <div class="card-body">
        <p>Question 1 Stem</p>
        <div class="form-group">
          <input id="state-1-a" name="mc-1-response" type="radio" />
          <label for="state-1-a">Incorrect</label>
        </div>
        <div class="form-group">
          <input id="state-1-b" name="mc-1-response" type="radio" />
          <label for="state-1-b">Incorrect</label>
        </div>
        <div class="form-group">
          <input id="state-1-c" name="mc-1-response" type="radio" data-correct="" />
          <label for="state-1-c">Correct</label>
        </div>
        <div class="form-group">
          <input id="state-1-d" name="mc-1-response" type="radio" />
          <label for="state-1-d">Incorrect</label>
        </div>
      </div>
      <div class="card-footer">
        <span class="spacer">&nbsp;</span>
        <button class="btn" hidden data-next>Continue</button>
        <button class="btn" data-evaluate>Submit</button>
      </div>
    </div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>...</div>
    <div class="card-state" hidden>
      <div class="card-header"></div>
      <div class="card-body">
        <p>Common Results Text</p>
        <div class="c-0-of-3" hidden>
          <p>Zero (0) out of Three (3) Correct.</p>
        </div>
        <div class="c-1-of-3" hidden>
          <p>Zero (1) out of Three (3) Correct.</p>
        </div>
        <div class="c-2-of-3" hidden>
          <p>Zero (2) out of Three (3) Correct.</p>
        </div>
        <div class="c-3-of-3" hidden>
          <p>Zero (3) out of Three (3) Correct.</p>
        </div>
      </div>
    <div class="card-footer">
      <span class="spacer">&nbsp;</span>
      <button class="btn" data-reset>Try Again</button>
    </div>
  </div>
</div>
document.addEventListener('ready', function() { 
  // Initialize Component Instance 
  AnswerSet.create('#answer-set-unstyled'); 
  // Handle Complete Event 
  document.getElementById('answer-set-unstyled').addEventListener('complete', function (e) { 
    console.log('I am complete'); 
  }); 
});