Interactive Timeline on Human Rights

I have PBS to thank for my love of US history. It all began with Ken Burns’ series on the Civil War and a two-part American Experience series on FDR. Since then, I’ve also eaten up Presidential and other biographies by many of the commentators on those shows from HW Brands to Doris Kearns Goodwin. I learned one very important thing, that the freedom and equality we enjoy in this country was not a reality the day that Jefferson said all men were created equal, with unalienable rights to life, liberty and the pursuit of happiness. And neither did it happen when Lincoln proclaimed the slaves free during the Civil War.

Stanton and Douglass

Elizabeth Cady Stanton and Frederick Douglas – two giants of human rights

The Challenge
So when David Anderson at Articulate said this week’s challenge was to create an interactive timeline, I knew what mine was going to be about. This timeline is by no means an exhaustive one. I tried to stick with dates when the people of our whole country enjoyed a certain freedom. So when I put 1900 as the year when the Married Women’s Property Act was enacted, it really started in New York in the mid 1800s, but the rest of the states didn’t pass their own versions until later, the last one being in 1900. I had to reduce the timeline entries into fewer, more significant entries to avoid getting bogged down into too many details. Hopefully, this entry will serve to whet your appetite to learn more.

SmartGraphicTimeline

SmartArt Graphic created in PowerPoint

The Build
I used PowerPoint’s SmartArt to create the graphic model. Then I exported pieces of the model into Storyline and assembled them there. I used layers to reveal the detail on what happened each year with a simple click-and-reveal trigger. Originally, I tried to get all the years on one screen, but it proved to be too much content, with the text rendering too small to be readable. So I split it up into separate screens, four years on each page.
Check it out here and let me know what you think!

Advertisements

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.

 

The Revealing Science of E-learning

If you’ve ever witnessed a plague of lighthouse keepers or traversed the topographic oceans only to find yourself in the court of the crimson king, you may appreciate what I created for this week’s Articulate e-learning challenge.

PROGressBarFront

Our MC, David Anderson asked us to create an e-learning interaction that used awards and/or progress bars in a creative way to reward learners and show them how far they’ve gotten in a lesson. Well, I thought this challenge being about progress bars, I should create the ultimate PROGress bar (ie: progressive rock, get it?).

So many times when I’ve seen documentaries about popular music or the 1970s in particular, all they ever talk about is punk and disco and totally miss the fact that the major progressive rock bands were selling millions of records and packing the hugest stadiums in the world. It was what Bill Martin aptly labelled a “popular avant garde.”

The PROGress Bar
For my progress bar, I decided to have seven levels of achievement with an illustrious title for each; ranging from Prog Novice to Prog God. I used the sun from the cover of King Crimson’s Larks’ Tongues in Aspic to denote where the learner was in the different levels. So the suns go along the bottom in a row with all of them grayed out except for the current level the learner is on.

PROGressBarMuirQuestion.png

Hint, Hint
Knowing that a deep knowledge of progressive rock is generally not the forte’ of most people and that my audience was going to be mostly other e-learning designers, I didn’t want them to get discouraged and opt out of the lesson right away. To remedy this, I added obvious hints to the feedback layer of the questions and gave them two tries to get the right answer.

PROGressBarQuestionFeedbackHint.png

Being the serious prog-nerd that I am, I had too many questions. Anyone who knows me personally knows I can go on and on about this topic. When I was done, I realized that I HAD to have at least one extra question. So it made sense that to get all the way to Prog God, that the learner should have to answer an additional question to get that ultimate title. To represent where they were at in the lesson, I highlighted one half of the final sun on the PROGress bar.

PROGressBarHalfSunHighlighted.png

Original Music
For anyone who’s interested, the music on the introductory slide is a piece I wrote and recorded called “Satisfaction.” It was supposed to be one of those epic 20 minute tunes, but is yet to be completed. At any rate, enjoy the lesson and definitely let me know what you think!

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!

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.

Hiding the Quiz Until the End

You have an e-learning course where your client wants the Take Quiz box to appear on the main menu, but doesn’t want learners to be able to take the quiz until after they’ve visited all the sections in the course.

They also want learners to have the option to take the different sections in any order they wish. As learners complete each section, they’ll return to the main menu. After they’ve completed all the sections, the Take Quiz box will become active so they can take the final quiz. Does this sound tricky? Fortunately, I’ve been there and can show you how to make it happen.

Main Menu with Take Quiz box on right

Main Menu with Take Quiz box on right

1. Create Two Versions of the Take Quiz Box
I needed two versions of the Take Quiz box; one that was clickable and would take learners to the final quiz, and one that was not. I named one “TQ With Link” and the other “TQ No Link”. Learners will see the “TQ No Link” box until they complete all the sections, at which time the “TQ With Link” will appear.

I put the “With Link” version on top of the “No Link” version in the timeline. Both boxes look the same to the learner, with the exception of what they say if the learner rolls over them. Since this requires that the boxes be the same size and in the same position, you can either select them in the timeline, or have one of them off to the side and set its final position after you’re done working on them. Either way, it’s a good idea to name them in the timeline to keep them straight.

2. Add States to the Two Boxes
For the “TQ With Link” box I created four states: an initial state of Hidden, and three other states; Normal, Hover, and Visited. For “TQ No Link” I created two states: Normal and Hover.

3. Add Layers and Triggers to the Two Boxes
So learners would understand why and when the Take Quiz box would be active, I created a layer called “Quiz” that said “Not available until all other sections completed” and added a trigger to make the “Quiz” layer appear when learners rolled over “TQ No Link”.

Then I created another layer called “Quiz 2” that said “Ready for a final quiz?” and added a trigger to make the “Quiz 2” layer appear when learners rolled over “TQ With Link”. And of course, I added a trigger to “TQ With Link” to go to the Quiz when the user clicks on it!

Layers with additional text appear on rollover

Layers with additional text appear on rollover

4. Create Variables and Triggers for All the Other Sections
Next, I needed a way for Storyline to know when each of the sections were completed. To do this, I created a variable and a trigger for each section.

I gave each variable a unique name I’d easily associate with the particular section and had them all start with a value of False. Then I went to the last slide of each section and created a trigger that changes the value of that variable to True when the timeline for that slide starts. That way, Storyline would know when the learner got to the last slide of each section, that meant they had successfully completed that section.

Click X symbol on right to create/edit variables

Click X symbol on right to create/edit variables

Variable created with initial setting of "false"

Variable created with initial setting of “false”

5. Create Trigger on “TQ With Link”
Lastly, on the main menu slide I added a trigger that changed the state of “TQ With Link” to Normal when the timeline for the slide starts AND when all the variables for all the other sections changed to True. Because when all the variables for all the sections are True, we know that all the sections have been completed.

When setting up this trigger, click the + sign to add as many variable changes as you need. ONE CAUTIONARY NOTE: I initially tried to just have the trigger activate when all the variables changed, but learned that that wasn’t enough, you also need to tell it to do it when the timeline for the slide starts.

Select when "timeline starts" on current slide

Select when “timeline starts” on current slide

Click + sign to add variables to trigger

Click + sign to add variables to trigger

To see a stripped-down version of how the menu looks and works, click here.

As always, I know some of this can be a bit challenging. So feel free to contact me if you have any questions about any of these steps.

Using Branching Scenarios

I just recently completed development on an ethics course for a non-profit organization that used branching scenarios. The client gave us a number of approved scenarios to illustrate how their code of conduct would apply in real life.

For one of them, they simply told us that one of the managers had invited a group of male managers to lunch, but did not invite the female manager. To determine whether this was something that should be reported or not, the client gave us a number of questions that needed to be answered first.

The Scenario in Pictures
To make the scenario more interesting and memorable, I showed our protagonist watching the male managers enter the restaurant.

Scenario is presented

Scenario is presented

The Primary Branch
I then presented the learners with three options of what our protagonist should do: 1. Report it, 2. Do nothing, or 3. Ask more questions.

Primary Branch - 3 Questions

Primary Branch – 3 Questions

When learners clicked on one of the three options, I had a layer appear with feedback either telling them they needed to rethink their answer and try again, or that they made the right choice and to continue on to ask more questions.

Learner prompted to ask more questions

Learner prompted to ask more questions

As they clicked on each question, they would get the answer they needed from one of the characters.

Learner gets more information

Learner gets more information

The Sub-branch
After they clicked on each question to get all the information they needed, two new options appeared; 1. Report it and 2. Don’t do anything.

Sub-branch with two final questions

Sub-branch with two final questions

After they clicked on each answer, a final feedback slide would tell them whether or not they made the right choice.

Final feedback at end

Final feedback at end

Final Answer Delayed
The idea behind all this is that the final answer is delayed. Just like in real life, sometimes we don’t have all the information we need to make the right choice.

To accomplish this, I used a combination of layers, states, triggers, and variables in Storyline. Here’s what the final product looked like: