Text Area Component

The Text Area component displays a text area into which the learner can input a text-based answer. The entered text can be saved to a variable.

This article provides an overview of the Text Area component, as well as component setup and behavior.

Component overview

The Text Area component is an interactive component that lets the learner enter text into an input field in the course. The Text Area component is flexible and, with the configuration set to Allow Editing, the learner can edit the entered text after submitting it. The text entered can also be saved to a Variable.

The Text Area component is fully responsive.

Component set up

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

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

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

General section

In the General section:

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

Scroll down and add your Text Area Body. Use the text editor to style and format your text, as needed.

1. Add Text Area 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 Area component that can display an icon and label prior to the Text Area component completion, which changes to a different icon and label once the Text Area component is completed.

Text Area section

1. In the Text area section, start by setting how the text area should display. By default, this is set to Text Area. Text Area allows multiple lines of text. The alternative option is Text Input. Setting Display to Text Input displays one single line.
2. Enter some Placeholder text that the learner will see inside the Text Area or Text Input box.
3. Enter Submit Button Text that will be shown on the submit button.
4. Enter Submitted Label Text that will be displayed once the button has been clicked.

1. Toggle to Allow Editing.
2. Enter Edit Button text, as needed.
3. Enter a Text Area Aria Label for screen readers, as needed.

Behaviour section

In the Behaviour section, you toggle to Save User Answer to Variable. Select Variable or Create Variable.

Select Variable Save Type. Variable Save Type controls how the user's entered text affects the value in the variable. Replace: replaces the current value of the variable with the value (text) the user saves in the component. Concatenate: merges the text entered to the variable.

By default, Variable Save Type is set to Replace.

Appearance section

In the Appearance section, you toggle to Enable Minimum Height. The Minimum Height sets a minimum pixel height on the textarea. By default, the Minimum Height is 300.

Component Examples

The Text Area component gives you a lot of flexibility. Below are examples that illustrate Text Area component setups:

Example 1 – Displays the Text Area component set to display Text Area as multiple lines of text.

Example 2 – Displays the Text Area component set to display Text Input as a single line. In the example, an answer has been submitted and a Submitted Label Text is shown.

Did this article help?

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