How to Use jQuery to Create a Drag-and-Reveal Interaction in Lectora


Lectora User Conference Sessions

eLearning's a Drag: Using jQuery to Create a Drag-and-Reveal Interaction in Lectora


Ms. Renota Dennard, ID/eLearning Developer

Norfolk Southern

Session Objectives:

  1. To add a script to make an object draggable in the JavaScript file
  2. To add a script to make objects accept the dragged object in the JavaScript file
  3. To add scripts to show objects after receiving a dragged object



As responsive design becomes more prevalent and Flash begins to fade, eLearning developers must come up with innovative ways to engage learners using HTML5, JavaScript, and jQuery. As we phase out Flash interactions, we must quickly learn how to supplant them with HTML5, JavaScript, and jQuery equivalents. Learners can still interact with the screen via mouse clicks or mouseover events, and we’ve all created click-and-reveal interactions, but let’s take it a step further.

During this session, you will learn how to use jQuery to make a drag-and-reveal interaction for Lectora 12. Lectora is a rapid eLearning development tool that generates HTML, CSS, and JavaScript files when published. This means that you can use scripting to manipulate many aspects of your program (one of Lectora’s most powerful features). You can create drag-and-reveal interactions in programs such as Adobe Edge Animate or Adobe Animate CC and import them directly into Lectora. However, this session will focus on teaching you how to create this type of interaction without using an animation program.

Prerequisites: Attendees should have a basic understanding of CSS, HTML, JavaScript, and jQuery. Given discussion, a Lectora 12 file(.awt), an HTML file (.html) a JavaScript file (.js), the jQuery library file(.js), the jQueryUI library file (.js), and hands-on activities, I will show session attendees how to create a drag-and-reveal interaction.

Presenter Bio:

Renota Dennard has over then ten years of instructional design experience and she’s passionate about creating engaging training programs. She’s a certified Adobe Captivate expert and she develops training in several rapid eLearning programs. She has a Bachelor's of Science in Information Technology (Multimedia and Web Technology), a Master's of Science in Information Technology (Information Assurance), and a graduate certificate in Instructional Systems Development.



Ms. Renota Dennard

ID/eLearning Developer
Norfolk Southern