Skip to content

Text Entry

Text Entry interactions can present a number of text fields for the user to enter a word or very short phrase.

How to use Text Entry

Text Entry interactions require a number of parameters. Each text field requires:

  1. A comma separated list of potential correct answers. Correct answers can only contain alphanumeric characters, underscores, dashes and spaces.
  2. A Levenshtein distance indicating how close the user’s response must be to one of the correct answers. Represented as an integer.
  3. A human readable label.

The interaction itself has three additional settings, typically only useful when allowing the user multiple attempts at the interaction:

  • Show Correct: Correct answers will be highlighted (usually in green) when the user submits the interaction.
  • Show Incorrect: Incorrect answers will be highlighted (usually in red) when the user submits the interaction
  • Keep Correct: Correct answers are not cleared from the text field.

All textfields in an Text Entry interaction must be correct for the interaction to be evaluated as correct.

Do

  • Use Text Entry to evaluate user-entered text against a list of correct answers.
  • Use between one and 5 text fields per interaction

Don’t

  • Attempt to hide the text field or label — both must be human visible and respond to the mouse and keyboard.
  • Exceed 32 characters for each potential response.
  • Exceed 256 characters for all of the potential correct answers, including separating commas.
  • Attempt to use quotes ( ” ), apostrophes ( ‘ ), commas ( , ) or other special characters in answers.

Reveal Bindings

Text Entry interactions have reveal actions bound to the text fields and appear when the user focuses the field.

Unstyled Example



Example Code

<form class="text-entry" id="text-entry-unstyled">
  <div class="inner">
    <div class="form-group">
      <label for="te-5">Name of the Japanese god of the wind:</label>
      <input id="te-5" class="form-control" type="text" 
             data-responses="fujin,fūjin, kaze,kami-no-kaze" 
             data-distance="1" data-reveal="hint-1"/>
    </div>
    <div class="form-group">
      <label for="te-6">Name of the Japanese god of the moon:</label>
      <input id="te-6" class="form-control" type="text" 
             data-responses="tsukiyomi,tsuki, tsuki-no-kami" 
             data-distance="2" data-reveal="hint-2"/> 
    </div>
    <div class="form-group text-right">
      <button class="btn btn-submit" type="button">Submit</button>
    </div>
  </div>
  <div class="feedback correct animated fade-left" aria-hidden="true">
    <h3>Correct</h3>
    <div class="feedback-content">
      <p>That's correct.</p>
    </div>
  </div>
  <div class="feedback incorrect animated fade-right" aria-hidden="true">
    <h3>Incorrect</h3>
    <div class="feedback-content">
      <p>That's not correct.</p>
    </div>
    <div class="feedback-footer">
      <button class="btn btn-reset" type="button">Try Again</button>
    </div> 
  </div>
  <div class="feedback incorrect animated fade-right" aria-hidden="true" data-target="te-5">
    <h3>Incorrect</h3>
    <div class="feedback-content">
      <p>That's not correct.</p>
      <p>Name of the Japanese god of the wind is <strong>Fūjin</strong>.</p>
    </div>
    <div class="feedback-footer">
      <button class="btn btn-reset" type="button">Try Again</button>
    </div>
  </div>
  <div class="feedback incorrect animated fade-right" aria-hidden="true" data-target="te-6">
    <h3>Incorrect</h3>
    <div class="feedback-content">
      <p>That's not correct.</p>
      <p>Name of the Japanese god of the moon is <strong>Tsukiyomi</strong>.</p>
    </div>
    <div class="feedback-footer">
      <button class="btn btn-reset" type="button">Try Again</button>
    </div>
  </div>
</form>
<div class="hint-container">
  <div id="hint-1" class="animated zoom-in-down" hidden>The answer for this field is "fujin"</div>
  <div id="hint-2" class="animated zoom-in-up" hidden>The answer for this field is "tsukiyomi"</div>
</div>
document.addEventListener('ready', function() { 
  // Initialize Component Instance 
  TextEntry.create('#text-entry-unstyled', { showCorrect : false, showIncorrect : true, keepCorrect : true } ); 
  // Handle Complete Event 
  document.getElementById('text-entry-unstyled').addEventListener('complete', function (e) { 
    console.log('I am complete'); 
  }); 
});