Time To Draw! – Random Word Generator (E-Learning Challenge #174)

This week’s elearning challenge was to create a random word generator. I decided to combat that horrible feeling of wanting to draw but feeling uninspired by developing something that would generate odd or funny drawing prompts.

example2

Click here to try it out!

This challenge was perfect timing for me, since I’ve been trying to learn some Javascript basics over the past month. A few weeks ago I was messing around with random numbers, so a random word generator is a great next step!

Most of them make sense (even if they are a bit silly!) but if you get a nonsense phrase, you can click to have another go.

If anyone feels inspired to draw any of these weird creations, do let me know.

Stuff I’ve Learned, Stuff I’m Thinking About.

Timers

I put in a timer function so that you can set yourself a challenge by completing your drawing in either two, ten or thirty minutes. This works, although at the moment there is no indication of how far through your allotted time you are. You just get a message when your time is up. I was planning on creating an animated timer, but I found out that Storyline isn’t fond of animations which last for 30 minutes!

I’m putting finding a workaround for that one on pause for now.

Javascript

Have you reached the point when learning a (regular, non-programming) language where you’re thrilled because you understood a sentence perfectly, but then you realise you don’t have the skills to actually respond yet?

That was my feeling when encountering the Javascript I used in this piece, which was from a guide by Matthew Bibby.

It was great to be able to look at the Javascript and understand what it was doing and how, but I’m not at a point where I could have created it from scratch.

I’m hoping to update this post with other challenge entries which catch my eye, so stay tuned!

Animated Timer Farm Quiz- Elearning Challenge #150

Here’s a quiz with a twist – can you answer the questions before the tractor makes its way across the screen and drops all of its hay bales?

The farm game

Try the demo here.

This piece was inspired by Ridvan Saglam’s creative timers, and I made it in Storyline 2 in response to Elearning Heroes Animated Countdown challenge!

The quiz questions are sourced from Letham Shank Farm, which has a fantastically comprehensive website with a passion for agriculture which is infectious!

Elements Pairs Game (Elearning Challenge #163)

elementsgame2

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.

howto1

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. 

howto2

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.

howto3

Here is the Javascript which I am using for this:

var randomnumber = Math.floor((Math.random()*5)+1);
var player = GetPlayer();
player.SetVar(“randnum”,randomnumber);

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.

howto4

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.

howto5

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.

howto9.jpg

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:

howto6

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:

howto7

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!

howto8

 

 

English Gothic – Interactive Timeline

This slideshow requires JavaScript.

Check it out here!

This example piece was created for an E-Learning Challenge over at E-Learning Heroes.

Learners can scroll through a timeline, exploring buildings on a scrolling backdrop.

Hopefully vaguely factually accurate, although if you’re genuinely interested in getting a much more authoritative quick overview of gothic architecture I suggest getting hold of Rice’s Church Primer!

 

 

 

Photoshop Software Simulation

This slideshow requires JavaScript.

Try it out here!

Here is a short screencast/software demonstration created in Storyline 2, which lets the user learn the steps to creating a black and white image in photoshop before being given the chance to try it out for themselves.

(I’m starting to feel like making an image black and white in photoshop is a little bit like brewing a cup of tea – everyone has their own personal technique, and will vehemently defend their tried and tested method as the One True Way. I beg mercy from any disgruntled graphic designers – this is for demonstration purposes only!)

My Take-Aways from this Project

One niggling little thing: I forgot to tell Storyline NOT to insert a clicking sound effect for the mouse while I was making my screencast. It’s very repetative and I don’t feel it gives any benefit to the user. Well, unless they’re a fan of ASMR.

The biggest question this project has raised for me is whether the Tell Me/Show Me/Try Me model can be used in a more clever way than this. This example has open navigation, allowing the user to skip to any section at any time. That’s great, but in a closed navigation situation, I can imagine some users getting frustrated at being fed the same information three times.

In the Try Me stage, I created a hint system which gives more information each time it is consulted. I’m envisioning an expansion on that idea. What if the user began by trying, with an adapting system increasing showing/telling elements if they became stuck or unsure how to continue?