Passing HTML extension value to lectora variable

jameshill
jameshill Community Member Posts: 13 ♪ Opening Act ♪
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?

Comments

  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    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
  • wheels
    wheels Community Member, Administrator, Moderator, Rockstar Manager Posts: 528 eLearning ROCKSTAR Admin Team
    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.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Or use jQueryUI..lots of UI samples like a slider are easily to implement in Lectora.
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    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?
  • klaatu
    klaatu Community Member Posts: 988
    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.

     
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    Could i have the lectora editable file so that i can see how this works.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    Thanks that works well. All i need to know now is out to pass the slider value to a variable in lectora.
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    I've put the code from above into Darrels sample.
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    It works fine on its own. copy page and add assets and i get error, see attached
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    The sample requires jQuery. It should work when you also copy the HTML extensions on title level "jquery" and "css".
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    I had already done that please see attached.
  • jameshill
    jameshill Community Member Posts: 13 ♪ Opening Act ♪
    Please see attached
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    When you publish to Scorm nothing should be on title level. Try to move it to AU Level, i.e. where "HEADER_BAR" is. You could also move it to the page, if you don't need it for the whole course.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!