Explore the community Forums Lectora Lectora Questions & Answers Circular Progress Bar? Reply To: Circular Progress Bar?

#428039 Score: 0
Profile photo of Andrew Cadieux
Andrew Cadieux
Member
beginner
intermediate
friend finder
wise owl
@acadieux7729

Dude, just implemented this in a course. Works great. I even added a variable to track if a page is visited, then set that as the number to divide to prevent the circle from bouncing all over the place in a non-linear course.

My addition:

Make a variable such as _visitedPageCount = 0

Make an OnShowAction that adds 1 to _visitedPageCount if ThisPage = Not Yet Started.

Then edit RadialJS var y:

document.addEventListener(“DOMContentLoaded”, function(event) {

var x = VarPagesInChapter.getValue();
var y = Var_visitedPageCount.getValue();
var progress = Math.round(y/x*100);
document.getElementById(‘pct’).innerHTML = progress+’%’;
document.getElementById(‘radial’).classList.add(‘p’+progress);
});

 

One thing that bothers me though is that my progress bar only seems to update to the previous pages progress count. For example if I’m on page 3, even though my visited page variable records 3, my progress circle only seems to reflect that I’ve completed 2 pages. If you refresh the page the circle catches up. Any ideas? I tried window.Event but that seems to be a mistake.