Building a text list using variables
Jul 05, 2016
Hello all,
I'm looking for some help on building a shopping cart style list with Storyline 2. I have been able to have a trigger of my choosing insert text into a text box using a text variable. So that when I click on object A, Apple appears in the text box, when I click on object B, Orange shows in the text box, etc. I've attached an example of this. However the issue is this will not build a list, instead it replaces the text each time a new object is clicked. So if I clicked Add Apple and then Add Orange I just have Orange in the text box list. I would like to have it show Apple then Orange just below it and so on building a list.
Thanks for any help or suggestions. Mike
18 Replies
Hi Mike. Are you looking for folks to be able to add multiple items to this list? In other words, every time I click on the "Apple" button, I'd add another apple to my list?
Yes i am looking for users to add multiple items, however it will most likely not have the same item twice. So multiple unique items.
Hi Mike. Thanks for clarifying.
I think one way you could accomplish something like this would be to use a hidden state as the initial state of your text objects.
I mocked up my own quick version of this, below, and you'll see that I've set the "Apples" text box to be hidden initially, and on each fruit "button" (the fruit pics) I've added a trigger to change the state of the appropriate text box to "normal" when the relevant fruit image is clicked.

This approach has the effect of populating the list with text, but not in a top to bottom order since the user can click to add fruit in any order but the apples are always at the top of the list, oranges in the middle, kiwi at the bottom—and so on.
Is this somewhat helpful or am I off base?
Thanks for reply Trinia. I have considered the approach you outlined above. Unfortunately the items added are actually steps in my actual e-learning, I used fruit for a simplified example. In my coarse this list is meant to track the order of steps the user has taken, step 1, step 2, step 3. The user is not held to take the steps in any specific order. There are 8 total potential steps. However the user will not be using all 8 to complete every section of the e-learning. The first section only requires 3 of the 8 to complete, but they need to be the correct 3 steps in the correct order. The list is meant to show them what steps they have taken, regardless of whether they are the correct ones. If I were to setup as above I believe there would be a large gap lets say if the user decided to pick the step 1 object and then say the step 8 object. What I would like is the item's to list in order with no gaps, no matter what order the user selects them in. Thus it would truly be a dynamic list. Someone had suggested using JavaScript function to inject a carriage return after each entry. I have not been able to find much information yet as to how to write this script code. However I think it could be a solution.
Hey Mike. This has been an interesting challenge! I've been pretty confident that Storyline variables could get you the behavior you're looking for, but I was struggling to make it work so I brought in a few other folks. The super-talented David Anderson came up with a solution that involves the text variable (as you'd sorted) and the true/false variable to evaluate if each list item was already completed.
Here's the example he pulled together.
And here's a glimpse at what the trigger order looks like:
How's this looking?
Hi Mike sorry I got caught up this does what you want I think
https://www.dropbox.com/s/shhrpmvn817g77d/Fruit%20Shop.story?dl=1
Here is a demo
http://test.elearninglaboratory.co.uk/Shop/story.html
I ended up building it out as a demo with some other features in.
This is so cool, Phil! Thanks for the demo and source file.
Can you add your example to the JavaScript challenge: https://community.articulate.com/articles/using-javascript-and-articulate-storyline I'd like to capture it with the other examples.
I got to say WOW. Thank you so much Trina, David, and Paul on this. I was not expecting this kind of response. Trina/David you solution is ingenious and creative. Paul you went far and above what I was expecting with a full blown demo, very cool. Now my only dilemma I have to decide which method to use. Thanks so much! Mike
Echoing David - wow...just wow! Thanks for the amazing demo, Phil, and for sharing your source file.
No worries Trina, I did say I would pull something together, I just saw an application for it and built that rather than a simple demo, took me longer though.
Hi phil this is awesome!! thanks alot for sharing source and demo ^^
Hey, Phil. Any chance you have a SL2 version of this file? I'm still using SL2 and can't open this file. Says it was created with a newer version of Storyline. Thanks!
Hi Phil, I too am trying to access the source file and cannot open it. I am trying to see how you were able to get the number variables to result in a 2-decimal format. Currency formatting does not seem to be supported by SL, so I would love to know how you did it!
The problem is that string variables in Storyline have only one operator: assignment. So within Storyline proper, you can only ever overwrite one string with another, but not concatenate (add) anything new to the end of an existing string. Storyline really should add at least the "+" operator so we can easily do things like:
Adjust variable List to List + New_List_Item.
Having to use Javascript for this makes it overly complicated. This is a basic string operation that should be supported directly in Storyline. It's been over two years since this issue surfaced here. How hard can it be to implement a string concatenation function in Storyline?
Cheers!
-Ray
Hi Phil,
I know this is an old forum, but I am seriously impressed and would love to use this function, but is there javascript that can also make the list item into a link, that can then jump to another scene or slide?
Thank you in advance for your genius!
Joaquin
Hi Phil,
Great. I know it makes no sense in this app...but would there be a way to enable a user to delete an item in the list and the list reassamble itself to delete the space left by the deleted item?
Chris
Thanks, Phil for sharing this with the community! I used the java concate command to create a dynamic list thanks to this great example! I appreciate it!
Hi Logan,
Could you share your example as well?
This discussion is closed. You can start a new discussion or contact Articulate Support.