Articulate Storyline encourages you to be an escape artist. Some of the more complicated projects may seem like you’re in the jungle of variables, triggers and conditions. The following trick may help you escape the jungle (somewhat) faster than normal.

Before we get into the how, I suggest you play the Escape Game first. This is not really a game but more like a gameful example of using some magic behind the scenes. Watch how the “codes” behave. I can’t tell you more about it. You need to figure it out to escape.

[thrive_megabutton mt=”ESCAPE GAME” st=”Watch the Mechanics” color=”blue” link=”https://www.rabbitoreg.com/games/escape/story.html” target=”_blank” align=”aligncenter”]

The Business Problem

Let’s assume you have buttons on the screen the user can toggle. You want the user to toggle AT LEAST two of them on. You don’t care which ones. This is a simplified version of the game above. In the escape game, you had multiple states of a button (showing different icons). In this business problem, you have only two states: on and off. Once the user toggled at least two of them on, they can move on. You will need to retain those selected buttons later on, maybe doing some branching or conditional content.

Storyline can do this for you without any JavaScript help. It will take many triggers and variables to build out. (You need variables to store the state of the buttons because you want to access their value later. Otherwise, you could just base your triggers on the button states.) Imagine you have ten of these buttons. Lots of triggers to handle.

The Pseudo Array Framework

Here comes this framework that handles your problem a different way. Imagine that you could store values (0,1) in one text variable, separated by a character like “|”. So, Switches variable could have the value of “1|1|0|1|” where each number represents an on or off state.

Then you could issue commands like: flipItem(“Switches”,0);

This would toggle the first item (geeks start counting from zero): Switches would be now “0|1|0|1|”

(For those who know programming languages: imagine a simplified array. Why not an external JavaScript array? Because those variables won’t get saved with the Storyline ones when the course is suspended.)

You could get the total number of 1s by issuing: countAllItems(“Switches”,”TotalOn”);

This would count how many non zeros you have in the Switches (“0|1|0|1|”) text variable AND set the variable TotalOn to that number. In this case, TotalOn would be 2.

Since you store all values in one variable (Switches), you can use the change on this variable as a trigger. That means any time someone toggles a button (it doesn’t matter which one), your trigger fires. Moreover, let’s say this is a True/False type of puzzle. On means True, off means False. You ask four questions and the user toggles the buttons according to the answers (let’s say true, true, true, false). You can check the answer with one condition using the Switches variable and compare it to the “1|1|1|0|” value.

[thrive_megabutton mt=”Minimalist Example” st=”Switches” color=”blue” link=”https://www.rabbitoreg.com/games/select/story.html” target=”_blank” align=”aligncenter”]

Download the source package to play around. This is version 1.0, except bugs.

[thrive_megabutton mt=”Download Source” st=”(Storyline 360)” color=”blue” link=”https://www.rabbitoreg.com/games/select/theselect.zip” target=”_blank” align=”aligncenter”]

3 Replies to “JavaScript: Escape the Jungle”

  1. Masoud says:

    Hi, how can I write a javascript code that creates random numbers from one to ten so that by clicking on a button, this JavaScript command does not repeat the code that it generates, for example, if the first three clicks were shown, the next three clicks would not be displayed. .Thanks

    • The solution depends on what your needs are. If you really want a random number between 1 and 10 (any number, as in 1.2345), then the problem is different from picking a random number between 1,2,3,4,5,6,7,8,9,10. Assuming you want the latter, a more efficient way to accomplish that is creating an array with the numbers: 1,2,3,4,5,6,7,8,9, and 10. And then shuffle the array once. Then you just read the array one by one. This way, you get a random order. Here’s a link how to do it: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array

      The reason why this is better because you could actually pick a random number 1 -10 and store it to remember, but as you’re using up the available numbers left, it would take longer and longer to randomly find one that you have not used yet.

Leave a Reply

Your email address will not be published. Required fields are marked *