Non-Linear Progress Bar

Question 1:

Is there a way to create a non-linear progress bar in Storyline with minor programming or trigger setup? Keep in mind copy/paste triggers are fine, but custom triggers for every slide will quickly creep up our level of effort.

Question 2:

Storyline communicates with Learning Management Systems to tell it whether the user has completed/incomplete the course by either results slides or by slide completion. Is there a way to get this slide complete variable Storyline sends to the LMS so we can control our progress bar with it?

Requirement:

Our client has asked us to create a visual progress bar for their course. This course is non-linear, the user can visit slide B before Slide A.

In a linear course we would simply increment by “X” where X= 100/SlideTotal. However, in this situation we need to know if a user has visited a slide or not.

Unpreferred Solution:

The solution we found in the forums is to create Boolean variable for every slide. Upon visiting the slide we check the variables value, if it is not True then we adjust our %complete variable and then set the slide variable to True so it doesn’t increment upon revisiting.

Our progress bar is on a master slide listening to the %complete variable and adjust its state accordingly. Our progress bar has 100 states all created by adjusting the start of a gradient. This allows us to scale and change the color of our progress bar without re-creating it.

Issue:

This solution does cause for a great deal of setup, we would need to setup, two triggers for each slide (Checker / Increment) and (Change Variable). If we have no choice, we will use this solution but we are wondering if there is another easier solution as we have many slides and many courses to build.

 

We have investigated the following:

Solution 1 (failed): Create a button and change its state to selected upon incrementing variable $complete only if the state is equal to normal. We then Set the slide to “resume saved state” so the button will always be “selected” thus causing the incrementer trigger not to work a 2nd time.

In theory this should have worked however storyline buttons appear to go to a normal state for a brief second when their timeline starts which causes our trigger to increment on second visit.

Solution 2 (failed): We created a javascript code which checks the slides ID and compares it to an array, if the slide ID is not in the array we then increment %complete and then push the slide ID into the array. This however does not work because Storyline deletes the array each time we visit a slide so our information is lost.

We discovered this by opening user.js, here you see that each slide has a function. This causes a “SCOPE” issue as functions can’t talk to each other.

Solution 3 (Failed) : In addition to Solution 2 we created a second function that has global variables and put our array there, this allowed each slide to see this arrays information. The problem is Storyline deletes this array when we leave each slide and we haven’t figured out why it does this.

Solution 4 (Works but with an unwanted issue): We amended our javascript code so that it creates a temporary file on the users device, this way storyline can’t delete our array. Because we don’t want to keep information on the student’s device we delete the script when the users closes their browser. When the users returns to the course the progress bar will start at where they left off but the array is now empty which means there is not history of what slides they been to.

2 Replies
Alexandros Anoyatis
Allie Munro
Solution 2 (failed): We created a javascript code which checks the slides ID and compares it to an array, if the slide ID is not in the array we then increment %complete and then push the slide ID into the array. This however does not work because Storyline deletes the array each time we visit a slide so our information is lost.

 

This is because you are not converting the array from/into a text variable back and forth.
Have  a look at this post to see how to achieve this. The look is a little outdated but you can change that pretty easily.

Hope this helps,
Alex