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

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:

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:

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

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:

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

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

Here's the working version  Listmaking  and the Storyline file. I'll do a separate post about how it works. 

I hope this is useful to someone.

Here's a blog post about it Creating a self-adjusting list in Storyline 2

I'm sure someone's going to come forward and show me it can be done in 2 simple moves, but that's learning!

My question is simple: Why not use JavaScript?  Is there a reason you are going for a pure trigger/variable solution?

I would have used JavaScript here is a list i created for a shop demo, the solution is a bit messy but does show how to concatenate a list.

You can see the list building here

http://test.elearninglaboratory.co.uk/Shop/story_html5.html

That's great. Owen, I didn't use Javascript because I haven't studied how you use it to interact with Storyline. I suspected it would be much easier than doing it with triggers, but didn't know how.  Phil's example, which looks great, may be the answer.

Hi Phil.  Do you by any chance have a Storyline 2 version of this? I can't open it in 2.  

They this one https://www.dropbox.com/s/tiqr1hysy6rbka6/Fruit%20Shop%20-%20SL2.story?dl=1

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?

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.

Sorry just got in, glad you got it sorted

Phil

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.

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?