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 list is blank
- The user finds the spade
- Add ‘You found the spade.’ to the variable ‘list’.
- The user finds the map
- Add ‘You found the map’ to ‘list’ after ‘You found the spade.’
- Whenever you want to show the current status just display ‘list’
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.
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.
How it works
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 ?
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%”
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.
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.
- 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!
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:
- Look at the player (that’s the GetPlayer() bit)
- List becomes the value of listText which is currently ‘You picked the circle.<br /><br />’
- NewText becomes ‘got4Text’ which was already set up as ‘You picked the cross.’
- 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
- 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
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:
- Right click the text box
- Select Format Shape
- Select Text Box
- Select ‘Do not autofit’
- 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
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.
Need to use 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!
- Download the Storyline file
- Download Phil Mayor’s excellent Fruit Stall example to see a more sophisticated application
- Elearning Heroes discussion where Phil suggested it
Free elearning scenario template
Just follow Designing Predicaments step by step for a believable, engaging learning scenario.