Articulate E-Learning Challenge

Combining Text and Images in E-Learning

Text and images are two of the most commonly used elements in e-Learning. Often designers will simply use a block of text and insert a relevant image to support the text. While this is an effective method of design, using text OVER an image can create a much more dramatic and engaging effect. This style of user interface is becoming more commonplace in print and web design, so it’s only natural us e-Learning designers are taking note and applying it to our design methods as well.

Using text over an image while maintaining readability can be tricky. A few techniques I use to maintain readability are:

  • Darken or lighten the image
  • Add a text box or container
  • Blur the background image

I applied all three of these techniques in the below example, designed for an Articulate e-Learning challenge.

Using Interactive Dials and Knobs in E-Learning

With Articulate’s November 2016 release of its new suite of products, Articulate 360, came a newer version of Storyline. The new version, Storyline 360, introduces dial functionality. Dials are pre-built into Storyline 360. You can also convert any object, graphic, or image to a custom dial. Dials are similar to sliders, but instead of moving along a straight path, dials move in an arc or a circular path.

Articulate recently challenged its e-Learning community to submit examples of how dials can be used in e-Learning. I wanted to focus on working with the dial functionality, so I grabbed a few graphics from to save time and put my concept into motion (pun, intended). My 4-year-old son has recently become confused about the time since the ending of Daylight Savings Time. The sun rises early and it’s dark by 6:00pm. I thought he’d enjoy turning the dial on a clock to see how the position of the sun changes in the sky.

Functionality Used: Dials

Concept: Illustrate how the position of the sun relates to the time of day


What is ADDIE?

It’s been a while since I’ve had the time to do one of Articulate’s e-Learning Challenges. I had a small amount of time between projects so I thought I’d use the opportunity to sharpen my skills. This week’s challenge was “What Should E-Learning Designers Know About the ADDIE Model?”

It’s been a while since I’ve worked with sliders so I used the challenge to refresh my skills using sliders paired with a trick I learned using animations in states. Clearly, this simple interactive slide doesn’t even begin to address all that e-Learning designers should know about the ADDIE model. It’s funny how a 5-letter acronym is used to describe such a detailed process. Perhaps that is why so many have dismissed it as it doesn’t really illustrate the tremendous work that goes into instructional design, especially e-Learning. At any rate, as someone who has been an instructional designer for many years now, ADDIE does provide a good foundation for a newbie unsure of where to begin. But, in the end, all instructional designers eventually find their own groove and settle into their own process for design.

Functionality Used: Sliders, Animated States

Concept: Create a clean and simple interaction using a slider and animated states to display an overview of ADDIE principles


Tabbed Course Template

I started working with a new client in June and it’s been a while since I’ve participated in Articulate’s e-Learning Challenges. I’ve spent the bulk of my time writing content and storyboarding and haven’t had much time to develop using Articulate. Since I had some down time over the holidays I thought it would be a great opportunity to get have some fun with Storyline.

The most recent challenge was How Can You Use Pantone’s Color of the Year 2016 in E-Learning? My sister is a Principal at a national design firm, so I had already heard about this color selection and the mixed opinion on Pantone’s selection – Rose Quartz and Serenity. Nevertheless, this challenge (for me) was about Storyline not the colors. I’d never created a tabbed template and have an upcoming project for which I’d like to use tabbing. I used multiple layers to achieve the tab navigation and created the icons in PowerPoint. As for the color scheme, I used one of Pantone’s suggested color pairings (below). I would have liked to have more time to further develop the template for the challenge, but alas, duty calls.


Functionality Used: Layers

Concept: Create a tabbed interaction slide using Pantone’s colors of the year


10 Reaction GIFs For e-Learning

This week’s Articulate e-Learning challenge is to share a collection of reaction gifs for any e-learning topic. Although gifs can be a single image, we most often see them used for short animations. Interestingly, there’s been quite a debate over the pronunciation of “gif.” Is it gif like the peanut butter “Jif” or is it gif as in gift? I think it’s funny people argue over such silly things. So, let’s get our focus back to the task at hand: the challenge.

Since I missed last week’s challenge, Show Us How You Create Online Courses #82, I’ve decided to collect gifs depicting my reactions throughout my instructional design process.

1. How I feel when I take on a new project.

(I always question my capabilities before starting a new project. I guess it’s the ISDer equivalent to stage fright.)

2. How I feel developing learning objectives.

(If I can’t use learn…)

3. How I feel when I meet with SMEs.

(Yes, yes. What you do is astonishing.)

4. How I feel writing a storyboard.

(Let it go! Let it go! Can’t hold it back anymore!)

5. How I feel waiting for my storyboard to be approved.

(Well it certainly feels like 7 years.)

6. How I feel when development starts.

(No clue what I’m going to do.)

7. How I feel when I find my creative inspiration.

(I got it! I got it!)

8. How I feel developing.

(Do not disturb me. I’m creating.)

9. How I feel after implementation.


10. How I feel waiting for evaluations to come in.

(Wait for it…wait for it…)

All GIFs provided by Giphy.

Ergonomics Training

Launch Presentation

This week’s Articulate Community challenge was to think outside the box regarding ergonomics and share an e-learning example for ergonomics training. Ergonomics, the study of people’s efficiency in their working environment, is most commonly associated with office environments. But, in fact, ergonomics can be applied to all types of working environments and their associated activities.

I immediately knew I wanted to design an example for my husband’s work environment: the fire station. Recently, I’ve heard of several instances of firefighter injuries on the job – even one that led a 30-something firefighter to an early retirement who now has to find a new career. These injuries did not occur as a result of running into a burning building or extricating someone from a car. These injuries occurred from performing a seemingly innocuous task: exiting the fire truck. All it takes is one awkward movement to incur severe injury to your back, knees, and ankles.

The example I designed focuses more on education than interaction. Given the time, I would like to take a topic such as this and create a highly interactive course.

Warning: There are sirens…

A Cover Slide for the Oddest E-Learning Course

Every year The Bookseller, the book industry’s business magazine, awards a lucky author the Diagram Prize for the Oddest Title of the Year. The first award was given in 1978 to the authors of Proceedings of the Second International Workshop on Nude Mice. Other worthy winners have been Greek Rural Postmen and Their Cancellation Numbers (1996), The Big Book of Lesbian Horse Stories (2003), Goblinproofing One’s Chicken Coop (2012) and last year’s champion, How to Poo on a Date.

While we may not yet receive awards for our course titles, who’s to say us course designers can’t have a little fun too? This week Articulate challenged the E-Learning Heroes community to design a cover slide for the oddest e-Learning course title of the year. While there’s a slough (that’s Southern for “a whole mess of things”) of odd course titles already, I decided to come up with my own: Avoiding Rain in the Sunshine State. I also wanted to try my hand at designing graphics in PowerPoint so that was my tool of choice this time.

Despite our ‘Sunshine State’ nickname, it actually does rain in Florida. See also, Hurricanes. I thought of the title for my course after hearing a story recently about a field inspector in my organization. His job requires him to travel across a large area of the state to inspect various medical facilities. After we implemented of the use of iPads to complete inspection forms, he began to report many technical issues. Long story short, we found he was overloading his iPad with inspections causing its performance to slow. His reasoning? He’s afraid of lightening and likes to be able to change his course if there’s a storm ahead. Assigning many inspections to himself allows him the flexibility to re-route to an area where it’s not raining.

Not only is this a good example of getting to the root of the issue, it’s also a reminder you can’t always avoid the rain in the Sunshine State. But, you can sure try. 🙂

Teaching Math Concepts

The challenge for this week was to  design a short lesson to teach one or more math concepts. I immediately knew I wanted to create something that aligned with the Common Core State Standards for K-12 education. I choose to focus on working with time and money, which aligned with Grade 2 Common Core standard CCSS.MATH.CONTENT.2.MD.C.8.

I browsed various worksheets and exercises to get some inspiration. There is a wealth of teacher resources on the internet for applying Common Core in the classroom. I came across this free download on Jason’s Online Classroom. The Money I Have, Who Has? game is intended to be printed and played with one or more students. I adapted the game into a short lesson using Articulate Storyline 2. Learners are tasked with helping the main character, Bob, find the thieves who stole money from his piggy bank. They’re given a line-up of three suspects and must identify who has the correct amount of money by identifying the coins presented. They must also identify $ and ¢ signs appropriately.