Decimal Display

Traci P
By Traci P

Hi! Thanks in Advance!

I understand that the default SL functionality is to display 2 decimal places for number variables. Does anyone know if there is anything that can be edited within a scorm file to display 4 decimal places (rounded) by default? I've seen some workarounds, but they seem cumbersome to do if you were to be working on a math/finance type course with specific rules around decimals and rounding that includes several equations and a large number of problem sets.

 

10 Replies
Matthew Bibby
over 3 years ago10/10/18 at 10:49 pm (UTC)

Thanks Traci. I responded to your email but I'll share this here as well in case in helps someone in the future.

Here is a demo.

Here is the source file.

Here is the JavaScript used to achieve this:

var player = GetPlayer();
var num = player.GetVar("NumericEntry");
var num=parseFloat(num).toFixed(4);
var txt=num.toString();
player.SetVar("FourDecimals", txt);

For this to work, you'll need the following variables in Storyline:

NumericEntry - which is a number variable. This is where the original number is entered.
FourDecimals - which is a text variable. This is where the four decimal number is saved.

Here is a quick description of what's happening in the above JavaScript:

var player = GetPlayer(); // Establish communication with Storyline
var num = player.GetVar("NumericEntry"); // Create a new JS variable called num and populate it with the value of the Storyline varialbe NumericEntry
var num=parseFloat(num).toFixed(4); // Makes the num variable a floating point number and limits it to 4 decimals
var txt=num.toString(); // Converts the above number to a text string
player.SetVar("FourDecimals", txt); // Passes the text string back to the Storyline variable FourDecimals.

This solution isn't perfect.

The variable that we get back to Storyline is a text variable rather than a number variable, which means you can't then perform math related functions with it in Storyline.

In theory, this shouldn't be required, we should just be able to change the fourth line from var num=parseFloat(num).toFixed(4); to var num=num.toFixed(4); and then pass that value back to a numeric variable in Storyline. However, when I tried this approach the script wouldn't run. I also tried another approach where I used a different approach to feed the number variable back to a numeric variable in Storyline but in that case, Storyline just made it a two decimal number!

However, when I tried this approach the script wouldn't run as it claimed that num.toFixed was not a function. I suspect that Storyline may have been passing the original variable as text rather than a number...

I also tried another approach where I passed a number back to a numeric variable in Storyline but Storyline decided to just make it a two decimal number!

Silly Storyline.

Hope this helps.

Zsolt Olah
3 years ago04/14/19 at 2:04 am (UTC)

It is actually even more mysterious. Let's say you have your number you enter as 1.1399. Once this gets into the SL variable, it's rounded to 1.14. BUT it is not the actual number stored in Storyline, it is just the number DISPLAYED. 

You can test this by multiply the number (supposedly 1.14) by 1000 in JavaScript and you get 1139.9. That means SL keeps the actual 1.1399 number in the variable, it just doesn't show it.

Math Notermans
9 months ago08/17/21 at 8:29 am (UTC)

So i wanted to figure out where exactly in Articulate's code the decimal's get rounded.
Unminifying and doing some tests in slides.min.js i found that in fact internally there is a spot where with multiple decimals is calculated.

At some lines this is set:
   S = function (t) {
       return parseFloat(t.toPrecision(7));
   };
And indeed when logging this you will see a 7 decimal precise number. Changing this to a higher number you will see internally Storyline calculates with that higher amount of decimals.

So now to find where this value is returned to and used ( and in the end converted to a 2 decimal one )
After some searching i pinpointed the spot where the conversion from the multi-decimal Number is changed to a 2-decimal Number...

At some point there is this code, a parseVars function...
  parseVars: function () {
    var t = this.props.model;
     return o.parseVectorText(t, this.updateVarText(t));
 },

Adding some code here to see what is happening...
    parseVars: function () {
        var t = this.props.model;
        var tVars = o.parseVectorText(t, this.updateVarText(t));
        var obj1 = JSON.stringify(t);
         var obj2 = JSON.stringify(this.updateVarText(t));
         console.log("parseVars: "+obj1+" |updateVarText: "+obj2);
      return o.parseVectorText(t, this.updateVarText(t));
   },

And you will notice that obj1 still has the multi-decimal variable in it... whereas after 't' has been worked on by the function 'updateVarText( )' it is changed to a 2-decimal variable and rounded.

I cannot yet find where that function does its work...but gonna dive deeper into it.

Math Notermans
9 months ago08/17/21 at 10:04 am (UTC)

Well...now breaks my wooden shoe...that is a Dutch saying ( 'Nu breekt mijn klomp' ) stating as much as im perplex and very surprised by something... due to wooden shoes seldom or never breaking ;-)

Working some more on the decimal thing...
If you in your console run...

var player =GetPlayer(); player.GetVar("_player.testNum");

Being testNum your custom numeric variable you save the multiple decimal value into when entering it into a Numeric entry field...to my big surprise the console gives back your numeric entry with ALL decimals. Watch the _player in front of the testNum...

So clearly Storyline only changes it visually on the frontend. Developers really should fix this and give the user the possibility to use 2 or more decimals.

Sign In to Reply