Percentage Progress indicator (non-linear course) - Solution 1

Goal

All tutorials about showing progress as a percentage have the same limitation: you need to view the course in a linear way, no branching or other non-linear navigation. Even in the TOC the indicated Time at the bottom is supposing you are in a linearly visited course. In the TOC the checkmarks at the slides are the only way to see which slides have been visited in a non-linear course, there is no real progress indicator. Recently someone asked (again) for a progress indicator (percentage) that would be functional in a non-linear course. 

I have created two possible solutions, All is slide-based, which is the reason for the two solutions:

  1. Easiest solution will show the % on each slide, but not after having viewed the slide, but when entering the slide.
  2. More perfect solution will show the percentage after having viewed the slides. Bit more complicated.
A bunch of Boolean variables and one shared action are what you need in both cases. In the second case I needed one very short advanced action as well. JS was necessary as usual to format the percentage display (no decimals, but can easily be changed). This post will explain the first (easy) solution.

Example

I took 19 slides out of the Quick Start Project ‘League’ and didn’t edit them with the exception of the Title slide. They are just used for testing the workflow. The default playbar, with its progress bar has been preserved. That is meant for comparison with the custom progress indicator. To allow you to navigate to slides in a non-linear way, I added the Table of Content, with navigation allowed. It is in Overlay, with the default Expand and Collapse buttons. Feel free to click in any sequence, and watch the progress indicator. I choose 19 slides, not 20 to show that it is possible with any amount of slides, even odd numbers. Here is a link to the scalable version:

Progress indicator for non-linear course

Or you can watch the embedded version (fixed resolution):


Setup

Variables

Each slide needs a slide tracking variable, user defined of the Boolean type. Its start value is set to 1. Variable names are not important, I labeled them v_1, v_2,…..v_19 because it is easier to link them to the slides.  Boring work, sure but I always have a shared action ready in an external library with a bunch of variables and import them using the trick 1 explained in Rare tips for Shared Actions. Each Boolean will be toggled to 1 when visiting the slide for the first time.

Total number of visited slides will be stored in another user variable v_total, also starting with 0 as value.

The percentage viewed slides, which is displayed in a text shape (red), inserted on the first slide and timed for the rest of the project, is stored in the user variable v_perc.

The system variable cpInfoSlideCount will be used as well,which stores the total number of slides.

Events – Shared Action ‘CalcPerc’

That shared action is triggered 19 times, with the On Enter event of the slides:

The Shared Action is straightforward and needs only one parameter: the slide tracking variable:

The JS is needed to avoid too many decimals for the calculated percentage:

var perc = window.cpAPIInterface.getVariableValue(“v_perc”);  window.cpAPIInterface.setVariableValue(“v_perc”,perc.toFixed(0));

The second solution where the progress will show the percentage viewed slides more correctly will be posted in another article, with its example file.

Upvote Upvoted 0
6 responses
Hi Libyri, thanks a lot for the post, it was great, I've been wanting to do something like this for a long time. Everything worked fine for me except the last js to avoid the decimals. Where do you run it? I've tried to put it into the advanced action, in the next column, and also at the end of the column that carries the condition, before Continue, but it doesn't work for me on either side. Greetings and thank you very much for sharing
— Carmela
The JS is IN the shared action, command just before the Continue in the Then part of the conditional action. I will post the second solution tomorrow (late here), where you'll see the percentage of the already viewed slides, instead of this solution where the active slide is already added before you have viewed it.
— ir. Lieve Weymeis
Thank you very much for answering so quickly. I tried it and it doesn't work, I'm enclosing a picture of my action in case I'm doing it wrong, El El dom, 22 mar 2020 a las 20:02, Posthaven Comments escribió:
— A posthaven user
Hi! The problem was the quotes in the js, I typed them (" ") with my keyboard and it worked!!!
— Carmela
You cannot embed an image in a comment. Fine that you found the error. Wanted to ask if you checked each character including the quotes and the semicolons.
— ir. Lieve Weymeis
Thank you! Copying and pasting the quotes didn't work, so I'm glad it works. And watch you solve it with option 2 tomorrow! Thank you very much for everything you share
— Carmela