Introduction to JavaScript for E-Learning

Have you heard e-learning developers talking about JavaScript? Are you wondering what all the fuss is about? Good news! This is the intro you need to understand what JavaScript is, why it’s relevant to e-learning, and how you can get started using it to create dynamic e-learning with Articulate Storyline.

What’s JavaScript and Why Is It Useful for E-Learning?

JavaScript is a computer programming language developers use to make websites interactive. How does that help your e-learning courses? Well, let’s imagine for a second that Mr. JavaScript is applying for a position at Storyline Corp. The hiring manager and Mr. Player are eager to learn if Mr. JavaScript is the right choice:

If Storyline Corp. hires Mr. JavaScript, they’ll be able to use his expertise to help Mr. Player do even more. Let’s take a closer look.

Why Would You Use JavaScript?

Storyline lets you create dynamic interactions with the combination of triggers, actions, conditions and variables. That’s all available for you, out of the box, without JavaScript. Why would you use JavaScript then?

JavaScript lets you do things to extend the power of the built-in tools in Storyline. For example, augmenting Storyline with JavaScript lets you create math functions such as generating random numbers, rounding numbers up or down, working with dates and time, and more. String functions are also powerful in JavaScript. String functions are things like splitting text to count the number of words, searching and replacing text, or checking text for keywords.

Storyline's three variable types (number, text, and true/false) require different triggers to execute the actions. This means that when you're building very complex, highly interactive courses you may end up with dozens of triggers in the triggers panel.

Using JavaScript allows you to group a bunch of variables together. This can speed up the course development process and streamline the number of triggers in the triggers panel. In other words, you can accomplish more with fewer lines of code.

Where to Start with JavaScript

Think of JavaScript as an ally that you can use to strengthen your Storyline power. I would suggest learning the basics of JavaScript before you integrate it into Storyline. It makes debugging easier. Here are some great ways to really get started with JavaScript:

Keep coming back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any comments, please share them below.

14 Comments

Joanna Kurpiewska

over 7 years ago09/13/16 at 3:33 pm (UTC)

Great read and awesome video, Zsolt (I especially like the eye roll at 0:05!)

Zsolt Olah
Author
Joanna Kurpiewska

over 7 years ago09/15/16 at 1:00 pm (UTC)

HR appropriate eye roll. My favorite (just because we had to do so many trainings around interviewing) is the "Tell me about a time when you had to make a hard decision..."

Alexander Salas

over 7 years ago09/14/16 at 12:17 am (UTC)

As I remember HTML5 gives you the content, CSS the layout and Js the behavior. Great post Zsolt, excellent primer for anyone shy about coding.

Zsolt Olah
Author

over 7 years ago09/14/16 at 10:10 am (UTC)

Thanks! I mostly wanted to "humanize" the approach, make it memorable. Just enough substance to tease your palate like an appetizer in a tapas bar :) The rest of the meal is on you.

Anne Seller

over 7 years ago09/20/16 at 10:05 am (UTC)

Thanks for this post, Zsolt! I just signed up with "codecademy.com" and am digging into the "Fundamentals of JavaScript"... I've been wanting to learn JS for ages, so thanks for getting me started! :)

over 7 years ago09/20/16 at 5:43 pm (UTC)

Anne, Awesome! Come back in a week and tell us how it's going!

over 7 years ago09/20/16 at 6:35 pm (UTC)

Will do! :)

over 7 years ago09/30/16 at 5:10 pm (UTC)

Well, it’s ten days later and I’ve created variables, discovered if/else and switch statements (my favourite, so far), generated random numbers (very cool), written functions and I even know the difference between global and functional scope. Now I can’t wait to use it all in my next Storyline project! Thanks again, Zsolt for the info – Codecademy’s free „Introduction to Javascript“ course is great! :)

Sean OBrien

over 7 years ago09/23/16 at 1:15 pm (UTC)

Nice elearning about elearning. Kinda off topic. I am currently in the consultation phase of a module that involves sensitive protection issues with children and wanted to do interactive video. I wanted to use video to "humanize the approach" as you did here. But using real live children would be problematic. What did you use to do the animation? This isn't 3D Studio or Maya is it?

over 7 years ago09/23/16 at 1:25 pm (UTC)

This is Plotagon (https://plotagon.com/). It's a free application (+ some characters and scenes to buy, very inexpensive). Limitation is that only two characters and they don't really interact with the world. If you nee a little more sophistication, even 3D, try Nawmal (http://www.nawmal.com/)