Displaying a self adjusting list from variables e.g. for an inventory

Hi. Imagine a scenario where you have to pick up items as you go, for example item 1, item 2, item 3 and item 4.  At the end there's a screen that says, in a list:

You got 

  • item 2
  • item 4

This is what I'm struggling to achieve.  The simplest way is to have four list items and set them to visible or hidden depending on what's been picked up. But in the case above that leaves two gaps:

You got

  •  
  • item 2
  •  
  • item 4

I've experimented with having four 'positions' each with four states so in the above scenario position 1 shows state 2, then position 2 would show state 4.  But having tried to do that I've had to write so many conditional triggers it's getting really unwieldy and I haven't got past position 2 yet!

You got

  • position 1 (4 states)
  • position 2 (4 states)
  • position 3 (4 states)
  • position 4 (4 states)

I can't imagine any other ways that don't involve huge numbers of conditional triggers.  In Javascript I would just have collected the items in an array and populated the list with the array, but I just can't see how to do it in Storyline. 

Has anyone done this sort of thing ?  (I'm on Storyline 2 by the way).

 

 

14 Replies
Ray Cole

Hi Norman,

What I've generally done is list all items in the list but put checkboxes in front of each item. The items that the learner selected have selected checkboxes in front of them. The ones the learner did not select have unselected checkboxes in front of them.

That way, you don't have to figure out how to close up the gaps or worry about complex formatting.

Here's an example from a recent Silica safety course I did. This activity presents the learner with 3 tabs:

Learner is presented with 3 tabs

Clicking the Work Order tab reveals a Facilities work order for a particular job--in this case, a painting job.

Clicking the Site tab reveals a picture of the wall to be painted.

Given that context, the learner then clicks the Tools and PPE tab where he or she can choose the tools and personal protective equipment ("PPE") for performing the job safely:

Choose from list of options.

The learner can select whatever tools or PPE he or she thinks appropriate:

Options chosen

When the learner clicks Submit, the course provides feedback about the learner's choices. So that the learner doesn't forget what those choices are, I recap those choices in a thin column on the left:

Show the learner his or her choices alongside the feedback

This feedback screen is a little busy, but the items with the selected checkboxes are the ones the learner chose. A green checkmark means that choice was correct and a red "x" means that choice was incorrect (independent of whether the item was selected or not--for example, the green checkmark under the sandpaper checkbox means the learner was correct not to chose this item; how to read this screen is explained in the course help before the learners get to this point). In the larger panel, I talk through each item in the list and discuss why it is or is not required, plus any relevant nuances or exception cases that the SMEs thought important, etc.

But the basic idea is to just display the entire list and use checkboxes to indicate the items that the learner actually selected.

Cheers!

    -Ray

Norman Lamont

Thank you Ray for such a detailed answer. That works well for an end-of-course summary, in fact I've used the approach, though not as visually as you.

The difference is that I want to show only the items they've got, without giving away what they haven't got. So for example, at a certain point in a scenario - here's what you know.  Do you know enough to proceed to the next stage? Without showing the facts they haven't discovered.  Another use would be an inventory in a game-style course - you've picked up the compass and the sword. I don't want to reveal that there's also a map and a mobile phone that they could have found. 

Luckily I had a few hours in a cafe this morning waiting for someone, where there was no wifi. So I had my laptop and I just chiselled away at this task. Much to my surprise I succeeded in the end. I'm just putting together some notes and a sample file to post here in case it's useful to others.

So now, instead of 'You have:"

Item 1
(gap)

(gap)

Item 4

It says "You have"

Item 1

Item 4

 

 

Norman Lamont

Thank you Phil - I agree this is much more elegant. I've applied it to my course and it seems to be working except for one weird thing.  Like you I have a variable List on the page and that is what I'm using to display the concatenated list. It concatenates correctly and displays but at a crazy tiny text size. The text box is set to size 12. There's another text box on the page populated by Javascript in the same way as a test, and it displays the word 'after' correctly. The only difference is that it doesn't concatenate. There's nothing else in the text box, just %List%.  The Javascript in the triggers is 

var player = GetPlayer();
var List = player.GetVar("List");
var NewText= player.GetVar("txtStolen");
var Concate = List + NewText + "<br />";
player.SetVar("List",Concate);

Any idea?
Norman Lamont

Sorry - false alarm. I found it was the text box in which I'd put %List%

I had to do two things to fix it:

  • set the Text Box properties to Do Not Autofit
  • drag the Text Box to be big enough to take the whole list.

Lots of trial and error but I got there, and it's a much better solution. Thanks.

Norman Lamont

Just to round this off, I've posted the simplest version of Javascript concatenation here, based on Phil's fruit stall, but stripping it down to basics for beginners.  Hoping it'll give some others who may have been nervous of Javascript some encouragement to try it. 

The demo is here.

The Storyline file is here.

Amy Pearson

Thanks for this, it works perfectly. But what if I want to use this to customise the learners journey? So they select the topics they need to learn about. When they submit their selection they go to a slide which says ‘here are the topics you have chosen to learn more about’ and it displays the %listText%

For me the next stage would be to allow them to click on something to go to the first topic. Before I found this JavaScript solution I had set it up using triggers and variables but this left me with the gaps where something hadn’t been selected so I am hoping not to have to go back to this solution but I can’t see a way of directing the user down a certain path based on their selections when using this JavaScript solution unless you can use JS to set next slide triggers?

Any ideas?