Basic steps in using javascript; please help!

I am new to javascript, and fairly new to Articulate, and I want to pull out some Articulate variables, do some basic math calculations on them, and put them back in so the results can be displayed and used to control branching scenarios. I can do the clever stuff, but the first rung on the ladder is missing! I have copied some code on generating random numbers, and set a trigger for that from the timeline, and that works fine (I built a pair of dice rolls). But something must be wrong or missing in my basic code here.

Can anyone please help with a simple sequence such as:

1. Get Houses and Price from Articulate
2. Multiply Houses by Price to give Revenue
3. Return Revenue to Articulate.

This javascript code works fine in a browser:

var Houses = 35;
var Price = 100000;
var Revenue = Houses * Price;
console.log(Revenue)

but I can't put it into Articulate and get a result.

I can't find anywhere in the online forums or the tutorials that makes this clear, and all my attempts to use getPlayer() etc. are failing. Here is a sample that is not working:

var player=GetPlayer();
var player=GetPlayer("Houses");
var player=GetPlayer("Price");
var Revenue=GetPlayer("Revenue");
Revenue = Houses * Price;
return Revenue;
player.SetVar("Revenue", Revenue);

6 Replies
Phil Mayor

You can do this in Storyline using triggers for a simple multiplication. your code is wrong to get variables you need to use getVar. Use the javascript console in the browser to check for errors.

var player = GetPlayer();
var houses = player.GetVar("Houses");
var price = player.GetVar("Price");
var revenue = houses * price;
player.SetVar("Revenue", revenue);
Math Notermans

As Phil says.
Do check up on basic Javascript.
https://www.w3schools.com/js/DEFAULT.asp

The errors in your code are very basic and not really related to Storyline but more basic Javascript coding errors.
First of all...do not try and code in the Storyline editor. It really lacks a lot of features of good editors, most important one..colorcode assistance.
I use Sublime Text, a free editor that works great.

If we read your code line by line then this happens in plain text.

var player:
i define a variable called player.
var player = GetPlayer();
i set the value for the variable player to the value i get back from a function called GetPlayer
i again define a variable called player, thus overwriting the first one.
etc. etc.

Do use console.log("here i can test my code: "+houses) statements in your code to test it in the console in the browser.
If working with storyline variables you can check values of them easily on stage by using
%Houses% in a textfield.

One extra trick that is quite usefull when working with Javascript in Storyline is that you can live edit the code in the console in Chrome, thus seeing changes on elements and discover tricks for Storyline. That looks like this then..
livetest

Adding a screencam showing how this works...

Kind regards,
Math

Brian Helweg-Larsen

Thank you Phil, this is really helpful. It is amazing to me that I can be blind to the difference between GetPlayer() and GetVar(). I was aware that the mistakes were very basic, but ws going mad trying to find them. I am doing a lengthy javascript tutorial, but it doesn't mention any Storyline code (naturally), and the Storyline examples I have seen don't explain what it is actually doing.

Thanks so much for helping out :-)

Brian Helweg-Larsen

Hi Math,

Thanks so much for your helpful comments too. I think tht beween you and Phil you have put me on the right path. I can now set up a full set of financial variables, track progress through a simulation, and set up P&Ls and Balance Sheets whenever I want. 

I do have a good javascript editor, and it was very helpful to follow through your video. 

Many thanks for helping a newbie :-)

Math Notermans

One extra thing to remember... Numeric variables in Storyline will be rounded internally if you save them. Do all your calculations either within Javascript and then pass a text variable to Storyline to keep exact values like 1.25678345679434564 intact... Quite some posts about that to find in the forum. Another trick to avoid rounding is multiplication * 10 | 100 or 1000 depending on your needs.