Text Input Component

The Text Input component is a question component that allows you to test your learners’ knowledge by letting the learner fill in blanks in sentences.

This article provides an overview of the Text Input component, component setup and behavior, and examples of Text Input component configurations.

Component overview

The Text Input component is an interactive question component that can be part of an assessment or used as a separate component in your course. The Text Input component lets you set up multiple questions where learners can type short responses. The Text Input component is excellent for missing words in a sentence.

The Text Input component is fully responsive.

Component set up

Follow these steps to add the Text Input component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Text Input component.
3. Click the Text Input component and select Add Left, Add Full, or Add Right.

Click the Edit Component icon on the newly added Text Input component to begin set up.

General section

In the General section:

Add Text Input Title, or a Text Input Display Title, as needed. Text Input Display Title is seen by learners.

Scroll down to add your Text Input Question. Use the text editor to style and format your text.

1. Add Text Input Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Text Input component that can display an icon and label prior to the Text Input component completion, which changes to a different icon and label once the Text Input component is completed.

Behaviour section

In the Behaviour section, you enter how many Attempts the learner is allowed for the specific question. You can toggle to disable Display Attempts Counter and to disable Should be marked strictly, as needed.

Heads up!

Enabling Should be marked strictly means that Evolve will only accept answers that are precisely like the Possible answers entered for each Text Input Item.

In the Behaviour section, you can enter some Placeholder text that the learner will see inside the Text Input box.

Appearance section

Select Display Item as Default in the Appearance section, or select Component Item to take all styles settings from the Evolve theme.

In the Appearance section, you set Item Prefix/Suffix Text Color, as needed.

Feedback section

The Feedback section lets you tailor feedback for correct, partly correct, or incorrect Text Input items. Feedback can be displayed on the page, beneath the component or in a notification pop-up.

1. Toggle to Display Feedback Inline. If enabled, Feedback will be displayed below the component instead of a dialog.
2. Toggle to disable Feedback Title. By default, Feedback Title is enabled, and Feedback will be displayed with the display title of the Text Input component.

Heads up!

Enabling to display Feedback Title will have no effect if Display Feedback Inline is enabled.

For each type of feedback, you can choose to include:

• global feedback set up in Course Builder > Edit Course Settings.
• custom text as feedback. Use the text editor to style and format your text, as needed.
• custom imagery as feedback, as needed.
• a link to a specific part of your course; if, for example, learners should revisit a particular section.

In the Feedback section, you can toggle to Enable Feedback Styles that override the theme styles' settings.

Add Text Input Items

In the Items section, you add Text Input Items to your Text Input component.

For each Text Input Item:

1. Enter Possible answers that will be accepted as correct.
2. Add Prefix. That is the text that will appear before the Text Input box.
3. Add Suffix. That is the text that will appear after the Text Input box.
4. Enter Input Aria Label, to describe the Text Input to a screen reader, as needed.

Add, duplicate, or delete Text Input Items as needed

Component Examples

Below are examples that illustrate the Text Input component:

Example 1 – Text Input component ready to fill in the blanks.

Example 2 – Text Input component with a correctly filled in answer.

Example 3 – Displays how the Examples 1 and 2 are set up in the Items section.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.