Interactive Sliders in e-Learning

Click on the image to view the demo

The Concept and the Challenge

As a means of displaying a potentially large amounts of content or media from the one slide, sliders in Articulate Storyline 2 definitely have a place in e-Learning design.  Additionally, with the slider thumb and track being fully customisable, you can have a lot of fun with how the slider ends up looking.

The e-Learning Heroes weekly challenge #52 Using Interactive Sliders in e-learning was to show creative ways to use sliders in online learning.

The Design and the Process

Often inspiration for a project comes from an image, or something I’ve seen that I want to recreate.  For this project, inspiration came initially from this image which I came across when I was looking for inspiration for designing video and media players – I think I was searching for “frames”, or something along those lines.

My design process usually starts with designing the background.  Once I have the background organised, I think about the other elements and how these will fit onto the screen.  Choosing the story size at this stage is important – I’ve learnt from experience – so now I always take the time to think about this early on in the project.  The consequences of trying to change the story size half way through, or at the end of a project, can sometimes be quite detrimental in that you will probably need to resize images and at a minimum text content.

To customise the slider, once you’ve added your slider to the slide, you’ll see a context-sensitive “slider tools” menu.  From the format tab of this menu, drop down the “thumb fill” list of options and choose “Picture”, then navigate to where your picture is saved and select it.  Of course, you can resize the image using the corner sizing handles, and add a shadow effect to it, etc.  This context-sensitive menu is also where you go to change the colour of the slider track – fill, border and effects.

What you can do with sliders is totally up to your imagination – I’ve seen some examples where the slider track isn’t even visible – the difference between this and just using “drag-and-drop” is that a slider controls the path of the slider thumb you’re dragging, plus you have more options to work with triggers and states when you use sliders.

The slider tools design tab is where you adjust the properties of the slider.  For this demo, I set up one slide with 8 layers.  I set 8 steps along the slider, then added a separate trigger for each step to trigger the action of showing the relevant layer “when the slider moves”, with the condition that the slider equals one of the numbers 1-8.  A tip – when adding the number next to the condition of “== Equal to”, you’ll need to type in the number of the step relevant to the slide layer you want to display – by default when you create a new trigger it will only display a “0” value – with no other options in the drop-down list.  I’ve never really understood why this is when you have chosen the number of steps you want included in your slider!

I always add a final trigger to my slider to return the learner to the base layer if they drag the trigger all the way back to the beginning – this trigger looks like this:


I then added each of the different images to the layers.  Initially the white frame image was on the base layer and visible on all layers, but I ended up hiding this image on the base layer and adding this on top of the different unicorn images on each layer as this gave a cleaner result as far as the appearance of the image being placed exactly inside the frame.

In the final layer I’ve embedded a YouTube video – you can find instructions on how to do this in Articulate Storyline 2 here.

The Result

Not too far removed from my original vision, I think the design has worked out to be quite visually engaging.  I like the way it appears that the unicorn is moving across the floor.  I decided to add the instruction for the slider, just in case anyone viewing this demo is not familiar with sliders.

The use of a slider rather than the next/previous buttons adds that extra dimension of interactivity which I think also makes this demo engaging for the learner.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s