Learn. Show. Repeat.

Category: Storyline

How I created a Custom Quiz-style Interaction in Storyline 2
Recently a friend of mine contacted me as he had an idea for an interaction he wanted to create in Storyline 2 and needed some help with building it.

He wanted the interaction to work like this:
- A question with five answer options.
- Two of the five answers were correct.
- Only a maximum of two answers could be selected.
He also wanted a ‘submit’ button and once clicked, then he wanted:
- Feedback for each answer to be shown.
- An indication of which two answers were correct.
- To still see which two answers were originally selected.
With a bit of experimentation and a few prototypes I was able to create something that met his needs and this post is about how I got there.

Originally I thought about using a freeform question slide but as I didn’t need to worry about scoring so I went with a regular slide.

I started by inserting a place for the question and the five answer options on a slide and I also created a ‘selected’ state for each answer option. Next I created a submit button and set the initial state to hidden – my idea was to change it to normal when two answers are picked (or become selected). I’d also need to make the other three un-selected answers become inactive once the second answer had been chosen. I abandoned this idea when I realised all the triggers I’d need to make it work.

My next idea was to create a layer and place the submit button on this own layer. The reason I did this was because I remembered that in the layer properties there’s a setting where you can prevent the use from clicking on the base layer (click in the box to turn on the setting):

Using this setting would take away the need to come up with triggers for making the un-selected answers not work as once this layer is showing nothing on the base could be clicked on. But I did need to figure out triggers to make this layer show – which was after the second answer was selected – based around the state of my answer options. So with 5 answer options there’s the following 10 selection combinations:

1 and 2, 1 and 3, 1 and 4, 1 and 5, 2 and 3, 2 and 4, 2 and 5, 3 and 4, 3 and 5, 4 and 5.

So my 10 triggers to show the layer with the submit button on it (based on the state of the answers) were variations of this:

Note: In this trigger, the order the answers are chosen doesn’t matter so choosing answer 1 then answer 2 is the same as choosing answer 2 and then answer 1.

Once the layer with the submit button is showing, users are not able to click on the base layer and select any other answers (in hindsight, the way interaction is set-up means that you can’t change your answers once you’ve picked two). The trigger on the submit button is to show another layer that contains the feedback, which answers are correct/incorrect and it still shows the selected answers on the base. I positioned the answers on this layer showing which are correct/incorrect directly over the answer options on the base which means the selected state showing.

As this is a prototype I haven’t focused on the slide design, it was more about seeing if I could achieve the functionality he wanted. Click on the image below to see a demo and if you’d like to download the .story file click here.

Like this:
Like Loading…
September 19, 2016
Sliding Along with the Force

A few weeks ago I was delivering a Storyline 2 session in Brisbane and we were looking at the slider interaction and how you can use a slider to change the state of an object and also use it to show layers. In the change of state example we were looking at, you slide the thumb along the track and the colour of an image changes. One of the participants asked if it were possible to change the colour of the thumb to match the colour of the image and my response was “I’m not sure, I haven’t tried that before but let’s check it out and see if it can be done”.

So, I clicked on the slider and went to the states area and I was pleasantly surprised to see that sliders have ‘states’. As it turns out, you can add new slider states and then format the slider for your new states (in our class example, I could change the thumb colour to match the image colour). Cool! I was also happy that person asked this question or I may never have known about slider states!

Flashback to late 2015, and David Anderson created an ELH Challenge to coincide with the release of the new Star Wars movie, The Force Awakens. E-Learning Heroes Challenge #110 – Awaken Your E-Learning Force. The brief was to build a Star Wars-themed interaction, this week your challenge is.

Sometimes ideas for challenge demos come to me quickly but sometimes I need to percolate ideas in my subconscious for a while and this was one of those challenges. I did have some illustrated Star Wars characters that I wanted to use for the demo and an idea of a trivia type interaction, just no solid idea for bringing them together in a different way.

Jumping back to the present and after I discovered that sliders have states, I thought that’s it! I could create a slider state for each character (six in total) and I could also have a question for each character to correspond with the change in image.

So this is what I did:

I inserted a slider and in the Thumb Fill area, filled it with a picture of my first character. I had to play around with the sizing of the thumb so that it wasn’t too small. For the track, I chose no fill and no outline which made it transparent. Then I created a new state for each character and named each state to correspond with the character:

The thumb picture changes using a change of state trigger (one for each character):

Each of the questions is built on a layer:

I used shapes for my questions and feedback with 40% transparency and shapes for my answers choices too. As there was only one correct answer, I grouped the choices in a button set which only allows one answer to be selected at a time. The correct/incorrect feedback boxes are on this layer too and they both start as ‘hidden’ and change state to normal depending on which answer is chosen. This is what it looks like for the Stormtrooper layer:

To save some time, once I had the first layer working the way I wanted, I duplicated it and then changed the information and adjusted the triggers. A show layer trigger based on the slider position makes each layer show. So as you slide the thumb along, the picture changes to a different character and a question for that character is also shown along with some feedback (and where possible, I used a quote from that character from one of the movies).

You can try the demo yourself by clicking on the image below:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

March 7, 2016
Looking Closer at Images

E-Learning Heroes Challenge #114 – Interactive Video: Zooming and Magnifying Images in E-Learning. The brief: This week, your challenge is to share a solution to allow learners to zoom in or magnify parts of an image, graphic, document, or video.

This was one of those challenges that I wanted to have a go at because even though Storyline has built-in zooming (which is pretty cool) to make parts of an image larger or to get a close up of a section of a scene, I wanted to try to create a way of making parts of an image larger without using the zoom feature. I had this coffee machine image that I’d used for something else and I thought I could use it again this time to explore the different parts.

I kind of flipped the challenge idea on it’s head because rather than zoom in to look more closely at the parts, why not have the parts become larger so they can be seen along with a description. Because it’s a demo, I didn’t build out the interaction completely but just made a couple of the parts clickable – the control panel and the handle where the coffee goes.

Initially I tried to build all of the interactivity on the slide (base layer) but I ended up needing to use a couple of layers. I created my first layer for the control panel and copied my image and pasted it onto the layer (when you do this, the image is pasted in exactly the same position as it is on the base layer). Then, while still on the layer, I cropped the image so that only the panel section was visible. Next I added a motion path to the cropped image to make it move away from the complete image.

I decided to use a change of state to make the cropped image appear larger, so I created a new state for the control panel:

The great thing about motion paths is that you can add triggers to make other things happen once an object reaches the end of its motion path. In this demo, the image of the panel changes to the large state, the text box description changes state (from hidden to normal) and the whole coffee machine image also changes to a washout state – I added that later – when the motion path animation completes. I repeated this process on the second layer (the coffee handle).

It was a bit of trial and error to get the large versions of the cropped images to appear in the right place but it didn’t take too long to get it right. I also added a trigger to hide each of the layers when the timeline ends. This worked ok for the purpose of the demo but I’d probably add an object for someone to click on to hide the layer if I was going to use this in a project.

Then back on the base layer, I inserted two freeform hotspots that give the user something to click on to show their respective layers:

Interesting fact: Hotspots are 53% transparent!

That’s it, an interaction that makes part of an image larger without using the built in zoom. You can try the demo yourself by clicking on the image below:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.

Like this:
Like Loading…

January 26, 2016
Looking Back at 2015

Well another year has just about come and gone and at this time of year like many folks who write blogs I like to look back and reflect on the posts I’ve written. Blog writing is a personal thing and everyone has their own style and approach which makes the diversity between writers and topics both interesting and thought-provoking. If I had to sum up where I’m at with my blogging and the style of posts I write in one word, it would be Practicality.

I read a lot of posts and tweets that are critical of eLearning modules (some for good reasons) and I often tell people that an eLearning module is a learning solution it’s not always the learning solution. But it does have a purpose, so instead of constantly bagging it out, my approach is: Why don’t we do something about improving the standard of eLearning?

So that’s why I like to share posts that explain how to do something and allow the reader to take something away and maybe use in their own course development. Sure, at the moment there’s a focus on using the tool which is important but I intend to expand this next year because eLearning is much more than knowing how to use an authoring tool.

I’m learning stuff all the time so why not share the knowledge and put it back into the community so here’s my posts from the year that was, grouped by topic area. Click on a title to view the post.

Storyline 2

These posts are about things I’ve learned about or discovered in Storyline 2:

More than One Way with Storyline 2 – How I updated a slider-based interaction to a button and number variable interaction.

Template Facelift – How I redesigned my ‘Meet the Team’ interaction.

Spinning Around with Storyline 2 – How I created a carousel-style interaction using a slider and layers.

3 Things I’ve Just Discovered in Storyline 2 – I’d just started a new job and my colleagues made me aware of these three handy features.

E-Learning Heroes Challenges

These posts take a behind-the-scenes look at how I created some of my challenge demos. I used to call them ‘Showing My Work #x’ but I didn’t think it was helpful to the reader plus it sounded a bit wanky so I started to give them a catchy name:

Pushing My Buttons – ELH Challenge #89: Creative Button Styles.

100 Not Out – Celebrating 100 ELH Challenges.

Bingo Time! – ELH Challenge #98: E-Learning Bingo Games.

Making Videos Interactive – ELH Challenge #94: Interactive Video.

Showing My Work #11 – ELH Challenge #18: Using Characters in E-Learning.

Showing My Work #10 – ELH Challenge #52: Using Interactive Sliders in E-Learning.

Showing My Work #9 – ELH Challenge #71: Teaching Math Concepts with E-Learning.

Theoretical

These posts delve into the area of information processing and cognitive load which are important areas to know about when creating eLearning:

Designing Effective Multimedia Lessons for Learning – a university essay I wrote about the Cognitive Theory of Multimedia Learning and research-based principles that will improve eLearning design.

The Human Memory System – a university essay I wrote about human cognitive architecture.

Reflective

Sometimes I just reflected and put down my thoughts and ideas. I’d like to do more of this next year:

Half-baked Ideas – a few random thoughts that may become posts of their own in the future.

Looking Behind the Façade – my thoughts on showing your work and working out loud.

Evolution – about how my career has changed for the better.

Practice and Sharing: The Keys to Success – an older post with my two takeaways from LearnX.

Flipped Networking – about how it’s becoming more common meet people online via social media before in person at a conference.

Thanks to everyone who has read or commented or liked or shared something from this site, I really appreciate it. I’d like to wish you all the best for the festive season and for the new year ahead.

Who knows what 2016 will hold…

Like this:
Like Loading…

December 13, 2015
More than One Way with Storyline 2

Sometimes I like to experiment with ideas for eLearning interactions and a few months ago one of these experiments led me to creating this carousel-style interaction (you can click the image to see a demo):

I wrote about it here but essentially it uses a slider to show layers with each image in a different position. I also posted the demo to an E-Learning Heroes Community forum and someone asked if the same effect could be created using buttons instead. The short answer is yes and here’s how I did it.

I started by making a duplicate of the current slider-based interaction as the layers and positions of the images are set up correctly. I deleted the slider and created a couple of buttons (one for left and one for right) using a square shape and an arrow image that I had on file.

Then I needed to figure out a way to make the layers show (creating the spin effect) depending on which arrow was being clicked. I wanted to make the images spin in the same direction as the arrow that was being clicked.

The solution I came up with was to use a number variable. Variables are great because they ‘remember’ information and the same variable can be used many times anywhere in your project. You can then use this information to make things happen. The slider interaction uses a number variable but it’s created when you insert the slider. For this interaction, I created my own number variable.

First, I added my variable via the ‘Manage project variables’ area…

…and called it ‘Count’.

Then I added two triggers (one for each button) the add 1 to Count if you click the right arrow or subtract 1 from Count if you click the left arrow.

Then I needed to do something with the Count information – instead of the layers showing when the slider was in a particular position, they’d now show when the variable Count had a certain value.

Remember, clicking the buttons changed the value and so a different layer would be shown each time.

Because you can’t keep spinning the images around and around, I added some change of state triggers on the arrow buttons that change their state when you go as far as you can in either direction. As a bonus, I also found that by using the buttons instead of the slider, it freed up some space in the middle of the slide that allowed me to add a small amount of text (if required).

Often there’s more than one way of building something in Storyline 2 and this is another example of this as well as the power that variables can bring to your project.

To view the updated interaction click the image below:

You can access the .story file from the Downloads page of this website.

Like this:
Like Loading…

December 6, 2015