eLearning JavaScript

Let’s face it. Coding can be really intimidating if you’ve never worked with anything like it before. Some of you may hear the word “JavaScript” and some of its associated terms and feel your eyes roll back into your head.

Don’t panic. I get it. Like a lot of you, I’ve had no formal JavaScript training. (My schooling centered around the English and Spanish languages.) Rather, I just have an overwhelming desire to tinker, to dabble, and to learn. And that’s all you really need.

Implementing JavaScript in your authoring tools is much easier than you might initially think. Taking some time to learn your way around some simple code can really expand the capabilities of your courses and open up a lot of opportunities for fun activities and projects. In what I hope will be a multi-part series, I want to try and convince you to use JavaScript in your courses (if you’re not already doing so). Let’s start this off by taking a look at a few examples.

Printed Journal Page

This example shows how you can use JavaScript (and a premade HTML file) to create a customized print page that has a logo that you can change to match your brand. This can be used for any sort of long-format answer question or journal where you want a user to print something off and hand it in or even share in an ILT environment.


Chart Blog

In this example, we wanted to build a chart that could be dynamically changed with Storyline variables. We introduced some JavaScript libraries (in other words, a set of premade files) to help get the job done. This is a fun way to allow a user to change data and see a new outcome based on how they manipulate that data.


Yacht Game

I have a great love of games, and JavaScript really can enable you to build some fun ones. This is a project that I wireframed together (so pardon a little bit of dust) based on a popular dice game. It uses Random Number Generators to simulate the dice and Regular Expressions to help score. Regular Expressions, by the way, are just some useful bits of JavaScript code that will essentially run tests on a variable to see if a pattern can be found. For instance, I can use a Regular Expression to check my dice variables and determine if I have a Big Straight (either “12345” or “23456”).

yacht javascript

Screenshot of the Javascript regular expression.


*Note: This particular source file is a little less complete than the others. It has the Random Number Generators and the Scoring in place, but it’s missing the 2 Player mode, the results screens and a few other features enjoyed by the Storyline and Lectora versions. On the bright side, I found some more interesting (and potentially easier to understand) regular expressions for some of the score checkers and implemented them here. Either way, it should still give you an idea for some of the things you can do!

Fill in the Blank Game

This example is a particularly fun one for me. It’s another game that I wireframed together based on the popular quiz game show Wheel of Fortune. This concept and JavaScript could also be used to create a Hangman-style game, as well. When I built this game, I had some of the concepts we normally try to keep in mind with our eLearning Templates. I wanted anyone to be able to get into it and use it easily, regardless of their knowledge level. But I also wanted it to be dynamic and changeable. Sometimes those two concepts can collide.  JavaScript helped to bring them both together.

I was able to take a string (or word) variable and break it into its parts. For example, I was able to take the word SAFETY, and break it into separate variables for each letter (S-A-F-E-T-Y). From there, Lectora was able to check against those individual variables to determine how (and when) to show them to the user as they solve the puzzle.

wheel javascript

Screenshot of how to use Javascript to break up a string.

The project also used a Random Number Generator and some animated GIFs to simulate a spinning prize wheel. It’s all a bit rudimentary-looking (I never professed to be a graphic designer), but it definitely shows some of the fun things you can do!


Using GreenSock for Additional Animations in Lectora

GreenSock is a great JavaScript library that adds additional animations beyond what normally come built with Lectora. I’ll admit that this is something that I’m a little unfamiliar with, but I’ve seen some of the results of others at the company using it. And still, it’s a great example of the kind of things that you can do when you implement JavaScript into your courses and the blog can help you get started.


  • Blog (and links to source)

Hopefully, these examples will encourage you to look into using JavaScript in your eLearning courses. Hopefully, in future blogs, we can discuss some other barriers to using JavaScript and help you move past them. I’d like to discuss things like resources for beginners, planning and implementing projects, and what to do when things go wrong. If you have any questions about getting started, let us know in the comments! We can maybe discuss some things and maybe it’ll warrant its own blog post!

Special thanks to Dan Frazee, our head of development here at ELB, for his help in gathering and presenting this material for our DevLearn 2015 session.

Pin It on Pinterest