Articulate Storyline: Show User’s Progress During Quiz

Shane Coady-Barrett | 01/18/2017

In my last blog, I showed how to add page numbering to your Draw From Question Bank Slides. I’d addressed this issue as it was a question that came up during a client workshop that I ran in December.

During another workshop I ran in December, I was asked if there was a way to show your user’s progress throughout the assessment. It’s not something that’s possible with Articulate Storyline (2 or 360) out of the box. It can be done, but there’s some additional work that needs to be done.

So, if you’ve read any of my blogs, or you’re used to using Storyline, you should be familiar with using Triggers and Variables. We’re going to use just these two things to add a progress indicator to your assessment.

I’m going to assume you’ve already got a Storyline Project with some questions and a results slide. If not, please make sure you have these in place before continuing.

Step 1

The first step we’re going to look at is creating the Variables we need. You’re going to need a Variable for each of your questions, and then a Variable for when we’re in Review Mode. In this example, I have 5 Questions, so I’m going to create 5 Text Variables for these. You could look at using True/False variables for this. However, I chose to use a Text Variable as I have more control over the data.

To create a new Variable, you need to select the “Manage project variables” icon in the top right hand corner of your Triggers pane. Once the Variables Pop-up window appears you’ll need to select the “Create a new variable” icon. Once another Pop-up appears you’ll need to name your new variable. The name I chose was “Q1”

Step 1.png

However, you can name this variable anything you like. I’d recommend making it logical. The type of Variable is going to be Text and the default Value is going to be blank.

Select OK to complete adding this variable.

Once you’ve done your first one, you’ll need to create the variables for the rest of your Questions. Mine were called Q2, Q3, Q4 & Q5.

Now that all the variables are in place for our questions. We just need to create one more variable for when we’re using the Review Function.

I’ve called this Variable “Review” However, you can name this variable anything you like. I’d recommend making it logical. The type of Variable is going to be True/False and the default Value is going to be False.

Step 1a.png

Step 2

Now we have the Variable in place, we need to create a Slide Master Layout for our “Question” Slides. The reason we’re creating a Slide Master Layout, is so that we can easily attach this functionality to numerous pages, efficiently. This example only has 5 questions, so it could’ve been done at Slide Level, but if you have 100 questions in your Assessment, there would be a huge duplication of effort during your build time…

To create a new Slide Master Layout, you need to select the “View” Tab and then select the “Slide Master” Icon.

Step 2.1.png 

When inside your Slide Master, Right Click the last Layout Slide of the Slide Master. It should be called “Blank Layout.” From the Menu that appears, select Insert Layout.

Once your new Layout has been added, right click it and Rename it to “Question Progress”

Step 2.png

Once you’ve renamed your Slide Master, please format it to fit your design needs for the Module.

NB: You can name the Layout whatever you like, I just chose “Question Progress” as it’s the logical name for me to use.

Step 3

Now we have the Variable and Slide Master Layout in place, we need to insert a Text Box onto our Layout. To insert a Text Box, select the Insert Tab and then select Text Box.

Step 3.1.png

Once you’ve drawn your text box (in this example, I drew mine in the bottom left hand corner of the screen) you’ll need to type “Your Progress:”

Your text box should now look something like this:

Step 3.png

Step 4

Now we have the Variable and Text Box in place, we need to insert the first of our visual progress Indicators. This could be anything you like. I decided to choose a Grey Rectangle. Once Inserted, I renamed it to Question 1 and then added a Correct and Incorrect State:

Step 4.png

Once you’ve done your first visual progress indicator you’ll need to create one for each of your questions. In this example, I have 5. So, I’ll need to create 4 more. To do this simply, I’m going to duplicate the shape. By duplicating the Shape, it will carry across my Correct and Incorrect States.

To duplicate a shape (or any object) select it. Then press CTRL+D on your keyboard. This will create a duplicate of your object, and rename it. My duplicate object is now called Question 1 1. Once you have your duplicate shape, please re-name it and update the text. For example, I’d rename Question 1 1 to Question 2 and change the Q1 text in the shape to read Q2. Once you have all of your shapes created. Please format and design your slide to fit the design style of the rest of your module. I ended up with something that looks like this:

Step 4a.png

Step 5

Now we have the Variables in place, we need to insert the first of our triggers. This Trigger will sit on the Slide Master Layout. The reason we’re inserting this trigger on the Slide Master Layout, again, is so that we can easily attach this functionality to numerous pages, efficiently. This example only has 5 questions, so it could’ve been done at Slide Level, but if you have 100 questions in your Assessment, there would be a huge duplication of effort during your build time…

This trigger is going to sit on the Base Slide/Layer of this Slide Master Layout. It’s going to change the state of the Question 1 Shape to Correct when the Layer Timeline starts, but only if the Variable Q1 is equal to Correct.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 5.png

Step 6

Now we have the first Trigger in place for our Correct State, we need to create our second Trigger, for our Incorrect State.

Again, this trigger is going to sit on the Base Slide/Layer of this Slide Master Layout. It’s going to change the state of the Question 1 Shape to Incorrect when the Layer Timeline starts, but only if the Variable Q1 is equal to Incorrect.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 6.png

Step 7

Now we have our Triggers in place for our Correct and Incorrect States, we need to create our final Trigger, for our Normal State.

Again, this trigger is going to sit on the Base Slide/Layer of this Slide Master Layout. It’s going to change the state of the Question 1 Shape to Normal when the Layer Timeline starts, but only if the Variable Q1 is equal to (blank) AND Review is equal to False.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 7.png

NB: You will now need to duplicate each of these triggers for every one of your questions. I have 5 questions, and there’s 3 triggers. So I ended up with 15 triggers on my Slide Master Layout.

Step 8

Now we’ve set up The Variables, Slide Master Layout, our Triggers. We need to attach this Layout to all our question slides. To do this we’re going to find all the slides from our Assessment. To find these slides, go into Slide View and use the Scenes drop down to select your Scene. In this example, my Scene is called “1 Assessment”

Step 8.png

What we need to do next is assign The Slide Master Layout we created to all our Question Slides.

To do this select the first Slide in your Scene. Then press CTRL+A to select all your slides. Then Right Click any of your slides, I chose the first slide. This will bring up some further options. Select Layout from this options list and then select the Slide Master Layout we created. In this instance mine is called “Question Progress”

Step 8a.png

What this will do now, is attach the Layout we created. If you think back, this layout contains all the visual progress indicators and the Triggers to change the state of these indicators to either Correct, Incorrect, or Normal. 

Step 9

Now we have our Slide Master Layouts attached to our slides, we need to create the first of our Slide level triggers. This trigger is going to need to be on the Correct Layer of this Question and every subsequent question in your module.

It’s going to adjust the Q1 Variable to the value of Correct when the timeline starts.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 9.png

NB: You will now need to copy this trigger onto the Correct Layer on all of your questions. Please note, that you will need to change the Variable in the Trigger Wizard manually. E.g. For Question 2 the Variable would read Q2.

Step 10

Now we have our Correct triggers completed, we need to create the second of our Slide level triggers. This trigger is going to need to be on the Incorrect Layer of this Question and every subsequent question in your module.

It’s going to adjust the Q1 Variable to the value of Incorrect when the timeline starts.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 10.png

NB: You will now need to copy this trigger onto the Incorrect Layer on all of your questions. Please note, that you will need to change the Variable in the Trigger Wizard manually. E.g. For Question 2 the Variable would read Q2.

Step 11

Now what we need to do, is move to our Results Slide and add some triggers to our Retry button. These triggers are going to adjust all our Question Variables Q1-Q5 to blank when the user clicks the Retry button. The reason we need to do this, is so that when Retrying, the state of our objects go back to Normal and essentially “Reset” – if you think back to our Slide Master Layout, we have a trigger that changes the State of Shape Question 1 to normal when Q1 = (blank) and Review = False.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 11.png

NB: You will need to duplicate this trigger for all your question variables. So, in this example, there will be 5 triggers. There will already be two triggers on your Reset button. One to Reset the Results and another to jump to your first question. You MUST move these triggers above that trigger for it to work.

Step 12

While still on the results slide. We now need to add a trigger to our Review Button. This trigger is going to adjust the Review variable we created to the value of True when the user clicks it.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 12.png

NB: There will already a trigger on your Review button to review your results. You MUST move this Adjust Variable trigger above that trigger for it to work.

Step 13

We’re almost done, there’s just one more step to complete. If our Learners have reviewed our Quiz, review will be set to True. So, if they hit the Reset button and jump back to Q1 the state of the box won’t change back to Normal from Correct/Incorrect as the trigger on the Slide Master Layout says Change the state of Question 1 (visual representation) to Normal if Q1 = Blank and Review = False.

So, we need to adjust the Review variable to False when the timeline starts of the Results Slide as this is the last slide they’ll see after their review.

From your triggers pane, select the “Create a new trigger” icon. This will open the Trigger Wizard. Your trigger should look like this.

Step 13.png

NB: There will already be Slide triggers attached to your Timeline. You MUST move this Adjust Variable trigger above that trigger for it to work.

So, that’s it! Although it’s not an out of the box feature, as Storyline is so intuitive and easy to use, this functionality can be added to any of your modules in a matter of minutes!

You can see how this is done by downloading the example Storyline File that I’ve provided, here

Please feel free to contact me if you have any further questions on this blog. I can be reached at:
Shane.Coady-Barrett@Cursim.com
Shane@S-C-B.co.uk
https://uk.linkedin.com/in/shane-coady-barrett

Download Storyline file


If you’re interested in learning more about Storyline, as mentioned at the beginning of this blog we offer the only Certified Articulate Storyline training in the UK. This runs monthly around the middle of each month. However, we can also run 1 to 4-day bespoke training courses/consultancy days at your office. To find out more about this training, or everything else our trainers/consultants can offer, please contact us at sales@omniplex.co or 08444 120 550.

Shane Coady-Barrett

Shane is an instructional designer here at Omniplex.