Creating a European Calculator in Articulate Storyline 360

Recently, we had a client request a European calculator as opposed to a US calculator. And I don’t know if you know, but Europeans are a little crazy, or we’re a little crazy. I don’t know; maybe we’re all a little crazy. But Europeans use commas in place of decimal points. Why users wouldn’t just use a calculator on their desktop, tablet, or phone? I don’t know. But if the client requests it and is paying you hourly, make it happen. So I did.

Check out the video below to see how it’s done. Or read the content below for the step-by-step details.

Transcript, Javascript and other goodies

In Europe, if they have a value, like $85.52, it would be represented 85 comma 52. That is $85,52. I know it’s pretty crazy, right? Let’s say we multiply that by two and we get $171,04. So, obviously you’re thinking in Storyline, how is this recognized as a number? Well, it’s not.

So I came up with some JavaScript that would convert this value here from a text value into an numeric value so that we can run our operations and then it converts it back into a text value, which can include commas. So let’s take a look under the hood and see how it’s done.

All I really did was create, I’m not going to get into the nitty gritty of how to create a calculator. You can look that up on the Articulate community, or YouTube, or pick your poison. So what I did was I created some JavaScript to include two variables, current number and text value. So the current number is what’s getting multiplied, divided, what you’re going to use for your operations. And the text value is the equivalent of that, but with a comma in it.

So what we’re doing with this JavaScript is converting current number to a text value and replacing the period with a comma. And you can peruse the JavaScript in section below. But what I did was I added this to each of the operations at the end so that it converts that numeric value to a text value with a comma. And that Javascript get’s applied to all of our function buttons, minus sign, addition, subtraction, division, etc.

Javascript to convert the 'currentNum' to a text value with a comma

//Convert currentNum to txtValue and replace period with comma

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

//Get the numeric value you want to modify from Storyline
var currentNum=player.GetVar("currentNum");

//Get the numeric value you want to modify from Storyline
var txtValue=player.GetVar("txtValue");

//Convert the numeric value to text
var txtValue=currentNum.toString();

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

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

But then also, once you get to the numbers, you’ve got to do two things. The first step is we’re going to convert that number, that text value that we created back to a number by replacing the comma with a period. And that will be a different set of JavaScript, only slightly different, so that when we perform all of our operations, it’s operating on a number, and not a text value. Make sense? And then once all those operations are complete, then we execute the JavaScript, turn that current number back into a text value, and that’s what’s going to show up in the calculator on screen.

Javascript to convert the 'txtValue' to a numeric value with a comma

//Convert currentNum to txtValue and replace period with comma

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

//Get the numeric value you want to modify from Storyline
var currentNum=player.GetVar("currentNum");

//Get the numeric value you want to modify from Storyline
var txtValue=player.GetVar("txtValue");

//Convert the numeric value to text
var txtValue=currentNum.toString();

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

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

That about does it!

Click the link below to download the Storyline 360 file that I used for this example. You can pick it apart, copy the javascript code, or simply use it as a template for future projects.

Happy Storylining!