Minimum Character Count in Text Entry Field

Apr 11, 2018

Hey folks,

There are likely better (and easier) ways of doing this but I thought I’d share my solution for a minimum character count in a text entry field.

In this example, I will be using one slide for the user input (1.1 User Input) – with an additional layer (Error) to display an error message – and a second slide to display the answer (1.2 Answer). The layout of your project may differ from this example but the same principles apply.

 

Variables
Select the Manage Project Variables button from the Triggers panel and create the following variables:

Variables Setup

  • Q1_INPUT will store user input from the text entry field – for convenience I recommend using the same name for your text entry field (we’ll cover this later).
  • Q1_VALID will store a true/false value depending on whether the input is valid or not.
  • Q1_ERROR will store a true/false value which will determine whether to display an error.

 

User Input
The following steps explain how to add and configure how the user will input their answer:

1. Open slide 1.1 User Input.

2. Select Insert > Input > Data Entry > Text Entry Field and click anywhere on the slide to insert.

3. In the Timeline panel, right-click on your new Text Entry object, select Rename “Text Entry” and type Q1_INPUT.

4. Inserting the new text entry field created a new variable called TextEntry. Select the Manage Project Variables button and delete the TextEntry variable.

5. In the Triggers panel, you’ll notice there’s a trigger for Q1_INPUT, which currently says Set unassigned equal to a value, When the control loses focus. Click unassigned, then select the Q1_INPUT variable.

 

User Input Submission and Validation
The following steps will explain how to create the submission button and trigger our JavaScript:

1. Open slide 1.1 User Input.

2. Select Insert > Button, choose a button and click anywhere on the slide to insert.

3. In the Timeline panel, right-click on your new Button object, select Rename “Button” and type Submit.

4. Select your Submit button, and in the Triggers panel select Create a new trigger – the Trigger Wizard popup will appear.

5. Select Action > Execute JavaScript, then select the button (with the three dots) next to Script. The JavaScript popup will appear.

6. Copy and paste the following code into the JavaScript popup:

var player = GetPlayer();
var Q1_INPUT = player.GetVar("Q1_INPUT");
var Q1_VALID = player.GetVar("Q1_VALID");
var Q1_ERROR = player.GetVar("Q1_ERROR");

if (Q1_INPUT.length < 10){
player.SetVar("Q1_ERROR",true);
} else {
player.SetVar("Q1_VALID",true);
}

The first four lines of the code makes reference to the variables we created at the beginning so we can use them in our JavaScript. The If statement then checks the length of the Q1_INPUT variable and updates Q1_ERROR and Q1_VALID variables depending on the result. Let’s go through the statement line by line so you can modify this for your own requirements:

if (Q1_INPUT.length < 10){
If the length of Q1_INPUT is less than (<) 10

player.SetVar("Q1_ERROR",true);

Set the variable Q1_ERROR to true. The user input is invalid and we will display an error.

} else {
If the length of Q1_INPUT is not less than 10

player.SetVar("Q1_VALID",true);
Set the variable Q1_VALID to true. The user input is valid.
}

That’s it! If you want to increase the minimum number of characters required for the input to be valid then just change the 10 to any other number.

 

7. Select your Submit button, and in the Triggers panel select Create a new trigger. Insert the values from the following screenshot – this will show the Error layer when the Q1_ERROR variable is equal to True.

Show Error layer

8. In the Triggers panel select Create a new trigger. Insert the values from the following screenshot – this will jump to the Answer slide when the Q1_VALID variable is equal to True.

Jump to Answer slide

 

Error Message
The following steps explain how to configure the Error layer so the user is notified their input was invalid, before resetting the variables and letting them try again:

1. Select Insert > Button, choose a button and click anywhere on the slide to insert.

2. In the Timeline panel, right-click on your new Button object, select Rename “Button” and type Try Again.

3. Select your Try Again button, and in the Triggers create the following triggers:

Error triggers

This will hide the Error layer when the user clicks the Try Again button. It will also reset our variables so that they can be used again to validate the user input.
--------------------------------------------------------------------------------------------------

Aaaaaand we're finished! Hopefully I've not forgotten anything or made any glaring errors. I've included the Storyline 3 file for anyone who wants to play around with it. Please note that JavaScript only works once the course is published – it will not work in preview.

Cheers,
Doug

2 Replies

This discussion is closed. You can start a new discussion or contact Articulate Support.