Forum Discussion
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 ...
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 RECTANGLEThis 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!
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!
