Skip to content

Thinking Question

The Thinking Question is a text-entry block that allows the user to enter long-form responses that are not evaluated.

How to use a Thinking Question

Thinking Questions can have a minimum character length.

Thinking Questions can be given a list of terms that, if found in the user’s response, can trigger custom feedback specific to those terms or phrases. Terms must be short and contain only alphanumeric characters, dashes and spaces.

Try using the words “Elephant”, “Silly”, “Pillow” or “Frostbite” in the example.

Unstyled Example

Thinking Question Example


<form id="thinking-question" class="thinking-question" data-min="100">
  <h2>Thinking Question Example</h2>
  <div class="inner">
    <div class="form-group">
      <p><label for="tq-1">...</label></p>
      <textarea id="tq-1" class="form-control" data-responses="annoying,pointless,silly,skipable"></textarea>
    </div>
    <div class="form-group">
      <button type="button" class="btn btn-submit">Submit</button>
    </div>
  </div>
  <div aria-hidden="true" class="feedback animated rotate-down-right">
    <h3>Of course it is</h3>
    <div class="feedback-content">
      <p class="lead">We thought that too, but weren't nearly so eloquent.</p>
      <p hidden data-fragment data-scope="pillow">Do you need a pillow?</p>
      <p hidden data-fragment data-scope="silly">Of course it's silly!</p>
      <p hidden data-fragment data-scope="frostbite">Frostbite it is!</p>
    </div>
  </div>
  <div aria-hidden="true" class="feedback animated rotate-down-left" data-target="elephant">
    <h3>Elephant</h3>
    <div class="feedback-content">
      <p>We find it annoying as well, but probably not annoying as you do as we don't have to actually use it.</p>
      <p hidden data-fragment data-scope="pillow">Yes, because you could sleep through this interaction.</p>
      <p hidden data-fragment data-scope="silly">Yeah, it is a bit silly as well.</p>
      <p hidden data-fragment data-scope="frostbite">Having frostbite is more fun than this.</p>
    </div>
    <div class="feedback-footer">
      <button type="button" class="btn btn-reset">Try Again</button>
    </div>
  </div>
</form>
document.addEventListener( 'ready', function () { 
  // Initialize Component Instance
  ThinkingQuestion.create( '#thinking-question' ); 
  // Handle Complete Event
  document.getElementById('thinking-question').addEventListener('complete', function (e) { 
    console.log( e.detail.correct );
  }); 
});