Browse Articles

Browse Articles

Storyline 360: JavaScript Best Practices and Examples

Article Last Updated

This article applies to:

Storyline 360

Use JavaScript triggers for advanced interactivity in Storyline 360 courses. (To learn more about triggers, see this user guide.)

Best Practices

Although we don't provide support for JavaScript coding, these tips will help:

  • Install the February 2024 update or later to use the built-in console.
  • As of January 2024, you can 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.
  • As of November 2021, we enhanced the JavaScript editor in Storyline 360. It now features syntax highlighting and line numbers.
  • 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.
  • Don't include <script type="text/javascript"> in your triggers.
  • Each JavaScript trigger can have up to 32,767 characters of code.
  • You can't call JavaScript functions from one trigger in another trigger. However, you can call JavaScript functions within the same trigger.
  • If you'd like 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>

    Call the appropriate functions in your Storyline 360 triggers. Note that this method isn't officially supported by Articulate.
  • If you use jQuery in your JavaScript triggers, be sure to reference the jQuery library.
  • 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. Just be aware that they could interfere with course playback, and they might not work in all versions of Storyline 360.
  • For general information on JavaScript coding, see w3schools.com or Codecademy.

Examples

Find examples of common JavaScript triggers below. And be sure to check out our JavaScript challenge and recap for dozens of demos from our wonderful community of e-learning developers!

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);

Popup message (text only)

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

Popup message (text and value of a Storyline 360 variable)

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

Print current slide (HTML5 only)

window.print();

The simple code above prints the current slide and the Storyline 360 player. If you want to print the slide content only, not the Storyline 360 player, see this JavaScript code from Brian Batt. Note that this method only works with the classic player style.

Print completion certificate

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

Launch 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');

Auto-scroll web page to specific location

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

Auto-scroll web page relative to current location

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

Change HTML background color (classic player only)

parent.document.body.style.backgroundColor = "#990000";

Change HTML background image (classic player only)
Place a copy of the image.jpg file in the root folder of your published output. Credit: Alexandros Anoyatis

parent.document.body.style.backgroundImage = "url('image.jpg')";
parent.document.body.style.backgroundSize = "cover";
parent.document.body.style.backgroundRepeat = "no-repeat";

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? They're super easy to use! Check out this video demo and these instructions to learn more.