Upgrade eLearning from HTML4 to HTML5 in TT-Knowledge Force

Why Upgrade to HTML5?

In this article we discuss how to take your existing TT-Knowledge Force HTML4 content and upgrade it to HTML5. We make the assumption that you are already a competent user of TT-Knowledge Force.

Before we show you how to upgrade your content from HTML4 to HTML5 with TT-Knowledge Force, we think it is worthwhile to briefly discuss why it is that you ought to consider doing it. The main reason is that the content then becomes responsive across the different devices that you expect to use it in (for different screen resolutions). If you are using TT-Knowledge Force to produce content in HTML4 format, then a possible scenario around usability could come up such as this:

  • You create new content based on a screen size of 1920 x 1080 and publish it
  • The learner comes along and they only have a screen size on their laptop of 1440 x 900
    • Your content does not fit on their screen!
  • The learner then has a choice of either using the scroll bars (which is painful) or using browser zoom controls to zoom out (which works but may not be intuitive to them)

By making your content in HTML5 responsive to start with, then the content will automatically fit to the screen resolution that the learner is using. This works on mobile, tablets and computers and in all major browser releases.

Making the Switch

Before you make the switch to HTML5 there are a number of preparatory steps that you need to do first.

  • Check with TT-S support that your version of TT-Knowledge Force is up to date and includes the support for HTML5 in the configuration. If it isn’t then it’s probably time to make the upgrade.
    • If you are using a SaaS model then this is easy and TT-S can do this upgrade for you.
    • If you are self hosted, then work with your TT-S consultant to perform the upgrade.
  • Ensure that the Smartcomponents for the HTML5 tutorial control are loaded and if you need to build an object template for a new tutorial control then this is already completed.

Upgrading Your eLearning

Step 1 – Download to Local Workspace

We need to do the upgrade in the local workspace and then republish the content in the new HTML5 format. Therefore the first step is to actually download the document. From any process, topic or course structure or from the work pool, let your mouse hover over the document name and select the edit content option.

This will download the document and check it out from the server.

Step 2 – Switch to HTML5

In the document properties dialog you can see the option in the meta data to switch to HTML5.

 

Step 3 – Hide Your HTML4 Tutorial Control

Select all the steps in your document and hide the tutorial control in one mass change. Using the step list click on the first step, then holding the shift key down click on the last step. This selects all the steps ready for you to go to the step properties and hide the HTML4 tutorial control.

Step 4 – Optionally Add in Navigation Objects

By default with HTML5 you can swipe left and right like you would do on a phone or a tablet to move between steps. You can also just click anywhere on a step to move on to the next one. Remember that this behaviour can be controlled from the step properties as well.

If you want to add in an HTML5 tutorial control, then you will need to build one in your object template library (administrators only normally perform this task) that uses your HTML5 smart components.

Use the insert object dialogue to add in new HTML5 tutorial controls. Please note – the precise location of the new tutorial control in the menu structure will change depending on where your administrator puts it.

 

We recommend that you use object binding to ensure the location of the tutorial control remains consistent across your steps.

Step 5 – Upload to Server and Republish

Check the document back in to your server using the normal upload button. It’s only at this point that the new HTML5 content is actually created.

If you need to update an LMS with the content then do this as well.

That’s it, you have now upgraded your content to HTML5. If you have any questions about this then please get in touch with us now.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.