(Last Updated: March 25, 2020)

This tutorial will get you through how to export projects to HTML5 in ActivePresenter 8. The HTML5 output uses the HTML5 standards that allow learners to view and interact with the content on the World Wide Web. It is the ultimate output for exporting interactive software simulations and quizzes.

First, to export projects to HTML5, open the Export tab and click HTML5 (1). 

Export to HTML5

This opens the Export to HTML5 dialog having two tabs which are General and Reporting. We will get to know both of them in detail.

Note:

  • You can customize the settings for the Player Settings of the HTML5 output. This means you can change the skin of the player, the table of contents, output language, etc. Click the Player Settings button (2)  to access those settings. 
  • ActivePresenter allows previewing the output before actually exporting it. Just click the HTML5 Preview button (3) to do that. See Work with HTML5 Preview for more information. 

General Tab

The General tab provides you with many settings for the final output. For example, you can select which operation modes to export, define the pass/fail condition of the test, etc.

Export To HTML5 dialog

Operation Modes

  • Four operation modes:

When exporting projects to HTML5, you will need to consider which operation modes you are going with. Select the mode to export between Demonstration, Tutorial, Practice, and Test. The selected modes will be available for users. Please refer to the tutorial Four Operation Modes for more information.

  • Generate Index Page: Select this check box to generate the HTML index page which contains the entry to open all selected modes.
  • Total Max Time (in minutes): This is the total time which is taken by all objects to complete their lifecycles plus the time for students to answer. It also includes the pausing time of the presentation to wait for user answers. Set the value to 0 to disable this feature.
  • Pass Condition: Determine the overall pass/fail result of students when they take a test. See Set Pass/Fail Condition for Lessons for more information.

Content

The options in this section are applied to background images of slides.

  • Include WebM & Ogg: Select this check box to allow viewing the HTML5 content on browsers that don’t support MP4 and MP3 but support WebM and Ogg.
  • Enable Visual Focus Indicator: If you select this check box, the object that gains focus will have a dashed outline.

Note: If your projects have some accessibility methods, for example, Tab Order, you should select this option.

  • Embed Fonts: Embed fonts that are used in content into output using CSS3 Web font specification. This makes the content look consistent between platforms and devices.
  • JPEG Quality (%): This option only affects images that are exported in JPEG format.
  • PNG Compression Level: These are relative compression levels. Note that the higher the compression level, the longer it takes to export.
  • Audio Bit Rate: Specify the audio bit rate in the output if any. The higher the value, the higher the audio quality, and the larger output file size.
  • Video Quality (%): Specify quality for videos in the output if any. The higher the value, the higher the video quality, and the larger output file size.

Output

Click the Settings button to have further settings for the output as below.

Export to HTML5 Output Settings
  • Project ID: This unique reference number is used for reporting the test result. Only text that contains alphanumeric characters (A-Z, a-z, 0-9) and underscore (_) is allowed (maximum length=250 characters).
  • Player: The location for storing HTML5 player script and CSS files.
  • Project Resources: The location for storing project images, audio, and video.
  • Index Resources: The location for storing index page images.
  • File Name Prefix: The file names of project-related files such as resources and project CSS and JavaScript files will begin with this prefix. This option may be used in the scenario that the system needs to put files of multiple projects into one folder.

Reporting Tab

This tab allows you to define settings for eLearning and report options.

Reporting tab

eLearning Options

This section allows you to package the content to one of the following standards for uploading to LMS: SCORM 1.2, SCORM 2004, and Experience API (xAPI).

a. With SCORM 1.2 and SCORM 2004:

  • Identifier: Specify a name used by the LMS to identify different manifests (ActivePresenter generates this value automatically but you can change it).
  • Version: Specify a version that can be used to differentiate manifests with the same identifier.
  • Organization Title: Specify a title for the organization which this item belongs to. 
  • Item Title: The title of your project that is displayed to users viewing the project using an LMS.

ActivePresenter automatically generates the organization and item title from the project name, you can change it though.

  • Report the score in percentage: Normalize the score in the range 1-100 instead of an absolute value. This option is only available in SCORM 2004. The score in SCORM 1.2 is always normalized.
  • Export each operation mode to a separated package: Export each operation mode to a separated package instead of exporting all operation modes to one package with multiple organizations.

b. With Experience API:

  • Identifier: Specify a name used by the LMS to identify different manifests. ActivePresenter automatically generates this value but you can change it.
  • Title: The title of your project for users to view using an LMS. ActivePresenter automatically generates this value from the project name but you can change it.
  • Description: The description of your project for users to view using an LMS. ActivePresenter automatically generates this value from the project description but you can change it.
  • Export each operation mode to a separated package: This option is on by default when exporting to Experience API.

Additional Report

The Additional Report section lets you decide how to report the test result of students. They are useful when you don’t have an LMS or you want to handle the report by yourself.

  • Method: Choose between No Report (do not send the report) or HTTP (send the report through the HTTP request).
  • Format: Choose between two reporting formats which are XML Document or JSON (JavaScript Object Notation).
  • HTTP Address: This is the HTTP address of a server-side script that will process the report data (the data is either in XML or JSON format).

When satisfying with all the settings and adjustments, just click the OK button in the Export To HTML5 dialog to start exporting.  

So, that’s how to export projects to HTML5 in ActivePresenter. Try it today and don’t hesitate to contact us if you need support.

See Also:

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