Javascript: Have you used it with Storyline & what for?

Hey peeps, 

We're going to have a short session about using Javascript with Storyline at our Toronto event this week (community member Kristian Chartier will be delivering it!).

In that vein, I was hoping some community members might share insights into if and how they have extended Storyline's use with Javascript in the past. Just looking for a list of potential reasons one would use JS! Thanks for sharing!


77 Replies
Erin Hayes

I have used it to make training on a RF Gun training more engaging (think about the "guns" you see in Target that the associates use to find a product, price, etc) .  We created a trigger with Javascript for characters (letters, numbers, backspace, etc) on the gun so that the learner could complete the task all onscreen!  It perfectly simulated the actual experience on the gun which was great!  I look forward to doing and learning more with JavaScript


Sammy Hwang

I really enjoy this kind of conversation. Thank you for the detailed answer, Steve Flowers.

Our graphic designer and I have some interesting scenario and I am wondering whether we can solve the problem using javascript. 

We are helping  our professors to create online courses. 

She is curious about whether we can lock the content that users have already seen. For example, there are seven chapters within one module. I put all the seven chapters in 7 separate scenes. After users go through the first chapter (the first scene), then the second chapter (the second scene) is available to them. 

The key is the first scene has to be locked.

Does it possible to do this kind of action using javascript? 

Zsolt Olah

Hi Sammy, the short answer is yes, you can do it with JavaScript but I think you may be able to do the same with Variables, Triggers and Conditions as well. It depends on the exact flow you're looking for.

Let's say each chapter has a variable (with Locked, Not Started, Incomplete, Complete status). Ch1 is set to Not Started. Ch2 is Locked. Ch3 is locked, etc.  If the chapter's status is locked, it is not accessible. You can set Chapter 1 to Incomplete when the users gets to the first page. When the user has seen all pages in Ch1, you can set Ch1's variable to Complete.

Then, Ch2 can watch this trigger and can change Ch2's initial variable status from Locked to Not Started. And now, you can move on to Ch2...

This is just a theory, I haven't tried it but if anyone has done something similar please chime in!



Steve Flowers

Hi Sammy -

You could do this with Javascript but it's not necessary. Everything you need to do this is available in triggers, conditions, and variables.

Using Javascript to create and evaluate arrays can be useful for checking locks / unlocks for sections and affecting visuals. I have an example of that somewhere here on the forums. This uses a variable for slide number and a listener trigger on the master that fires a Javascript trigger to commit that to an array (1,0,0,0,1,1,1,0). This array can be evaluated to determine an lock.

Steve Flowers

Zsolt beat me to it:)

The only advantage Javascript might provide is reduction in the number of triggers you would need to track progress. The downside is the script can be fragile (put a character in the wrong place and it's all broken) and the editor won't warn you if you messed something up.

Joe Pillsbury

Hello, very new to the forums but have been working with SL for a while.  I tried to use JS for a type of log.  So that JS would make a text file on the local computer that would log in all the students that took the course on that computer.  Sadly, I could never get it to work.  I looked at the forums and all over the internet to find a solution but could not.   The script I am using is here:

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

I'm not sure where I went wrong. 

John Nixdorf

A little late to the party. For a variety of reasons I had the time in the last week to do some experimentation and came up with the attached.

It uses a javascript to manipulate the states of an object.

Any critiques from the javascript mavens as to how to do it more efficiently will be gladly received.

Killian Holmes

In Moodle, in a course with the Flexible sections format I've used Javascript to return to the relevant topic by trigerring window.history.go(-2); when Exit is clicked.

The Appearance settings in Moodle are:

Display package: Current window
Student skip content structure page: Always
Disable preview mode: Yes
Display course structure on entry page: No

Zsolt Olah

John, the Magic Ball looks good!

Based on the interest just in this thread, here's a demo (with source code) including some of the above mentioned JavaScript features. Feel free to rip it apart, customize it and re-purpose it if you like.  I used @Allison's template and added the JavaScript.

I'd love to see other examples as well! 

Zsolt Olah

Here's a demo of sending (in this a variable) and receiving data to/from a Web server. The same concept goes for sending, for example name, email and score and store the info on the server. There you can build a leader board or something... We used this to send question level quiz details. I'm happy to provide the source files as well but you must have your own server to modify it for your needs.

Helen Tyson

Hi Nataly

It would take a bit of work but you could create 6 number variables (one for each image) and then use random number generation to feed a number from 1-96 into each one and then change the state of the images based on the numbers in the variables - each image would need 96 states!

There's a random number generator script found on this page

Hope that helps