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!

Nicole

77 Replies
Steve Flowers

The Storyline player does what it's designed to do. One of the best ways to extend the player is using Javascript triggers.

Here are a few things I use JS for regularly that SL doesn't support natively:

  • Custom submission to the LMS. Out of the box, Storyline tracks two conditions. One is a slide visit. The other is a single result slide. If you wanted to make sure the user visited a certain number of slides, attempted or achieved an activity, or scored an average of X on three separate assessments, you're out of luck without a Javascript trigger. When using a javascript trigger to override score and status, make sure you set the Story tracking up as Slides visited and make a slide that can't ever be reached. You don't want Storyline's built in tracking conditions to override your custom behavior.
  • Complex calculations, including string operations, and math. There is quite a bit you can do with the simple math operations in Storyline. But the more complicated the math, the more triggers you'll need. There's also a limit. If you want to run complex math operations or calculations like amortization, JavaScript is the way to go. Combining text values (concatenation) is also much easier in Javascript (one trigger versus many to combine three bits of text).
  • Submitting values to a custom endpoint like a Google Form and / or bringing data in from an external data source.
  • Submitting custom interaction values or submitting / retrieving comments or other objects from the SCORM data model.
  • Submitting visits / values to Google Analytics for tracking views within the Storyline output.
  • Custom counters and timers. I once used a simple JavaScript function to create a score counter. Whenever a value was added to a score (10 additional points) the counter made the values animate UP or DOWN to the new value from the current value. Neat effect.
  • Custom libraries and functions. Let's say you wanted to show the user something different if they accessed the course without logging into an LMS. You could publish one output and use it in multiple contexts. Or if you wanted to detect when the user lost an internet connection and let them know. Or if you wanted to grab the user's current coordinates or their current time and customize the display of information based on where / when they were at the time. Or if you wanted to run a library like Soundmanager to load a background sound in that ran / looped regardless of the slide change.
  • Generation of custom HTML through dynamic script. I've used this to generate a printable certificate in a new window using nothing but a JavaScript trigger. You could do the same thing to generate score sheets and checklists.
  • Customizing the presentation to personalize it a bit. You can easily use JavaScript to pull the user's LMS username into the Storyline output. "Hello John, thanks for joining us on this adventure!"
  • Calling external web services. You could bring in things like stock quotes, weather, parts of a company RSS feed, or even call services like Vocalware for real-time text to speech engine processing. This further expands on the example just before this one. "Sorry, Jon, I can't do that." in audio - dynamically generated as the name is pulled from the LMS. Pretty neat possibilities.
  • In some browsers, you can use voice commands as an input. This could be useful in some cases where you have consistency in your user's browser version / brand.
  • Communicating with a window or parent. For example, if you wanted to embed Storyline in a frame where the frame and the container were the same domain, and communicate to the parent, you could do this with a simple parent.function() reference. You can use similar methods to make your embedded web objects communicate with the Storyline "level" by changing a variable value and sending that into Storyline. If the web object or window embed are different domains, you'll want to use the PostMessage() method.
  • Communicating back and forth between a custom Flash movie and the Storyline player. The only reliable way to do this is using storyline variables and the GetVar & SetVar methods.
  • Grabbing a value from the querystring. For example, if you wanted to launch a course using http://www.yoururl/yourcourse/story.html?start=5&username=Joe, you could grab the start value and username value using JS and push those into variables in Storyline. If you wanted SL to start on a particular screen (slide 5) you could run a set of triggers / conditions and direct SL to that particular slide. Easy on the JS side, a little tedious on the SL trigger side.

There is quite a bit you can do with JS just within the JS trigger window. It really does open Storyline up to a world of possibilities. Anything you can do within the browser can now be accessed using the engine built to make behaviors and programming work in the browser. Javascript.

Zsolt Olah

That's an extensive list, Steve! JS is great to communicate with an embedded HTML5 game back and forth. Also used it to send and receive xAPI calls to Watershed LRS. One thing you want to be cautious of is whether the course will be used in the mobile player app. That would limit the JS functionality.  

Steve Flowers

Good way to go. You could probably use the built-in API for quite a bit. For example, querying the LRS to grab a value from another course. Or using completions from other modules to drive the display of a Storyline module. xAPI is going to be pretty neat once it gains traction. Seems a little too "hobby" and focused on SCORM'Y things at the moment. 

Zsolt Olah

Agree. We're just testing the waters. We did grab info like what video clips they watched on a video platform and what web pages they visited prior to launching the game. And the game had a leaderboard for storing score (and interaction down to the question level). What's neat is that you can do a touch activity on the iPad and then show where all the other user touched, where you are compared to others.  

Phil Mayor

I haven't used it as extensively as Steve (amazed my that list)

  • Counting characters to ensure the text fields remain within the screen dimensions.
  • Posting to twitter and Facebook
  • Checking screen orientation for mobile devices
  • Getting values from an LMS
  • Marking complete for a custom website
  • getting random numbers
  • Calculations

and probably many more things I cannot remember, sometimes it is easier to get javascript to do the heavy lifting.

 

Zsolt Olah

Katie,

Glad to hear excitement about JavaScript! It's a programming language that browsers understand (do not confuse it with Java, they are two different animals).

Actually, JS is not related to Storyline, it is a standalone "library" of all kinds of function you can use: math, text, graphics, etc.

I would suggest learning about JS first before you use it within Storyline.

Sent from my iPhone

Ryan DeWitt

This is very helpful guys. I would love to experiment with a few of these.  In fact I will :] for fun. I've recently...

  • used javascript inserted in the index.html web page (story_html5.html) to listen and accept SL variables in for a 360 video scavenger hunt. Hotspots were put in the 360 video web object that called functions to pop up a multi step quiz layer.  You could use this in educational Virtual Tours. Steve touches on this above. 
  • used javascript to post team scores to a PHP leaderboard with a database.  You can even this put the leaderboard back into SL as a web object to see semi real time collaboration.  Mentioned above. 
  • used it for HTML5 Printing for a custom certificate, eliminating all of the SL borders, print button  and passing the user variable Name and popping up a print window for use in HTML5.

Thanks for posting this Nicole and everyones input. 

Phil, I would love to more about Posting to twitter and Facebook. Do you have a post on that?  ... Thanks found this 

Steve, I would love to learn more about Grabbing a value from the querystring.

Zsolt, Sounds like you're on the cutting edge also. :]

R

 

 

Helen Tyson

Hi Katie

Just one extra little bit to add to Zsolt's reply in terms of why use JavaScript with Storyline - in extremely simple terms it allows your course to interact with things outside itself. For example printers, email programs, LMS's, various websites etc. These interactions could be sending information out from the course or pulling information into the course, and reading through both Steve & Phil's lists of their uses of JavaScript will give you a good idea of it's possibilities.

Helen

Peter Rich

@Steve (and others), 

     I would love a tutorial on each of the above, with code walk throughs explaining the different bits.  This would be an extremely useful set of tutorials on advanced uses of AS2 and would extend the community resources in a tremendously helpful way.  What are the possibilities you would be willing to create those resources?

Sahil Mehta

HI everyone,

I appreciate this discussion and there is a lot to know here. I do not know JavaScript but I took help of a programmer and achieved this;

Dynamic listing of incorrectly attempted questions in an assessment. For example:

Q1: Lorem ipsum dolor sit

Q3: Lorem ipsum dolor sit

Q7: Lorem ipsum dolor sit

 

This is also possible without JS using states/layers but it takes an enter space of correctly answered question. For example:

Q1: Lorem ipsum dolor sit

 

Q3: Lorem ipsum dolor sit

 

 

 

Q7: Lorem ipsum dolor sit