Creating a digital scale in Articulate Storyline: Part 3

Muhammad Nurul Islam | 07/31/2018

Animation is a great way to increase engagement in your eLearning courses. Adding a little movement to a static slide can set a more realistic scene and bring your eLearning to life. And the good news is - Articulate Storyline makes it easy! 

In two of my previous blogs, I've showed you how to create a digital scale, and then how to use this scale as part of a question slide. In this third instalment of the series, I am going to show you how to animate this scale to bring your feedback slide to life.

Before we start

This tutorial builds on the steps we covered in part one and two, and you will need to complete all steps in the previous parts before beginning part three. 


Step 1

In this example we want an animation when the learner selects the incorrect answer. This animation will turn the dial to the correct answer – which in our example is 2.5kg.

To do this we need to add two off-slide shapes:

  1. One shape for when the answer is less than 2.5kg, which we will name BT_add.
  2. The other shape will be for when the answer is more than 2.5kg, which we will name BT_subtract.

Digital scale pt3 - 1Digital scale pt3 - 2

You might be wondering why we need these shapes, and the answer is to help Storyline differentiate if the incorrect answer is more or less than 2.5kg.

If the incorrect answer given is more than 2.5, the BT_Subtract shape will move and trigger the dial to move down to 2.5. If the incorrect answer is less than 2.5, then BT_add will trigger the dial to move up to the correct answer.

Step 2

We then need to set up an animation path for each of these shapes of 0.5s.

Digital scale pt3 - 3

Digital scale pt3 - 4

Step 3

Our next step is to add a condition to mark when the buttons will move. We want the:

  • BT_add button to move when variable dial 2 is smaller than 2.5kg.
  • BT_subtract button to move when the variable dial 2 is greater than 2.5kg.

Step 4

We now need to add a trigger to give the illusion of the dial turning to the correct answer.

If dial 2 is less than 5, we need to add a value of 1 until it reaches 5 (which is the dial marker for our correct answer of 2.5kg). You can see how I set up this trigger below:

Digital scale pt3 - 5

Once the animation is complete, it will add 1 to Dial 2.

However, if your learner has selected a lower answer, for example ‘0.5kg’, you will need the dial to add more than one. To do this we loop the animation with another trigger: 

Digital scale pt3 - 6

Step 5

We then repeat the last step for the BT Subtract button, however we will subtract 1 when the dial is larger than 5 and stop once the dial 2 = 5. Your final triggers on the incorrect layer should look like this:

Digital scale pt3 - 7

Now your incorrect layer will have a small animation showing the scale shifting to the correct answer – which will add a bit of fun to your course, versus a static answer!

Remember, if you don’t have Articulate Storyline 360, you can still create this animation, by using a slider, instead of a dial.


Articulate Training from the UK's only certified training provider

Want to learn more about Articulate Storyline? Omniplex are the only Articulate certified training partner in the UK. To learn more about our Storyline training offering click here, or get in touch.

Learn more

Muhammad Nurul Islam

Muhammad is a content developer at Cursim, Omniplex's learning design and development division

Related Articles