Using JavaScript for interactivity in Storyline

In the previous post, we discussed about using JavaScript to build a custom menu. Today, we shall discuss about using JavaScript for interactivities, which involves some math.

We shall compare Simple Interest and Compound Interest with the help of JavaScript. The reason I chose this comparison, was to show how JavaScript can help in performing complex calculations, which is currently not easy (if not impossible) in Storyline.

Let us begin with the basic formulae for both Simple and Compound interest:

Simple interest = P*R*T/100

Compound Interest = P*[(R/100)^t]

Now the IS part: The learner enters the 3 variables – Principal, Time and Rate.

Something like this –

Once s/he clicks on the button, both simple and compound interest will be displayed.

Note: I have left the right side blank, on purpose. We may include a little graph to represent the comparison visually. We shall discuss that later.

 

To do this –

Step 1: Create the following numeric variables in Storyline: ‘principal‘, ‘rate‘, ‘time‘, ‘sinterest‘, ‘cinterest‘

Step 2: Add a trigger to the ‘Compare’ button, to execute the following JavaScript when clicked:

 

var player = GetPlayer();

var principal = player.GetVar(“principal”)

var rate = player.GetVar(“rate”)

var time = player.GetVar(“time”)

 

var sinterest = principal*rate*time/100;
//simple interest is calculated here and stored in variable ‘sinterest’ created in JavaScript

player.SetVar(“sinterest”,sinterest);
//simple interest is put into storyline

 

var camount = principal*(Math.pow((1+rate/100),time));
//Remember: it would have been difficult to use power function in storyline

var cinterest = camount-principal;
//compound interest is calculated here and stored in variable ‘camount’ created in JavaScript

player.SetVar(“cinterest”, cinterest);
//compound interest is put into storyline

 

And it is done.

So, we can see how some simple coding can help you build interactivities that involve some complex calculations. Go ahead and try out something different by yourself.

PS: I have used graphics from these sources – PSD Graphics and Articulate Community.
You can download the storyfile here.