Have you ever wanted Storyline to display a random word or phrase? I don't mean just randomly popping up and saying "whale" or "can't cut the mustard", but displaying a word or phrase randomly from a list that you prepared earlier.
Maybe you want to quiz people on the definition of some words? Or check if they understand the meaning of a phrase?
Or perhaps you are creating a language-based course and you'd like to randomise the words that they are practising?
In this tutorial, we will look at how to randomly pick a word or phrase from a predefined list.
Before We Begin
As we are doing coding stuff, you'll need a text editor. If you don't already have a preferred text editor, then grab yourself a copy of Sublime Text.
Once you've got that covered, create a new file and save it as
random bit isn't so important, you can actually call the file whatever you want. If only you had a way to randomly generate a file name?
Preparing Your List
Let's jot down the words or phrases that we want to include in our list.
We are going to store these in something called an array, which is a bit like a suitcase full of separate items.
So let's create our array and add a few items:
var words = ['Rock', 'Paper', 'Scissors'];
As you can see above, our array is called
words and it contains the following items:
This same approach could also work with phrases, for example:
var words = ['Rock crushes scissors', 'Paper covers rock', 'Scissors cut paper'];
Note that we need to be careful with special characters. For example, if we try to write
it's a tie, we may run into issues:
it's is meant to be there.
Let's escape the character using a single
\ as shown below:
That'll fix things right up.
Okay, so now our list is ready, let's do some randomising.
Making Things Random
Now, we need to randomly choose from the items in our list.
We will use this line of code to take care of that:
var word = words[Math.floor(Math.random() * words.length)];
Essentially, we are saying:
word? Thanks. Now can you randomly choose an item from our
wordsarray and pop it in there? Thanks, that's real helpful.
It doesn't matter how many words or phrases you have in your array—this one line of code will randomly choose one from the list for you.
Passing the Randomly Chosen Item to Storyline
Now we just need to pass the randomly chosen item to Storyline.
So let's establish communication with the Storyline player:
var player = GetPlayer();
And then take our
word variable and pass it to Storyline:
var words = ['Rock', 'Paper', 'Scissors']; var word = words[Math.floor(Math.random() * words.length)]; var player = GetPlayer(); player.SetVar("RandomWord",word);
Setting Up Storyline
Now that our code is ready, we can jump across to Storyline and set up the necessary bits and pieces to work with this code.
Let's create a new text variable called
RandomWord. This will be used to capture the random word when it is passed to Storyline.
Then we can add a variable reference to display this word. So, create a text box and then go to Insert > Reference:
And then select the
Here's a Demo
Here is a demo of the final project so you can see how it works:
Files You Might Need:
Here is the .story file that was used in this example.
Here is a SCORM package you can use to see how this works in your LMS.
Frequently Asked Questions:
Q. Sometimes when I click the button in the demo the word doesn't change, what's up with that?
A. The words are randomly chosen, sometimes the same word will be chosen multiple times in a row.
Q. Is it really random?
A. No, it just pretends to be. It relies on a pseudo-random number generator, which uses a deterministic method to simulate the random behaviour. But it's not this bad.
Q. I don't know what all that means, can you explain it in more detail?
A. No, it hurts my head. Ask this clever Dr. instead.
Q. Do your kids get sick of your silly rhyming?
A. Yes, then I tell them to quit their shrilly whining.
Q. Can you make a game in Storyline where I can play rock, paper, scissors against the computer?
A. Yes, but I don't know if that is really the best use of my time...
Q. It is.
A. That's not a question.
Q. Why didn't you use that silly font you like so much to display the random word?
A. Because fonts can't be embedded in the published output as noted here. That being said, if you are using SL360, there is a way that you can use fancy fonts with variable references.
Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes, it will.
Q. Will this work in Articulate Mobile Player?
Q. Will this work in an LMS?
A. Yes, it will, I've tested it in SCORM Cloud and it worked perfectly. If you'd like to test it in your LMS, you can grab the SCORM package above and use that for a quick test.
Q. How can I always win rock, paper, scissors?
A. Ask William Poundstone. He knows all the tricks.
Q. Do Articulate support this method?
Q. My question isn't listed here, what should I do?
A. Randomly generate a different one until it is? Or you can leave a comment below or contact me.
If you found this tutorial helpful and think others in your network will also, please share using the share buttons below. Thanks!