Matthew Bibby
Matthew Bibby

Generating Random Words or Phrases in Storyline

In this tutorial, we will look at how to show a randomly chosen word or phrase from a predefined list.

Matthew BibbyMatthew Bibby

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

We are going to start by writing a little bit of JavaScript and then we will set up our Storyline course to work with this.

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.js. The .js bit is important as that will tell Sublime Text that your file is a JavaScript file.

The 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:

  • Rock
  • Paper
  • Scissors

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:

JavaScript code example showing prematurely closed string

Look at the last item in the array above. You'll notice that the JavaScript gets confused because it doesn't realise that the apostrophe in the word it's is meant to be there.

Silly JavaScript.

Let's escape the character using a single \ as shown below:

JavaScript code example showing escaped character

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:

Hey JavaScript! Can you please create a new variable called word? Thanks. Now can you randomly choose an item from our words array 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:

player.SetVar("RandomWord",word);

So, our complete JavaScript looks like this:

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.

Create new variable

Then we can add a variable reference to display this word. So, create a text box and then go to Insert > Reference:

Insert reference

And then select the RandomWord variable:

Finally, we need a button that'll execute our JavaScript.

So let's add a button and then add a new Execute JavaScript trigger that'll fire when the user clicks the button:

Then we can click on the ... and add the JavaScript that we wrote earlier:

And that's it! You now know how to get Storyline to randomly pick a word or phrase from a list.

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?
A. No, it won't. Articulate Mobile Player and JavaScript don't like each other much.

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?
A. No, they are not able to offer assistance with JavaScript stuff. So if you run into issues when using this approach, their support team won't be able to assist. However, I may be able to help, so reach out if you're stuck.

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!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments