How to Validate Learner Input in Storyline 360 Course Using JavaScript

Step 1: Open Your Project in Articulate Storyline 360

Begin by launching Articulate Storyline 360 and opening the project where you want to add keyword validation in a text entry field.

Navigate to the slide containing the text entry interaction. This slide will allow learners to type their responses.

The goal is to capture the learner’s input and use JavaScript validation to determine whether the response includes specific keywords.

Step 2: Create a Variable

Before implementing the JavaScript logic, you need to create a variable that will track whether the learner’s response contains the required keywords.

In Slide View, locate the Variables button next to the Group option.

Click Variables to open the Variables window.

When the window appears:
● Click the plus icon to create a new variable.
● Name the variable answer.
● Set the Type to True/False.
● Set the Default Value to False.
● Click OK.

This True/False variable in Storyline 360 will later be updated using JavaScript when the correct keywords are detected.

Variables are an essential part of Storyline 360 triggers and allow developers to control interactions, feedback layers, and other learning elements.

Step 3: Create a Trigger to Execute JavaScript

The next step is to create a trigger in Storyline that executes JavaScript when the learner submits their response.

Open the Triggers panel and click Create a New Trigger.

Configure the trigger as follows:
● Action: Execute JavaScript
● When: User clicks
● Object: Submit button

This Execute JavaScript trigger in Storyline 360 allows the system to run custom scripting whenever the learner clicks the Submit button.

Triggers play a key role in interactive eLearning development, enabling developers to connect learner actions with specific responses or system behaviors.

Step 4: Open the JavaScript Editor

After selecting Execute JavaScript, the JavaScript editor will open automatically.

In this editor, you can write or paste the script that will check the learner’s input and determine whether the required keywords are present.

This script uses the Storyline JavaScript API, which includes functions such as:
● player.GetVar() – retrieves the value of a Storyline variable
● player.SetVar() – updates a Storyline variable

These functions enable communication between Storyline variables and JavaScript logic.

Paste your JavaScript code into the editor and click OK.

var answer = getVar(“TextEntry”);
var words = [“emails”, “websites”];
var containsWords = words.every(word => new RegExp(`\\b${word}\\b`,’i’).test(answer));
setVar(“answer”,containsWords);

Make sure that:
● The keywords you want to check are defined in the script.
● The script references the variable you created earlier (answer).

This ensures that the variable updates when the learner’s response includes the specified keywords.

Step 5: Add Feedback Layers

Once the JavaScript logic is in place, the next step is to create a feedback layer.

Layers allow you to display additional information or responses based on learner actions.

Create a new layer called Answer.

On this layer, you can display:

● The correct answer
● Feedback explaining the response
● Additional guidance for the learner

Feedback layers are commonly used in Storyline quiz validation and scenario-based training modules.

Step 6: Create a Trigger to Show the Feedback Layer

Now you need to create another trigger that displays the Answer layer when the variable changes.

On the Base Layer, create a new trigger with the following settings:
● Action: Show Layer
● Layer: Answer
● When: Variable changes
● Variable: Answer

This Storyline trigger condition ensures that the feedback layer appears when the variable answer changes from False to True.

This type of variable-based trigger in Storyline is commonly used in custom eLearning interactions.

Step 7: Preview and Test the Interaction

After configuring the triggers and JavaScript code, it is important to test the interaction.

Click Preview to run the slide.

Type a response in the text entry field and click the Submit button.

Two outcomes are possible:

● If the learner’s response does not contain the keywords

1. • The answer variable remains False.
   • Since the variable does not change, the feedback layer will not appear.
   • This ensures that learners must include the correct keywords before proceeding.

● If the learner’s response includes the keywords

1. • The JavaScript code updates the answer variable to True.
   • When the variable changes, the Answer layer automatically appears, providing feedback or the correct solution.
   • This approach demonstrates how keyword detection in Storyline 360 can be implemented using JavaScript.