Using Progress Meters in E-Learning #60

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.

Last Week’s E-learning Challenge:

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.

176 Comments

Hi all, here is my entry for this one:
Demo and Blog: http://veronicab.com.au/customised-progress-meter/
And a follow up post with video: http://veronicab.com.au/video-how-to-develop-a-customised-progress-bar/

Nicely done, Veronica! I like how you set up the feedback. Just updated the recap: http://www.storylinedeveloper.com.au/samples/SumsPractice/story.html
I know you already submitted a demo for the math challenge, but this would be a great demo to share.

Hi everyone! Just a quick post to let you know the progress meter recap is current: https://community.articulate.com/articles/using-progress-meters-elearning-recap
If you shared an example and it's not in the recap, let me know immediately so I can add it. Thanks!

What a fantastic example, Wendy! Thanks for sharing it in the progress meters challenge.
I just updated the recap to include your project: https://community.articulate.com/articles/using-progress-meters-elearning-recap#WendyFarmer

Here's a progress meter per slide on a quiz template: http://bit.ly/1Rat9pw
You can get the FREEBIE here: https://community.articulate.com/discussions/building-better-courses/freebie-sl2-quiz-template-with-progress-bar

This project incorporates a progress meter. It's my first progress meter, so fairly simple in design but it shows the learner how close they are to completing the problem set.
Blog Post - http://meaghanlister.com/2016/07/18/elh132-raindrop-math-javascript/
Published File - http://meaghanlister.com/elh-challenges/raindrop-math/

Thanks Veronica for the feedback. I really appreciate it. This one was definitely more challenging and I still haven't figured out the javascript I want for subtraction problems, but I'm pretty happy with it.

Late entry but I've been wanting to do this for a while. For my project, I attempted to leverage the progress meters that have been pre-made and are contained in the Bootstrap library. Basically, I took the code for the bootstrap progress bar (located on w3schools.com), modified it slightly, and then used JavaScript to add it to the top of the StoryLine player and to manipulate it.
YouTube Video: https://youtu.be/tCrML7LCWY0
Published file for review on 360.articulate.com: https://360.articulate.com/review/content/c7d3fb3d-f776-4644-86a1-b1f07929eb1e/review
Also, you can learn more about BootStrap Progress Bars here: https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

Hey Owen that's really neat. How reusable is this progress meter across different projects? Is it something you can easily update for any project need?
Thanks for always sharing such out-of-the-box ideas and examples.
I've added your example, forum discussion, and YouTube video to the recap: https://community.articulate.com/articles/using-progress-meters-elearning-recap#OwenHolt

I made this today, demo: https://s3-us-west-2.amazonaws.com/exampleofelearning/progress-meter/progress-meter+-+Storyline+output/story_html5.html
download: https://s3-us-west-2.amazonaws.com/exampleofelearning/progress-meter/progress-meter.story.zip

Hey everyone! Just a quick note to let you know this week's challenge is current: https://community.articulate.com/articles/using-progress-meters-elearning-recap
I had to remove some examples because of dead or broken links (Google Drive, Dropbox, etc). If you shared an example but don't see it in the recap, please post it again in the comments.

Flashback to 2014 this week? I didn't even know what Storyline was (or that it existed) in 2014. So, I'm entering a submission showing a progress meter for a single course activity. I use these at times for Select Many activities to give them instant feedback on each selection. Enjoy.
http://www.goscontracting.com/e-learning-heroes-challenge-60-progress-meters/

Cool example, Ryan! I like the way you used your progress meter both to indicate progress as well asa type of scoreboard. Thanks for activating the challenge time machine this week:-)
Recap updated: https://community.articulate.com/articles/using-progress-meters-elearning-recap#RyanDerber

Alright, y'all. I got this GUI some time ago and wanted to try it out, so let's see what you think about this demo. It's just a quick build, so you know there could be refinement for hover states, sounds, etc.
https://360.articulate.com/review/content/bf1cd92d-6768-46ed-a78a-d7ffb50f8f87/review
The "progress meter" would be the progress screen if you click on the STAR icon on the start page. I wanted the state of Level One to change from Incomplete to Normal when Level One is complete, so I used a variable, going from False to True. However, it won't change to normal. I'll keep working to figure it out, but you can get the idea here anyway.

Wow x 2, Angela. I updated the recap quickly but need to go back and spend some time with your project. Fantastic example!
Recap: https://community.articulate.com/articles/using-progress-meters-elearning-recap#AngelaConrad

Hi all,
My progress meter is much simpler (and less fun ;)) but this is something I've been toying with for the course I'm building. I rather like it.
https://360.articulate.com/review/content/4a227c7d-2163-49d5-9546-a424c9333d57/review

Hey everyone - Just a quick note to let you know the recap for this week's challenge is current: https://community.articulate.com/articles/using-progress-meters-elearning-recap/
If you shared an example and it's not in the recap, let me know so I can add it!

Hi all - bit late to the party but I just shared a file in the forums that shows two ways of using progress meters. I don't currently have a way to share published output so posted the .story here: https://community.articulate.com/discussions/building-better-courses/a-couple-of-ways-to-use-progress-meters