Forum Discussion

PetraZellweger's avatar
PetraZellweger
Community Member
2 months ago

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>

     

    • PetraZellweger's avatar
      PetraZellweger
      Community Member

      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.

      • SamHill's avatar
        SamHill
        Super Hero

        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

    • VicovandenEv121's avatar
      VicovandenEv121
      Community Member

      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?

      • SamHill's avatar
        SamHill
        Super Hero

        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?

      • ElizabethPat123's avatar
        ElizabethPat123
        Community Member

        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.

  • stevekansan's avatar
    stevekansan
    Community Member

    I found that the next version (October 22 Build) was publishing the progress bar correctly.