Forum Discussion
Progress bar with javascript not working in new versions
Hi all. I am new here. Maybe a beginner question....
I found out that my javascript progress bar doesn't work after the updates past 8th october 2024. I couldn't find out why, tried with the console and different ways. I think the <div> is not visible or not inserted. Could you please check my script in the example file? Probably you have seen this scipt in other projects, its from the web.
Behaviour:
start slide (without progress bar)
1. slide - master slide 1 - progress bar works fine the first time.
2. slide - master slide 1 - progress bar failes.
3. slide - master slide 2 - progress bar works fine.
4. slide - master slide 1 - progress bar works fine.
If I have two slides with the same master slide in a row, on the second slide the progress bar failes.
I upload a example with 4 slides. The script is on the master. Any help is welcome. Thank you.
Hi Petra,
I just checked my own template that uses basicaly the same progress bar and JS, and it also doesn't work anymore :-(
Can't figure out what changed because it worked fine in the past, so definitively is caused by the update you mentioned.
Hope someone has a workaround for this....
Hi PetraZellweger not sure if you'd be interested, but this is a progress bar that I have developed. It uses a WebObject to and imports an HTML page that is used to display the progress bar. The progress is calculated on the built-in variable Menu.Progress, which calculates progress based on visited slides. The style of the progress bar is controlled by some Storyline defined variables:
-
pbBorderWidth
-
pbBorderColor
-
pbBorderRadius
-
pbFillColor
When you import the WebObject, you just defined the size (height and width) and position that you want. The HTML page in the WebObject then initialises the style of the progress bar (once), and updates the progress as the user progresses.
Note: This progress bar is based on the percentage of the module complete (visited slides), therefore if the user navigates backwards, the progress bar will not go backwards. If 80% of the slides are visited, then the progress bar will remain at 80% even when navigating backwards.
I've attached a Storyline example, as well as the index.html to import as the WebObject. Once the WebObject is imported, it is bundled in your Storyline file and is no longer linked to the file that was imported.
Update: It's not letting me attach the HTML file used for the WebObject, so I'm just putting the HTML page source code here:
<!DOCTYPE html> <html lang="en" id="pbiframe"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Progress Bar</title> <style> * { margin:0; padding:0; overflow:hidden; } #wrapper, #progressbar { box-sizing: border-box; position: absolute; background-color: transparent; } #wrapper { width:100vw; height:100vh; border-style:solid; } #progressbar { height:100vh; width:0%;} </style> </head> <body> <div id="wrapper"><div id="progressbar" data-initialised="false"></div></div> <script> REBUS = (function(){ return { init: function (progressbar, wrapper) { const player = parent.GetPlayer(); const borderWidth = player.GetVar('pbBorderWidth'); const borderColor = player.GetVar('pbBorderColor'); const borderRadius = player.GetVar('pbBorderRadius'); const pbFillColor = player.GetVar('pbFillColor'); wrapper.style.borderColor = borderColor; wrapper.style.borderWidth = borderWidth; wrapper.style.borderRadius = borderRadius; progressbar.style.backgroundColor = pbFillColor; }, updateProgressBar: function (progressbar) { const player = parent.GetPlayer(); // Get player vars const progress = player.GetVar('_playerVars.#menuProgress').replace('%', ''); // set the width of the progress bard progressbar.style.width = Number(progress) + '%'; } } })(); const progressbar = document.getElementById('progressbar'); const wrapper = document.getElementById('wrapper'); // initialise the progress bar if(progressbar.dataset.initialised === 'false') { REBUS.init(progressbar, wrapper); progressbar.dataset.initialised = 'true'; } // update the progress bar REBUS.updateProgressBar(progressbar); </script> </body> </html>Hi Sam, thank you for your example. What I coudn't figure out are the colors. Where can I change that?
However, I hope there is a soloution with my script and someone can help.
I opened a ticket, but no solution from the support.Hi PetraZellweger, you can update the colours through the variables in Storyline. Check out the Storyline I provided and then take a look at the variables that are defined and used for the colours:
pbBorderWidth: Border width
pbBorderColor: Border colour
pbBorderRadius: Border radius (curve)
pbFillColor: Progress bar fill colour
Thanks for sharing Sam!
Using the Webobject method makes it hard to share the Storyline file as a template with other team members, since they all have to put the index.html file on their harddrive and then change the path to this file in the WebObject.
Is there an a way implement the code into the Storyline project so the extra steps aren't needed?
Hi VicovandenEv121, using a WebObject bundles the HTML file in the project. Once inserted, you could delete the index.html file and it still exists in the Storyline file. Sharing the Storyline file with the WebObject includes the bundled files. This is why I use this method as it is set and forget. No pre/post publish edits required, no linking to files on your system
-
Hello everyone, I have come closer to solving the problem. It is probably due to the loading time of the DOM. Maybe the script works if it is executed with a small delay. What do you think? Is that possible?
Good news! I changed the triggers on the master from "when the timeline starts" to "when the timeline reaches CUEpoint #1" and I set the CUEpoint to 0.2 sec.
Now the progressbar works :)
Tried a couple of things before finding this post. Nothing worked. Changed trigger on Master Slide to when timeline reaches cue point (0.15s). Don't love that the progress bar flashes on each slide but better than randomly appearing on some slides and not others. Thanks for the quick fix.
I changed my progress bar in my projects to this one:
How I Made This Progress Meter in Storyline 360 | Articulate - CommunityIt works fine but it is a bit of work. I hope that will work for you as well.
I found that the next version (October 22 Build) was publishing the progress bar correctly.
Did you try the most recent version? Doesn't work for me ;(
