Circular Progress Bar?

joejubee
joejubee Community Member Posts: 325 ✶ Headliner ✶
Any ideas on a circular progress bar? Obviously, I could just put a different image on each page, but I'd be interested in seeing if there's an easier way to do it. (I'm not too interested in having the text percentage, more the image part.)

Comments

  • klaatu
    klaatu Community Member Posts: 988
    How about this? I think I have everything in the library object (.awo). Just drop it in the title level of your project and move the progress bar wherever you want it.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    With SVG is an option, i know i have a sample of that somewhere..searching it now ;-)
  • klaatu
    klaatu Community Member Posts: 988
    Math, why bother with svg, the above is pure css.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    :-) Found the sample i was referring too, but as it is part of a bigger project i cannot share freely, have to cut and paste things. @Darrel...  didnot check yours yet, will sure do.. ( if its complete ;-) no missing jQuery or other assets ;-) I do like SVG if only for broadening my own horizon.. Do think i will make a setup with all options for this i can think off :-)
  • acadieux7729
    acadieux7729 Community Member Posts: 1
    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.