UPDATE (04/01/18): Source updated to Storyline 360. UPDATE: I've updated the example with some tweaks for html5. Main change: replaced True/False with a number variable using 1/0. There's something fishy sometimes with passing True/False to JavaScript in HTML5. You can use a number variable and set it to 0 for false and 1 for true.
UPDATE (06/19/17): Added parseInt().

Not that brewing Java! But still…

Storyline itself has powerful features when using Variables, Triggers and Conditions. However, there are mornings when you do need a fresh, warm cup of java to reinvigorate your day. Enter JavaScript (which has nothing to do with Java by the way.).

What is JavaScript?

Latin is the language of the dead. JavaScript is the language of the browser. A scripting language to make user experience much more dynamic than staring at static HTML pages. Why use it with Storyline?

JavaScript can reinvigorate your Storyline course in three ways:

– You can impress your friends with things that are not possible without JS.

– You can make things happen much easier in Storyline. Which will impress your friends.

– You can impress your non-programmer friends just by saying you’re scripting.

Example, please!

I would suggest checking out the following demo below. It contains examples of how JS can be used in Storyline (to impress your friends). If the examples make you think JS is something you’re interested in, go ahead and download the resources, play around with it. If not interested, you’ve just saved yourself ton of time not reading this further!

 

Waiter! Check, please.

Check this out! Here’s the list of features from the demo above:

– Manipulating Storyline variables from JS

– Typing effect

– Creating random numbers

– Showing error messages

– Playing with video

– Splitting a text by a separator

– Reading variables/arguments sent by the URL

– Using Arrays to impress your friends

 

If you’re not familiar with JS, I would suggest doing the three step method:

(…and if you’re already a JS wiz, just skip this section)

1. Learn about JS first, outside of Storyline. Just to gain enough knowledge to be dangerous. Here are some resources to start with:

• Hands-on, interactive learning at Guru99: https://www.guru99.com/introduction-to-javascript.html
• Learning to code at Tutsplus: http://code.tutsplus.com/tutorials/the-best-way-to-learn-javascript–net-21954
• And also, Khan Academy, the amazon of learning: https://www.khanacademy.org/computing/computer-programming/programming/intro-to-programming/v/programming-intro

2. Check out Articulate and E-Learning Heroes on using JavaScript inside Storyline.

COMING SOON: JavaScript for “non-coders” in the WORL&D using Articulate Storyline. Project99 brings 99 examples of how you can take elearning development to a next level to make your solution pop(); 

Interested to hear more? Subscribe to my mailing list.

3. Put your favorite music on add your very first JS script in Storyline:

a) Add an Execute JavaScript trigger when the page load.

b) Click the … in the trigger.

c) Type the following JavaScript code: alert(“I am the best!”);

d) Save it, publish it and run it! (JavaScript is not available in preview mode.)

Congratulations! You have just scripted your first ever JavaScript program. It’s a little ugly, it’s a little useless but hey… Remember, your last imperfect JavaScript program is way better than the last absolutely perfect code you have never written.

Selfish time! How to make the most out this demo?

You can download the zipped version of this demo and play around with it on your own. There are couple of things you need to be aware of:

– There are two ways to add JavaScript in Storyline.

a) Using the Execute JavaScript trigger in Storyline and include all your code there (by clicking the …).

b) Save all the code in a separate file, like a library of your own. And just call functions from Storyline, same way as method a) but the actual code would reside outside of Storyline in your .js file.

Method a) is nice when the code is short, simple and you don’t need to reuse it. It is officially supported by Articulate.

Method b) is much cleaner but not officially supported by Articulate. You can keep all code in one place. Especially, when you’re calling a function from various places in Storyline. The source is a single file. However, every time you publish your Storyline course, the user.js (where Storyline stores all JS functions) and the story.html files are overwritten. That means you have to do two extra steps to include your .js file after publishing: copy your .js file into the published folder and add a line to include it. Details are listed here.

– In the zip file, you’ll find the Storyline source files as well as the zsolt_demo_v3.js file that you need to include each time you publish your course.

– Feel free to change, delete, add or in any way steal re-purpose everything!

– If you have any questions, feel free to reach out to me @rabbitoreg on Twitter or https://www.linkedin.com/in/zsoltolah1 on LinkedIn.