Javascript Causing Slide Not Work

Hi Tammy,

I had a quick look and something I have found is when manipulating variables with Javascript it to use a different variable name to the storyline one. Only use the storyline one when pushing the variable back to Storyline.

Hi Tammy,

Using variable names that are the same as your articulate variable isn't a problem. The variable scope is different, and the don't interact.  

Looking at your script, the problem appears to be that your javascript only runs when the timeline starts, not when the interaction takes place. You would need to create a trigger that would cause your javascript to run every time the value to Total changes for this to work. I've made the change to your file for you, and now it is working.

Keep in mind, that javascript only runs in the published project, so it still won't display a total when you run it in the development mode.

Thank you for the feedback!  The slide works as it should now except that the Javascript is not produces the desired results.  I added it so that I could have two decimal places in the currency total.  It is not consistently doing this.  

I am not sure what the difference is between Storyline variables and Javascript variables.  Can anyone explain this?

On the quick check that I performed, it appeared to be working. What are you seeing it do now?

I changed the javascript trigger on the Money layer to trigger when the total variable changes. I didn't update it on the Money2 layer. Try updating that trigger to match, and that should fix it.

Hi Dave, I did change the Money2 layer prior to testing it.  When published, it won't show two decimal places at all times.  

Looking at your javascript, only declare each variable with the var statement once. By using the var statement with a variable that is already defined can prevent the javascript from running correctly.

var player=GetPlayer();
var Total=player.GetVar("Total");
Total=Total.toFixed(2);
var TextTotal=Total.toString();
player.SetVar("TextTotal", TextTotal);

Thank you Dave.  I adjusted my script to your suggestion but it still won't show the zero for the second decimal place.  Any other ideas?  I've added the revised file.

You could use Javascript's lastindexof() method to check the location of the decimal, and add the trailing zero when needed. I don't have time to write it for you at the moment, but I might be able to do it for you a little later.

So I found the issue!  When I published the file and opened the html5 file to review it, the decimal places were not correct.  I just uploaded it to my LMS and it works fine!  

The new question is now, why doesn't this function work in html5?

Hi Tammy,

That is actually a very good question! 

It took me awhile to figure it out, but the answer is this: The script is working. The problem isn't with the script at all. The problem lies with the Storyline code,  and how it is parsing the value placed back into Storyline's TextTotal variable. It appears that in HTML5, Storyline is treating the value like a number, and stripping the zeros after the decimal point. (Probably some additional javascript is the Storyline HTML5 player.) The only good work around that I've been able to make work is to add an additional character, like a period. A space doesn't seem to work.

So the new code would look like this:

var player=GetPlayer();
var Total=player.GetVar("Total");
Total=Total.toFixed(2);
var TextTotal=Total.toString();
TextTotal = TextTotal + '.';
player.SetVar("TextTotal", TextTotal);

Notice the additional line that I added to add a period at the end.

Perhaps, if we are lucky, one of the Nice people at Articulate could look at this behavior in Storyline to determine why this is? Maybe even fix it?

Thank you for the additional code, Dave!  I will see if this changes anything in the HTML5 file.  And I agree, that I hope one of the awesome Articulate folks will chime in.