All Out of Proportion

Have you ever visited a website or viewed an eLearning course and noticed the pictures were stretched in extreme and weird ways? People appeared like 12-foot tall Martians or look like they were being viewed through a carnival mirror. If you’ve ever tried to force a picture into a part of a screen or webpage that just doesn’t fit, how do you adjust it correctly? Luckily, in the days of my eLearning development youth, someone was kind enough to explain how it’s supposed to be done.

Pictures stretched to fit end up looking distorted.

Stretching vs Cropping

People with no proper graphic design training tend to make the mistake pictured above where the pictures are forced to fit into a space, but end up looking distorted or stretched. Different graphic design programs work differently, some require you to hold down the Shift or Control keys (or both of them) when you resize the pictures. Some allow you to just type in the numbers of the height and width without maintaining their proper proportions (what is called the “aspect ratio”). To avoid this pitfall, you need use the cropping tool.

Normally, I first decide what I want the height or width to be and type that number in manually. That method works in Articulate Storyline because that program will maintain the aspect ratio by adjusting the corresponding height or width to what you typed. If your program does not do that automatically, you can just start by adjusting it using the mouse, but while holding down the Shift, Control, or whatever key (or combination of keys) the program requires you to use to maintain the aspect ratio. You should be able to find that information in the application’s Help documentation.

Once you get the height or width set where you want it, use the cropping tool to adjust the rest. In Storyline for example, you can do this by either opening the Size and Position window, remove the checkmark from the “maintain aspect ratio” box, then use the up and down arrows to adjust the cropping from the bottom/top or left/right sides. Or, you can just click the cropping tool and do it with your mouse by eyesight.

Do Not Be Afraid to Cut

When cropping, it’s ok to cut off part of the head or body of your subject. When people look at pictures they instinctively imagine those parts or there. I stop short of cutting the eyes out, and you have to use your own discretion.

Try a Different Layout

As you will see in the example below, to make the pictures fit better, I decided to go with a more horizontal ratio than what I started with above. Usually you can make things fit if you really need to, but if not, stay open to changing your layout up a bit. In this instance, I could have even gone with a combination of horizontal and vertical ratios and had them fly in from the sides and below.

Pictures stay in proportion when cropped. Notice I also cut some of the doggy’s body and he looks just fine.

Timesaving Tip

I’ve also learned that in some programs like Storyline, if you have a group of pictures you want to all have the same dimensions, you can use the first picture you adjusted to crop the rest. Just set the height or width to where you want it, then line the picture up against the original to where you want it, and when you crop it, the cropping tool will snap to the same width or height as the original.

Click here to see the before and after in full scale with animations. Feel free to let me know in the comments if you have any questions or need clarification.

Sorting Out Your Cats and Dogs

A client recently asked me to create a sorting activity where various items would be dragged into two possible categories. However, they also wanted those items to go back to their original positions should the learner get any of them wrong. Although there is an option to have the items bounce back to their original position if the leaner drags them to the wrong target or no target at all, my client wanted ALL of the items to bounce back to their original positions only after they failed the exercise and went back to try again.

Cats and Dogs Drag and Drop Sorting Interaction

Here is the step-by-step process I took to accomplish this.

  1. First, create the sorting interaction using the “Freeform” drag and drop question type.
  2. Set the number of attempts to “Unlimited”. Of course you can set it to a specific number.
  3. Set the properties for the slide to “Reset to Initial State” upon revisiting.
  4. Duplicate the slide.
  5. Add triggers to the “Try Again” and “Continue” buttons on the layers to go to the other slide. So slide one would go to slide two, and slide two would go back to slide one.

So that’s it. A pretty simple solution. As is often the case with these things, there are likely other ways to accomplish this. Although there are really two slides, from the learner’s point of view, this is just one interaction. Check it out and let me know what you think!

Hold Your Horses!

All the time I have clients ask me if I can keep the user from clicking the Next button until they’ve clicked all the objects on a slide. Usually it is because they have a list of topics they want the learner to look at, and they want them to look at ALL of them before they advance to the next slide. I use number variables and states to restrict the navigation in this way.

Using Number Variables to Restrict Navigation

The first step is to create a Next button and then set its initial state to Disabled. Then create a number variable and name it something meaningful so you’ll recognize it when you’re setting up your triggers. Next, add a trigger to each object you want the user to click and tell it to add 1 to the number variable upon the user’s click. Now, let’s say you have 8 objects you want the learner to click. Simply add a trigger which says that when the number variable is 8 or greater, change the state of the Next button to normal. And that’s it!

This post was inspired by this week’s Articulate challenge to show how you use number variables, thanks David Anderson for the idea. Check this interaction out and let me know what you think.

Celebrating Froome and Sagan

I love watching the Tour de France, the mountains and other scenery is so beautiful and the competition is intense and exciting. This week, David Anderson from Articulate challenged us to create an eLearning interaction based on some aspect of the Tour. I chose to talk about a couple of my favorite cyclists, Chris Froome and Peter Sagan. As of this writing, Sagan was holding the green jersey for a few stages, but lost it a few days back, and Froome was unable to participate due to his ongoing recovery from injuries. Hopefully he’ll make it back by next year.

Two Major Cyclists from the Tour

To give the sense of movement, I used a lot of wipe, fly-in/out, and grow animations. I also like starting with a background picture in full color and have it fade out into a semi-transparent grey-scale picture so you can read the text. I also used the yellow tour color and the colors from the two cyclists jerseys for a gradiated background color. Whenever you put text on top of pictures, you have to look out for things getting too busy or hard to read. Hope you enjoy this simple little interaction.

Test Your Geography Knowledge

How does your knowledge of geography measure up against 8th graders from the 1910s? In this week’s eLearning challenge, David Anderson came across a list of questions from an exam written in 1912. It was Kentucky’s Bullitt County exam for 8th graders covering a wide variety of subjects including arithmetic, geography, grammar, physiology, civil government and history. David asked us to create an updated version of the exam for online learners. I loved the idea, and created mine based on a few of the geography questions.

Take the Geography Quiz

Make Them Laugh
I like to customize my feedback, so you don’t just get the generic “correct” and “incorrect” responses. Since geography can be a bit of a bland topic if not taught properly, I threw in some humor, sound effects and simple illustrations into the feedback layers.

Storyline Assets
For my background picture and illustrations, I dug into Storyline’s built-in and royalty-free images. I usually search in Storyline first for images. Since I’ve already paid for the software, it only makes sense to look there first before going to outside providers. Being the quiz was originally written for 8th graders, I remembered there was a little boy’s voice (named Justin) in Storyline’s text-to-speech voices. Justin’s voice is also one of the less robotic-sounding options. I also thought the sarcastic attitude of some of the feedback would sound particularly funny delivered from this little boy’s voice.

So check it out and let me know what you think. Your feedback is always appreciated and can stimulate some interesting and informative conversations.

Allow Me to Introduce My Course

Have you ever taken an eLearning lesson and not understood how you’re supposed to interact with or navigate through it? Have you ever found yourself 15 minutes into a lesson or taken one of those online surveys, and start wondering how much longer it’s going to take? If you’re creating an eLearning lesson, I think it’s only considerate to let the learner know a few of these things upfront.

photo of multi coloured hot air balloons

Photo by Brett Sayles on

This week’s eLearning challenge was to create a gate screen. I think you’ll like this one. Check here to view it and let me know what you think!

Taking a Breather – Editing Text to Speech

I am a huge advocate of using professional narrators for my courses. Because everyone thinks they can do narration, the field is swamped and very competitive, so you can get some very talented narrators at very reasonable rates. But despite my best efforts to convince them, some clients just don’t want to spend the money.


Now that Articulate has added computer-generated text-to-speech narration, a lot of clients have gone that route. The problem is, the speakers often come off as soulless. Part of the reason for this is that the text-to-speech narrators, unlike us human beings, don’t have to BREATHE! This can make listening to text-to-speech narrators stressful and exhausting. It’s very hard to keep up with the information you’re hearing when the speaker rarely pauses even for a second.

The Magical Comma
I figured out a great and simple way around this problem – add a few commas! When I add text-to-speech, I will import the text from the Notes section (or copy and paste from somewhere else) and inside the text-to-speech entry field, I will read the narration to myself, noticing anyplace where I’m naturally pausing, and add commas in all of those places.

I like to add the extra commas in the text-to-speech box instead of earlier on in the Notes section, because oftentimes I want the text-to-speech voice to pause even a little bit more often than normal punctuation would require. So in this version you can ignore the regular grammatical rules on when to use commas, and just apply them as you see fit to get the narrator’s pacing just the way you think it should be.

Check out this little before-and-after sample, where you can hear what a different a few extra commas can make towards making your lessons more listenable and enjoyable.

Rubik’s Blues

I love watching science programs. I remember one show in particular was all about human perception and how we humans can be fooled by optical illusions. This week’s Articulate eLearning challenge was to create something using Pantone’s 2020 color of the year, “Classic Blue”.


I created this hotspot interaction around a Rubik’s Cube with different shades of the COTY. See if you can guess which of the three boxes is the lightest. It’s not as easy as you think!





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.


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!

Fighting Wildfires in Alaska

You are a fire manager in Alaska and three wildfires have broken out across the state. You don’t have the resources to fight them all, so you have to prioritize. This interaction is a combination scenario/quiz question incorporating video, music and a sorting interaction.


The Challenge
This week’s eLearning challenge was to create a quiz question with customized feedback. In this scenario, I used the existing feedback layers giving the learner the opportunity to try again if they get it wrong initially. When they do get it right, it takes them to the “correct” feedback layer with a Continue button which takes them to another slide with more detailed feedback in the voiceover and a video giving a bird’s eye view of the landscape and communities we were talking about.

Too Much Information!
There simply was not enough space to incorporate all the feedback the client wanted on the feedback layer itself, so I simply moved that feedback onto a separate slide accessible via the Continue button. For the video, I just took some high resolution still shots of the Alaskan landscape and using the Ken Burns technique, panned across and zoomed in and out of the different shots to add more interest. Check it out here and let me know what you think!