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

Progress bars, meters, and gauges are a great way to keep learners on track by showing them how far they’ve gone in your course and how far they have left to go.

As a course designer, you have creative freedom to design playful and visually engaging progress bars to help learners track their progress. And that’s what this week’s challenge is all about!

Challenge of the Week

This week, your challenge is to show how progress bars can be used in e-learning. Your example can be static or interactive but share your ideas for helping learners track their progress.

New Entries Only!

We hosted the first progress meters challenge four years ago. Since then, dozens of examples and downloads have been shared in the community. Because progress bars are so popular, we’re asking that you only share new examples in this week’s challenge.

Share Your E-Learning Work

Comments: Use the comments section below to share a link to your published example and blog post.

Forums: Start your own thread and share a link to your published example..

Personal blog: 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.

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

Last Week’s Challenge:

Before you share your progress on this week’s challenge, check out the amazing text-to-speech examples your fellow challengers posted in last week’s e-learning challenge:

101 Comments

Man! The week went quick on this one. Here's a sample for my 2017 recap http://stylelearn.com/elhchallenges/13interactivetimeline/story_html5.html
You can get the freebie here: https://stylelearn.com/stylelearnfreebies/

Butterfly Progress Meter
Demo: https://bit.ly/2CpxK3O
Download: https://bit.ly/2u7UMaW
Making the most of a 4-hour JetBlue flight delay on a Friday night. Here's a quiz about Monarch butterflies with a score progress meter. The quiz template, photos and video came from the content library. Have a good week!

You do more in 4 hours than most people (people = me) do all day. But seriously, using content library templates is a great way to kickstart a demo.
Thanks for real content in your demos. I always learn something new. Although, I think Question 6 should be "teenager" but you can present your case at the next annual user group meeting.

LOL! Flight delays account for a good portion of my challenge entries! I'd rather be productive than sulk about being stuck in an airport....and doing a challenge is better than going to the bar and drinking.

I did pretty "Standard" meters so they will probably look like others done in the past; hopefully not all of them...
Demo: https://360.articulate.com/review/content/995a2f2f-f4fa-4274-9be4-09559996b76f/review
Download: https://www.dropbox.com/s/dchcbw8n8njegz1/progress%20meter.story?dl=0

Hi Nicki, the timeline of this file is a bit messy since there a few bars on each slide, there are many elements and I was making adjustment without logical order; let me know in case something is not clear and want me to sort it out

Fitness goals: https://360.articulate.com/review/content/909d29be-2b46-41d8-9cde-9656ea83bc77/review
This one was fun to create. I used a variable to set the counter and used state change for the progress bar.
Download: http://samuelapata.com/downloadmanager/click.php?id=24

Wheelchair etiquette: http://finnberrys.co.uk/Wheelchair/story_html5.html
This is my first go at creating a progress bar. I used a slider and changed the standard button for an image of a wheelchair but I did struggle initially with making the red/green progress colour bars. Eventually, I worked out that these could be achieved by having 12 states and two coloured rectangles for each state, and just adjusting the size.
The actual content is quite text heavy. I could do with taking some better photos and video really but haven't got time at the moment. Hope you don't get bored reading it!
Oh, if you don't get bored and fancy reading my blog post about this, it's here: https://edtech-finnberrys.blogspot.com/2019/03/progress-bars-in-storyline-3.html

I made a 'to do' list as a progress meter here. The list is real, and unfinished because I was busy doing this instead of my actual list ;-)
https://360.articulate.com/review/content/e8ab901e-40a1-4d08-baff-97ee020cd04f/review
As always, comments and feedback most welcome! I'm off to fix something now...

Want to win a pot o’ gold? Play the St. Patrick’s Day Trivia Game, featuring a shamrock progress bar! In addition to the progress bar, this demo features a userName text variable and text-to-speech audio - 3 ELHChallenges in one, don't you know!
Demo: https://360.articulate.com/review/content/d54e0912-7417-4b58-ac2f-0db2b1e89a72/review
Post: https://tracycarroll.net/using-progress-bars-in-e-learning/

I use Vyond a lot, too! One of my clients decided they cannot use Vyond because of security issues, so now they are using Plotagon, because it is not cloud-based. One thing to consider is that Plotagon does not have whiteboard capabilities, so if you have video editing skills, that will come in handy with Plotagon--to add bullet points, special effects, etc.

This was my first attempt at a progress bar, and also my first proper use of master slides, so it was a little bit bumpy getting it to work. If I'd studied up on both of these first it might have been smoother sailing, but where's the fun in that?
https://rosiew.nz/2019/03/19/progress-bar-elearning-challenge-of-the-week-224/

Hi everyone,
First submission for someone who's relatively new to the whole e-learning shebang.
I didn't have long to work on this so it's a little raw but I hope you enjoy this water themed animated progress bar.
https://360.articulate.com/review/content/389afb81-2f52-4d94-84bf-bf38c58d4bc9/review

Thank you for the kind words Tracy.
Thanks Jeffrey - I created the wave effect in the progress bar using photoshop, but the background is something I generated on this free resource, you may find it useful too:
https://makebackground.io

This is my first entry :)
I'm trying to commit to this to help develop my skills and portfolio.
Let me know how I could do it better! I put notes on the last slide.
https://360.articulate.com/review/content/726c0f39-5a32-4a57-8ddb-9a23536a61dd/review

This is my entry from a project I did several years ago. At that time I was working with very little bandwidth so it was even simpler than this example. I intended for this to be a template for someone who wants to learn about making a progress bar.
Demonstration: http://jeffrfiles.s3.amazonaws.com/ArticulatePosts/ELH%20Challenge%20224%20Progress%20Bar/story.html
Story File: http://jeffrfiles.s3.amazonaws.com/ArticulatePosts/ELH%20Challenge%20224%20Progress%20Bar/ELH%20224%20progressbar.story
Blog: http://practicallearningconcepts.com/blog/progress-bar-articulate-storyline-challenge

Who doesn't like Quentin Tarantino? We absolutely love his movies and we wanted to share some fun facts about his work.
Demo - http://demo.fastercourse.com/storyline/FasterCourse_Tarantino/story_html5.html
Source files - https://fastercourse.com/download/free-storyline-360-template-fun-facts-about-quentin-tarantino/

I updated an old example with a progress indicator (upper right corner of each question). The progress indicator shows a.) how many questions a learner selected, b.) what the current question is and c.) how each question was answered (correctly or incorrectly). See the published example here:
http://dev.keypointlearn.com/xcl74_SL3/ProgressIndicator/V1/story.html

Welcome to the challenges, Kris. The infographic design works well for a progress graphic.
Here's a link to your example in the recap: https://community.articulate.com/articles/progress-bars-in-elearning#KrisCastiaux

First attempt at a challenge. After spending many an evening being inspired by you guys, plucked up the courage to give it a go! A childhood spent playing Championship Manager games has resulted in this attempt at giving last nights England Vs Czech Republic game a bit of the old champ manager match day treatment. The progress bar is a slider linked to the timer.
Keep up the great work everyone
https://360.articulate.com/review/content/2f4e886a-1f2f-4990-b9b8-eebcecdbeb62/review

Welcome to the challenges, Joe. I liked the way you used a slider as a progress bar/timer.
Here's a link to your example in the recap: https://community.articulate.com/articles/progress-bars-in-elearning#JoeHarvey