Sliders as Progress Meter - Change state of radio button to visited only once no matter how many times visited

Hi Heroes,

I'm using a slider as my progress meter with triggers and variables based on this fantastic share by Carey Glenn in this thread.  I love how it works and looks so seemless to the learner.  However, it requires that the slides be set to "resume to saved state" because it uses a Visited Flag/radio button to track slides visited and adjust the variables.   

That's causing issues because I have slides that advance automatically.  If a learner gets out of a scene and goes back in to review, they can't go back to any of the slides that have already advanced.  But if I set it to "reset to initial state" the slides can be counted more than once.

Is there any way to make the state of a radio button count only once without setting slides to "resume to saved state" or is there another way to accomplish the progress meter with progress bar?

I've attached one section of my course that hopefully makes what I've explained clear.

14 Replies
Alexandros Anoyatis

You can, but you will need to create additional shapes, triggers associated with these shapes, change calculations inside the main JS triggers, change triggers that calculate progress shape states, insert additional JS etc.

The demo will give some insight on how it all works. It is possible to update it, but it will take a lot of your time. If you feel you're going to use it on more than one occasion/course then go for it, but if not...

Alexandros Anoyatis

You will save quite a lot of time if you do the opposite. Use the 'toolkit' story as base and change the design of shapes to match your design. That way, triggers and internal logic will be unaffected.

I wanted to separate the design from the logic as much as possible, so they don't interfere.

So in order to make the menu objects changeable, I had to resort to a lot of workarounds so there's no "tampering" of the internal logic. i.e. it's easy to change the look and feel and/or use your own progress meter states, but if you need to change the logic behind it, it'll be veeeery complicated.

Sherrie French

My needs are much simpler than your design.  I have four meters and percentage trackers on the progress slide to reflect the number of unique visits to a slide in each of the four chapters.

  progress menu

I have 3 types of variables for each chapter (ScreensInChapter, ScreensPercentChapter and ScreensVisitedChapter).  The master slide for each chapter includes a radio button that marks the slide as visited, which changes the ScreensVisitedChapter variable to +1.  But this is where it has to be set to "resume to saved" because it will keep adding 1 each time the slide is visited otherwise.


Alexandros Anoyatis

The point of the template as is, is that you can modify one variable ("SlidesPerChapterArray") and the whole table of contents is constructed automatically, and the progress bar for the course just works on its own.

Coming back to your scenario, since you're not viewing the contents of the chapters (i.e. the slides within them), you can ignore the 2nd layer('Slides') and reroute the chapters to the relevant slides manually.

However, since there's no individual progress bar per chapter, you will need to calculate these using Javascript.

A completed/visited slide holds the value of 1, a non visited one is 0. This is all held in one single text variable (256 zeros separated by a space "0 0 0 0 0 0 0 0 0 .... 0") that turns into an array using Javascript, then once the calculations are done, is turned back into a text variable, so Storyline can accept it.

So in this case you will need some (4) number variables to hold the percentage of the completed slides per chapter (say var 'ch1completePct'). This basically translates to : (completedSlideInChapter1/totalSlidesInChapter1)*100 = ch1completePct

But in order to track completedSlideInChapter, we should identify the range first (i.e. where to look for the status of each individual slide). For example for chapter 1 the range is 1 to 16, for chapter 2 it's 17-32 etc. (yours will differ depending on how many slides you want to support per chapter - if it's 20 then the ranges will be 1-20, 21-40 and so on).

totalSlidesInChapter on the other hand is easy to calculate in javascript, as it is already set on "slidesPerChapterArray" (another text variable holding 16 numbers in the form of "5 3 8 5 0 ... 0"), so all we need to do is seek the relevant value. That can be done by the following statement:
totalSlidesInChapter1 = slidesPerChapterArray[0];
totalSlidesInChapter2 = slidesPerChapterArray[1];
totalSlidesInChapter3 = slidesPerChapterArray[2];
totalSlidesInChapter4 = slidesPerChapterArray[3];

See? It's all easy as pie... :P