• Site Logo, Articulate

Browse Articles

Select a Product

null Support Directory

Browse all null articles. (Last Updated )

No articles found.

Search Results

No articles found.

Storyline 360: JavaScript Tips and Examples

Article Last Updated Jan 16, 2026

This article applies to:

Add advanced interactivity to your Storyline 360 courses with JavaScript triggers that go beyond the everyday to offer more customized learner experiences.

Explore Tips

We don't provide direct support for JavaScript coding, but the following tips can help you get started:

  • Don't include <script type="text/javascript"> in your triggers.
  • Note that each JavaScript trigger can have up to 32,767 characters of code.
  • Take advantage of syntax highlighting and line numbers in the JavaScript editor features.
  • Troubleshoot your code with the built-in console.
  • If you use jQuery in your JavaScript triggers, reference the jQuery library.
  • Get general information on JavaScript coding at w3schools.com or Codecademy.
  • Use the advanced JavaScript API to gain precise control over object properties and more.
  • Storyline 360 doesn't have documented system variables that you can use in JavaScript. You may discover some by working with Storyline 360's published output or searching the community forums. However, they could interfere with course playback, and they might not work in all versions of Storyline 360.
  • Preview local JavaScript triggers in the modern player—for example, JavaScript triggers that retrieve or set the value of a Storyline 360 variable. If you're using complex JavaScript triggers, you'll still want to publish your course to a web server or LMS for proper testing.
  • Use the player.GetVar method to retrieve the value of Storyline 360 variables, and use the player.SetVar method to set the value of a Storyline 360 variable. In other words, you can pull information from Storyline 360 variables with player.GetVar and push information into Storyline 360 variables with player.SetVar.
  • Use the trigger that calls the function. JavaScript functions only run within the trigger from which you call them, not across multiple triggers.
  • To include all your JavaScript functions in a separate JavaScript (.js) file, place your custom JavaScript file in the story_content folder of your published output, then add the following line of code to the story.html file before the closing </head> tag.

    <script LANGUAGE="JavaScript1.2" SRC="/story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>

    You can call the appropriate functions in your Storyline 360 triggers. Note that we don't support this method.

Find Examples

Wondering what you could do with JavaScript? Our JavaScript challenge and recap offers dozens of demos from our wonderful community of e-learning developers. Keep reading to find examples of some common JavaScript triggers—and even a few demos!

Change the value of a Storyline 360 variable
This example assigns the current date to a Storyline 360 variable. Video demonstration.

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var dateString=month + "/" + day + "/" + year
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

Pop-up message (text only)

alert("Your message here...");

Pop-up message (text and value of a Storyline 360 variable)

var player = GetPlayer();
alert("Welcome back, " + player.GetVar("FirstName") + ".");

Print completion certificate

Check out this demo and downloadable example by Tracy Carroll. Tracy uses two JavaScript triggers to get the current date, capture the learner's name, and print a certificate.

Launch a new email message

var email="yourAddress@email.com";
var subject="subject line";
var body_start="How you want to begin your body.";
var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;
win=window.open(mailto_link,'emailWin');

Horizontal scroll bar

Here's a demo and downloadable example by Asbjorn Reinhold. Asbjorn sets a JavaScript trigger to connect a slider variable to an object's position, creating the effect of a horizontal scrolling bar.

Auto-scroll the web page to a specific location

window.scroll(0,150); // horizontal and vertical location

Auto-scroll the web page relative to the current location

window.scrollBy(0,150); // horizontal and vertical scroll increments

Generate a random number
This example generates a random number between 1 and 10. Video demonstrations here and here.

var randomnumber = Math.floor((Math.random()*10)+1);
var player = GetPlayer();
player.SetVar("randnum",randomnumber);

Did you know Storyline 360 has random number variables? Check out this video demo and these instructions to learn more.

Make JavaScript Interactions More Accessible

When creating interactive elements that use JavaScript, don't forget about accessibility! Keep these tips in mind to make your interactions more inclusive for all learners:

  • Enhance with JavaScript, but don't rely on it. Start with the built-in triggers and features in Storyline 360, which are designed for accessibility and handle most interactions automatically. Use JavaScript only when you need additional functionality, like custom animations or pop-ups. Your course should also work without JavaScript, so all learners can participate.
  • Maintain clear focus indicators. Help learners stay oriented as they navigate your course. Shift focus appropriately when content changes, use the aria-hidden attribute to manage visibility for assistive technologies, and keep focus indicators visible (2.4.3 Focus Order and 2.4.7 Focus Visible).
  • Use standard controls with clear labeling. Choose standard buttons and links for better accessibility. For custom elements, add meaningful ARIA labels or roles and make sure learners can navigate them using a keyboard (4.1.2 Name, Role, Value and 2.1.1 Keyboard).
  • Honor preferences. Let learners stay in control. Use live regions for important changes, respect reduced-motion and language settings, avoid automatic motion or audio, and let learners zoom or scale the interface (2.3.3 Animation from Interactions, 1.4.2 Audio Control, and 2.2.2 Pause, Stop, Hide).
  • Test with assistive technologies. Use screen readers, keyboard navigation, and zoom features to test your course. Double-check that learners can follow updates and have enough time to respond or explore content (2.2.1 Timing Adjustable).

Pro Tip: Try achieving your interactivity goals with standard HTML first before adding ARIA attributes.