Using jQuery and Lectora to Customize Your e-Learning Courses: Part 3

This is Part 3 of my 4-part blog about leveraging jQuery to take your Lectora® courses beyond “good” into the “awesome” territory. In Part 2, we learned how to move your scripts outside Lectora for quicker access and built a cool word game. This time we’re going to play with jQuery’s best friend—jQuery UI. 

Wait, what’s jQuery UI now?

It’s a jQuery extension for building user interface elements like accordion menus, date pickers, sliders, sortable lists, etc. as well as adding animations and effects to those. It can also make anything draggable, which we’re going to take advantage of today.

But there’s already a drag-and-drop question type in Lectora!

True. But we can do more. Bear with me.

Add jQuery UI library to our title.

Simply add one more line of code to load jQuery UI from the web or refer to my previous post to find out how you can add it offline:

jquery_Part3_1

As previously, we’ll keep all our scripting in my_functions.js for easier editing.

Create interface elements.

We’re building a slider, so we will need a draggable handle and a base line for the draggable element to slide along. I just used Lectora’s shapes to create those. We will also need a text counter and a submit button.

To let jQuery identify our interface elements, we need to add classes to them:

jquery_part3_2

Develop the JavaScript.

Here’s the documented code for the dragger and the counter:

// this function is executed on Page Show in Lectora

function init_drag_slider() {

//the minimum X coordinate of our dragger is equal to the left edge of the base line

minimumPosition = $(‘.base’).position().left;

//the maximum X coordinate of our dragger is equal to the right edge of the base line less the dragger width

maximumPosition = $(‘.base’).width() – $(‘.dragger’).width();

//make our “dragger” image draggable

   $(‘.dragger’).draggable({

       axis: “x”,                      //only horizontal movement

       containment: “.base”,           //contained with the region of the “base” image

       drag: function( event, dragger ) {   //this function is fired every time dragger moves

           //calculate the dragger position between 0 and 1

           position = (dragger.position.left – minimumPosition) / maximumPosition;

           //convert it into days

           result = Math.round(position*365);

           //update the counter

           $(‘.counter span’).text(result);

       }

   });

}

//this function is fired when clicking on Submit button

function check_answer() {

   //get the counter value

   result = $(‘.counter span’).text();

   //check for correct answer

   if (result == “221”) {

       alert(‘Exactly!’)

   } else {

       alert(‘Hint: There are 94 entirely sunny days and 127 partly sunny days.’)

   }

}

The great thing about this code is that the dragger is always limited by the size of the slider base in Lectora, so you don’t need to change the code to reuse it, just resize the slider or replace the images.

Give it that final touch.

At this point, our interaction is working, but we also need to make sure the check_answer() is fired when the Submit button is clicked. That’s just one action on the Submit button in Lectora:

jquery_part3_3

That’s it—you can publish and test the title now. Or simply take a look at the live preview or download the source title

Stay tuned for Part 4 where we build a re-useable image zooming interaction!

Subscribe to the Lectora e-Learning Blog for more Lectora how-tos and e-Learning tips.

  • It would be great if you could add “jquery” tag to this blog entry, so it can be discovered with the other part (part 1, 2 and 4).

  • Jurg van der Vlies

    Hi Sergey Snegirev, huge thanks for this post. Is it possible to scale out a bit, so the slider moves per 5 points instead of 1 point?

    Should be something with:
    $(“.dragger”)

    .dragger({
    min: 0,
    max: 100,
    step: 5
    })

    .dragger(“pips”, {
    rest: “label”
    });

    But where to add?