Progress bar that works forwards and backwards
Jan 10, 2023
I've had a good look through some of the most popular threads on progress bars and there are some comments that touch on this but I can't see anything that actually works in the most recent version of Storyline.
I have a client who would like a progress bar that goes up as users progress and goes down if a user goes back. There should also be a percentage value displayed that shows what percentage of the project the current slide is. Again must work going forwards or backwards.
I should add that I really want to achieve this without the use of any JS at all.
This thread came close by solving the rounding issue of creating a percentage (divide the current slide number by the total number of slides and multiply by 100. Feed this value into a slider. Works great forwards. Stops working backwards.) - https://community.articulate.com/discussions/articulate-storyline/a-solution-to-rounding-in-storyline-without-using-javascript?page=4
The above solution wasn't solved by changing the slides to reset to original state OR to remember saved state (a suggestion in the comments of that thread).
Can't use the default project progress variables as they capture the users total progress through the course and don't account for the user going back (i.e if I get to 50% and go backwards then the variable is still at 50% and doesn't change again until I go further than 50%).
It seems crazy to me that there isn't a simple solution for basically saying "show me the percentage of slides viewed to the current slide out of all the slides". I must be missing something.
Anyone?
6 Replies
Well, f it's a linear course, you could set the progress bar specifically per slide. Or just show the slide# of totalSlides# on each slide; that tells the user where they are within the overall course.
Personally, I think it could be confusing to have a progress bar that goes down. A learner has still completed a certain amount of content when they return to a previously visited slide. So I think the best course of action is to convince your client to just have the progress bar work like all other progress bars do.
Yeah I know what you mean however I think it's a fair request. I see it like a progress bar on a video. It shows you the current timestamp and progress through the video not the furthest into the video you've ever watched. If that makes sense?
I've actually solved it! Posting here in case anyone else is looking for this solution. Basically apply the rounding solution shared by Radosław Kwasek in the post I quoted in my original question and then reset the "Rounding" variable to 0 at the start of each slide with a trigger.
What I was trying to do was have the reset to 0 trigger at the start of my trigger list on the master slide but for some reason that wasn't working. It wouldn't actually adjust the variable, bug?
Anyway it's a bit clunky but simply adding that reset trigger when the timeline starts on all slides will help create a nice progress bar that works forwards and backwards!
do you have a screen shot of the variables you are using or another description. I have not found in this post where the solution is. I am using the rounding solution, but a variable seems to go beyond the 7 decimals previously mentioned. I can run the math variables and the decimal part of the number is not rounded off. Being able to set a variable to type "Whole Number" would solve so many problems.
Mitch's floorscore solution is elegant and works great for me.
https://community.articulate.com/discussions/articulate-storyline/a-solution-to-rounding-in-storyline-without-using-javascript?page=3
I seem to have the complete opposite problem. in theory, just because they go backwards, doesn't mean they don't have a higher completion in general due to using the previous button after having already completed future sections. So we want our progress to show the true progress even if they go back to review a previous section.
I viewed previously shared solution (Allison) 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 current visited section, even if they already completed it and moved past it. When they revisit using the previous button, even if they've already completed sections ahead, it shows a lower percentage of progress. This occurred even when one of our top designers used a javascript solution which worked wonderfully to combat problem #1 above. However, the ADA reader read the percentage pertinent to already visited section they've returned to. We don't seem to have a dynamic solution which handles these issues, so we continue to use a state change and triggers on a rectangle shape on our course section slides. July 25 is a A360 webinar on this topic and will be interested to see if any other solutions come across.