Favourite Education Technology Examples – 7/7/17

It’s been a hectic week for me. My company moved into a new office which has a grand total of TWO microwaves, and I have lots more desk real estate. As I’ve been sorting my desk tidy and working out what postcards to display, I’ve also been exploring what’s new in the world of elearning and hunting down some classics.

My Life with a Pre-Existing Condition – Nomi Cani


Terrifying political webtoon which highlights the issues in the US healthcare system through a personal story.

I found the visualisation of how many people in the US population would considered to have a “pre-existing condition,” requiring them to pay a crippling premium for health insurance, particularly impactful.

River Crossing by Maija Perfiljeva


Interactive version of the old river crossing puzzle, where you have to transport three animals (or in this case two animals and a cabbage) to the other side of a river. Leaving predator and prey together alone will result in one of the three being eaten, so you must think carefully.

I love the clean graphics and how a bit of subtle movement makes the scenes seem very animated, however my favourite thing about this course is that it doesn’t over-instruct the user. You are free to experiment and see what’s possible (Can you put more than one animal on the boat? Can you take animals back again? Etc)

Eurostar – By cursim


This environmentally friendly-elearning has a fun graphical style and lots of interesting types of interaction, including a literal carbon footprint… footprint! I appreciated that the transition between elements felt like moving within a single scene, appropriate for a trainline. It’s also nice to see elearning which adjusts to fill the user’s screen rather than being boxed in.

My one critique with cursim in general is a lack of hover states on interactive elements to let users know what can be interacted with. I feel they’re a must for mouse/cursor based learning.

How does my Memory Measure up? BBCiWonder


It’s typical of BBCiWonder’s usual fair (which is always very interesting!), but this particular example stood out to me for the variety of interactive elements. A simple colour scheme combines with interactive diagrams which are fun to explore.

Healthcare Template – Tracy Carroll

This is striking retro template with a healthcare setting. The most prominent feature are the characters, created by using a font. That’s right… a font! Tracy coloured the font characters in PowerPoint.

I was so inspired that I had a go myself. Presenting… Wingding Island!


More again soon…


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!