Explore the community Forums Lectora Inspire Tools Questions & Answers HTML/JS Integration in Lectora

Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #449681 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Hi Everyone,

    I’m novice in JS and I’m trying to integrate this customized progress bar: https://www.w3schools.com/howto/howto_js_progressbar.asp into my Lectora title.  For two days now, I’ve been reading most of the articles on this topic, in forum and on the Internet, but to no avail.

    Can anyone please describe for me in simple bullets how to do that?  I’m looking also for simple steps to use whenever I want to use JS in Lectora.

    Many thanks,

    #449683 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    69 pts
    @wheels

    Hi Therese @tmichael9734,

    I’m curious as to why you don’t use the Progress Bar object that is part of Lectora?

    Thanks, – Joe

    #449687 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Hi Joe,

    Thank you for your quick response.  I want to customize the Progress bar for 2 reasons:

    1- I need the percentage of completion for accessibility reasons.  AT users cannot see the bar when it advances but at least they can hear the remaining percentage.

    2- I really would love to learn how to integrate JS in Lectora, for some fun stuff.  People are saying that Lectora provides flexibility of using JS and HTML gadgets and creating more appealing and interactive courses, and I want to taste this experience myself.

    Thank you again,

    #449700 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    69 pts
    @wheels

    Therese @tmichael9734

    Thank you for the explanation!

    There are many ways to do this, I decided to put all the code inside a HTML Extension as an example. You can then size the HTML Extension object as you would like and it will be the progress bar.

    I have attached my example as a Lectora Online Package file. It can be imported into either Lectora Online or Lectora Desktop.

    See if this helps you. There are many skilled developers in the forums, so I hope they post some other solutions, maybe with some more details 🙂

    Hope this helps.

    – Joe

    • This reply was modified 3 weeks, 2 days ago by Profile photo of Joe Wieloch Joe Wieloch. Reason: spelling
    #449704 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Perfect!!! Thanks a lot Joe! Let me try it and will come back to you 🙂

    Meanwhile, I’m open to all ideas from the forum pros!  One never stops learning and I’m learning from all of you!

    Many thanks again,

    #450017 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
    129 pts
    @mnotermans5114

    One of the first things you need to know when starting with Javascript is the use of selectors. A ‘selector’ is a way to select part of a page. That can be an image, a text or anyother page-element. JQuery for example is a library originally designed to select page-elements easily.

    So when you are familiar with the most common Javascript selectors, both in plain javascript ( often called ‘Vanilla Javascript’ ) and using libraries like JQuery to select page-elements…you will need to combine that knowledge to select elements in Lectora.

    There is a big difference in selecting page-elements with javascript in Lectora Online and the desktop versions, so be quite aware of that…and always mention which Lectora version your working with when asking for Javascript help.

    Kind regards ,
    Math

    #450024 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
    129 pts
    @mnotermans5114

    Although this is far from ready i uploaded some course i planned on Javascript in Lectora. Time and work prevented me from finishing it, but you might find some usefull tips in it…

    https://community.trivantis.com/shared-content/first-steps-in-javascript/

    #450030 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
    129 pts
    @mnotermans5114

    And another unfinished but usefull part of that course…

    https://community.trivantis.com/shared-content/getting-started-with-javascript/

    #450036 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Hi Math,

    Thanks a lot for the tips and the sample courses.  I’m sure they’ll be very helpful for me, no matter finished or not:)  I’ll look at them and will come back to you with questions if you don’t mind.  BTW I’m using Lectora Inspire (the desktop version).

    Many thanks again and appreciate all your help and time.

    #450038 Score: 0
    Profile photo of Therese Michael
    Therese Michael
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    picture perfect
    1 pt
    @tmichael9734

    Sorry forgot to say; I’m using Lectora Inspire, V18.2

    Thanks,

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

You must be logged in to reply to this topic.