Adding commas/decimals into Variable Values

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.

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!

-Gina

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.

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

OK, I see what you want to do. This will require three different text variables, no problem. I'll have this posted back to you in a few minutes.

AHHHHHHHHHHHHHHHH STEVE YOU ARE INCREDIBLE!!!!!!!!!!!!!!!!!!!!!!!!!

OK, all set, here you go.

Hi Steve,

Thanks so much for your help!

I just published the file and the numbers aren't appearing or adding up when I click on the markers. Not sure what I can do to fix that...Thoughts?

Thanks again!!
-Gina

Hi Gina,

What browser are you using? Do you have JavaScript enabled in that browser? Try this link:

http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp190f3t736hi11eakf891n7eacs1/story.html

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

Depending on your browser's security settings, it may block the JavaScript from running when run from your local drive. It should work when accessed off of a web server. I tried it in Firefox, IE and Chrome and all three played it fine for me from the link provided.

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?

Cool that's great to know, Steve. We'll be publishing this full interaction in our LMS so hopefully that'll help

Thanks again!!

-Gina

You can use Articulate's TempShare site to test the published output from a server as needed.

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!

Hi Bryan,

There is no clean way I know of to do this without JavaScript but this thread provides a bit of a workaround.

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);

Hi!

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?

Thanks!

Hi Sebastian!

Commas aren't currently accepted when using numeric entry fields. One workaround is to use a text entry field.

I'm looking forward to seeing what other community members recommend!

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);