Working with Text Input boxes (Inputs)

On the Insert tab the Inputs options include Inputs.

The first option is a Basic Input Box element.

The other three options allow the element to include a Label which you can use such as instructions to the learner or as a simple label for the field if you are creating something like a form. These options also support adding placeholder text in the text input field and other settings.

Selecting the Basic Input Box option adds the element to the page.

In Claro, you can resize the element using the drag handle in the lower right corner or using the Size fields in the Selection Control bar above the stage:

Options

In Flow, the Options tab has settings for the height of the input box:

If you are in Designer mode the Options tab in both Flow and Claro lets you assign the what the learner types into the input box to a Text String variable.

To do that, select Variable to open the Form Variables panel.

Select the drop down list beside the Text Input (it will be set to None by default). If other Text String variables have been created in the same Project they will be listed and you can choose one of them. Alternately, select New Variable then give the new variable a suitable name. Click OK to complete the process.

The Basic Input Box’s variable can be used anywhere else in the Project, including on other pages. A learner can type into the input box on one page and you can display what was typed in a text element on any other page. In a text element, simply right-click to show the menu then select Custom Variables > the name of the variable, and the variable string will be added to the text box at your text cursor location.

FX - Claro

If the text input box is added to a Claro page, the FX tab lets you set an Entrance Effect, including the Time the effect will take as well as the Direction of the effect.

You can also open the Timeline below the Stage.

FX - Flow

If the input box is added to a Flow page, the FX tab lets you set an Entrance Effect, including the Direction of the effect.

You can also set a Scroll Effect on the toggle element. Scroll Effects offer more control over the effect than the standard effects available in the Entrance Effects section of the tab. 

The other three options allow you to add a Text Input, a Password Input or a Numeric Input.

The Text Input allows for the input of alphanumeric characters, a Password Input allows for the input of alphanumeric characters and displays the input as dots, and a Numeric Input allows for the input of numerals only.

Labels and Placeholder Text

To edit the Input Label, select the element then select the Pencil Icon.

You can then use your keyboard’s Tab key to access the text input field and add or edit the Placeholder text displayed within the input field itself.

Options

In both Claro and Flow the Options tab for these three input box types lets you switch the type of input box in the Type section.

You can set how the Label will be displayed.

You can mark the input field as Read Only so that no input is possible, and use the Max Length to set the maximum number of characters a learner can type into the field.

If you are in Designer mode the Options tab lets you assign the what the learner types into the input box to a Text String variable.

To do that, select Variable to open the Form Variables panel.

Select the drop down list beside the Input (it will be set to None by default). If other Text String variables have been created in the same Project they will be listed and you can choose one of them. Alternately, select New Variable then give the new variable a suitable name. Click OK to complete the process.

The Input Box’s variable can be used anywhere else in the Project, including on other pages. A learner can type into the input box on one page and you can display what was typed in a text element on any other page. In a text element, simply right-click to show the menu and select Custom Variables > the name of the variable, and the variable string will be added to the text box at your text cursor location.

FX - Claro

If the text input box is added to a Claro page, the FX tab lets you set an Entrance Effect, including the Time the effect will take as well as the Direction of the effect.

You can also open the Timeline below the Stage.

FX - Flow

If the input box is added to a Flow page, the FX tab lets you set an Entrance Effect, including the Direction of the effect.

You can also set a Scroll Effect on the toggle element. Scroll Effects offer more control over the effect than the standard effects available in the Entrance Effects section of the tab.