Articulate Storyline 360: Display a Password in Plain Text Using JavaScript

When developing a login screen, quiz access page or any password-protected interaction in Articulate Storyline 360, you may need to access the password entered by the learner in plain text. By default, Storyline password fields hide the entered characters using dots or asterisks to protect the password.

Click Preview to see How to Display a Password in Plain Text Using JavaScript in Articulate Storyline 360.

Preview

You can overcome this limitation with a few Storyline variables, triggers and a simple JavaScript.

In this blog, you will learn how to display a password in plain text using JavaScript and enable a button only when the correct password is entered.

Benefits of This Method

Using JavaScript with Articulate Storyline 360, password fields provides greater flexibility than the built-in functionality.

Some advantages include:

  • Create password-protected interactions
  • Validate learner input
  • Enable or disable buttons dynamically
  • Unlock hidden slides or layers
  • Build custom login screens
  • Create verification code activities
  • Restrict access to assessments
  • Improve learner engagement with interactive workflows

Step-by-Step Guide to display a password in plain text using JavaScript

Step 1: Open Your Storyline 360 Project

Open your Articulate Storyline 360 project and navigate to the slide where you want to implement the password functionality.

This slide should contain:

● A Password Entry field
● A Start button (initially disabled)
● The required Storyline variables

Step 2: Create Two Text Variables

● Create the following Text variables.

Variable Name Purpose
EncryptedPassword Stores the password entered in the password field.
UnencryptedPassword Stores the same password as plain text using JavaScript.

These variables are required for the script to work correctly.

Step 3: Save the Password Entered by the Learner

Create a trigger that assigns the value entered by the learner to the EncryptedPassword variable.

The password will still appear as dots in the password field, but Storyline stores the encrypted value internally.

At this stage:

● The learner enters a password
● Storyline saves it in EncryptedPassword
● The password remains hidden on screen

Step 4: Enable the Start Button

Now create another trigger to change the Start button state to Normal whenever the UnencryptedPassword variable changes.

Add the following condition:

UnencryptedPassword = “start quiz”

When the learner enters the correct password:

● The JavaScript updates the plain-text variable
● Storyline evaluates the condition
● The Start button becomes active

If the password is incorrect, the button remains disabled.

Step 5: Run the JavaScript

Create a trigger to Execute JavaScript when the timeline starts.

Open the JavaScript editor, paste your script and click OK.

const input = document.querySelector(‘.acc-textinput’);
let rawValue = getVar(“UnencryptedPassword”) || “”;
input.addEventListener(“keydown”, function(event) {
const key = event.key;
let maskedValue = getVar(“EncryptedPassword”) || “”;
const navigationKeys = [“ArrowLeft”, “ArrowRight”, “ArrowUp”, “ArrowDown”, “Tab”, “Enter”, “Home”, “End”];
if (navigationKeys.includes(key)) {
return;
}
event.preventDefault();
if (key === “Backspace” || key === “Delete”) {
rawValue = rawValue.slice(0, -1);
} else if (key.length === 1) {
rawValue += key;
}
maskedValue = “*”.repeat(rawValue.length);
input.value = maskedValue;
setVar(“EncryptedPassword”, maskedValue);
setVar(“UnencryptedPassword”, rawValue);
});

The script automatically performs the following tasks:

● Reads the hidden password field
● Converts the value into plain text
● Updates the UnencryptedPassword Storyline variable
● Keeps the variable synchronized as the learner types

This allows Storyline triggers to work with the password just like any other text variable.

The JavaScript reads the hidden password entered by the learner and stores it in another Storyline text variable as plain text.

Step 6: Verify Your Variable Names

Before previewing the course, check that the variable names used in JavaScript exactly match the variable names in Storyline.

For example:

● EncryptedPassword.
● UnencryptedPassword.

If the variable names don’t match, the script will not work.

Step 7: Test Your Course

Preview the slide and test the interaction.

When the learner types a password:

● The password remains hidden in the password field.
● JavaScript reads the hidden value.
● The password is copied into the UnencryptedPassword variable.
● Storyline checks whether the entered password matches the required value.
● If the password is incorrect, the Start button remains disabled.
● If the learner enters “start quiz“, the Start button becomes active.

Best practices for using JavaScript in Storyline 360

For reliable performance, follow these recommendations:

  • Use descriptive Storyline variable names
  • Ensure JavaScript variable names exactly match Storyline variables
  • Test your interaction in Preview before publishing
  • Keep your JavaScript simple and well-commented
  • Avoid hardcoding multiple passwords when a single variable can be reused

Remember that client-side JavaScript should not be used to protect sensitive or confidential information, as it can be inspected by advanced users.

Common Issues

If your interaction doesn’t work as expected, check the following:

  • Variable names match exactly
  • JavaScript trigger runs when the timeline starts
  • Storyline variables are Text variables
  • The password comparison uses the correct capitalization
  • The Start button trigger references UnencryptedPassword, not EncryptedPassword

Most issues are caused by incorrect variable names or spelling mismatches.

Want more advanced Storyline tips and techniques?

Explore free Storyline 360 tutorials, including JavaScript hacks and eLearning solutions designed to elevate your course design.

Explore Free Tutorials

Summary

By combining Articulate Storyline 360 variables, triggers and a simple JavaScript snippet, you can access a password entered in a Storyline password field as plain text. This approach gives you greater control over learner interactions, allowing you to validate passwords, enable buttons, unlock content and create custom login or verification experiences that extend beyond Storyline’s built-in capabilities.

Frequently Asked Questions (FAQs)

JavaScript is a scripting language that extends Storyline’s built-in features, helps developers add advanced functionality that isn’t available through Storyline triggers alone, such as custom navigation, dynamic content updates and browser-based interactions.

Storyline variables store information such as text, numbers or true/false values. They can be updated by triggers or JavaScript to create dynamic course interactions.

Add JavaScript using an Execute JavaScript trigger on the desired slide, such as when the timeline starts or a learner clicks a button.

Use triggers, variables, layers, animations, media and JavaScript to create engaging and personalized learning experiences.

Storyline 360 hides passwords by default to protect user privacy by masking the entered characters with dots or asterisks.

Ready to transform your training with AI-optimized eLearning?

Partner with Swift eLearning services for custom development, advanced interactivity and next-gen digital training solutions.

Contact Us
How to Enable Text Selection in Articulate Review 360 Using JavaScript