How does it work?

Using JavaScript in Storyline is remarkably easy. Normally, there will be some event – user input, a button click, the start of the timeline on a layer etc. – that will act as the trigger on which we want to execute our JavaScript Code.

Let's take a simple example:

Imagine we want to demonstrate  how to calculate the median of a set of numbers. We will allow the learner to input six numbers and then ask them to calculate the median. Once they have input their answer, clicking a button will allow  them to check to see if it is correct.

Calculating the median in Storyline is not simple. the numbers have to be sorted into order and then the middle value found. This would be extremely difficult using Storyline conditional and arithmetic functions. It is much easier to to do this using a JavaScript routine.

First, let’s see how this works in practice and then we will take a look at how we integrated the JavaScript code into the course using a Storyline JavaScript trigger. And in the next section we will look at how we can check our code for errors and debug it if it doesn’t do what we expect.

If you want to download the Storyline file to take a closer look at the code, you can do so here:

So how do we include JavaScript code in the Storyline course?

Once the learner has keyed in their numbers and answer, clicking the “Click to check your answer” button shows the layer “Check the answer”. It is in this layer that we need to put a trigger to execute our JavaScript…

Adding the JavaScript trigger and code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.