Number Input Component

The Number Input component lets the learner enter a number into the course component. The submitted number can be saved to a Variable.

This article provides an overview of the Number Input component and component setup and behavior.

Component overview

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

The Number Input component is fully responsive.

Component set up

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

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

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

General section

In the General section:

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

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

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

Number Input section

In the Number Input section, you set Default Value, Minimum Value, and Maximum Value for your Number Input component.

1. Enter Submit Button Text that will be shown on the submit button.
2. Enter Submitted Label Text that will be displayed once the button has been clicked.
3. Toggle to Allow Editing.
4. Enter Edit Button text, as needed.
5. Enter a Number Input Aria Label for screen readers, as needed.

Heads up!

Allowing editing does not reset the component completion status.

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 number affects the value in the variable.

Replace: replaces the current value of the variable with the value the user saves in the component.

Increment: increases the value of the variable by the value that the user saves in the component.

Decrement: decreases the value of the variable by the value that the user saves in the component.

By default, Variable Save Type is set to Replace.

Did this article help?

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