Learn. Show. Repeat.

Tag: triggers

4 Ideas for Combining Text and Images in eLearning

E-Learning Heroes Challenge #152 – Combining Text and Images in E-Learning. The brief: This week, your challenge is to share an example to demonstrate how text and images can be used in e-learning.

For this challenge I shared four simple ideas that were all created within Storyline. Click the image below to see what I shared for the challenge:

Slide 1: Text coming out of the image

For the title page, I wanted the text to look like it was coming out of the skyline and to create this effect, there’s actually two of the same images placed exactly on top of each other. However, the image at the front has been cropped:

In the timeline, the complete image is at the bottom and the cropped at the top:

Placing the text box in the middle creates the effect that it’s coming out from behind the buildings but really it’s just coming out from behind the cropped image. There’s a ‘Fly In’ animation on the text with the duration set to 3.5 seconds and coming in from the bottom (set in Effect Options).

Slide 2: Text overlay 1

This slide full screen image with a rectangle shape containing some text) placed to the right. The shape has a ‘Fly In’ animation (1 sec duration and coming in from the right). I also made the shape slightly transparent by right-clicking on it, selecting ‘Format Shape’ and adjusting the transparency to 25%.

Slide 3: Text overlay 2

On this slide, I coloured the background pale grey, and positioned my image at the top of the slide. Then I added a rectangle that slightly covered the image and didn’t completely fill the space at the bottom. The text itself sits in a text box on top of the shape and I applied a fade animation (1 sec duration). From the ‘Effect Options’ dropdown I chose ‘By Paragraph’ which makes each paragraph of text appear separately.

Slide 4: Question

This slide wasn’t built using a quiz slide (but it could be) which meant I needed to create everything from scratch. I started with my background image and added two new states – a correct and incorrect:

For each of the new states, I went to the ‘Format’ tab and increased the brightness by 10% and recoloured the images:

Then I added four rectangles, one for the question and one for each answer. For the demo, Option C is the correct answer, so I also created a state for each option:

Lastly, I added a layer that contains a button to replay the demo (the trigger is to jump to the first slide when the button is clicked) and also prevents another answer being selected (go to ‘Layer Properties’ and tick the box next to ‘Prevent the user from clicking on the base layer’).

Then I needed to add triggers to each answer option to make it all work:

So that’s how I created each of my slides for this challenge. There were lots of other creative ideas shared by community members in this challenge and you if have ideas, please share them in the comments area below.

All images used in this demo came from Death to the Stock Photo.

Like this:
Like Loading…

December 4, 2016
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
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
Template Facelift

A few months ago I created a demo for ELH Challenge #18 which was called ‘Using Characters in eLearning’ (you can see a recap here). For this one I did a ‘meet the team’ style interaction that was based on something I’d seen a few years ago. The idea is that you have some people and some questions and you pick a person and a question you’d like to ask them, then their response is shown. You can try the demo by clicking on this image:

I was happy with it originally and it works fine but I’ve felt for a while that the design could be improved because the screen is quite full and there’s not a lot of flexibility in the layout. What I mean is, say I wanted to add another person to ask a question of, I’d need to make the other four people smaller or totally move things around to fit it all in. Also, the response area is quite large and the person giving the answer is shown twice which is unnecessary. So I set about playing with some ideas as to how I could overcome these problems.

For the people on the slide, I wanted to be able to have as many or as few as needed. I figured that using one image that had a number of states (which would be images of different people) would be a good way to achieve this. I just had to make sure each image of a person was placed in a similar position and was about the same size (there was some trial and error getting that right):

Next I needed to work out a way of moving through the people. I thought of using buttons – one to go forward through the people and another to go back but then the whole interaction would be clicking. So then I thought a slider might be worth a shot. I inserted a slider, kept the design simple and added change of state triggers e.g. change the state of ‘Person’ to state ‘Person 2’ when the slider moves and equals 1 (and so on for the others states). I tried it out and it worked great. So I now could have two people or 20 and they all fit in the same space on-screen.

Now for the questions. I left the number of questions to three as I reckon that you wouldn’t need any more than three (you’d probably use less). In the original, the space for the question was just a rectangle with a glow to indicate when it’s selected. It looked more like a button, so this time I used a caption and changed the selected state to a black solid fill:

Tip: I created a button set with my questions which only allows one question to be selected at a time. Doing this creates a selected state so I could then change this state to what I described above.

As in the original demo, the responses by each person to each question are placed on layers. But this time it was a combination of one question being selected and the slider being in one of 6 positions:

I repeated this trigger for all the combinations, the ‘copy and paste trigger’ buttons came in very handy!

The space where the responses are shown is still a good size and I made use of this space on the slide (base layer) by using it to hold the instructions which aren’t visible when each layer is showing:

For the responses themselves, I again used a caption-style shape (it’s actually a combination of a rounded rectangular caption and a triangle) and because I placed this near to the image of the person I didn’t need to show the person twice on-screen.

The last thing I did was to apply some colour coding to each person and layer so that there was a visual indication as to which answer belongs to which person:

Tip: You could use videos on the layers of the person giving the answers or add audio if you didn’t want to use text responses.

If you’d like to see a published version of the updated interaction, click on the image below:

If you like to download the source file and use it yourself, just click here.

Overall, I’m happy with the improvements and I was able to try a few things and experiment. The new version is more customisable too. But best of all, going back to something I’d already created meant that I didn’t have to start from scratch. I could apply some things that I’ve learned since the original was created and I learned a few new things while working on the update allowing me to continue building skills.

This template is one of a few that I have on my new Downloads page.

Like this:
Like Loading…

November 23, 2015
Pushing My Buttons
Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #89 – Creative Button Styles and Effects. The brief: This week, your challenge is to have fun with buttons! Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work.

In this challenge from a few months ago, we had to design some buttons. I came a little late to the party with this challenge and lots of great ideas had already been shared so I thought I’d try something a little different. I was on the train on my way back to Newcastle from Sydney so, with some time to kill I played around with some ideas. The brief was straightforward, our buttons had to have at least three states:
- Normal (how it appears on-screen)
- Hover (how it looks when you hover your mouse over)
- Selected (how it looks when it’s been clicked or pressed)
As usual I sketched my initial ideas on paper:

I had an idea (from the imaged used in the challenge that week) that maybe the buttons could react to each other based on what was happening at the time i.e. being hovered over and being selected. The illustrated characters in Storyline have in-built expressions and I thought that I could use these for the different states for each character.

So I opened up my laptop and began to experiment with my ideas in Storyline 2.

The design itself is pretty simple – a plain background, a headshot of my three characters (to do this I inserted each character and cropped them) and a rounded rectangle shape with a light fill and a thick border.

In Storyline, ‘states’ allow you to the alter the appearance of an object – think the Incredible Hulk is the angry state of Dr Bruce Banner – and by default when you insert an object onto a slide in Storyline, how it looks is called its ‘normal’ state. So for my buttons, the normal state has each character with a neutral expression:

Note: I couldn’t group the character and the rounded rectangle shape together because grouped objects don’t have a state.

For my hover state, I changed the expression of my character to ‘thinking’ like it’s getting ready to be chosen. I also thought it would be fun to have the other two buttons react because the mouse wasn’t hovering over them, so I created a state where they have a ‘worried’ expression on their face and they also look towards the button being hovered. To cater for the different combinations, my first guy would need to look to the right, my middle guy would need to look left and right and my third guy would need to look towards the left. So I created a left and/or right state for my characters.
Because I added the in-built hover state to each character, no trigger was needed. But I needed to add triggers to the characters for their left/right states when one of the other characters was being hovered over. Here’s an example:

I also thought I’d like to change the colour of the border when the mouse is hovering over the character. I couldn’t use the in-built hover state here because I didn’t want the state to change when I hovered over the shape so I created a state for it called ‘roll over’ and added another trigger:

All I had left to do was the selected state and unexpectedly, this took this longest to figure out. The way I wanted the buttons to work was that once a button was selected, it stopped reacting with the other ones. I created a selected state where the character looked happy because he’d been chosen. It worked in that it changed state (to looking happy) but it also continued to react when it was hovered over or one of the other buttons was hovered over.

I tried adding disabled state with a happy expression on my character but that didn’t work.

I tried using a button set on the characters and that didn’t work either.

Finally I tried adding a layer with a new rounded rectangle (with a green frame) and a copy of my character with a happy expression and success! The only thing I had to then do go into the slide layer properties and untick the ‘Hide other slide layers box’.

Whilst I probably won’t ever use buttons like this in a project, this was yet another example of how participating in a weekly challenge can help build your skills in using Storyline. All up this demo was pretty much done on the two and a half hour trip home (it was probably closer to 90 mins). You can see it for yourself by clicking on the image below to launch the demo:

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

Like this:
Like Loading…
October 18, 2015