So Many Layers, So Little Time

Like an onion, too many layers can make an e-learning developer cry. You’re creating an e-learning lesson in Storyline and your client has a number of slides with multiple layers. Your client requires that the learner visit all of the layers on each slide before they can advance to the next.

Normally you’d disable the Next button in the Storyline player so that it won’t work until all the layers have been visited, or you have a customized Next or Continue button on the slide itself with an initial hidden state that switches to Normal after the learner has visited all the layers.

Layers1

Each red dot reveals a separate layer, that’s 10 layers!

True/False Variables
To accomplish this, you create a separate True/False variable for each layer and when the timeline begins on each layer, or when learners exit each layer, you have a trigger that switches each variable to True. Well, it’s easy to see that if you have a lot of layers and a lot of slides with layers, you could end up with 100+ variables to create. Fortunately, there is a much better way, and it works!

Number Variables
Instead of creating True/False variables for every layer, create 1 Number variable. Let’s say you have 10 layers, simply create a Number variable (I’d name it after the slide you’re on, but you can call it anything) with an initial value of 0.

Layers2

Why Greater Than or Equal To?
Then add a trigger on each layer to add 1 to the numbered variable you just created. And finally, on the base layer, add a trigger which says to change the Next button to normal when that variable is greater than or equal to 10.

In case the learner decides to visit one or more of the layers more than once before advancing to the next slide, it’s a good idea to use the “greater than or equal to” setting on the trigger. Also, if you try to set up this trigger, you’ll notice you don’t immediately have the option to set the value of the variable, you can only change it, uh oh!

Layers3

Not to worry, you just set the variable to change, then you Add + a Condition that says the variable is greater than or equal to 10 and you’re done.

Layers4

Click + and add a trigger condition

Disabling the Next Button
In case you don’t know how to do this, you can add a trigger on the base layer that says to disable the Next button at a certain point on the timeline. I usually set it to be disabled within the first second. You can do this by either entering the time (When Timeline Reaches) or adding a cue point to the timeline and setting the trigger to disable the Next button when it reaches the cue point.

Layers5

If you’re using a customized button, and not the one on the Storyline player, just set the initial state of the button to Hidden, and have it change to Normal after the variable has reached 10 or more (or whatever value you need based on the number of layers).

It’s also important to make sure all the triggers are in the correct order to work. In my lesson, I have the trigger to disable the Next button appear ABOVE the trigger to change it to Normal.

I hope I made this all very clear and easy to understand, but let me know in the comments if you have any questions.

 

Advertisements

Living with the Lightbox

Ah, my Disney obsession continues. This week’s e-learning challenge was to create an interaction using Storyline’s Lightbox feature. Designers like to use lightboxes when they want learners to be able to look at an outside reference without leaving the slide they’re on. The reference might be talking about how to use the navigation features on the course or perhaps to define key terms used throughout the course. Lightboxes are great because they can be accessed from anywhere in the course and don’t have to be included in the Menu.

LWTL_Intro.png

Living with the Land
Being a lover of exotic fruit trees and gardening, I have always enjoyed EPCOT’s Living with the Land ride at Disney Orlando. LWTL takes you on a boat ride starting you off in a life-size diorama (or what I’d call biorama) taking you through various climatic regions from rainforests to deserts to prairies.

LWTL_Diorama.png

Geodesic Dome
After that short ecological history, the boat emerges from the dark diorama into the bright sunlight of its dome-enclosed orchard & garden area. Here you can see a multitude of exotic plantlife: vanilla, dragon fruit, Carolina reaper (one of the hottest peppers in the world), Buddha’s hand, jack fruit, and bananas growing all around you.

LWTL_Exotic_Fruits.png

You’ll also see experiments in hydroponic and self-sustaining ecosystems. After you exit the ride, you will find a little booth selling starter plants created in their labs. I bought a couple dragon fruit plants which are thriving to this day (although I have to keep them in pots so I can wheel them into our garage when temps get too low. You can also arrange a behind-the-scenes tour of the LWTL gardens and lab to learn more. It’s actually quite inexpensive and we learned a lot.

LWTL_Hydroponics.png

The Build
I didn’t do anything fancy here, just concentrated on getting some beautiful images and embedded one video from YouTube. These were all put onto separate slides and then I added triggers to the oval-shaped navigation saying to open those slides as lightboxes when the user clicks on them. Finally, in case you were wondering, I used a piece of original music I wrote for the introduction slide that seemed to fit the mood. Check it out here and let me know what you think.

Lakes of Methane You Say?

As Sun Ra used to say, “Space is the place” and I wholeheartedly agree. Thanks to some adventurous souls who conceived of, built and operated the numerous successful spacecraft which have revealed to us Titan’s, Io’s and Europa’s secrets, we not only have some beautiful images of our celestial neighbors, but have added immensely to our knowledge and understanding of these remarkable and exotic worlds.

Moons_Solar_System_Main_Screen.png

Adaptive Learning Paths
When creating e-learning lessons, you always want to think about your audience and their needs. Often learners have different levels of knowledge and experience. How can you create a lesson that adapts to their different skill levels, so you don’t waste the more-experienced learners’ time going over a bunch of information they already know?

E-learning designers have created adaptive learning paths (or ALPs) to accommodate these different learners’ needs. In this week’s e-learning challenge, David Anderson from Articulate asked us to create an example of an ALP.

Asking Questions First
First you have to assess where the learner’s knowledge level is at. The most common approach is to simply ask them a series of questions, and then based on their answers, only direct them to the parts of the lesson where they need help. In my example, I asked them three questions.

Moons_Solar_System_Titan_Question.png

Confidence Levels
Sometimes learners will answer a question correctly by chance without really knowing the answer. I noticed one of my fellow designers, Jackie Van Nice had added confidence levels into her submission. So I added that feature, but to keep mine simpler, I only gave them two confidence-level options to choose from, either they’re certain they know the answer or they aren’t.

Under the Hood
So how did I make it work? I used a combination of states, variables and triggers.

Each question had three possible answers. Each answer had two states; Normal and Selected. The Selected state had an outline around it so learners would know they had it selected. Also, each of the two confidence levels had Normal and Selected states.

Secondly, I created three variables, each named after the moon being talked about in the questions; Europa, Titan and Io. All three variables were True/False variables with the initial state set to False.

Finally, I created simple check marks on the summary slide that would appear on top of each section of the lesson. All three check marks had two states: Hidden and Normal. If the learner needed to review the section, the check mark would appear (Normal), but if they already knew the material and did NOT need to review the section, the check mark would be Hidden.

Moons_Solar_System_Summary.png

I then added triggers to each of the three check marks. So the Europa check mark for example, would have a trigger set to hide it if the correct answer on the Europa question was selected AND the “I got this” confidence-level was selected. Because in that instance, the learner both got the question right and was sure of their answer, and thus didn’t need to review the Europa section.

Moons_Solar_System_Europa_Selected.png

After I set the triggers for the three check marks, I thought I better add a fourth trigger for those learners who didn’t need to review any of the lesson because they already had it all mastered. In that instance a box would appear telling them so. That box had two states; Normal and an initial Hidden state. I then set a trigger so that the box would only appear (change to Normal) if all three of the variables were set to True.

I’ve done enough talking, check out the lesson here and let me know what you think! I’d also like to thank Jackie Van Nice for sharing with me her transparent Storyline player to create this lesson, that was real time-saver!

This Spelling Bee is for the Birds

In this weeks e-learning challenge, we designers were asked to create a spelling bee interaction as the 2014 National Spelling Bee kicks off. I thought that was a great idea as it was something I’d never thought of doing before. I decided to create one based on physics terminology and have it presented by a parrot.

Physics Spelling Bee Intro

Click to play the Physics Spelling Bee

How the hxll did I come up with that?
Well, I had this beautiful image of a parrot flying over a rainforest I had used previously to create an interactive portfolio of my work. I called it “E-Learning that Soars” and I thought maybe I could do something with that. On the other hand, I’m a huge fan of this science program hosted by Morgan Freeman called “Through the Wormhole” where they talk about all sorts of fascinating topics like parallel universes, time travel, etc.

So to combine these two disparate elements of the parrot and physics, I created a story that goes like this: An up-and-coming physicist named Laurie Worthenhiemer has a pet parrot and because Laurie’s always talking about physics at home, Polly (the parrot) has picked up on a lot of the terminology. Polly has a lot of spare time on her hands, so she creates this spelling bee to challenge and entertain her house guests.

Build it and they will come…
Next, I picked four physics terms for players to spell. As is the case in most spelling bees, you’ll hear the term, then you can ask for a definition and hear it used in a sentence. I reached into my “inner-bird” and recorded all the voices using Cubase SX software and a nice Audio Technica microphone. I set up triggers in Articulate Storyline to play the different audio files when the user clicks for the definitions and the sentences.

Definitions and sentence options

Definitions and sentence options

This might sound obvious, but I also made sure that the notes button on Storyline’s player was not checked, as the transcript I was reading from would have revealed the words and thus given away their correct spelling.

The spelling part
I used Storyline’s built-in quiz question with a text entry field for players to type into. I took advantage of the correct and incorrect feedback layers to put in a few witty comments from Polly based on the words the players were attempting to define. I like to customize the colors and feedback on these to fit the situation rather then just going with the generic “correct, you chose the right answer” and “incorrect, you did not choose the right answer” phrases. I also put in a little picture of Polly speaking to the players to personalize it more.

Feedback layer for right answer

Feedback layer for right answer

Keeping score
I used Storyline’s built-in quiz results slide to keep score. Again, I customized it quite a bit eliminating the “you passed” and “you did not pass” layers. Being this was just a game and not really a quiz, I just wanted to give the players a score. I also removed the “percentage right” total and just showed the points.

The final tally

The final tally

If I wanted to, I could have used the built-in pass/fail layers of the quiz results slide to show Polly making a snide comment about a lower score, and another layer with a comment responding to a higher score. Although I didn’t do that here, it’s something you might consider in building your game. So, there you have it, a spelling bee game created in Storyline presented by a parrot all about physics. Enjoy!

You can check out anytime you like…

So, you’re taking an e-learning module on ethics for work and you get to the end of the course and… well, you just took the final quiz and it looks like you passed, and… you’re finished right?… but how do you know for sure? It’s kind of like that Eagles tune Hotel California.

It may seem a bit too obvious for most e-learning designers, and maybe that’s why they forget it. But from the learner’s perspective, how do they know when they’ve finished the module? You’ve got to let them know!

In this week’s e-learning challenge, David Anderson asked us to come up with a creative and interesting way to tell the learner they’ve completed the module. Here’s how I did mine.

I decided it should say “Congratulations, you passed with flying colors” the assumption being they had to take a final quiz before exiting the course. That lead me to search out a free-to-use image of a bird in flight that I would animate.

click to see the finished product

click to see the finished product

Breaking up the Image in PowerPoint
I used PowerPoint’s “remove background” tool to remove the bird from the scene it was flying over. Then I right clicked the image and saved it as a picture (PNG file). Then I duplicated the slide three times and used that same “remove background” tool to isolate the two wings and the body and saved them as images as well. 

bird removed from background

bird removed from background

Creating the Animation Cells in PowerPoint
I created a new PowerPoint file, found a suitable picture of a rainforest from overhead to put in the background of all the slides, then imported the PNG images of the two wings and body to put on top of it. Then I duplicated that slide and adjusted the wings slightly on each and saved all those slides as PNG images.

animation cells in PowerPoint

animation cells in PowerPoint

Animating the Image in PowerPoint
Then I create a third PowerPoint file, imported the slide images I just created showing the wings in different positions, and set each picture to animate in “after previous” (instead of the default “on click”). Using the “save as” option, I selected the WMV file extension to save the PowerPoint as a video instead.

Importing into Storyline
I then created a Storyline file, and imported the WMV file. I set the video to start playing automatically. I also added a trigger telling Storyline to play the video again after it stops, so that the video would loop indefinitely. Lastly, I used the eyedropper tool to match the colors of the player and the text bubbles with the bird and the trees in the picture. Click here to see the finished product.

And now, in case you’re wondering, you’re done reading this article. You can go home now.

E-Learning Feud

This week’s e-learning challenge from David Anderson was to present a top 10 list. I decided to present the top 10 things you can do in Articulate Storyline in the context of a Family Feud-type game setting. Besides creating the actual module in Storyline, I used a combination of Macromedia Fireworks and Microsoft PowerPoint to edit the graphics. And I recorded original music for the theme song and all the character voices in Cubase SX.

click here to play e-learning feud game

click here to play e-learning feud game

Graphic Editing in PowerPoint and Fireworks
The game show logo was created using PowerPoint’s Word Art for the chunky font. I actually copied the logo making one version with an orange fill and a second one in yellow, then imported them into Fireworks where all the other shapes and fills were created and layered. I used an existing Family Feud logo as inspiration to create the layered look.

e-learning feud logo

e-learning feud logo

One graphic editing tool I love in PowerPoint is the “remove background”. Oftentimes I need to crop an image, but don’t want to just crop it into a rectangular shape. I had this picture of an audience that I needed to crop around the heads instead of a straight line, and the “remove background” feature allows you to do this easily. Then you can just right click on your cropped version and save it as an image.

Audio Recording and Editing
With very affordable digital editing software, these days all you need is a simple interface to go from a ¼ inch cord into a USB you can plug into your computer, a couple good mics, and you can make professional recordings easily at home. I’d like to thank Jackie Van Nice, an excellent voiceover talent and e-learning designer, for doing all the female voices. I did all the male voices and played all the musical instruments.

Audio editing in Cubase

Audio editing in Cubase

Cubase is a great tool because you can do very precise edits, remove all the surrounding background noise, apply compression, do the most subtle of crossfades, and a add host of other effects to your recording.

Storyline Variables and Triggers
To switch from the slide with the Johnson family to the Smith family, I created True/False variables named after each character with an initial setting of False. Then I created a trigger on the last slide for each character, changing each variable to True once the timeline for the last slide started.

Johnson family slide

Johnson family slide

Basically, you’re telling Storyline when the last slide for a particular character has been visited. Then I created another trigger on the Johnson family slide that tells it to automatically go to the Smith family once all the Johnson family members have been visited.

Then, after all the Smith family members have been visited, I wanted Storyline to go to the final slide for the game. So I did the same thing I did on the Johnson family slide; except I told the Smith family slide to advance to the final slide once all the characters  (for both the Johnson and Smith families) have been visited.

Resources
If you want to get the most out of Storyline, I strongly suggest taking Daniel Brigham’s Advanced Storyline course at Lynda.com for step by step instructions on variables, triggers, and a host of other tools. Also, the forums at Articulate’s E-Learning Heroes site are very helpful.

Let Me Try – Creating Interactive Software Simulations

Most people will remember something they’ve actually done more readily than something they were just shown how to do. With programs like Storyline it’s possible to create
e-learning modules that offer the learner the opportunity to practice what they’ve learned. To demonstrate how this might work, I created a short sample module of how to use the Player in Pinnacle’s Studio 17 video editing program.

View of Entire Interface

View of Entire Interface

I started by giving the learner a view of the entire UI, then zoomed in on the Player itself.

Bubble appears with description of button

Bubble appears with description of button

By simply using hotspots, triggers and layers in Storyline, I created a second slide where learners could click on each of the controls of the player for a description of what they do. Then it was time for the learner to get their hands dirty and try out the controls themselves.

It’s just a simulation Jim!
Because this was just a simulation and not the actual program, I needed to be sure learners could only click one button at a time following my instructions. Otherwise, there would be no way to predict where in the video they would be when they hit the rewind button for example, unless you knew where they’d left off.

To accomplish this, I created individual images of all the player control buttons and used Storyline’s “Hidden” state to hide them when I didn’t want learners to click them. Underneath all those images, I still had a picture of the entire player including the controls, so learners would still see them – even when the “clickable” images of them (on top of the picture of the player) were hidden.

Trigger Happy?
I created the following Triggers for each of the clickable images of the control buttons:

  1. A trigger to either play a video or change the state of a picture (a still shot of where the video would be) from Hidden to Normal. I should mention here that I had to set the “initial state” of all the still shots to Hidden, so learners would not see them until they clicked the button with the trigger.
  2. A trigger to play the audio clip with the instructions on which button to click next.
  3. A trigger to change the state of that button from Hidden to Normal.
  4. A trigger to change the state of the button they just clicked from Normal to Hidden – remember, I don’t want users to be able to click any other buttons because I need to control the order in which they click them to make the simulation work properly.
  5. In one instance I had to set a trigger to take learners to the next slide. I only did this once, because I had a second video showing the looping effect and thought I might be pushing my luck placing a second video on top of the first one on the same slide with all the other triggers and things going on. I guess I’d say that was a “judgment call”.

So, do you want to see the finished product? Just click here.

As always, if you need any clarification on how to do this, feel free to comment below and I’ll get back to you. I hope you enjoy creating your own software simulations. I also welcome you to check out David Anderson’s Weekly Challenge blog at E-Learning Heroes. It was because of his latest challenge that I created this simulation.