Skip to content

Multiple Choice

Multiple Choice is the workhorse of the interactions and the updated interaction has a few new tricks.

How to Use a Multiple Choice

Multiple Choice questions should be fairly well understood. These variants can have complex, layered feedback or simple banners (shown in the unstyled example) that only show the status and block submission. Multiple Choice questions can allow the user to make multiple attempts at answering the question.

The only real limitation is that Multiple Choice may not suitable for graphic selection ( as in choosing elements in a scene ).

Reveal Bindings

Multiple Choice interactions support reveal elements when a response (checkbox, radio button) are selected. This could be used for hints or other supplemental information. Care should be used to avoid putting user-critical information in the reveal elements — that is, if the user can’t answer the question without the reveals, it’s not accessible.

Unstyled Example

Question stem.

Example Code

<div>Add here</div>
<form id="multiple-choice-unstyled" class="multiple-choice">
  <div class="inner"> 
    <div class="question">
      <p>Question stem.</p>
    </div>
    <div class="form-group">
      <input id="mc-1-a" type="radio" name="mc-1-response">
      <label for="mc-1-a">Incorrect</label>
    </div>
    <div class="form-group">
      <input id="mc-1-b" type="radio" name="mc-1-response">
      <label for="mc-1-b">Incorrect</label>
    </div>
    <div class="form-group">
      <input id="mc-1-c" type="radio" name="mc-1-response" data-correct>
      <label for="mc-1-c">Correct</label>
    </div> 
    <div class="form-group"> 
      <input id="mc-1-d" type="radio" name="mc-1-response"> 
      <label for="mc-1-d">Incorrect</label> 
    </div> 
    <div class="form-group text-right mb-0"> 
      <button type="button" class="btn btn-submit">Submit</button>
    </div>
  </div>
</form>
document.addEventListener('ready', function() {
  // Initialize Component Instance
  MultipleChoice.create('#multiple-choice-unstyled'); 
  // Handle Complete Event
  document.getElementById('multiple-choice-unstyled').addEventListener('complete', function (e) { 
    console.log( e.detail.correct );
  });
});