Storyline Javascript for concatenation

How to do text concatenation in Storyline Javascript

Last week I posted a way to create an inventory list in Storyline 2. I’ll be the first to admit it was a bit convoluted. After I published it on the Articulate Heroes forum, a couple of people came forward asking why I didn’t use Javascript instead. As I said in the original article, I hadn’t really explored using Javascript in Storyline. Although Javascript used to be part of my daily working life in my last job, it’s almost ten years since I’d used it and I assumed it would be more difficult than it actually was. When I looked at the suggestions on the Heroes forum I realised it wasn’t all that difficult at all.

So in case you’re one of those people timid about using Javascript, here’s the technique reduced to its simplest form.

The task

This example

So how do you concatenate in Javascript?

Storyline Javascript for beginners

How to apply it in a scenario

Need the Storyline mobile player?

Downloads

The task

To recap the task, I wanted to be able to display at any point in a scenario a list of the learning points the user had picked up, without displaying the ones they hadn’t. You’d use the same technique for a discovery game where you pick up items as you go along e.g. ‘You found the spade.’ ‘You found the map.’

The only way I’d been able to do it up till now was to display a full list then hide some list items using States and conditional variables ‘If gotSpade is false, hide txtGotSpade’. While this is easy to set up it leaves you with gaps where items are hidden. I wanted to find a way create the list without gaps.

My first solution

The solution I posted created a number of list item positions, each containing as states all the possible items to show. It then went through a line of ‘if’ triggers to work out what items each position should show. It worked but it’s cumbersome.

Concatenations (and celebrations!)

The principle behind the Javascript solution put forward by Phil Mayor was concatenation – adding new text strings onto the end of a text string variable. So instead of getting in knots showing and hiding elements, you just have one variable, the list, and as the user ticks off achievements you add them to the list.

  1. The list is blank
  2. The user finds the spade
  3. Add ‘You found the spade.’ to the variable ‘list’.
  4. The user finds the map
  5. Add ‘You found the map’ to ‘list’ after ‘You found the spade.’
  6. Whenever you want to show the current status just display ‘list’

Can’t we do this without Javascript?

Unfortunately not. While you can add one numerical variable to another in Storyline you can’t add text variables to each other. Believe me I tried. The user forums say it’s been a feature request for some time.

Top

 

 

This example

Here we’re going to use a simple ‘select the shapes’ screen to create our list. The user will select any or all of a rectangle, circle, triangle and cross, and the next screen will display in a list which ones they picked.

Screen with square, circle, triangle and cross. Square and Cross are highlighted.
Selection screen
Screen displaying list 'You selected the rectangle, you selected the cross.'
Result screen

How it works

Each time you pick a shape, the shape’s State changes from Normal to Selected (or back again if unselected); whenever it’s selected there’s a trigger to run a short piece of Javascript that adds the sentence ‘You picked the …’ to a variable listText. (i.e. it concatenates it.) When you hit Submit, it goes to the second slide which simply displays listText.

 

Top

So how do you concatenate in Javascript?

At its very simplest, it’s just these five lines:

var player = GetPlayer();
var List = player.GetVar("listText");
var NewText= player.GetVar("got1Text");
var Concat = List + NewText + "<br /><br />";
player.SetVar("listText",Concat);

What do we have to set up first ?

Variables in use.

Before we do this there are a few things to set up in Storyline:

  • A variable listText where we’ll put our list
  • Four text variables containing statements like ‘You picked the rectangle.’ ‘You picked the circle.’ Call them ‘got1Text’, ‘got2Text’ and so on
  • A place on the final screen where you display listText – a text box with “%listText%”

Top

Storyline Javascript for beginners

The simplest Javascript functions in Storyline are
1) looking at the current value of a variable
2) setting a variable to a new value

Setting the value is the equivalent of using the ‘Adjust Variable’ trigger in Storyline, but with a lot fewer mouse clicks.

First, however, you have to tell Javascript to look at the player. So your first line is always

var player = GetPlayer();
  • This lets you use ‘player’ to find and set the values of variables in your module.

We’ve previously set up a variable listText in Storyline where we’re going to build our list. We display it on the screen using “%listText%”

var List = player.GetVar("listText");
  • As you can probably guess GetVar means ‘get the variable’.  ‘var List’ gives you a shorthand name List that you can use to refer to it, easier than typing the whole player.GetVar etc .
var NewText= player.GetVar("got1Text");
  • Another GetVar(). This finds out what’s in ‘got1Text’ – in this case ‘You picked the rectangle.’ – and puts it into a new variable NewText
var Concat = List + NewText + "<br /><br />";
  • This creates a new variable Concat, which starts with List, adds NewText to it, and finally adds to the end two line breaks.
player.SetVar("listText",Concat);
  • If GetVar is ‘get the variable’, then SetVar has to be ‘set the variable’, right? This sets the variable you already have in Storyline, listText, to be the same as Concat.

Watch your punctuation!

Every comma, quote mark, colon, semi-colon and bracket matters in Javascript. It will mean the difference between your script working and not working!

What happens behind the scenes

So let’s say I’ve already picked the circle. My variable listText will be ‘You picked the circle.<br /><br />’
Let’s say I now pick the cross. Here’s what I’m telling Storyline to do:

  1. Look at the player (that’s the GetPlayer() bit)
  2. List becomes the value of listText which is currently ‘You picked the circle.<br /><br />’
  3. NewText becomes ‘got4Text’ which was already set up as ‘You picked the cross.’
  4. Concat becomes List plus NewText plus two line breaks. So I’m adding ‘You picked the cross.’ And two line breaks to the end of my list
  5. listText is set to the same as  Concat, so my list now has the sentences for the circle and the cross.

How to set up the question screen

Javascript for the trigger on the triangle.

Attach an Execute Javascript trigger to each shape when it’s selected. Paste the same five lines of code into the Script box for each.

The only thing you have to change for each one is line 3. It’s ‘got1Text’ for the rectangle, ‘got2Text’ for the circle, ‘got3Text’ for the triangle and ‘got4Text’ for the cross. Other than that the code is identical.

How to set up the result screen

Create a text box with ‘%listText%’ to display the value of the variable listText.

You’ll probably find when you run it that the text is tiny and illegible. This is because Storyline doesn’t know how much text is going to be displayed there, but it’ll squeeze it into whatever size of text box you’ve put, and if it only says ‘%listText%’ it’ll be small.

To make sure it displays your list as it should:

  1. Right click the text box
  2. Select Format Shape
  3. Select Text Box
  4. Select ‘Do not autofit’
  5. Then stretch the text box till it’s big enough to accommodate your full list. This may take a bit of trial and error.

How to test it

Javascript doesn’t work in Preview mode. You have to Publish to a local folder (or to a server) and run it from there. Fortunately this is really quick, and you can just replace it each time you publish.

Top

How to apply it in a scenario

OK so now you can ask a question and tell the user what they picked!  That’s useful (not).  But what you might want to do is keep a running tally of someone’s successes in a scenario and report back to them at any point.

Set up your statements, like ‘You checked the customer’s ID correctly.’ ‘You identified the customer’s needs’ or whatever you’re checking on. Each of these will be text variable.

Whenever the user does the right thing, use the five lines of Javascript to add one of these sentences to your list. At the end, or at any point where you want them to see where they’re up to, display the list.

Need to use the Storyline mobile player?

Javascript doesn’t work in the Storyline mobile player.

If the mobile player is part of your deployment, be aware that this method won’t work in it. It does work in HTML5. You could consider the method I outlined in my previous post, long-winded though it is. It should work for you.

Download the file and … over to you!

If you were nervous about using Javascript in your Storyline I hope this makes it easier for you. If you want to build a constantly updated list such as an inventory or list of achievements, this is a great way and until Storyline includes concatenation of text variables, the easiest way.  If you have a simpler way, please let us know in the comments below!

 

Top

 

 

Free elearning scenario template

Just follow Designing Predicaments step by step for a believable, engaging learning scenario.

Powered by ConvertKit

Leave a Comment