Wow. If this isn’t a unicorn sighting, I don’t know what is! I’m finally participating in another e-learning heroes challenge!
The Concept
This week’s challenge was to share an example of how designers are using progress bars in e-learning. I have to admit that I chose a lazy approach, but it’s still a nice looking and effective approach.
The Method
In considering this challenge, time really was of the essence. Like I said, it’s been awhile since I’ve participated in a challenge, I don’t really have time to do so anymore without cloning myself, but I wanted to bang something out! The first thing I did was modify the player – I turned all of the buttons off, and customized the default Classic player to put it all on black (got an Alkaline Trio reference in there – it’s a successful Saturday!).
Then, I removed the next/prev functionality from each slide and instead added an Icon from the content library and applied a trigger for Next functionality.
In the master, I added a rounded rectangle with four states: 25, 50, 75, 100. Each state had the rounded rectangle filled with approximate colouring (25/50/75/100). Then, I popped in 5 slides, added some nice images of Unsplash for visual appeal. I added a numeric variable for Progress, and then added a trigger to change the state of Progress to 25/50/75/100 when the timeline started, depending on the slide we were on.
The Result
To view the full interaction, Click Here.
Leave a Reply