Help with javascript to show layers - too much processing using built-in SL360 variables/triggers/layers

Hi Ned,

Thanks so much for your response! Unfortunately my case isn’t as simple as your example.

Depending on choices the learner makes, a different, custom illustration of the character shows on the final slide via layers. So it’s not a matter of each selected item showing vs not showing. It’s a matter of every possible combination of selected items triggering a unique, custom illustration of the character - a separate illustration for each possible combination.

For example, if the learner chooses a hat, the final illustration shows the character in the hat. If they choose a coat, the final illustration shows the character in the coat. If they choose both hat and coat, the final illustration shows the character in both the hat and coat. If they don’t select the hat or coat, the final illustration shows the character without them. Etc. There are about 30 possibilities.

I appreciate your response!

Hi Mary Beth,

No problem. Now all you need is the character as your main image and each individual item of clothing as separate images and simply show or hide them accordingly. If only life were that simple !!  :-)

Hi Mary Beth,

There is another option that might be a bit more streamlined that would use less variables and less complex triggers. It is a little bit different, but could work.

If you allocated a value to each item of clothing using, for example, alternate prime numbers from 13 upwards, you should be able to get a unique value for whatever is selected for purchase.

If you have a hat (13), gloves (19), coat (29), bag (37) and boots (43) your options would be:

hat (13)
hat and gloves (32)
hat, gloves and coat (61)
hat, gloves, coat and bag (98)
hat, gloves, coat, bag and boots (141)

gloves (19)
gloves and coat (48)
gloves, coat and bag (85)
gloves, coat, bag and boots (128)

coat (29)
coat and bag (66)
coat, bag and boots (109)

bag (37)
bag and boots (80)

boots (43)

You now only need one variable that you increment by the appropriate amount depending on what is selected and when you jump the user to the next slide, simple triggers show the appropriate image depending on the value of the variable. 

I'm not sure if there is a limit on the number of states that can be created for an image, but if there isn't or if that number is greater than the number of options you have, you could simply use different states of your character instead of using 30 different layers.

I have only tried it with five items and, with the extra items you have, you do run the risk that you get to the last option and discover that you no longer have a unique number, but I just thought I would suggest it just in case it could be of some help.

If Ned's ideas seem too simple, attach your .story file here, and I'll bet someone can make it work.

Hi Mary,

The JS you are requesting should be fairly straight forward to create and its something ive done in the past because as you say, its alot quicker and easier to update/adapt than having a huge amount of ASL triggers.

If you are still needing it Im happy to try to help.

Is your outcome always a basic, single result - or are you looking for something flexible? ie.  a randomised pick/result based on your Learner's true/false variables?

Hi Andrew,

Thanks so much for your response! I am still needing help and I'd really appreciate anything you can offer!

The outcome is a single result (e.g. an image with the character wearing what was chosen during shopping) based on the true/false variables. There is one specific illustration for each possibility. So for example if the learner chose a hat, boots, and a shirt during the game, the variables for those items would change to true (they drag the item onto the character which triggers the variable to change from false to true) and then in the final slide, the layer would show with the specific illustration of the character wearing the hat, boots, and shirt. If they only chose a hat, the illustration of the character in a hat would show (via layer).

I've attached an attempt I made with javascript to see if I could get some of the layers to show. It didn't work! With this javascript, the idea was to see which of the conditions was true, and then to change the layer variable to "yes". Then in the story file, I have triggers to show the specific layer if the layer variable is "yes". If I display a variable on the screen to test (e.g. %kikiBootsLyr%) I can see that the javascript I wrote isn't changing the variable. I really don't know javascript so there could be something simple I'm doing incorrectly!

Thanks for any help you can provide! Much appreciated.

Hi Ned,

This is a very creative idea! I will consider this if I can't get any javascript working. I checked and it appears you can add an unlimited number of states to an object, so this could work out nicely.

Thank you!

Hi Mary, Im happy to help if I can!

At this point in time, I dont think Storyline allows layers to be shown/hidden via any javascript commands directly, so we need to get a little creative.  :)

The Input:

console.log("JS DEBUG --- starting javascript...");

var _player = GetPlayer();
var _itemList = "";
var _var1 = _player.GetVar('var1');
var _var2 = _player.GetVar('var2');
var _var3 = _player.GetVar('var3');
var _var4 = _player.GetVar('var4');
var _var5 = _player.GetVar('var5');

if( _var1 == true ) _itemList += "Hat";
if( _var2 == true ) _itemList += "Boots";
if( _var3 == true ) _itemList += "Scarf";
if( _var4 == true ) _itemList += "Gloves";
if( _var5 == true ) _itemList += "Coat";

if( _itemList == "" ) _itemList = "nothing";

console.log("_itemList:"+_itemList);

_player.SetVar("finalItemList",_itemList);

console.log("JS DEBUG --- ending javascript.");

Depending on when and how you want your final results slide to display, I would suggest that you should place this javascript on a trigger for "When Timeline Starts..." or even on a separate layer which you can then "show" at any point you need to. In certain circumstances, this gives a little better adaptibility than "when timeline starts" triggers.

NOTE - you will need to change the 'var1', 'var2', etc to whatever your custom variables are called for each item of clothing. I have just gone with the classic var1 (never a good idea! - always better to call your variables something related to their actual use)

So if your boolean variable inside Storyline was called "hatChosen", then you would change line #5 of my code to:

var _var1 = _player.GetVar('hatChosen');

and so on with the other variable names.

The Output:

So, this simple javascript just returns a string. This string will be made of the names of each item of clothing chosen.

eg.

"hatgloves"

"hatglovescoatboots"

"glovescoat"

"scarfbootscoat" etc etc

From that string, you should be able to create a separate trigger to show whichever layer is required. Again, for ease of updating and adaptability, I would always put this on its own layer called "GetItemList" and then "show" this layer whenever its required.

Im sorry that we are unable to get javascript to do everything including showing the correct layer - that would of course be much simpler and more efficient, but at least this way all those reams and reams of "if" triggers in Storyline are removed, and you are left with a relatively small, and very easy to update, single trigger for each of your results layers.

Let me know if I can help in any other way, or if Ive blundered above and missed out an important part!

Top Tip -  always have the "console" open in your browser (usually found under the Developer Tools menu or similar) when checking your javascript. That's why I always include the lines

console.log...

because it gives us a clear indication of when our JS actually runs, as well as enabling us to quickly output and view variables within our code.

Andrew - thank you! I am working with this today. I will let you know how it goes! I really appreciate you!

You are more than welcome. If you run into any probs, just let me know. Im sure we can work it out together :)

Hi guys, 

I know you have been discussing this for awhile, and I just saw it, but I think this might help.

You can use Javascript to decide when a layer is shown or to change a state. The key to making this work is to use set a variable, and then use When variable changes in your trigger.

Dave

Hi Dave.

Thats very true, thanks for sharing. I hadn’t factored that in before so it’s great to know that.

However in this particular example, I think it wouldn’t reduce the trigger count because Mary will still require a “show layer A if answer A” scenario. 

I wonder if there is another refinement which would go this last step for her? I can’t think of it!

It would help to see the illustrations as potentially this could just be a series of states and remove the layers completely.

Sent from my iPhone

Hi Andrew and Phil,

I'm not finished working with Andrew's javascript for all of the images, but in testing with 6 illustrations, it's working BEAUTIFULLY!

Andrew, if you have a paypal I'd be happy to drop you a big tip for providing this solution!

Phil - this could be also done with states, as Ned was offering above. I'm going to finish with Andrew's solution, using the layers I've already created, and if that works well in terms of processing time, I plan to go with it in the sake of saving development time. Do you have a sense that triggering states instead of triggering layers would be more efficient in terms of processing? The same number of triggers would be needed. Instead of 26 layers, I would need 26 states. I'm not able to share the illustrations publicly, but they are each custom for each of the conditions.

How many triggers did you have? I wouldn’t have thought it was a processing issue more a loading issue. I once had a slide with 8000 triggers that was instantaneous. It could be loading the illustrations.

That said using JavaScript is much better for this.

Sent from my iPhone

@Mary - that’s awesome! Really good job and well done on getting it up and running. I’m delighted! (And no paypal required at all - but thank you very much for your kind offer, it’s very much appreciated)

@Phil - very good point about the states I hadn’t considered that option. However, I find States within Storyline much more cumbersome to work with than Layers.

So I’m curious if there is something you know that I don’t! :D

Even if Mary used States as opposed to Layers, wouldn’t that still require a long list of triggers to manage the States to display correctly?

This is a very good lead. It has 26 triggers. I can't imagine creating a slide with 8000 triggers - that is incredibly impressive! The images are about 165K each so it does add up. Seems like the images would all need to load whether I use layers or states, no?

I always find states to have less of an overhead than layers, but for illustrations you need a little more work to ensure they are the same size and do not move. Best of this is done on export in illustrator. But if they are all the same size you could create all the states in one go using the import function.

I would still use the JavaScript to control especially with 20+ variations, I just find it odd it is taking long to load.

States at the moment feel a bit laggy in the editor, I hope this will improve.

Sent from my iPhone

Your images may be the problem rather than the triggers

I think I was much more patient when I was younger, cannot imagine I would ever do 8000 triggers again.

Sent from my iPhone

Re: loading speed

Storyline loads all assets of a slide (layers, states, etc) when that slide initially displays. Therefore I guess you are asking for quite a bit to load before your Results slide can run.

Might it be better to have each of your results illustrations on a separate SLIDE instead, and then just “jump to slide” rather than “show layer”?

That way you are only ever loading one image at a time.

I think that would work well or perhaps use a transparent web object to display the illustration

Sent from my iPhone

Lol. I hear that!!

When I look back at how I cobbled together some early Storyline projects... :D  #ducttape

Andrew - I think you're right. I will consider changing this, although this is going to make my story view unviewable. I actually have three different games in one, and the learner clicks to go through each. So, three sets of characters, each in it's own scene, with this need for 26 different conditions each scene. But that's okay - I'm glad to have this in the pocket to test if needed. And it will be interesting to see what the story view looks like in the end lol.