Forum Discussion
Progress bar with 100 steps
- 4 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):
- Create a new variable and set this to the value Project.Progress (in the slide master).
- Load the mentioned JavaScript is the slide master.
- Create a rectangular that will contain the progress bar.
- 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!
Hi Jeroen,
You could just use a plug in for Storyline.
Cluelabs make lots, and one of them is a progress bar. Ive used it myself and it works well:
https://cluelabs.com/widget-demos/progress-bar/index.html