Skip to content

<oelt-text-entry>

A single-line free-response question. The learner types into a native <input>; on submit the component grades against an author-supplied answer — normalized text (with |-separated alternatives) or a number with absolute tolerance — and reports one result. Interaction type: fill-in (text) or numeric.

<oelt-text-entry id="capital" answer="Paris">
<p slot="prompt">What is the capital of France?</p>
<p slot="correct">Correct — Paris.</p>
<p slot="incorrect">Not quite — it's Paris.</p>
</oelt-text-entry>
<!-- numeric with tolerance -->
<oelt-text-entry id="pi" mode="numeric" answer="3.14" tolerance="0.01">
<p slot="prompt">Estimate π to two decimal places.</p>
</oelt-text-entry>
<!-- multiple accepted spellings -->
<oelt-text-entry id="color" answer="grey|gray">
<p slot="prompt">Spell the colour (either spelling).</p>
</oelt-text-entry>
AttributeDescription
idRequired. Interaction id.
modetext (default) or numeric.
answerAccepted answer(s). Text: `
tolerance(numeric) Absolute tolerance — passed if `
case-sensitive(text) Match case exactly; default is case-insensitive.
placeholderInput placeholder text.
submit-labelSubmit button label (default Check answer).
retryAllow re-answering; re-emits on each submit.
manual-gradeNo answer — emits result: "completed" for open responses.

Slots: prompt (becomes the input’s <label>), correct / incorrect (feedback).

  • Text is normalized — trimmed, internal whitespace collapsed, lowercased unless case-sensitive — and compared against each alternative.
  • Numeric is parsed float-safe; non-numbers fail. Boundary values pass symmetrically (with answer="3.14" tolerance="0.01", both 3.13 and 3.15 pass).
  • Empty input shows “Enter an answer first.” and does not emit.
KeyAction
Tab / Shift+TabMove between the input and submit button.
EnterSubmit (from the input or the button).
  • The prompt is a native <label for> bound to the input.
  • Numeric mode uses inputmode="decimal" for a numeric soft keyboard without the locale pitfalls of type="number".
  • On submit, focus moves to an aria-live="polite" feedback region; pass/fail is text, not color.

Emits oelt-interaction on submit: type fill-in (text) or numeric; result passed/failed (or completed with manual-grade); score 1 or 0; response the raw input.