6 JavaScript Libraries That Can Be Used for Custom Learning

While I still love working with standard eLearning tools like Articulate Storyline 2, Adobe Captivate and Trivantis Lectora there are times or needs that come up that sometimes cannot be done within these standard eLearning or at least without significantly hacking the generated output that comes out of the tool.

As a digital learning (eLearning) developer I think we need to have many tools in our tool belt that help us accomplish the type of learning that needs to be created and we need to be capable enough building custom learning if the need comes up. I am not talking about creating any type of extensive tool but what I am talking about is using normal front-end web development knowledge like HTML, CSS and JavaScript.

There was a time in our industry where we weren’t afraid to build custom learning interactions in tools such as Adobe Flash but now if you mention the word “custom” or “code” people start to panic or quickly say “I can’t learn code”. I disagree with those responses. I think everyone can learn code especially basic front-end code and everyone in our industry should learn code to some extant. Check out my blog post with the eLearning Guild to see some benefits I list of learning to code as an eLearning developer.

When you learn to do some basic HTML, CSS and JavaScript coding you open up a world of possibilities for building better digital learning (eLearning). Think of it this way, if you want a certain feature and all you use is Articulate Storyline you have to wait for Storyline to come out with that feature but when you know HTML, CSS and JavaScript there are literally thousands of additional libraries you can tie into that add on the functionality you want.

When I think about the possibilities that this approach gives me I get excited! I mean who wouldn’t?! I plan on building courses that will teach you the basics of HTML, CSS and JavaScript specifically for digital learning so stay tuned to my website for that.

So I wanted to share 6 libraries that I have used to create custom digital learning and explain what kind of benefits each offer. When developing for learning content the code is the same as normal web development but there are still things you need to consider for learning specific content. I encourage you to share other ones I missed or should consider but these are ones that help with creating learning.

1. FullPage.js

The reason I think FullPage.js is perfect for building custom learning is it separates parts of your HTML into pages and not only allows you to navigate from page to page but it does it in a parallax way which gives you a cool navigation effect that you don’t see in traditional learning and I am all about breaking the mold. If you are on a tablet or phone it will respond to your device and even allow you to swipe from page to page.

2. jQuery Mobile/jQuery

jQuery Mobile has the same strength that FullPage.js separating content within the same HTML into consumable pages. While FullPage gives you a better parallax effect jQuery Mobile provides some other features that FullPage does not. For example it has a lot more UI stylized code that makes it easy to optimize your HTML to a mobile friendly website with very little code. You can create switches, tabs and other UI content you normally see in digital learning without being a CSS wizard.

If you wanted to make your content more interactive you will need to use jQuery and jQuery knowledge is a must have for any type of mobile development.

3. Handbars.js

Working for a large organization that provides training all over the world one concern that came up quickly was the ability to translate these courses. Storyline has a nice feature that allows you to export a word document and then import the new language back in, so we brainstormed how we could do something similar with custom HTML.

We also wanted to take the MVC approach of separating our visuals from our data so we can easily update and transfer our data as needed. Our solution to this was implementing HandBars.js into our courses. This allowed us to create a JSON file and store the course data within the JSON file and then import the data into the HTML file. That way we could send the translation file to our translation company, they send use back the new language and then we could easily drag and drop the new JSON file into place. This cut out the step of having to export the word doc and re-import the word doc back into our project.

4. GreenSock Animation Platform (GSAP)

I have been using GSAP for years and have been a huge fan of it. I first learned it back in my Adobe Flash development days. It was a great plugin to Flash. Since Flash became less and less supported on mobile GreenSock beefed up their JavaScript library to offer the same kind of robust animations as it did with Flash.

When coding in HTML, CSS and JavaScript you don’t have a timeline to work with so it helps to do animations with GreenSock to get similar timeline effects without having a timeline editor. It really has grown even more robust it allows you to not only animate you can control the animations along a timeline, create drag and drop interactions, morph and animate svg images, split and animate separate letters in a paragraph and even draw out svg images as though it was being drawn by hand. By far this JavaScript library is my favorite and is for sure worth looking into it.

5. Featherlight.js

When you are building learning interactions you are going to need to create pop ups and a light weight JavaScript library that allows you to do that is Featherlight.js. It makes creating a tab interaction easy having your tab content pop up in a new window. It is super simple to learn and doesn’t take much to implement.

6. PhoneGap / xAPI

Now the reason I combined both of these together because if you are going to create mobile learning apps you are going to need some way of tracking your content and xAPI is the best solution to track content outside an LMS. I have recently finished building a learning app using PhoneGap Build by Adobe. It comes with your creative cloud account and it is as simple as uploading your packaged HTML file up to a website and it builds out the files you need to install it on your mobile devices. Now don’t get me wrong you still need to have a developers account with Apple if you want to test on iOS and upload a certificate from each platform like iOS, Android and Windows but it is super simple to just upload it once and have one code base and have it publish out cross-platform to iOS, Android and Windows.

Conclusion

So those are 6 that I have been using a lot lately. There are several thousand more so I want to hear from you. What other ones do you think apply to developing online learning?

Leave a Reply

Your email address will not be published. Required fields are marked *