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.
One simple yet important step before you export a project to a proper output format is shrinking your project. This process will remove all unused resources to reduce the project file size. Make sure that your project has been saved already. After that, click the ActivePresenter button > Project > Shrink… > check Delete All Unused Resources then click Shrink. See the below video for more information.
First, to export projects to HTML5, open the Export tab and click HTML5 (1).
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.
- 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.
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.
- 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 Conditions for Lessons for more information.
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.
Click the Settings button to have further settings for the output as below.
- 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.
This tab allows you to define settings for eLearning and report 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.
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).
- 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.