Forum Discussion
Progress bar with 100 steps
- 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):
- 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!
I agree with Andrew the clueless is a timesaver and cost is minimal.
Or you can build it, I dont think there are any shortcuts getting it from someone else as the size of the bar likely wont fit your design.
It will take you about 3-4 hours to build including the triggers. There is a guy on LinkedIn who has a progress bar but I forget his name.