How to Set Character Limit Using JavaScript in Storyline 360

In this blog, we will explain how to set a character limit for multiple text entry fields using JavaScript in articulate storyline 360.

Step-by-step guide on how to Set Character Limits Using JavaScript in articulate storyline 360: 

Open your Articulate Storyline project file where you intend to implement a character limit for text entry fields.

Step 1: Adding Text Entry Fields to the Slide

1. Select the “Insert” tab located at the top-left corner of the screen.
2. Navigate to the interactive Objects section and click on the “Input” tab.
3. Choose “Text Entry Field” from the options available under Data Entry.
4. Position the text entry field as desired on the slide.
5. Repeat these steps to insert additional text entry fields as needed.

Step 2: Adding Variable in storyline

1. Access the “Triggers” panel located on the right side of the screen.
2. Choose “Manage Project Variables” and create a new variable.
3. Name the variable “ShowLayer” and set its type to True/False with a default value of False.

Step 3: Embed JavaScript into the Storyline Project

1. Select “Create a New Trigger.”
2. Configure the trigger action to “Execute JavaScript.”
3. Copy and paste the provided JavaScript code into your Storyline project.

JavaScript code

var textFields = document.querySelectorAll(‘input[type=”text”]’);
var maxChars = [8, 12];
var player = GetPlayer();

textFields.forEach(function(textField, index) {
    textField.addEventListener(“input”, function() {
        var maxLength = maxChars[index];
        if (textField.value.length > maxLength) {
            textField.value = textField.value.slice(0, maxLength);

            player.SetVar(“ShowLayer”, true);
        } else {

            player.SetVar(“ShowLayer”, false);
        }
    });
});

You can customize the character limit for each text entry field. In this instance, we have configured the first text entry field to accept a maximum of 8 characters and the second text entry field to accommodate up to 12 characters.

If the user surpasses the character limit, an error message will be displayed. We achieve this by altering the value of a variable when the user exceeds the character limit. Make sure that the function executes when the timeline starts on this slide.

Step 4: Adding Triggers to Display the Error Message Pop-up

1. Select “Create a New Trigger.”
2. Configure the trigger action to “Show layer.”
3. Set the trigger to activate when the “ShowLayer” variable changes.
4. In conditions, specify to show the layer when the “ShowLayer” variable’s value is True.

Step 5: Preview the Course

1. Review the course to evaluate the character limit of the text entry fields.
2. Ensure that the text entry fields accept the characters as we have modified.
3. Note that the first text entry field allows only 8 characters, while the second text entry field allows only 12 characters.
4. Attempting to exceed the character limit will trigger the display of an error message stating, “You’ve exceeded the maximum character limit for this text field.”