eLearning’s a Drag: Using jQuery to Create a Drag-and-Reveal Interaction in Lectora — Renota Dennard

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


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.

Preview (HTML)

HTML Preview

Downloads (zip format)

HTML Lectora File JavaScript Presentation (PDF)


Zip files can be extracted using a program such as 7-Zip or WinZip.

Return to Lectora Conference Page