HTML5 eLearning tools review

These days we have a lot of available tools to create responsive courses on the Web and in this article we will review a few of them, considering their features, advantages and disadvantages.

When I started to test these tools I had to choose from a list of 26 comercial and open-source tools (link). In this list you can find that only 2 are open-source, so we will first take a look at these. After that we will focus our attention on a comercial tool from Adobe.

Adapt Learning (link)

With this tool you can create interactive courses without the need of another framework to run on. The Adapt framework uses JavaScript and HTML and as such offers the cross browser and platform compatibility you would expect.

Features:

• single scrolling web page;

• need installation of: node.js, grunt, github;

• slider, triggered components, multiple choice questions, graphic elements;

• online admin interface.

H5P (link)

This open-source tool works as a plug-in on other frameworks and is easy to use after instalation.

You can find a lot of content elements on their website with a good design. These will be created and modified with a user-friendly plug-in in your framework.

Features:

• need installation of XAMPP and a framework;

• supported frameworks: WordPress, Joomla and Drupal;

• rich content: course presentation, interactive video, memory games and many other;

• user-friendly online admin interface.

Adobe Captivate (link)

As I said earlier, I will also introduce to you a comercial tool. Adobe offers a 30 day trial which is more than enough to convince yourself that for a reasonable price you can have much more flexibility, stability and online support.

Features:

• interactive presentation framework as a single web page;

• no additional installations requiered;

• rich content: multiple action buttons, graphic elements, transition effects, quizzes;

• new publish requiered for modifying the course;

Now let’s compare these tools according to some issues:

Stability

Considering this issue Adapt Learning and Adobe Captivate have an advantage for using their own frameworks. When we refer to H5P there will always appear updates on the frameworks is running on and that can lead to errors when the plug-in is loaded in the framework. I ran across this kind of problems with some elements I tested.

Support

It wouldn’t be fair to compare a commercial tool with open-source ones, but despite this aspect there is a big community with active users on both open-source tool forums that can provide useful tips for the mojarity of problems that can occur. In addition to Adobe support, many problems, tips and tricks are discussed on forums like stackoverflow.

Cost

For the open-source tools there is no cost, but when it comes to Adobe there are some things you should know. The first thing: every project created in your trial month will not work after the expiration date.

Adobe charges the use of captivate with a monthly pay of 37$. The good news is that Adobe have promotions for students and teachers and the cost drops to only 20$. Other prices are available for companies and institutions, but you have to ask for them because the price depends on your needs.

Flexibility and Customization

Considering the fact that H5P works on other workframes puts this tool in the first place for flexibility. Other than supported frameworks, H5P can work on other frameworks using a library available on their site (this involves advanced programming skills). Moreover, H5P has much more content elements than Adapt Learning.

For both of them, the structure of the elements can’t be customized, only if you have programming skills and you take the risk to make changes in the code. There are reasonable number of topics about that on the forums, but no one guarantees you no further conflicts in code or bugs.

On the other side, Adobe Captivate acts more like a PowerPoint when you create a course and that makes it easy to customize and also has a lot of features for actions linked to buttons, slides, quizzes and many other.

Usability

The admin interface is easy to use in H5P and a little confusing at the beginning in Adapt Learning. The main advantages for these 2 open-source tools is that you can make a small change in your course with just a few clicks. In Adobe Captivate there are more steps to be made, since this software generates your files and then you have the change your files in your server or your localhost. This is because Adobe uses a software installed on your computer, while H5P and Adapt Learning run their admin interfaces online.

Conclusions

Choosing one of these tools, as you probably guessed already, it depends on many factors. If you just want to make a prototype or you can afford to pay for a long term use, the Adobe Captivate is the best option for creating a course which have a lot in common with a PowerPoint Presentation structure. This is also a very good solution for implementing that course in a mobile app, which can run like a browser window.

For a website with a scrolling structure the only solution is Adapt Learning, which also has a really good design. But if you want a more flexible structure of the entire website you should use H5P which offers the flexibility that workframes have.

Tips for Adobe Captivate:

• If you want to eliminate progress bar from the bottom of the slide go to: Project > Skin Editor … > uncheck “Show Playback Control”;

• If you want to eliminate the play button from the beginning of the course:

  • Go to project folder and open it;

  • Open the index.html file and edit it:

    • find “initializeCP();” function;

• Add after “cpInit();” a new row and write “cp.movie.play();”

function initializeCP()
{
 initCalled = true ;
 if(cp.pg && deviceReady === false)
 return;

 function cpInit()
 {
 document.body.innerHTML = " <div class='cpMainContainer' id='cp.....
 cp.DoCPInit();
 var lCpExit = window["DoCPExit"];
 window["DoCPExit"] = function()
 {
 if(cp.UnloadActivties)
 cp.UnloadActivties();
 lCpExit();
 };
 }
 
 cpInit();
 cp.movie.play();
}

• Save file.