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

This is the fourth and final part of my jQuery in Lectora® series, so we are going to build something exciting and learn something rather complex. But let’s first recap what we’ve learned so far:

Part 1—Why jQuery is useful and how to include it in your title. We also enhanced a multiple choice question.

Part 2—How to optimize your jQuery workflow and include external scripts. We also built a cool word clicker interaction and learned how to resize your page to fit any screen with Zoomooz.js.

Part 3—We learned about jQuery’s little sister, jQuery UI, and we also built a drag-and-drop exercise from scratch.

In this final part we’ll build two exercises that I find extremely useful in many e-learning courses. Let’s start with the Image Magnifier, an open-source script by Mark Rolich. You can download his files from Github.

Image Magnifier

First, we add all required scripts and style sheets:

Screen Shot 2014-11-25 at 3.25.48 PM

Then, we add two images (nashville_300px.jpg for preview and nashville_1024px.jpg for full size):

Screen Shot 2014-11-25 at 3.25.56 PM

Please note that the bigger image is 370x300px. It’s our thumbnail. The smaller image is just there to be in the project and it’s 1024x830px. I downsized it and set it as invisible. We just need it to be a part of our project so that it is stored in the images folder.

We assign classes “magnifier-thumb-wrapper” to the smaller image and “magnifier-preview” (full size) to the text box where the larger image will appear. In my file it’s bright yellow and says, “Hover over the image.”

Finally, we add an action “onPageShow” that runs our script after the page and images have loaded by executing “run_magnifier(3)” script. Note that you can change the function argument from 3 to something else, like 2, 4 or 5. It will change the zoom level of the picture.

Now let’s open a text editor and add the script to the “run_magnifier()” function to our my_functions.js file:

function run_magnifier(zoom) {

// initialize the script

var evt = new Event()

var m = new Magnifier(evt)

// set some extra attributes to our interactive elements:

$('.magnifier-thumb-wrapper img').attr('id','m-t-w');

var magPrev = $('.magnifier-preview').attr('id');

zoom ? zoom : 3 //default zoom level if no zoom provided in Lectora

// provide magnifier settings

m.attach({

thumb: '#m-t-w',

large: 'images/nashville_1024px.jpg',

//this file is stored in Lectora’s images folder

largeWrapper: magPrev,

zoom: zoom

});

}

Done! Now when a learner hovers his or her mouse over the image on the left, a zoomed-in fragment is shown in the image on the right. I find it especially useful for showing complex diagrams, maps, illustrations that are too big for a page and so on.

Password Strength Tester

Now let’s add a second page to our title and build a password tester using scripts and RegEx. It’s a great practical exercise for Information Safety courses, where learners can enter any random password and we’ll tell them if it’s secure enough.

Wait, what’s RegEx?

RegEx (short for Regular Expressions) is a powerful micro-language for manipulating strings. It is used in many programming languages (PHP, JavaScript, Ruby and so on), and it lies at the heart of our script as well. You can learn more here.

Ok, let’s build the password tester!

We already have jQuery, so we don’t need to add any more scripts, so let’s get to editing the Lectora page.

First, let’s add a text box with instructions, a text entry field, a button and two images for good and bad passwords.

Add a “thumbs-up” class in the Properties of the strong password image as well as a “thumbs-down” class for the weak password image.

Now look into the properties of your text entry field and note the variable. Most likely it’ll be “Entry_0001” but if you already have other entry fields, it’ll be different. You can even set it yourself. Anyhow, take note of the variable name—you’ll need it for the script.

Finally, add a simple “On Click Run JS” action and set the JS to “check_password()”. We can now edit “my_functions.js” file and create the “check_password” function:

function check_password() {

// this is the line you have to modify so that it uses the variable attached to your password entry box

pass = VarEntry_0001.getValue();

//special check for Lectora's "empty field" value

pass = pass == '~~~null~~~' ? '' : pass

// set the regex to match your password rules

// this is how it works:

// first slash opens the expression

// (?=.*\d) checks for at least one digit

// (?=.*[a-z]) checks for at least one small letter

// (?=.*[A-Z]) checks for at least one capital letter

// .{8,100} checks whether string length is at least 8 and at max 100 characters

// final slash closes the expression

// get all sorts of regex expressions here: http://regexlib.com/

rule = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,100}$/

// now if the password matches the rule, we display thumbs up image

// else we display thumbs up image

// both images always hide whenever the text in the entry field changes

// (it happens via two simple Lectora actions, so it’s not in the script)

if ( pass.match(rule) ) {

$('.thumbs-up').css('visibility', 'visible')

} else {

$('.thumbs-down').css('visibility', 'visible')

}

}

Great, now we can go it try it out. Both examples are available here live. You can also download the source files.

In Conclusion:

JavaScript is a powerful language that is very readable and easy to pick up. Basic knowledge of JS is an asset for a Lectora developer and a logical next step in your career. With it, you can build new powerful interactions that support your instructional goals, enhance learner experience and are fun to play with. I hope my four articles inspired you to think outside the box and keep your eye out for cool interactions when browsing the web. Anything that you see on the web can be matched in your next Lectora course.

Should you have any comments, questions or ideas, please don’t hesitate to get in touch directly at sergey@branchtrack.com.

Subscribe to the Lectora e-Learning Blog for more how-to articles, free resources and e-Learning fun.