Skip to main content
timi2thelimit
timi2thelimit
Participant
September 25, 2018
Answered

Project Progress Bar

  • September 25, 2018
  • 3 replies
  • 931 views

I'm currently using Captivate 9 at work, and have been charged with creating a progress bar that indicates the overall progress for non-linear projects.  I know this will take a fair amount of javascript, and was wondering if anyone had any insight on where to begin.  Thank you!

This topic has been closed for replies.
Correct answer RodWard

A linear course and a branching course are two VERY different animals.   With a branching course there are almost unlimited possibilities about how the user would progress through it and it may NOT be necessary for them to visit all slides.  In fact it might only be necessary for them to visit a small fraction of the total number of slides in order to determine proficiency.

Since you're a web designer, try to imagine that someone wanted you to create a progress bar for a website you've built but where users are only likely to visit pages at random based on clicking links on the SiteMap page.  You'd probably tell the client that creating a linear progress bar for such a requirement made no sense.  The better way to do it would be to give the user feedback on the SiteMap page instead to show where they have been.

Instructional Designers don't think like web designers.  They're very focused on achieving the learning goal (or at least they SHOULD BE) rather than just delivering content.  That means the objective can be achieved in any number of ways, and the path is not necessarily linear.

My suggestion is that you may need to consider having more than one template for your Instructional Designers.  One template would be a simple linear course.  Another would use a main Menu slide linking out to a number of sections that the learner could complete before landing back on the Menu page each time.  Once they have completed all sections, then more options appear to progress further. etc.

3 replies

chrismay_at_delta6226261
chrismay_at_delta6226261
Inspiring
September 27, 2018

If your users can move backwards and forwards, you might want the progress bar to reflect that if they move backwards, the progress amount is shortened? That would be a visual indicator as to where the user is in the course. Just depends on how your course structure is set up and how users can move around within it.

You could poll the cp.D object to determine if a slide has been visited.

var slideList = cp.model.data.project_main.slides;

var slideArray = slideList.split(",");

var currentSlide= slideArray[cpInfoCurrentSlide - 1];

var slideVisited = eval('cp.D.' + cSlide + 'v');//will return true if visited or false if not

But it might be easier to build your own array or object to hold slide visits and iterate through that as needed, on enter frame.

To make the actual progress bar, I would make it in a webpage with CSS that you can import as a web object. It is then an easy matter to use CSS and make the length of the progress bar change as the user progresses through the lesson. To target the progress bar, you will need to publish the course and use a developer toolbar to explore the structure and determine the iframe name of the web object that will contain the progress bar.

timi2thelimit
timi2thelimitAuthor
Participant
September 27, 2018

If your users can move backwards and forwards, you might want the progress bar to reflect that if they move backwards, the progress amount is shortened? That would be a visual indicator as to where the user is in the course. Just depends on how your course structure is set up and how users can move around within it.

You could poll the cp.D object to determine if a slide has been visited.

var slideList = cp.model.data.project_main.slides;

var slideArray = slideList.split(",");

var currentSlide= slideArray[cpInfoCurrentSlide - 1];

var slideVisited = eval('cp.D.' + cSlide + 'v');//will return true if visited or false if not

But it might be easier to build your own array or object to hold slide visits and iterate through that as needed, on enter frame.

To make the actual progress bar, I would make it in a webpage with CSS that you can import as a web object. It is then an easy matter to use CSS and make the length of the progress bar change as the user progresses through the lesson. To target the progress bar, you will need to publish the course and use a developer toolbar to explore the structure and determine the iframe name of the web object that will contain the progress bar.

I'm trying to accomplish it without JS, but this is great and will look into.  Thank you!

Lilybiri
Lilybiri
Legend
September 26, 2018

Totally agree with Rod. The problem is not if you do need JS or Advanced/Shared actions (why make it easy when complicated is possible) but the analysis before either of those approaches: how do you want that progress bar to behave? Do you allow free navigation or imposed branching?  WIll you allow Backwards navigation and how should the progress bar behave?

timi2thelimit
timi2thelimitAuthor
Participant
September 26, 2018
Totally agree with Rod. The problem is not if you do need JS or Advanced/Shared actions (why make it easy when complicated is possible) but the analysis before either of those approaches: how do you want that progress bar to behave? Do you allow free navigation or imposed branching?  WIll you allow Backwards navigation and how should the progress bar behave?

I only want progress to be indicated if an unvisited slide is visited.  Any subsequent visits to slides would not be counted as progress - There would be no impact to the progress bar as a result.

End users would navigate via the custom navigation built-in to the template or through a custom ToC slide already built.

Also, I should mention this is all being developed in version 9.0.0. 

Thanks for the reply!

Lilybiri
Lilybiri
Legend
September 27, 2018

First version of 9 is buggy. Please upgrade to 9.0.2.

RodWard
Community Expert
RodWardCommunity Expert
Community Expert
September 25, 2018

Why assume you need JavaScript?  Captivate's User Variables and Conditional Advanced Actions would be easily able to handle this requirement.  However, since you said the content is NON-linear, it's really up to you as the designer to first work out HOW you would determine progress points in that type of content.  Do you have that worked out yet?

timi2thelimit
timi2thelimitAuthor
Participant
September 26, 2018
Why assume you need JavaScript?  Captivate's User Variables and Conditional Advanced Actions would be easily able to handle this requirement.  However, since you said the content is NON-linear, it's really up to you as the designer to first work out HOW you would determine progress points in that type of content.  Do you have that worked out yet?

Great point about my JavaScript assumption.  That was the web designer in me.

As for your question about progress points - My aim is admittedly a bit murky.  The progress bar would ultimately be included in a Captivate template meant for instructional designers.  This group is not proficient in Captivate but know enough to edit premade interactions for their own purposes, so the progress bar would need to account for both free navigation and/or imposed branching.

I'd have to assume backward navigation would be in play, and this leads to my current issue: How to distinguish between a slide's initial visit and return visit(s) without a defining a (user-defined) variable for each slide in the project? My concern is having non-developer types messing with variables would cause more trouble than its worth.

As for the intended behavior, I only want to indicate progress upon visiting a slide for the first time (return visits to a slide would have no effect on the progress bar).

Thanks for the quick reply!

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices