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 progress bar with 100 states seems very cumbersome. Does someybody already have a progress bar with 100 states and are you willing to share it? Will I be able to copy the states and triggers to my master slide? Or does somebody have another idea how I can quickly create a progress bar with 100 steps?
Thanks in advance!
Verhoeckx
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!
NRZ Malik, one of the best Storyline developers around, sharing great resources... Articulate should cherish this kind of developers...
https://www.eblog.nrzmalik.com/how-to-create-a-custom-progress-bar-in-articulate-storyline/That is the one thanks Math
Sent from my iPhone
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!
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.htmlHello Andrew,
Thanks, but I see that in order to use the progress bar of Cluelabs I have to sign up to Cluelabs and register with my credit card. I'm not going to do that for just a progress bar. Another disadvantages it that the e-learning will be monitored by a third party company, which I don't want.
But thanks for thinking along!
"monitored"?! Its definitely not monitored. No data is ever sent or stored. its just pulling in a web widget at runtime, a very normal thing in web development.
Ive used them for several commerical projects and my clients were always very happy at the small cost of the plugin versus me sitting building a custom progress bar :/
Hi, Jeroen,
I don't remember where I saw it, but I vaguely recall a demo that created a progress bar by triggering a long rectangle to move on a short motion path. The rectangle was masked behind a shape that had a rounded rectangle cutout. As the long rectangle moved, it looked like it was filling the cutout, similar to how a classic mercury thermometer looks.
If you can make the width of the cutout area divisible by 100 (e.g., 800 px), that would let you set one motion path (e.g., move right 8 px) for the increments in the progress bar.
Caveat: I haven't done this myself. But it seems like it'd be easier than creating an object with 100 states.
Thanks for thinking along!
Hi Jeroen,
I've found a video with scaling a form with javascript. I liked it, because you can use build in variables for the scaling parameters. Therefore you don't have to put hands on when the slide number is changing.
Nice solution, but the others are a little bit easier.
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.
Ooooooo Math, that is very slick. Looks great!
...now where's that bookmark button? ;)
