How to display 2-decimal places in variable calculations?

Hi Mel,

Using JavaScript, you can convert your numeric variable to a text value. This requires two variables in Storyline: one for the calculated results (a numeric variable) and one for the displayed results (a text variable). Here's some basic JavaScript that will do the trick:

var player=GetPlayer();
var numValue=player.GetVar("numValue");
var numValue=numValue.toFixed(2);
var txtValue=numValue.toString();
player.SetVar("txtValue", txtValue);

Attached is a very basic Storyline example (you need to publish this for it to work). Remember to create in your Storyline file any variables you'll be retrieving from Storyline or sending back to Storyline.

Also remember that JavaScript won't work in the Articulate Mobile Player app for iPads.

Hope that helps.

Holly, I rewrote your JavaScript. Plus, I moved a few triggers around (you were hiding layers before they completed all their triggers). I think the JavaScript is now providing the number format you're seeking but I'm not sure if the whole activity is working the way you want it; I'd need to understand it a bit more.

I added a couple of triggers to initialize two variables when the slide starts. The latter will be important if the user is able to come back to the slide. You'll want to consider resetting the sliders to 0 and adjust the other associated variables to their default values when the timeline starts if users will be able to revisit this slide.

The unfortunate answer is that there is no way to show 2 decimal places all the time

Thank you, Steve! That solved the problem exactly.

Problem-solved: http://concepts.s3.amazonaws.com/2-decimal-places-solution/story.html

Glad that resolved the issue, Mel.

I just wanted to say that I was brought to this thread today because I was having the same issue. I used Steve's Javascript solution today, and it was magnificent! Thanks Steve!

Hi Steve, 

I posted about trying to achieve something similar. I tested out some of your code on my project but was not able to get the result I am going for. Would you please take a look at my JavaScript code and let me know what I need to include so that my currency shows two decimal places at the end? Here is the link to my post: How to Get Two Decimal Places or Cut Decimals with JavaScript in Storyline? - Articulate Storyline Discussions - E-Learning Heroes. Attaching my project file here as well. Will really appreciate your help with this!

Hi Holly,

I'll try to take a look at your file today and I'll let you know what I can uncover.

Hi Steve and Holly,

I've been searching the discussions and YouTube clips for a solution to a problem I'm having, and came across this recent one of yours.

I've created a shopping activity for young children. They add fish to a fish bowl and the cost is added as they do so. I've got it all adding and working just as I want it to, except that when the dollars are whole or the cents end in zero, the zeros don't display. So $4.00 will show as 4 (I've put the $ outside the box) and 80 cents will show as 0.8. How can I get the additional zeros (decimal points) to show?

Steve, I've added in the javascript just as you showed to Mel almost 9 years ago (above), and also tried another similar version but without success. I'm sure it's something simple that I'm missing. I'd love it if you could tell me what I'm not doing that I should be. 

Thanks so much,

Norah

Hi Norah,

You had a few errors in your file. A corrected version is attached.

First, you were executing the JavaScript right away but it needs to be executed whenever NumericEntry changes.

Next, you were using a numeric entry field. I assume you don't want the user to type a value in that box but that's the way it was working. I removed the numeric entry field.

The variable you created in your project, "txtvalue" (lowercase v), did not match the case of the variable in JavaScript, "txtValue" (uppercase V). 

Your project did not display the txtValue variable, which is the variable that contains the correctly formatted number. I put that variable in a box on the screen where you had the numeric entry field.

Seems to work OK now but take a look and let me know if you were looking for something different.