What’s going on under the hood, and how this influences development and packaging of your interactive assets

Design guidelines for complex HTML5 assets in Author-it

Generally, interactive HTML5 assets will use one or more Javascript libraries to provide the desired functionality.  These libraries may be packaged with the asset or loaded remotely.  The asset may also have other required media objects such as images, video files, CSS files, other html and xml files, etc etc.  Finally, all of these elements will be (usually) collected within a single directory/folder and called by an index.htm file or similar.

A single Author-it course may contain multiple assets from a range of vendors who all use a range of development tools.  Unfortunately, each HTML5 development tool uses different javascript libraries, or even different versions of the same library, and packages the asset differently.  The Author-it publishing process collects each of the assets used in the course and consolidates them into a single published output folder as part of the automatic publishing process.  Therefore, if development guidelines are not set and adhered to, the range of javascript libraries required by a single course could be quite large, which increases the possibility of conflicts and performance issues.

Additionally, some interactive assets may use animation techniques and browser controls that can conflict or cause performance issues, such as svg animations, CSS animations, canvas animations. 

Therefore in a single course or presentation there is the opportunity for:

  • conflicts between javascript libraries or versions of the same library
  • poor performance as multiple javascript libraries are loaded by the different assets
  • poor performance or errors if different animation techniques are used by different assets
  • errors as poorly packaged assets conflict during the creation of the published output eg. multiple directories called "/images" instead of "/asset_name_images" or "asset_name/images"

For Author-it Chrysalis, there is also the potential conflict from overlapping interactive elements between Chrysalis’ interactive areas (bottom 10%, left 10%, and right 10% of the screen) and the asset including interactions in the same location (z-index conflict).

For developers: assume that your interactive asset will be JUST ONE asset in a course, and develop accordingly.

Recommendation: Your finished assets should be packaged in a folder with a unique name.