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

Awesome, thanks for your input Kristin!

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.

Wow that is a super detailed and very helpful list, Steve! Thanks so much!! Goes to show how a bit of JS can be a very powerful thing...

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.  

Good call on the Mobile player app. I've avoided using / recommending it for that reason:) The HTML5 player opens a lot more options for manipulating the player and content than the Flash player.

Did you end up using the built-in xAPI interface or write your own?

Already implemented in the embedded game based on the ADL Tetris example from GitHub. So, I ended up using that. I haven't tried the built-in yet. 

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. 

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.  

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.

Can't wait to read this thread! I'm super new to javascript and am willing to learn anything I can about the subject.

First off: What is javascript and how can it be used in Storyline? What are the features and benefits?

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

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

Ryan, enjoy "fiddling".

Here's some of the functions I'm using with variables if that helps. The commSplit function allows you to set multiple variables in Storyline from within JS or HTML5. I used it to send score and other attributes from the game to Storyline. 

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

Thank you for clarifying, Helen! That makes sense.

Thank you Zsolt for that description as well.

Yes Ryan, I have posted both files here somewhere.  The Facebook one no longer works as they changed the way urls can post the Twitter one still works

@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?

I would be happy to do it for some of the things I have built, let me get the Guru entry out of the way first.

TBH it is a good way to increase my blog post count :-)

killer, thanks Zsolt. R

Thanks Phil, I rendered my certificate image using javascript, I'm wondering if I used PHP to upload that image to database, folks could show off there Certificate on twitter.  Let's do it. :]

If you can get the url of the image into storyline then it should be possible.  The Guru entry I am working posts an image to twitter (these are image I have already tweeted though).

I am sure I will give the file away after it is built. 

I'm excited to learn more from this thread.  I was just talking to my team about how we probably will need to start working with Javascript to get what we need - very timely!  I will appreciate any examples, places to start, any suggestions for the best ways to test it with a very cranky LMS.

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

Hi there,

Can anyone help me for getting the text values from a website into storyline. A user has to fill its name, email and employee code in a website and a START button will launch the course inside the website. I do not know JavaScript so I am unable to achieve this.