Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #441333 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    Passing HTML extension value”demo1″ to lectora variable “bar_slider1”

    I have been trying to pass a slider value to my lectora course. I have been through this and many other forums only to find explanations that fall short of actual giving me the answer. They show code that you should modify never show you what you actually need. So could someone please help me. I have attached the html content being displayed for you to view. I require the slider value which i take is “demo1” and i want that value passing to Lectora variable “var_slider1”. How do i do it?

    Attachments:
    1. Slider-A.zip
    #441354 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    346 pts
    @timk

    What you actually need:

    1. A variable in Lectora
      The variable needs a name, e.g. “slider1”
    2. Awareness that Lectora renames variables during publication
      A variable called “slider1” will be called “Varslider1” after publication, a variable named “var_slider1” in Lectora will be called “Varvar_slider1”
    3. Slight modification of your current script
      You have a function that inserts the slider value into that “demo1” span. The code to put the value into that Lectora variable would be “Varslider1.set(this.value);” (depending on the name of course)
    4. You need to use that variable in a Lectora action otherwise it won’t exist
    This post has received 1 vote up.
    #441380 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
    59 pts
    @wheels

    Just to add on to Tim’s answer. You can find the JavaScript name of the Variable in the Variable Manager.
    As Tim says use Varname.set() to set the variable and Varname.getValue() to get the current value.

    Lectora Online identifies the JavaScript variable names in JavaScript and HTML Extension Header Scripting and includes them automatically. Otherwise you should do as Tim suggests and use a variable somewhere so it is included and available for scripting that is being done.

    #441383 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
    125 pts
    @mnotermans5114

    Or use jQueryUI..lots of UI samples like a slider are easily to implement in Lectora.

    #441388 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    OK thanks for your messages, so i have added an action to a submit button in lectora.

    “Run JavaScript” and added the following:

    Varname.getValue(this.value);
    Var_slider1.set(this.value)

    I get an error message after pressing the submit button “[OnMClkRunJS] ReferenceError: Varname is not defined”

    What should “Varname” be?

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

    I know you’re already on your way in this direction, however, in the future you might want to consider a CSS slider. Pretty easy to work with. The attached works fine with the wonky type of responsive programming this program outputs, however, I did not alter the JS for “seamless play” so if you want tot use it you’ll have to target the parents – just don’t use seamless. I posted this a while back and updated it with the newest minimized Jquery.

    Just another option, there are numerous. Math’s suggestion is a good way to go as well.

     

    Attachments:
    1. CSS-Slider.zip
    #441404 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    208 pts
    @Klaatu

    One other thing about the CSS slider above. The CSS is old but works perfectly. It could use updating (I’m too lazy) as most of it not all the vendor prefixes aren’t necessary anymore.

    #441424 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    Could i have the lectora editable file so that i can see how this works.

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

    Sorry, I thought I included it in the zip. Here is the awt and some of the other support files in case you need them.

    Attachments:
    1. support.zip
    #441477 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    Thanks that works well. All i need to know now is out to pass the slider value to a variable in lectora.

    #441480 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    346 pts
    @timk

    I’ve put the code from above into Darrels sample.

    Attachments:
    1. support_2.zip
    #441505 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    It works fine on its own. copy page and add assets and i get error, see attached

    Attachments:
    #441537 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    346 pts
    @timk

    The sample requires jQuery. It should work when you also copy the HTML extensions on title level “jquery” and “css”.

    #441545 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    I had already done that please see attached.

    #441552 Score: 0
    Profile photo of JamesHill
    JamesHill
    Member
    friend finder
    beginner
    intermediate
    curious george
    wise owl
    contributor
    @JamesHill

    Please see attached

    Attachments:
Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.