Using Progress Meters in E-Learning #60

David Anderson
By David Anderson

Progress Bars, Meters, and Indicators in E-Learning

Progress Meters in E-Learning #60: Challenge | Recap

Progress indicators are a great way to let learners see how much they’ve finished, and how much there is to go. 

And since they’re one of the most popular questions in the community, I thought they'd make a great weekly challenge.

Before you progress through this week's challenge, take a look at a few of the creative examples your fellow community members have shared.

Showing Progress in Quiz and Results Slides

Give your learner's a visual indicator of their remaining quiz questions using a simple progress meter. Another option would be to colorize completed questions to indicate correct and incorrect responses.

Montse Anderson

View demo | Montse Anderson | Website | @mLearning

Showing Learner Progress

Keep your learners informed about their progress with this avatar-based progress indicator.

Learner Progress

Atsumi-O-Meter: View | Download

Course Progress Indicator

A simple approach is to use images to represent the progress of each slide like Tom shared in his security demo.

Course Indicator

Employee Security: View

Course Progress (Advanced)

Community member Alexandros Anoyatis shared a free template that uses advanced variables to drive the menu's progress meter.

Course Progress

Menu Toolkit: View | Download

 

Bookmarking

Articulate Super Hero Bruce Graham shared a thermostat-themed progress indicator.

Bookmarking

Bookmarking demo: View | Download

Challenge of the week

This week your challenge is to show how progress indicators can be used in e-learning.

Resources

Here are some helpful discussions, demos, and downloads to help you get started. We're happy to give you a hand with ideas or technical help. If you get stuck, let us know!

Video Tutorials

Visual Feedback Gauge

How to Design Visual Feedback Meters in Articulate Storyline

This video workshop on creating feedback meters in Storyline uses similar techniques for progress indicators.

Forum Discussions, Examples, and Tutorials

Last Week’s E-learning Challenge:

Examples of E-Learning Games for Kids

E-Learning Games for Kids #59: Challenge | Recap

New to the E-learning Challenges?

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.

If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Share Your Progress Meter Examples!

We have a new progress bars challenge for 2019. Head over to the current challenge to share your work.

How are Designers Using Progress Bars in E-Learning? (2019) #224

Related Content

40 Brilliant Examples of Progress Meters in E-Learning #60

David Anderson
David Anderson
Director, Customer Training

Using Badges, Awards, and Achievements in E-Learning Courses #197

David Anderson
David Anderson

35+ Cool Toggle Button Examples for E-Learning Designers #97

David Anderson
David Anderson
Director, Customer Training
176 Comments
Jeff Kortenbosch
over 5 years ago11/22/14 at 7:11 pm (UTC)
Cool, this is actually a topic I removed from my presentation for the Dutch Articulate User Days last week. Should be able to produce something this week. The image David used made me think of a post from over a year ago. His images above the progress bar remembered me of badges/achievements which in a way are things you can earn if you progress through a (game) course. With the new ELH search in place I located in a few seconds. Hope this is useful for someone. Let me know what you think! Gamify your course with Achievements (incl. source file): http://bit.ly/SL-achievements
Sol Moh
over 5 years ago11/24/14 at 10:31 am (UTC)
Thanks Alexander. In this game you can only use the number of available match stickers. In fact we only move one sticker to another place. Excuse me that my descriptions in the game was not enough. I correct the description and upload it again. https://dl.dropboxusercontent.com/u/107713226/joorchin%20%282%29%20-%20Storyline%20output/story.html The correct response for all levels are: level 1: 5+1=6 level 2: 9-9 =0 level 3: 6-5=1 level 4: 7+3=10 or1+9=10 level 5: 9-4=5 level 6: 9-0=9 level7: 2+3=5 or 3+2=5 .
Nancy Woinoski
over 5 years ago11/23/14 at 9:46 pm (UTC)
Here is my progress meter, but I have a confession to make about this one. This was going to be my entry for last weeks challenge (the kids game), but I could not get it to work. I was trying to build a 2-d shooter game but there does not seem to be a way to detect then two objects collide - even with JavaScript. So I gave up that pursuit and instead you get a progress meter. http://pinchedhead.articulate-online.com/3796869842
Linda Lorenzetti
over 5 years ago11/24/14 at 2:14 am (UTC)
Nancy, I tried to do the exact same thing with my zombie challenge. I even used the slider to shoot objects, but didn't know how I would score a hit because I couldn't detect the object collision. I ended up highlighting the zombie at different points and gave points if the slider was in the correct position to hit it during the time it was highlighted. Might be easier to see than explain https://dl.dropboxusercontent.com/u/70407176/zombies/story.html
Michael Hinze
over 5 years ago11/23/14 at 10:19 pm (UTC)
A while ago, I had developed a sample where user's could add topics they were interested in to a menu and effectively build their own course. See here for a sample and brief blog post: http://wp.me/p2BoUf-8R The progress indicator (upper right) is not much to look at (making it 'look pretty' was not the goal of this sample, it was about functionality) but it does automatically adjust, depending on how many and which topics were selected.
Nancy Woinoski
over 5 years ago11/23/14 at 11:30 pm (UTC)
Here is another example. This one actually tracks progress. I created this for the Articulate Community Roadshow in Toronto and have been meaning to turn it into a proper template for ages. Here is the demo. http://pinchedhead.articulate-online.com/3796805848 I'll post the template later - I still need to make the menu topics more generic.
Tom Kuhlmann
over 5 years ago11/25/14 at 4:19 am (UTC)
I was showing some people at a recent workshop how to use free icons to create an elearning template. One of the icons was a diamond so I used that as a way to indicate progress in the demo. Collect diamonds as you go and if you check on your progress page (bottom icon) it indicates how many you have collected and how many to go. Nothing fancy, but since the demo has a progress meter, I figured I'd include it. http://elearning-examples.s3.amazonaws.com/SL2-ballicon/story.html
John Wagner
over 5 years ago11/25/14 at 7:10 pm (UTC)
I had a very lineal Frequently Asked Questions section on our web site. Very boring, but people read them, I created an interactive FAQ course and used a series of checkmarks as the progress meter. If the person hovers over the character they see the question. If they click on the character they go to the interaction for the answer. When they finish a question and answer interaction and go back to the beginning, there is a check mark on the character to let them know they finished that part of the course. The published course is at http://openbibleministries.com/03hsbapt3.php.
Daniel Adeboye
over 5 years ago11/26/14 at 1:22 am (UTC)
I've been slightly busy to participate due to school work, though I've been following the challenges but I guess I'm back now. While, seeking space to meet up past challenges, I decided to share one I did for a previous challenge on spelling bee. View Snapshot of Reward Cup at https://flic.kr/p/q9ZeGw Download full course in PowerPoint to view full interaction with content at https://itrysting.files.wordpress.com/2014/07/please-spell-it.pptx By the way, creative and awesome work from everyone... Looked through them all! I may still create a new progress meter hopefully before Thursday...
Jackie Van Nice
over 5 years ago11/26/14 at 5:05 pm (UTC)
I'm pretty sure Daniel created the people images in PowerPoint using a method Tom Kuhlmann shared. Here's Daniel's blog post about creating it: https://itrysting.wordpress.com/2014/07/07/please-spell-it/ Here's Tom's post about the character creation method: http://www.articulate.com/rapid-elearning/create-illustrated-characters-powerpoint/
Daniel Adeboye
over 5 years ago11/26/14 at 1:55 am (UTC)
I couldn't resist sharing this awesome work by Jackie! If you look well, it inspired my own work; I saw the PowerPoint template and decided to mimick it... poor right? I even seem to like the map linear progress from state to state more than the cup progress; but both are great ways of showing progress. http://jackievannice.com/challenge_game/story.html Post to template here http://www.jackievannice.com/?s=Challenge+game
Daniel Adeboye
over 5 years ago11/27/14 at 11:29 pm (UTC)
Finally, I'm able to create a Progress meter I love! As I sat with my tablet playing "Lep World 3"on android, the Menu showing progress suddenly caught my attention and I decided to use it as a guide for my work. So it has a menu progress meter and each 'world' has three 'levels'. I also locked subsequent worlds until you complete preceeding ones. I enjoyed doing this, I hope you will! Main Menu Progress Meter:- https://www.flickr.com/photos/127073448@N05/15707024140/ (Scroll to see snapshots of the second level progress and others in the course) Full Interaction in PowerPoint:- https://itrysting.files.wordpress.com/2014/11/menuprogress_meter.pptx (And there's some small sound) Hopefully, I should write my blog post for this challenge!
Rebekah Massmann
over 5 years ago01/12/15 at 5:33 pm (UTC)

Jumping in for my second challenge and first challenge involving a course. I plan to blog about this course soon, but in the meantime, here is my entry. https://db.tt/Tox1YgDz This is a stripped down version of a scenario-based compliance course I'm working on. I've adapted this template: https://community.articulate.com/download/interaction-flat-desktop-exploration. The idea is that the resources on the desk will give the user information needed to complete the challenge. Note that in Scenario 1, some of the icons open layers, but from that point on, it's just a skeleton structure. Also, in my real course, I have several layers of branching and choices dependent on variables, but I cut them out for the sake of the demo. Thanks for a great challenge that has applied directly t... Expand

Sign In to Comment