Number Input Component

This component is suitable for use when creating accessible courses.

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

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

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

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

1. Add 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. This widget 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.

Note: Allowing editing does not reset the component completion status.

Behavior section

In the Behavior 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.