Forum Discussion
Progress bar in Articulate Storyline: Easy solution, using only one built-in variable
Hey everyone, I have created a video on how to create a progress bar in Storyline 360 - using only one built-in variable. I'm using the built-in variable Menu.Progress in the slide master.
Prior to recording this I only found solutions where you add triggers on the slides where you want your progress bar to fill up. You needed an extra variable to keep track of your progress and you would also have to put some kind of check in place, so that the progress bar doesn't fill up if you revisit a slide. If you create your progress bar this way, you have to make many adjustments when you add or delete slides in your project.
What I found is that you can use the built-in variable Menu.Progress to get rid of this hassle. I wanted to share this with you because I think it saves a lot of time in production and maintenance of your course.
I seem to be getting it to work across multiple scenes ok, but it only seems to work one way. When I move back to previous slides, the progress bar stays in the same position. It looks like I have all the triggers setup correctly (see image). Can you see anything missing?
Hi Chris, with this approach your progress bar will fill up when the learner moves through your slides. But it will not shrink when the learner moves backwards. The variables are just set up that way, which i think is a good thing, because i wouldn't want a learner to loose progress just because of looking something up in previous slides.
Hi Georg,
What if we want the progress bar to show progression in an assessment and we want to have it indicate if each individual answer is correct or incorrect (i.e. blue for correct and red for incorrect; Q1 or 10% blue, then Q2 or the next 10% red, and so on)? I'll add that questions are placed in a question bank in order to randomize them. I'm feeling a bit lost and overwhelmed by this requested solution and am beginning to think there isn't a way to determine individual answers status (i.e. correct/incorrect) that have a relative position - due to the question randomization - is possible. What do you think here?
I have followed the instructions, but I can see the progress bar only on my first slide. I am sure I am missing something important. I have recorded an application and converted them into slides. Can you please help me with this?
Hi Shilpa, the screen recordings on the slides appear in front of the progress bar. The progress bar is actually a part of the slide master, so it will only be visible if there's no content occupying the area where the progress bar is supposed to be. Normally, I would suggest cropping elements that hide the progress bar, but in your case, the screen recordings are integrated into the slide itself.
I attempted resizing your slides without using the "Scale to existing content to fit" option, but unfortunately, it didn't resolve the issue. I'll need to further consider this matter, but it's possible that the step-by-step screen recording and this progress bar may not work well together.
Hi Georg,
Thank you for the immediate response. Currently, the published file is showing the progress bar for each slide, which is a little distracting. Hence I thought the solution you offered would be perfect for my project.
I want to use a single progress bar for my project, which has one only scene.
Hi Shilpa,
i've reviewed your project and noticed two things. Firstly, there are no interactive elements for the learner, meaning they don't have to click or interact with anything. Secondly, I believe it would be beneficial to have the ability to go back in the sequence and review certain parts.
Considering these factors, I would recommend publishing the project as a video in .mp4 format. This way, you would automatically get a progress bar. If the target system doesn't support video playback directly, another option would be to publish the project as a video and then insert that video into a Storyline project. In this case, make sure to enable video controls while disabling any player menus and controls.
Best regards, Georg
Thanks Georg! You have been very helpful.
I have several scenes too. Has anyone figured out a way for it to work only on one scene?
Hi Orv,
Here's a solution for making the progress bar work only on one scene:
-
Start by duplicating the Slide Master in which you created the progress bar.
-
In one of the duplicated Slide Masters, either remove the progress bar or move it outside of the slide. Let's refer to this duplicated Slide Master as the "No Progress Bar Master."
-
Apply the layout of the No Progress Bar Master to all the slides where you don't want to see the progress bar. To do this, right-click on the slide, choose "Apply Layout," and select the same layout that is currently selected but from the No Progress Bar Master.
-
Ensure that you're using either the variable MenuSection.progress or Scene.progress for your triggers in the Slide Master with the progress bar.
I've attached an example project for your reference. I hope this helps!
Cheers, Georg
-
I viewed Allison's approach at length yesterday and thought it was great. I was about to implement her solution, when my manager cautioned me on two things: 1. for someone who uses the previous button and reviews sections already completed (which also occurs for the LMS testing/review teams), the variable used shows the progress of that previously viewed section which appears to have progressed backwards. 2. For ADA compliance, we build every course with extensive effort for a user that's using a screen reader. The reader reads the %completion of the previously completed sections if they revisit using the previous button, even if they've already completed sections ahead. This occurred even when one of our top designers used a javascript solution which worked iwonderfully to combat problem 1. above. However, the ADA reader read the percentage pertinent to already visited section. We don't seem to have a dynamic solution which handles these issues, so we opted to use a state change and triggers on a rectangle shape on our course section slides.
Thank you Georg for your video and thoughts on using the variable Scene.Progress instead of Menu.Progress. However, Scene.Progress isn't an option (i.e., doesn't appear) in the trigger condition menu. Has anyone found a workaround for creating a progress bar based on scene.progress? My project file has branching based on the site where employees are assigned (scene x for location x and scene y for location y; and the scenes have different amount of slides).
In the interim, I am just using scene.progress next to the slide number (i.e., project reference option so that I can tell that slide "x.1" is from scene x and slide "y.1" is from scene y) and the scene.progress in parenthesis next to the slide number, such as "x.13 (50%)" and "y.20 (30%)". Thank you.
Sincerely,
Brandon
Hi Brandon, Sorry i missed your post.
I'm seeing scene.progress as a condition:
So if this problem persist, it might be worth opening up a support ticket with Articulate.All the best,
GeorgThank you again, Gerog. I see it now, howeveer the Scene.Progress appears as "Progress through sc ...", but appers as Scene.Progress once selected.
You didn't actually show how to create the menu.progress piece -- can you direct on that?
Hello! The menu.progress variable is one of Storyline 360's built-in variables, so you don't need to create it. You can find it by selecting Built-In at the top of the Variables window. If that doesn't answer your question, just let us know!
Hi Oliver, no problem, first go to your slide master (View -> Slide Master).
Then go to the very first slide in the master, you‘re using for your project.
Then follow the steps, to add a variable as reference shown in this video.
hope this helps.
