(Last Updated: March 25, 2020)

With the HTML5 Preview feature in ActivePresenter 8, you can preview your project in a browser without exporting it. This lets you know how your learners would experience the content output on HTML5 before even exporting and sharing it.

As you know, there are four operation modes which you can export the content to (Demonstration, Tutorial, Practice, and Test). When it comes to previewing, those four modes are also available.

HTML5 Preview

Preview HTML5 Output

To preview the HTML5 output, open the Home tab or Export tab and then click HTML5 Preview.

preview button

By default, when you click the HTML5 Preview button, the content will be previewed in the Tutorial mode. This button then archives the latest previewing mode for future use. For example, if you click the HTML5 Preview button after having previewed the content in Demonstration mode, it then will show in Demonstration mode. You can also see which mode the content is previewed through the URL address. 

To preview the content in one of four operation modes, click the drop-down arrow on the HTML5 Preview button, and then select one mode from the list. After that, the content will be previewed in a browser with HTML5 settings. In every preview mode, learners can interact with the Player including the Table of Content (TOC) and the toolbar which holds many navigation buttons.

Note: In addition to allowing selecting the operation modes to export projects, ActivePresenter also lets you choose the modes in which the specified objects will be shown. See Four Operation Modes for details.

Select Operation Mode to Preview

In order to select other modes to preview the content, click the drop-down arrow on the HTML5 Preview button and then select one of four modes.

Preview

Demonstration mode

In this mode, the task will be shown as a demonstration for learners. Learners are not supposed to interact with the content but only to view it.

Tutorial mode

This mode allows learners to try the steps with hint messages and annotations provided to each step. 

Practice mode

Learners have a chance to try the task themselves to see how well they understand it. There will be no hint message or annotation in this mode. Interactions (Mouse Click, Key Stroke, and Drop Area) will only appear if learners perform the steps incorrectly.

Test mode

Learners have a chance to try the task themselves to see how well they understand it. There will be no hint message or annotation in this mode. Interactions (Mouse Click, Key Stroke, and Drop Area) will not appear whether learners perform the steps correctly or not.

Overall, the Demonstration mode is most different from the others. In this mode, the content will be shown as a demonstration, hence, learners will not be able to interact with it. The content is just paused or resumed if they click it. Meanwhile, in the other modes (Tutorial, Practice, and Test), learners can interact with the content.  

In ActivePresenter 8, the Show In Mode section is set reasonably in most cases. For example, cursor paths only appear in the Demonstration mode by default. If you want to change these modes, you can change the default Show in Mode options of each object in the Properties pane. 

That’s how to preview the HTML5 output before exporting it in ActivePresenter. Use this feature to know how the content will behave when learners interact with it on HTML5.

See Also:

Output Formats Overview
Four Operation Modes
Export to HTML5
Export to Video
Publish Video to Youtube
Export to Document Formats
Export to SCORM or xAPI Package