Articulate Storyline

Storyline supports Execute JavaScript triggers, allowing you to extend the functionality of your courses through JavaScript. (To learn more about triggers, check out this tutorial.)

Best Practices

Although Articulate does not provide support for JavaScript coding, the following information will help when you're developing JavaScript triggers in Storyline:

• JavaScript triggers are supported in the Flash and HTML5 published formats. However, JavaScript is not supported in the Articulate Mobile Player for iPad. (For a full comparison of the different players, click here.)
• Use the player.GetVar method to retrieve the value of Storyline variables, and use the player.SetVar method to set the value of a Storyline variable. In other words, you can pull information from Storyline variables with player.GetVar and push information into Storyline variables with player.SetVar.
• Do not include <script type="text/javascript"> in your code.
• You cannot 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, and add the following line of code to the story.html file (line 113).
  
  <script LANGUAGE="JavaScript1.2" SRC="story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>
  
  Then simply call the appropriate functions in your Storyline triggers. Please note that this method is not officially supported by Articulate.
• For general information regarding JavaScript coding, see w3schools.com or Codecademy.

Examples

Change the value of a Storyline variable
This example assigns the current date to a Storyline variable.
[video demonstration here]

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

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

Save Storyline variables to a text file
[video demonstration here]

var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.OpenTextFile("C:\\Test.txt", 8, true, 0);
var name = player.GetVar("TextEntry");
var email = player.GetVar("TextEntry1");
s.WriteLine("Email: " + email);
s.WriteLine("Name: " + name);
s.WriteLine("==========");
s.Close();

Print current slide

window.print();

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

document.bgColor = "#990000";

Change HTML background image

if (document.body){
document.body.background = "image.jpg";
}

Generate a random number
This example generates a random number between 1 and 10.
[video demonstrations here and here; written explanation here]

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