Converting a Learner’s Name to Proper Case in Storyline using JavaScript

To keep my skills in Storyline 360 current, I often try to assist others using the application when I can via the Elearning Heroes Forum. This week, I came across a post where someone wanted to use JavaScript to ensure the letter in the learner’s first and last name was capitalized regardless of what the learner typed into the Storyline text fields.

Update: After playing with the code a little more after initially making this post, someone on the forums mentioned that if you were to type jAne or JANE, the JavaScript code below would convert to JAne and JANE. To address this, I’ve updated the JavaScript code which can be seen under The Revised JavaScript Code. To continue working out loud here, I’ve left both for you to see.

The Storyline Variables

To make this happen, I created three text variables in Storyline 360:

• Fname: Learner’s first name
• Lname: Learner’s last name
• Fullname: Learner’s first and last name (this appears on its own layer after the user clicks the Submit button.

The Original JavaScript Code

I triggered the following code when the user clicked the Submit button.

var player = GetPlayer();
var jsFname = player.GetVar(“Fname”);
var jsLname = player.GetVar(“Lname”);

var capitalizedFname = jsFname.charAt(0).toUpperCase() + jsFname.slice(1);
var capitalizedLname = jsLname.charAt(0).toUpperCase() + jsLname.slice(1);

var fullName = capitalizedFname + ” ” + capitalizedLname;

player.SetVar(“Fullname”, fullName);

The Revised JavaScript Code

var player = GetPlayer();
var jsFname = player.GetVar("Fname");
var jsLname = player.GetVar("Lname");

var capitalizedFname = jsFname.charAt(0).toUpperCase() + jsFname.slice(1).toLowerCase();
var capitalizedLname = jsLname.charAt(0).toUpperCase() + jsLname.slice(1).toLowerCase();

var fullName = capitalizedFname + " " + capitalizedLname;

player.SetVar("Fullname", fullName);

Storyline Triggers

Note: Button 1 is the submit button in this example.