Forum Discussion

JeroenVerhoeckx's avatar
JeroenVerhoeckx
Community Member
4 months ago

Progress bar with 100 steps

Hello Storyline developers! I have made and e-learning with almost 100 slides and now I would like to add a progress bar to it. I read the article and watched the video about this, but creating a ...
  • JeroenVerhoeckx's avatar
    3 months ago

    Hello Everybody!

    Sorry for the late reply!

    I ended up following the article Dynamic Progress Bars in Storyline on the website of Little Man Project.

    The only adjustment that I made was, that I changed this line:

    const myDiv = document.querySelector('[data-model-id="#"]'); // "data-model-id" OF SL RECTANGLE


    to this:

    const myDiv = document.querySelector('[data-acc-text="Progressbar"]'); // "data-model-id" OF SL RECTANGLE

     

    This way you can use the alternative text (Size and Position -> Accessibility) (in my case Progressbar) as a reference to the containing element. I learned this trick in the article that Math shared.

     

    The advantage of the above solution is that you don't need any third party service. Just a few lines  of JavaScript is enough.

     

    So in summary (for everybody who encounters this issue):

    1. Create a new variable and set this to the value Project.Progress (in the slide master).
    2. Load the mentioned JavaScript is the slide master.
    3. Create a rectangular that will contain the progress bar.
    4. Give this rectangular the same name (Size and Position -> Accessibility) as the name of the variable you created in step 1.

     

    That's it!

     

    Hopefully Articulate will build this functionality into a new version of Storyline somewhere in the future!