Passing HTML extension value to lectora variable

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?

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

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.

mnotermans5114

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

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?

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.

 

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.

jameshill

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

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.

jameshill

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

timk

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

jameshill

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

timk

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

jameshill

I had already done that please see attached.

jameshill

Please see attached

timk

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.