skip to main content

12 Things You Can Do with Lectora and Code

In: Coding, elearning, Showing my Work, 

I presented at my organizations quarterly Lectora brownbag luncheon this week on using Lectora and code (HTML/CSS/and JavaScript). It was a lot of fun preparing and I believe (hope!) that everyone found it useful. I wanted to post the presentation here as a demo of the types of things I have done and hope to do with code in Lectora.

Why Code?

There are two main reasons. The first one is that, when I first started using Lectora, I dug through the forums and one of the things I noticed pretty quickly was Lectora could be an extemely powerful and versatile tool. Thing was, the key to that power was the ability to insert code (particularly JavaScript) while developing—so, pre-production—to move beyond what you could do with Lectora natively. The problem was that, though I was familiar with HTML and CSS, I’d never worked with JavaScript (and unfortunately, the users in the Lectora forums didn’t seem to be super-forthcoming in showing people how to do these things). So I’ve set about this year on a serious mission to learn to code and, through that, I’ve found that I’ve expanded my definition of what I can do inside of Lectora. The second reason is that, when I have room to run (which I sometimes do) outside of the constraints of Lectora, knowing how to create cool interactions, interactive infographics, webpages, etc. is one way to create really cool learning objects that aren’t tied to any authoring tool. Being able to expand my thinking outside of “what can I do in Lectora?” is highly valuable when I’m storyboarding.

About the Presentation

I set out to think a little more broadly than dissecting a particular interaction since this is an inter-divisional luncheon and all of us have really specific target audiences. So I thought it would be useful to show some grab-and-go type code snippets that folks could use in their own projects. I also thought about the presentation in terms of simple to complex. In the first section, I covered things that I’ve actually done with code in courses I’ve created, moving from simple things (like changing the hover color of a link with CSS) to more complex interactions (like drawing on the screen). In the second part, I demoed even more complex interactions that can be created with code to illustrate the types of places I’d like to go with Lectora in the future. Note: On the penultimate slide, I show a magnification plugin and, if you look closely, you’ll see that it isn’t working quite right. I haven’t yet been able to figure out the necessary math to make this work with the image. But I will!

The Presentation!

Best viewed in the latest Firefox or Chrome browsers on a desktop or laptop. Click the image to view.

Presentation slide
Click to view the presentation!

To Be Continued…

My hope is to continue to create micro-courses on many of the things that I demoed so that other Lectora users can take the code snippets, learn how to use them, and tweak them to fit their own projects. You can find mini-courses I’ve already created here: http://knanthony.com/courses/ I’d love some feedback.

Credits

Images

Code Projects