Dynamic Progress Bar

Dec 04, 2013

wesley lyne
By wesley lyne

Hi Guys and Girls,

I am new to storyline so please give me if this question is easily resolved.

PROBLEM ONE:

I would like to have two progress bars horizontally across the bottom of my module, both on top of each other.

One bar in a light grey would indicate to the user how far they are through the elearning module, this would go up and down depending what slide they are on. I think I have this working using a number variable. Each slide setting a variable (Progress) to 1, 1.1, 1.2, 1.3, 2, 2.1, 2.2, 2.3 etc.... I then have a progress bar in my master slide which has twenty five states, one state for each slide. The bar is 600px wide when the module is complete, so the bar would increment by 24px once each slide has been viewed. I then some triggers in the master stating that if the progress variable is equal to 1, 1.1, 1.2, 1.3 etc then change state of the progress bar to reflect that. 

This does seem to work but does fall down if you then go back to the start then work your way back through.

PROBLEM TWO.:

My next dilemma, seems more complicated, but maybe because I am new to articulate.

My second progress bar which would appear on top of progress bar one, would be a shade of red to show how much of the course you have completed. Meaning that is would only go up if all previous slides had been viewed. This is due to the user being able to access any slide at any time via the menu. An example of this would be if a user used the menu to access slide 10, but hadn't viewed any other slide. Progress bar one would move up and indicate to the user where they currently are in the module (just under half), but progress bar two would not move. This is due to the user not viewing all previous slides (7,6,5,4,3,2,1).

The way I have this set up, is roughly the same as progress bar one, but using a different variable named SlideVisted and this is again a number variable. I then have a boolean variable (true or false) significant to each slide (SlideOneVisited, SlideTwoVisited , SlideThreeVisited ), and this is set to true when clicking the next button on each slide. Meaning once next is clicked on slide one, the SlideTwoVisited is set to true.

I then have an if statement present on each slide, setting the SlideVisited to 1, 1.1, 1.2, 1.3 etc depending on slide ONLY if all slides previous have been viewed. Meaning SlideOneVisited, SlideTwoVisited etc will be true.

I then have the same case set up in the master as progress bar to increment upwards as the variable goes up.

IM SORRY IF THIS SEEMS LIKE I AM WAFFLING ON A BIT!

ANY HELP WOULD BE APPRECIATED.

I can of course upload the story if that helps.

Kind Regards,

Wesley

7 Replies
Dennis Hall
over 10 years ago12/04/13 at 3:58 am (UTC)

Hi Wesley:

Since you have the one progress bar working fine, I will not comment on that one.

Your second progress bar (the red one) can be managed using a number variable (let's call it NumSlidesViewed) that counts plus 1 for each slide viewed. If the user clicks on slide 10 after opening the course (which opened slide 1, your variable would equal 2.

You can assign an object to each value of the variable using triggers as follows:

Global Variable: Create the NumSlidesViewed variable as a number variable.

Slide Trigger: Create a trigger on ALL slides that increments the value of NumSlidesViewed by 1 (this can be at start or end of timeline, or even applied to the Next button).

Object trigger: Create an object (let's say a rectangle named SlidesViewedBar1 through total; slides number) that has a hidden state by default (this will be your red progress bar).

Slide Trigger: Create a trigger that changes the state of SlidesViewedBar# to normal based on the value of NumSlidesViewed.

With this method, it does not matter what slide the user is on, the value of NumSlidesViewed is what will cause the object to display the specific state and is independent of the order they were viewed.

Hope this helps.

Best Regards,

Dennis Hall

wesley lyne
over 10 years ago12/04/13 at 4:54 am (UTC)

Hey Dennis,

Thanks so much for you quick response.

This sounds like a good solution to the above problem. However there are next and previous buttons accessible on each slide, meaning a user can navigate back to a previously viewed slide. Would this effect the variable if you are incrementing the variable but one each time the slide is viewed.

For example if slide 4 has now been viewed and the variable "NumSlidesViewed" is now equal to one, then the user then moves onto slide 5 and wants to navigate back to slide 4, surely "NumSlidesViewed" is now going to be equal to 2 and effect the current state of the progress bar?

I appreciate the help so far Dennis.

Wesley

wesley lyne
over 10 years ago12/04/13 at 6:25 am (UTC)

Hi Eric,

Thanks for your help.

So for example, if I have group of variables related to each slide. Say SlideOneViewed, SlideTwoViewed, SlideThreeViewed etc 

Can I then set those boolean variables which are initially set to false, to change to true when timeline starts?

Will those variables be accessible from slide to slide?

The reason I ask is because I only want my progress bar to go up if previous slides have been viewed. For example if I am currently viewing slide 5 of 10 and I have not viewed 1,2,3 or 4, the progress bar will not move. This will only go up one all of these are viewed.

I was thinking of using the variables assigned to each unique slide to then pass into a general number variable.

Eg/ We are currently on Slide 5 of 10

SlidesVisited == 5

IF

SlideOneViewed = true

AND

SlideTwoViewed = true

AND

SlideThreeViewed = true

AND

SlideFourViewed = true

After the SlidesVisited is updated, a shape in the master slide assigned as the progress bar will then updated.

I have set up a group of slide triggers up in the master like these below.

Change state of Progress bar to SectionOne if SlidesVisited == 1

Change state of Progress bar to SectionTwo if SlidesVisited == 2

Change state of Progress bar to SectionThree if SlidesVisited == 3

There are several states set up in the progress bar to reflect the slide. (600px rectangle incrementing upwards by 24px per slide. 25 slides in total).

This discussion is closed. You can start a new discussion or contact Articulate Support.