Creating Contents Menus in Storyline

Sometimes you want users to be able to jump to a particular section of your course, rather than complete the whole thing linearly in one sitting.  There are various ways of doing that. Here are a few suggestions.

Option 1 – Storyline Default

The easiest way is to use Storyline’s default player which allows you to click through to part of a course at any point from a menu on the left hand side. This doesn’t require any extra work – just create the course using scenes and slides. You can customise the colours in the player options.

If you’d rather have more control or you don’t want to take up valuable space with the sidebar menu, you might consider…

Option 2: Lightbox

You could create a visual menu which appears in a lightbox (so overlain over each slide). To do this, create a slide  with visually interesting buttons linking to each of the available sections. You can use images or icons which represent the different topics.

Here’s a quick and simple example of what I mean:

Then, create a MENU button which you can put on each slide. If you want to save time, you could put the menu button on the Slide Master which will put it onto all your slides for you.

Add a trigger to the menu button to lightbox your menu slide. Now your user can access the menu from any slide to jump around your course!

Note: You could also do this without a a lightbox, just use “jump to” instead in your trigger.

Option 3 – Sidebar menu

Option 2 is to create a bar menu, similar to the default storyline one, but which only appears when you click your menu button.

So, first step, create that menu button! Again, I suggest making it on the slide master. It will save you a lot of hassle later.

Create a layer on your slide master too with links to all of your sections, like this.

I like to use fly in animations to make this menu pop out from the side of the screen.

Then, add a trigger to your menu button to show your menu layer when it is clicked. Because you’ve created it on the slide master, the menu should be available on all your slides! Don’t forget a return button to hide the layer again.

Final tips- 

What if you want the user to choose the order they learn in, but you don’t want them to access an assessment or difficult topic unless they have completed other prerequisite sections? If you are comfortable using variables, you can disable certain parts of the course until the user is ready to visit them.

To do this, put a disabled  state on the buttons which link to your sections. Set them as disabled by default.

You can then use variables to make those sections become available later on in the course. For example at the end of Section 1, you can create a “Section1Complete” variable and set it to true. Then you can put a trigger on your menu that if Section1Complete = true, then make the state normal, not disabled. This helps you to make aspects of your course more linear if you need to.

You can use a similar tactic to mark sections as complete too, so the users knows where they have already been. Just create a completed state on your menu buttons and place “SectionComplete” triggers which track progress throughout your course.

Hope this is useful!

 

Random Number Generator

A little blast from the past. Before the random fortune teller and the random word generator, I started out pairing together Storyline and Javascript with this simple random number generator. It creates a whole integer between 1 and 10.

randnum

Click here to view

How to do this:

  1. Create a variable in storyline called “randnum”
  2. Add a trigger to execute Javascript when the generate button is clicked. Enter in this Javascript:

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

3. Add in a reference to the storyline variable (%randnum%) where the random number will be displayed.

Easy peasy!