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:
- A comma separated list of potential correct answers. Correct answers can only contain alphanumeric characters, underscores, dashes and spaces.
- A Levenshtein distance indicating how close the user’s response must be to one of the correct answers. Represented as an integer.
- 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');
});
});