Elements Pairs Game (Elearning Challenge #163)


This is a matching pairs game, created for Articulate’s brainteazer challenge! Can you match up atomic elements with their symbols?

I think this game really needs a few more levels with increasing complexity to be a real challenge. I might expand it when I have time.

If you’re wondering what the Modern Major General song has to do with the periodic table, then I can only assume you haven’t been aquainted with the wonderful Tom Lehrer yet! Enjoy!



Why Random Numbers are Exciting

I ran into a Storyline-related conundrum this week.

I was creating a scenario based around workplace stress. Learners would be given a stress-o-meter and told to navigate through a day’s work, keeping their stress levels down but also ensuring that they followed best practie and had a productive day.

I wanted the game to be replayable and for different stressful events to occur randomly, but I couldn’t figure out a way to do this easily in Storyline.

Enter, Javascript.

Ah, Javascript, my hero.

My solution was to add in some Javascript to generate a random number which Storyline then used to dictate which screen to access next. To test this mechanism, I created a fortune teller game (in magic 8-ball style!).

You can try it out and engage the services of Magical Maggie by clicking here!
Note – Some Firefox users have had problems running this.

How to create your own fortune teller game (or with a little adaptation, any random element in Storyline!)

1 – Set up your first slide

On your first slide, create a text box for the user to write in their question and a submit button. I’m keeping things plain and simple for this example, but as you’ll see from my Magical Maggie version, you can get as complex as you like!

I always suggest dipping into the timeline and renaming everything so that you can tell at a glance what it is.


2 – Create a variable in storyline.

I’ve created a new variable in storyline. I’ve called it randnum, since it is going to house our random number.  I’ve made it a number variable, and given it no value. Giving it a value is going to be what the Javascript is for!

Note that you should already have one variable called TextEntry, which Storyline has made automatically for you. It holds whatever text is typed into the text entry box. 


3 – Create a Trigger to Execute Javascript

Next, I create a trigger on the slide to run as soon as the slide starts. This trigger is going to run our Javascript. Click on the ‘…’ to open up a box that you can type your Javascript into.


Here is the Javascript which I am using for this:

var randomnumber = Math.floor((Math.random()*5)+1);
var player = GetPlayer();

If you’re not familiar with Javascript, dont worry. You can just copy and paste it in. But here’s my explanation of what’s going on here, as someone who only just beginning to learn Javascript.

var randomnumber = is telling Javascript to create a new variable. Not a storyline variable like our “randnum” variable. This is a Javascript variable.

Math.floor((Math.random()*5)+1); – is generating a random whole number between 1 and 5. By default Javascript likes to create random non-integers between 0 and 1 with the Math.random command, so Math.floor tells it to round to the nearest whole. If you want to create a number between 1 and 10 (or any other number!) just change the 5 to the maximum value you want.

var player = GetPlayer(); is syncing up Storyline and Javascript. I fully admit to not knowing the ins and outs of the GetPlayer function, I just know it works!

player.SetVar(“randnum”,randomnumber); – this is setting the storyline variable we created earlier, “randnum,” to be equal to the Javascript value we just created, called randomnumber.

4 – Test it out.


We’re going to check that we’re definitely generating a random number within Storyline. To do this, create a new text box on your slide and type in %randnum%

Storyline knows that if you write the name of a variable inside two percentage signs, it has to display the value of that variable when the course runs. If you don’t want to type this in yourself (or can’t remember the name of a variable) you can also click on Reference under the Insert menu, click on the variable you want and click ok. The results are the same.

Normally in storyline you can click “preview” and test out if everything is working. Unfortunately Javascript doesn’t work in previews, so you will have to select File/Publish and then run the published file. I suggest publishing for web, then running the HTML 5.

Hopefully where you wrote %randnum%, you now see a number! Run the file several times to see a different number pop up.


5 – Create your options.

You can now delete your %randnum% text box – it has done its job by showing us that the Javascript is working.

Now let’s give our fortune teller a voice! Create five slides. These will be our options for the fortune teller game. On each one, write a responce for the fortune teller. I’ve gone for “Yes!” “I think so,” “I’m not sure” “I don’t think so” and “Definitely not!” I’ve also added in a button to return you back to the initial screen.


6 – Let’s link everything together!

Now the only thing left to do is to go back to the Submit button on the first slide and link everything together.

We’re going to add five triggers to this slide, telling it that if the random number is 1, go to option 1. If the random number is 2, go to option 2, etc.

To do this, open the Trigger Wizard (we used it in Step 3), fill in the form so that you will jump to the first option slide when the submit button is clicked. Then, click Show Conditions, and  the + sign. Fill out this form so that the trigger will only work if the variable ‘randnum’ is equal to the value of one.

Confused? Hopefully not, but if you are don’t worry. Just copy this example:


You will have to make four more triggers like this, for each of the four other option slides. They should look like this when you are finished:


7 Give it a whirl!

Again, you’ll have to publish the file to try it out. Hopefully now when you type a question into the box and hit submit, you’ll be taken to one of the five options.

Thanks for reading, I hope this was helpful!