Skip to content

Card (2-Sided, Question)

Cards can have semi-evaluated questions: The front to pose the question, and the back to provide generic feedback.

How to Use a Question Cards

The most important thing to remember about Question Cards is that they weren’t intended to evaluate a user’s understanding of a concept.

Asking a question before a user can be expected to know the answer aids in retention and recall, effectively priming a new neural path or augmenting an existing path.

Question cards work best as states in a Carousel Card. They can be used in a 2-Sided Card, but have some limitations, and are generally less effective.

Do

  • Use Question Cards as informational activities.
  • Use Question Cards in a Carousel Card as a part of single topic.
  • Use Question Cards when there is only one correct answer.
  • Use Question Cards if the responses are short — from 1 to 3 words.

Don’t

  • Use a Question Card if there are more than 4 or 5 possible answers.
  • Use a Question Card if there is more than one correct answer.
  • Use a Question Card to evaluate the user’s knowledge.
  • Use a Question Card if the responses are longer than a few words.
  • Use a Question Card if the questions require custom feedback.

Unstyled Example

<div id="carousel-question" class="card flip">
  <div class="card-state">
    <div class="card-header">
      <h3>Header</h3>
    </div> 
    <div class="card-body"> 
      <p><label for="card-select">Question stem</label></p>
      <div class="form-group">
        <select id="card-select" class="form-control">
          <option></option>
          <option data-correct>Correct</option>
          <option>Incorrect</option>
          <option>Not Right</option>
          <option>Also Incorrect</option>
        </select> 
      </div>
    </div>
    <div class="card-footer">
      <span class="spacer">&nbsp;</span>
      <button type="button" data-evaluate class="btn">Submit</button>
    </div> 
  </div>
  <div class="card-state">
    <div class="card-header">
      <h3>Header</h3>
    </div>
    <div class="card-body">
      <p>Result body</p>
    </div>
    <div class="card-footer">
      <span class="spacer"></span>
    </div> 
  </div> 
</div>