How to display 2-decimal places in variable calculations?

Jul 26, 2014

Mel Aclaro
By Mel Aclaro

Hi gang.

I've set up a number variable to display a calculation when two other numbers on the panel are summed.

The calculation works okay. The thing is, since these are currency calculations, I'd like the summed variable to display with two decimal places.

For example: $2.33 + 1.17 should display as $3.50 and not $3.5

I'm hoping one of you heroes can give some guidance about how I can effect the former. Thanks in advance.

Update: Sorry, I should have further clarified... I'm pretty certain this is a javascript solution. I guess what can help me here is if any Heroes can either share an online reference where I can learn for myself the code I need to include in the Execute javascript trigger, or (better yet) if you've implemented such code before -- or know how? -- then, would you be willing to share it? Thanks in advance. Below are links to:

16 Replies
Steve Gannon
over 9 years ago07/27/14 at 9:16 am (UTC)

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 Castellow
10 months ago07/06/23 at 5:21 pm (UTC)

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!

Steve Gannon
10 months ago07/06/23 at 6:35 pm (UTC)

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.

Holly Castellow
10 months ago07/06/23 at 8:57 pm (UTC)

Steve, 

Thank you so so much! I was able to get it all working with your help. I just provided a small sample from the prototype I developed a while back since it is client work. For the main file, I did reset all of the variables when the timeline restarts because the learner does have the option to "play again." Really appreciate you taking the time to help with this!!! :) 

Norah Colvin
9 months ago07/11/23 at 10:02 am (UTC)

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

Steve Gannon
9 months ago07/11/23 at 12:18 pm (UTC)

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.

 

Norah Colvin
9 months ago07/12/23 at 12:49 am (UTC)

Thank you so much, Steve. That's brilliant. I had more errors than I realised. No wonder it wouldn't work for me. It's works perfectly now with your changes. Thank you for making the changes, but especially for explaining what I should have done. It was my first attempt with JavaScript so I have learned a little more. Your support is greatly appreciated. 

Sign In to Reply