Blog Post

E-Learning Challenges
2 MIN READ

How Do E-Learning Designers Show Learner Progress? #409

DavidAnderson's avatar
2 years ago

Showing Progress in E-Learning #409: Challenge | Recap

Progress bars are a great way to help learners stay on course by highlighting what they've completed and how far they have left to go.

As course designers, you have many ways to display learner progress. There are barsgaugesbadgespage numbers, and more. Progress designs can be playful, functional, or visually aligned with the course content. No matter which design approach you use, keeping learners on track is what this week's challenge is all about!

Challenge of the Week

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

Related Challenges

Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new 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 to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

Last Week’s Challenge:

Before you progress through this week's challenge, check out the interactive timelines your fellow community members shared over the past week:

Interactive Timeline Examples RECAP #408: Challenge | Recap 

New to the E-Learning Challenges?

The weekly e-learning 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.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

Next Week’s Challenge

  • Next week's challenge #410 (Mar 24, 2023): Webcam Video Presentations. That's only a working title. We're looking for webcam video presentations to highlight a project or technique you used in a course. See this example from Kate to get an idea of what the challenge will be about.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

Published 2 years ago
Version 1.0
  • Hello everyone! Must say it took a bit of thinking this time to figure out what kind of progress indicator it should be and what topic we would like to cover. And just because we had a lovely dinner with coworkers, where we talked about winter, skiing, shooting and biathlon, it seemed only logical to go with biathlon. Be quick and precise to avoid those penalty loops! Enjoy!

    Demo: https://demo.fastercourse.com/storyline/FasterCourse_ProgressInCourses/story.html
    Download: https://fastercourse.com/download/free-storyline-360-template-progress-in-course/
    • Ange's avatar
      Ange
      Community Member
      Love the graphics and the layout.
      • KarlisSprogis-d's avatar
        KarlisSprogis-d
        Community Member
        Thanks Everyone, and Karin, you did have a national advantage in this one :).
    • maren_west's avatar
      maren_west
      Community Member
      Really enjoyed this Karlis! Beautiful graphics and interactions
    • KarinLorbeck's avatar
      KarinLorbeck
      Community Member
      Great layout and use of progress indicators relevant to the topic. As a Norwegian, I aced the quiz 😃
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Water Softener Installation Confidence
    Demo: https://jodisdemos.s3.amazonaws.com/409+Learner+Progress/story.html
    Download: https://jodisdemos.s3.amazonaws.com/409+Progress+Reporting.story

    Backstory for this demo: I had a huge personal learning week. I programmed a Google Nest home security system, a Sonos ARC speaker system, Honeywell Home Thermostat, TP Link Deco M5, Lutron light connect bridge, 2 smart TVs, and a Moen FLO leak detector system. I bet Ron Katz would be good at all of this! I had about 40-60 hours of personal learning (and cursing). It involved using training/instructions by all the different companies and it occurred to me that not one of companies ever asked about my level of skill or comfort. Most of the training experiences seemed to assume I knew a lot more than I did, so the instructions were over my head and the only mode of feedback was to say an online video was helpful. So I thought if I were to create a training on installing something (like my Matrixx water softener which is next week's project) I would find a way to have the learner tell me what their level of confidence was before they started, direct them to the right set of instructions, and then ask for how they felt afterward. My demo this week is inspired by what I went through and how I might self-report my progress to the company. The demo has two free-from quiz questions that could be tracked, before and after.
    • Ange's avatar
      Ange
      Community Member
      That was fun. Who knew a how-to water softening system could be so engaging!
      The pre and post states are such a marvelous addition.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Thanks for the mention. I really like how this is put together. I love the gif animations which add life to the screen and your explanations as the user selects each option.
    • jessicasusila's avatar
      jessicasusila
      Community Member
      I love this, Jodi! I really like the part with animations that asks how people feel at the beginning and after the step by step instructions- and how it provides recommendation based on our answer.
      • JodiSansone's avatar
        JodiSansone
        Community Member
        Those gifs are from flaticon.com. They have a bunch of animated icons. The only downside I see so far is you can't change the colors. They have some fun icons you can download as a gif or video.
    • KandiceKidd-730's avatar
      KandiceKidd-730
      Community Member
      Hi Jessica,

      This is beautiful! It felt like all the images just lit up the screen. I especially like how you used the button to provide credits.
    • StephenTaylor's avatar
      StephenTaylor
      Community Member
      Great idea to use the slider as a progress bar - I must try that sometime. Thanks for the inspiration.
  • Hello!

    On a recent business trip to Gibraltar, I got stuck in the British Overseas Territory when my flight home was canceled at the last minute. Fortunately, I was traveling with only a cabin bag. I watched as the other passengers reclaimed their luggage, unable to 'move on' until they had collected every item, and inspiration struck.

    My demo contains two progress meters: a traditional 'bar' meter and a 'gamified' progress meter in the form of a luggage trolley. You need to fill the trolley to move on.

    Safe travels!

    BAGGAGE RECLAIM
    Demo: https://bit.ly/elhc409
    Blog: https://bit.ly/elhc409bl
    Download: https://bit.ly/elhc409dl
    • HeatherHoff's avatar
      HeatherHoff
      Community Member
      Thank you for posting this and making the download available! I just started my free trial of Articulate yesterday and thought your project would be the perfect first one to dissect. What a treasure trove of discovery you have provided in this single file!
    • KaganLove's avatar
      KaganLove
      Community Member
      As a total newbie, seeing your creations is simply inspiring. I love looking at your work and trying to figure out the animations and back end of how each piece moves or looks or functions. Just seeing your stuff is making me learn haha!
    • KandiceKidd-730's avatar
      KandiceKidd-730
      Community Member
      Jonathan, you're a genius! This was so well done and it looked great. I couldn't stop staring at the luggage and the cart!