Own the WORL&D!

My book, Engage the WORL&D, is finally published!

Morning Coffee: JavaScript & Storyline

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…

JavaScript & Storyline

JavaScript & Storyline

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?

business_coffee_mug_custom_16312JavaScript 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!

JS Example Demo

Click the image to launch the demo!

 

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. You can start maybe here.

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

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?

DOWNLOAD!

CLICK TO DOWNLOAD THE ZIP!

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.

About the Author olahzsolt@hotmail.com

Leave a Comment:

2 comments
Add Your Reply