E-Learning Design

Converting Static Content Into Interactive Knowledge Checks

August 1, 2015 By Jackie Van Nice 4 Comments

Select Image to Launch Demo

A Zippier Part of the Course

For this challenge, David Anderson asked us to take static content and turn it into an interactive knowledge check. I grabbed some of the least appealing content I know and got to work.

Version 1: The Grim Original

The Idea

Version 2 Improvements: Visual Design, Hover, & Audio

I did a cost share course for a nonprofit a few years ago, and even though I was able to perk most of it up, there were a few screens that didn’t lend themselves to perking.

My idea was to take the worst – a screen about parts of a government code – and turn it into an interactive knowledge check.

The Design

Version 3: Fully Interactive Knowledge Check

I took my improved version (you can see the client’s original above) – and challenged myself to leave the layout intact.

I converted it into a drag-and-drop interaction that actually took quite awhile to get exactly as I wanted it.

My focus was not only on making it clean and functional, but on giving the learner the freedom to play with it as much as they’d like.

The Result

What I like best is that it gives you a chance to interact with the content. You can puzzle it through and learn a bit along the way.

What I like least is that it’s not the memorable, motivational, or meaningful star I would like it to be – but you have to pick your battles. 95% of the course uses scenarios and good context; but the client’s goal was to introduce the idea that each part of the code has meaning – not to memorize it. If you needed it on the job, you’d look it up! (Who doesn’t love performance support?)

Ready to get all interactive with a federal regulation? You can do it right here!

Seriously – How Do You Navigate This Course?

August 1, 2015 By Jackie Van Nice 3 Comments

Select Image to Launch Demo

Do you know how many times I’ve heard about a learner getting confused about course navigation? Close to zero. Nonetheless, organizations like to include instructions, and those instructions tend to get short shrift. So when David Anderson challenged us to get a little more creative with navigation intros – I was in.

The Idea

I wanted an approach that was simple and replicable; but unique enough to capture the learner’s attention. I hadn’t used photographic characters for awhile, so I grabbed one and riffed off of his lab coat to determine the topic.

Though my process was backwards, the idea is that you can theme your navigation instructions to match your course content. It makes it more fun and gets the learner ready for the topic.

The Design

I like Coolors’ navigation tutorial, so I played with their center-of-screen dashboard approach, which then gave my lab-coated gentleman the freedom to point out navigation elements on the rest of the screen.

Coolors’ Navigation Start

My Navigation Start

Coolors’ Navigation Navigation

My Navigation Navigation

I also made sure that if you choose to skip the navigation intro that you’re confronted with a nurse with some good advice, but your consequences are your own.

The Result

It’s simple, but still more interesting than any of the standard navigation instructions I’ve done. With more time I’d refine it, but this gives you the general idea.

If you’d like to navigate these white-coated waters, you can see it right here!

Select Image to Launch Demo

An Interactive Conversational Game

July 19, 2015 By Jackie Van Nice 10 Comments

Select Image to Launch Demo

This week I took the current two-truths-and-a-lie ELH challenge and combined it with last week’s interactive conversation challenge to make a single conversational icebreaker.

The Idea

Keeping it Conversational

Keeping it Interactive

I wanted to use the interactive conversation to introduce the icebreaker guessing game. It helped give it a bit more context and natural flow.

I also wanted to narrow the icebreaker topic so it wasn’t completely random. It made more sense to focus on just one part of my career, and language teaching narrowly won out over a couple of other options.

The Design

Chalkboard Textures & Colors

Using a chalkboard background and simple images seemed appropriate. I’d have looooooved to add audio and more elaborate animations and images, but kept it simple in the interest of time.

Play the Game!

Ready to see how well I can (or can’t) lie? It’s your call now – and you can play the game right here!

Select Image to Launch Demo

Free Tic-Tac-Toe Template in Storyline!

July 7, 2015 By Jackie Van Nice 10 Comments

Click Image to Launch Demo

I made a punctuation tic-tac-toe game this week for an ELHChallenge. Folks liked it and wanted to know how it was built, so I made it into a game template to share. I’ve replaced the images with a generic smiley face from Microsoft clipart, standardized the colors, and put in placeholder text – but other than that you’ve got the original file.

Tips to Help You Customize It

Download it: Grab it on the download page.
Tic-Tac-Toe Grid: The lines are on the master slide. To change it go to View > Slide Master.
Disabling Clicks on the Grid: To keep the user from clicking on a question they’ve already answered, I added an invisible rectangle on top of each grid image on the base slide named “disable 1”, “disable 2”, etc. The initial state is set to Hidden, but once a question has been answered the rectangle is triggered to go to a Normal (yet still invisible) state to block mouse clicks. If you choose to keep this functionality, be sure these disabling rectangles are in front of the grid images rather than behind them.
Images: Replace them by right clicking on each and choosing “Change Picture”. Keep in mind you’ll be replacing them on the grid and on all 27 layers that include images. (There are also 8 results layers, but they don’t include images.)
“Learn More” Buttons: On each feedback layer there’s a Learn More button that originally linked to a URL. I left the trigger intact, but if you’d like to use it you’ll need to update it with the link of your choice.
Compare it to the Original: If you’re not sure what to put where, just compare it to the original game. That should clear it up.

Have Fun!

I hope you enjoy making your own game. If you have questions just let me know in the comments below!

It’s Punctuation Tic-Tac-Toe!

July 5, 2015 By Jackie Van Nice 13 Comments

Select Image to Launch Demo

This week’s Articulate #ELHChallenge is to come up with an interaction that helps teach punctuation.

Update: Download the Free Template!

The Idea

I wanted to make some type of game I hadn’t tried before, and tic-tac-toe seemed relatively straightforward.

Personalized Punctuation Advisors

I also wanted to use the rest of the characters I used for this emoji challenge. The idea was to have each of them embody an element of punctuation and give their own example of correct and incorrect usage. Personalized punctuation advice couched in a bit of silliness seemed engaging to me – so I went with it.

The Design

The goal was to keep it simple and easy to play with. The board is laid out in front of you so you can pick any punctuation challenge you’d like and see your progress as you go.

Your aim may be to get tic-tac-toe (three correct answers in a row) and win; but it’s equally fun to play freely. That’s why I added a “Start Over” button on the main screen – so you can quickly clear the slate and start over.

The Game Board

The Punctuation Guide

I have to say that Storyline 2 made building the whole thing a relative snap, too. It was great. It’s one slide with 35 layers and a few states (plus many pieces and parts I added) – but engineering it to give the proper result once tic-tac-toe has been achieved was really simple.

Oh – and in the feedback for each question I linked to the appropriate page on The Punctuation Guide that David Anderson used as inspiration for the challenge. Thanks for finding it and for such a great challenge, David!

Try It Out!

Ready to test your punctuation prowess? Feel free to try it out right here.