Adding commas/decimals into Variable Values

Aug 27, 2014

Hi There,

I saw a similar question posted awhile ago but wasn't sure if a better answer/solution existed.

I'm trying to find a way for commas to automatically appear on the screen as a user clicks on markers (see below). I have the dollar sign there no problem but it would be great if there was a way to throw commas in the right spot.

I saw a tutorial about adding a comma and then having its state change to "Normal" when the value changed, but it unfortunately didn't seem to work for me. Any Java solutions or other workarounds out there?

Thanks everybody!


20 Replies
Steve Gannon

Hi Gina,

Yes, there are any number of ways to do this with JavaScript. Attached is just one solution. Basically, I'm passing a numeric variable to JavaScript where the commas and two decimal digits are added, and then I send that value back to Storyline in a separate text variable for display purposes. You need to be sure that whatever variables you end up using in JavaScript are also established in Storyline's variable's panel.

You will have to publish this to see it work, and remember that JavaScript is not supported in the Articulate Mobile Player app for iPad.

Let me know if you have any questions.

Gina Russoniello

Hi Steve,

Thanks so much for your quick response.

I'm REALLY new to JavaScript and dont seem to understand how to properly add this code to my course. I copied/pasted the code from your example into my course and set up the trigger (execute Javascript code when timeline begins on the slide) but the commas are not appearing in between the numbers. Not sure what I need to add to the screen to ensure these come up, but let me know your thoughts whenever you can.

Again, thank you for your assistance!


Steve Gannon

Hi Gina,

A few things to check...

1. Are you using the variables I used? If not but you want to do so, be sure to open the variables window in Storyline and add these two variables if they're not already there: numValue (make this a numeric variable with an initial values of zero) and txtValue (make this a text variable with an initial value of nothing). Spelling and case are important. If you prefer to use your own variables, you can do so but you'll need to open the JavaScript window (open the Execute JavaScript trigger and click the ... button). Change the variable names in the script to match your own variables.

2. Next, you probably don't want to execute the JavaScript trigger when the timeline starts but rather when your numeric variable changes. Open the Execute JavaScript trigger and change the "When:" field to "Variable changes" and then specify the numeric variable that's changing (if you're using my variable names, that would be numValue). However, deciding on when to execute the JavaScript trigger is ultimately going to depend on what's going on on your slide.

If you still have trouble, I'd be happy to look at your file. You can send me a link to it via a private message.

Gina Russoniello

Hi Steve,

Thanks again for the swift response!

I've been putzing around with my file along with the JavaScript you sent and I'm at a total loss. I attached the slide for your consideration. Here's a little background on the interaction:

- Each time a user clicks on a map marker, the value populates in the appropriate color coded box

- Since these amounts will be in the millions, I wanted to have commas appear when appropriate

- I have 3 variables set right now (counter1, counter2, and counter3) that I'm using to add a certain value to the appropriate box when a user clicks each appropriate marker (i.e. if you click a marker in the Event #1 section that has a value of 800,000, then the value of 800,000 populates the Event #1 box to the left of the map).

I have no idea if there's any way to make this work for this scenario since all values are different, but please let me know your thoughts if you have a moment.

I truly do appreciate your assistance with this and my Java cluelessness!!!!!!

Thank you!!


Gina Russoniello

Oh weird! That link works perfectly for me in Chrome, but when I open it up on my end in Chrome from my desktop it doesn't. It works in IE, but not in Firefox. I'll tinker around with my settings to ensure my JavaScript is enabled.

Thank you SOOOOOOOOOO MUCH for this, Steve!!!!!!!!!!!!!! You ROCK!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! :D :D

Gina Russoniello

Just out of curiosity...I checked my Chrome settings and all settings seem to be set to utilize JavaScript. Are there any other settings I might be forgetting about I should keep in mind? Again, just curious since your link works perfectly in Chrome for me but the .story HTML file from my published version doesn't. Weiiiiird, right?

Bryan Leavell

Hi Steve, 

I was wondering if there was a way to do this (without using Javascript) as I am using the player and deisigning for PC, iPad and and Android I need to avoid any script mishaps. I have the user entering a variable amount and then I have the difference being subtracted from a bank account balance. On the feedback layer I show their answer, the correct answer and the difference. How can I get these numbers to have commas that show up? Any help would be greatly appreciated!

Janet Han

Hi all, came to this old thread as I was trying to figure out a solution to my own similar issue. However, I did not want to include two decimal places in the number that is displayed (I wanted 12,000 not 12,000.00). In Steve's code from the story file, adjusting the toFixed value to 0 seemed to break the whole piece of code for me. I put together some slightly different code that works even when the toFixed value is 0. Posting here in case it is helpful to anyone else!

var player=GetPlayer();
var numValue=player.GetVar("numValue");
var numValue=numValue.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
var txtValue=numValue.toString();
player.SetVar("txtValue", txtValue);
Sebastian Vazquez


How can I do this same thing but using a comma instead of a dot before the 2 fixed decimal numbers??  This is because the currency Peso uses a comma for decimals.

I want to show the value like this: $100.345,56

I know that the dot after the "100" in the example is assigned changing "$1," for "$1.".

But I don´t know how to change de dot to a comma before the decimal numbers.

Can anyone help me?



Steve Gannon

Hi Sebastian,

You will want to test this with several values to be sure but I think the code below might get you started (I have only given it one quick test). I have attached an example .story file. You can open the Variables panel and change the initial numeric value for other examples.

//Swap commas and decimal (period)...useful for some currencies
//Add comma to numeric value and round to 2 decimal places
//i.e., 15000 becomes 15,000.00
//Then, replace commas with decimals and decimals with commas
//i.e., 15,000.00 becomes 15.000,00

//Open communication between Storyline and Javascript
var player=GetPlayer();

//Get the numeric value you want to modify from Storyline
//(Change numValue to the name of your numeric variable)
var numValue=player.GetVar("numValue");

//Round the numeric value to 2 decimal places
//and insert a comma after every three digits
var numValue=numValue.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');

//Convert the numeric value to text
//Change txtValue to the name of your text variable in Storyline)
var txtValue=numValue.toString();

//Temporarily replace the decimal (period) with a tilde
var txtValue=txtValue.replace(".", "~");

//Replace all occurrences of commas with a decimal (period). ("g" stands for "global")

var txtValue=txtValue.replace(/,/g, ".");

//Replace the tilde with a comma
var txtValue=txtValue.replace("~", ",");

//Send the text value back to Storyline
player.SetVar("txtValue", txtValue);