How to Design Visual Feedback Meters in Articulate Storyline

In a recent e-learning challenge, I shared a quick tip for leveraging infographics to give your quiz results more impact. It was a simple tip and you guys produced some great examples of results slide makeovers.

In the example project, I used a feedback meter graphic that dynamically changed based on the learner’s current score. Quite a few readers asked how I built the dynamic feedback meter, so I thought I’d share the process from start to finish.

Gauges are a great way to visually communicate a learner’s progress or scores in e-learning quizzes. While Storyline doesn’t include chart-building templates, you can easily design your own graphics using Storyline’s default shape tools.

In this video workshop, you’ll learn to use Storyline’s shape tools to build a gauge graphic for your quiz results slides. You’ll see how to customize the graphic for a variety of possible results scores. You’ll also discover how to link quiz results data to dynamically update the feedback meter based on the learner’s score.

Demo: View
Template: Download
Video workshop (outline below): View

Creating the Gauge Graphics

Setting Up the Quiz

Customizing the Results Slide

Related Tutorials

How I Built This Healthy Food Game With Drag-and-Drop
How I Built This Around the World E-Learning Quiz
Video Workshop: How I Built This Video Gallery Template in PowerPoint
Video Workshop: How to Build Infographic Elements in PowerPoint
Video Workshop: How I Built This Video Gallery Template in PowerPoint
Video Workshop: Creating Tabs Interactions in Articulate Storyline
Video Workshop: How to Design Custom Tabs Interactions
Video Workshop: How to Design Visual Feedback Meters in Articulate Storyline

21 Comments

Jeff Kortenbosch
Hero

7 years ago12/27/13 at 11:05 am (UTC)

Excellent David. Well done!

Kimberly Valliere

7 years ago12/27/13 at 12:15 pm (UTC)

Fantastic tutorial, David! I can't wait to use this feedback meter for my courses.

Ridvan Saglam

7 years ago12/30/13 at 4:28 am (UTC)

Thank you so much David. I was thinking to ask how to do this after I saw the meter picture in the weekly challenge page.

Belen Casado

7 years ago12/30/13 at 5:47 am (UTC)

Really cool, David, and I like how you adapted the player to the flat-design trend.

BJ Kamler

7 years ago12/31/13 at 9:13 am (UTC)

Love it! We'll use on our next course!

Diana Myers

7 years ago12/31/13 at 10:48 am (UTC)

David, I absolutely love this! Thank you so much for sharing and sparking some much needed creativity for me!

Rebecca Fleisch Cordeiro

7 years ago01/04/14 at 12:40 pm (UTC)

David, supa'! Already knew how to do the results slide part (thanks to lots of mentors, both Articulate staff and community). Learned SO much from the resta' the story. Thanks so much.

Kim Dion

7 years ago01/06/14 at 1:31 pm (UTC)

I loved this idea, and although I'm using Articulate Studio, I used the concept to spif up my results slide in Quizmaker. I wonder if anyone can tell me how to easily re-use this results slide in my other quizzes without creating it from scratch in each one??

Adam Judge

almost 7 years ago01/30/14 at 9:04 am (UTC)

This is great - I can think of lots of places to use it. Thanks!

Dave Holzemer

almost 7 years ago01/31/14 at 1:59 pm (UTC)

Great work.. this is totally cool!! I have a side question about the player your using to display this tutorial. The "Menu" you have shows when you click and then disappears when you are done using it.. Its a great way to save real estate. Is that a player that can be shared and used or is it already in my storyline software.. I'm a noob with this stuff :-)

David Anderson
Author

almost 7 years ago03/12/14 at 11:28 am (UTC)

Hi Dave - The player settings are saved in this template. I moved the menu to the top of the slide using Storyline's built-in player options: https://community.articulate.com/series/articulate-storyline/articles/choosing-player-features If that helps, great. If not, just let me know and we'll get you what need!

Craig Hadden - Remote Possiblities

over 6 years ago05/12/14 at 6:37 am (UTC)

Excellent tutorial! I'm new to Storyline, and this has taught me a lot about states. In the 5th video, putting the needle at the right angle seemed quite tricky. So I hope you find this new video helpful, on how to get the needle to rotate around its end instead of its centre: http://remotepossibilities.wordpress.com/2014/05/12/rotate-meter-needles-in-articulate-storyline-or-powerpoint-via-david-anderson-elearning/

Diana Myers

over 6 years ago05/12/14 at 6:46 am (UTC)

@Craig - Thanks so much for posting such a clever solution to rotating the needle. Your solution is really terrific, and so simple. I can't wait to see what else you'll share :-) Best wishes, Diana

jeff ferson

over 6 years ago07/10/14 at 11:18 am (UTC)

how do you keep the states from showing up stacked on top of each other in a retake scenario?

David Anderson
Author

over 6 years ago08/04/14 at 8:02 am (UTC)

Hi Jeff - I'm not sure I follow your question. The states for the visual meter are arranged horizontally in the states panel: http://d.pr/i/Vbzt The initial state is Normal and based on the learner's score, the meter changes to the corresponding state. I don't know if that helps but I'm more than happy to flesh it out with you. Do you have a file you've created?

Antonietta Groff

almost 6 years ago04/08/15 at 1:08 pm (UTC)

Hi David, thanks for this tutorial; really cool but I wanted to know how to use this feedback gauge with more than 5 questions since in the Custom drop down menu, you only get intervals of 20 (40, 60 etc.)? Would I have to amend the trigger condition but still only be able to see results in intervals of 20?

almost 6 years ago04/08/15 at 1:34 pm (UTC)

Hi Antonietta. That's right! Just divide the number of questions you have by 100 and then update the trigger and condition based on the new percentage. You would also need to update your graphic states to reflect the new question count. If you run into any issues, send me the file and I'll be more than happy to help out.

Cynthia Paré

over 5 years ago06/29/15 at 8:27 pm (UTC)

Awesome tutorial. Thank you David for sharing it with us. Really appreciate it!

Melanie Sobie

over 5 years ago07/24/15 at 1:49 pm (UTC)

This template is great, and I learned so much watching your video workshop! I actually learned a few other tips about working in Storyline that I did not know.