How to create slider

vkumar9136

In my project, I need to create a slider and according to that selection, I have to move next page.

I followed the steps to create slider from a link I got on trivantis,

http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-3/

In their file it's working fine but In my responsive course it's not working. Can anyone let me know that where I am doing wrong?

I am attaching file here.

 

Thanks

ssneg

Since I am the author of that blog you are referring to, I guess I am to blame It was written before Lectora 16 was released so it might not be compatible. I'll check your sample and get back with any amendments to the code.

vkumar9136

Thanks sergey,

It's a nice idea to use slider in lectora..... when I found this blog , I got a hope that it can be done.

ssneg

So far I can confirm your source files work when published in Lectora 12, but not in Lectora 16. I have to dig into what's changed between 12 and 16 to cause this.

ssneg

Ok, I know what the problem is. JQuery UI Draggable that I use does not work with Hammer JS 1.06 that Lectora 16 uses. I updated hammer.js to the latest version (2.06) from their website (http://hammerjs.github.io/) and it works! So just update one file (you can update it every time in the published output or once in the Program Files/Trivantis/Lectora folder, where the original is taken from for publishing).

I'd also like to ping Trivantis guys and ask them to update Hammer to the latest version.

vkumar9136

Thanks Sergey,

nwilliams3743

Hi Sergey,

Thanks for your tutorials.  I was able to replicate them all and found them extremely helpful.

 

A question regarding the slider.. When moving the slider, how do we set a variable to change contents on a page depending on where the slider lands?

For example... Let's say the slider had a range of 4 with 1 step intervals.  How do we set the variable for change contents if value equals a set number.  Given the JS and CSS classes were all new to me, and having an external files, I wasn't sure how to achieve this?

Is it via lectora or do you have to do it in the my_functions.js file?

vkumar9136

Hi Nick,

you can use this code to change the Lectora variable value(In my case variable name is "slider1"), add Var to your variable when you are using in script. This is working perfect for me.

 

On the page that you want to add a slider….. create a HTML block and include the following html:

<div class="range-slider">

<input type="range" name="html-slider-example" id="html-slider-example" class="custom" min="1" max="5" value ="1" oninput="sldChange1(this.value)" onchange="sldChange1(this.value)">

</div>

 

<script>

function sldChange1(val){

if(val==1){

Varslider1.set("Always");

}

else

if(val==2){

Varslider1.set("Often");

}

else

if(val==3){

Varslider1.set("Generally");

}

else

if(val==4){

Varslider1.set("Sometimes");

}

else

if(val==5){

Varslider1.set("Never");

}

}

</script>

vkumar9136

Hi Nick, here is another option for you to show the objects on page, you can use this code:

This is working perfectly for me. you can give it a try.

 

<script>

function sldChange1(val){

if(val==1){

document.getElementById("image1111522").style.visibility = 'visible';

document.getElementById("text1111774").style.visibility = 'hidden';

document.getElementById("image1111602").style.visibility = 'visible';

}

}

</script>

krodgers6170

Hey all,

I'm also trying to create a slider that when it is dragged to a specific x coordinate range specific content will appear and hide other content. I have a total of 7 x coordinates:

1. if dragger is between 90-170, show content 1, hide everything else
2. if dragger is between 193-291, show content 2, hide everything else
3. if dragger is between 312-412, show content 3, hide everything else
4. if dragger is between 432-532, show content 4, hide everything else
5. if dragger is between 552-652. show content 5, hide everything else
6. if dragger is between 672-772, show content 6, hide everything else
7. if dragger is between 792-892, show content 7, hide everything else

I mimicked the coding from Sergey's tutorial and got the slider to work but I'm curious if I need to write an external script for the conditions above or it can be done with variables in Lectora. I'm struggling with where I could define the coordinates.

Thanks,

nwilliams3743

Hey Vimal,

Thanks a tonne for the advice! Can you post a sample of this if possible?

klaatu

This range slider is all CSS and so far in my tests it seems to work with the non web standard RCD output.