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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #359927 Score: 0
    Profile photo of Atlanta Joe
    Atlanta Joe
    Member
    beginner
    intermediate
    curious george
    contributor
    wise owl
    profile
    13 pts
    @joejubee

    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.)

    #360051 Score: 3
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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.

    This post has received 3 votes up.
    #360099 Score: 1
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    118 pts
    @mnotermans5114

    With SVG is an option, i know i have a sample of that somewhere..searching it now 😉

    This post has received 1 vote up.
    #360101 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    Math, why bother with svg, the above is pure css.

    #360105 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    118 pts
    @mnotermans5114

    🙂 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 🙂

    #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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.