« March 2007 | Main | May 2007 »

April 26, 2007

A SCORM-compatible learning module template: Part 1 of 6

Features

This HTML template is designed to simplify the creation of SCORM-compatible learning modules. Some of the features include:

• SCORM compatibility: The required elearning SCORM communication functions are built in so the module can communicate its status to a Learning Management System (LMS).
• Requires no server-side languages or processing other than Server Side Includes (SSI's). Javascript/DHTML-based.
• Bookmarking: last page browsed is automatically stored in the LMS.
• Dynamic navigation: The navigation, page titles, and pages left to view are all automatically generated.
• Built-in styles: The look and feel has been set up so all you need to do is add text and use styles like H1, H2, and a few classes. The styles adapt to different browsers and screen sizes.
• Pretty printing: Navbar disappears when printing, creating a cleaner, more efficient printout.
• Branching capability:
  • replace entire page list with a single click to create another version of the module.
  • Insert pages with a single click.
  • Add pages to end of current page list.
• Direct linking to pages when not under scorm control. Although the module is structured as a frameset by necessity, linking directly to specific pages is possible when no LMS is present, so module can be used as reference outside the LMS. (Direct linking would break the SCORM communication link).

Example of a finished module based on the template. The look of the template has changed slightly since this article was first written.

The navigation bar on this module is an example of the current template style.

Getting Started

Get the files

Download the template files here

Module-specific folders

You will notice that several of the directories have two versions - a "global" version and a "local" version ("css-local," "includes-local," and "js-local"). There is also a "media" folder which is where you will put your module-specific images. This is because on our production server, we use a version control process where the global folders are replaced with symlinks, so that changes to the template will immediately update all templates on the server. Changes made in the local folders will affect that module only.

The files in the "local" directories and files can be modified as needed, and can be used to override many global settings. For example, the CSS styles can be changed by adding styles to the file "css-local/userStyles.css."

Outline your module's structure

Start by outlining your entire learning module. List all the pages you want to include. You can change the list after you get started, so don't worry if there are items you aren't sure about.The module structure can be very simple as shown in Example 1, or more structured with chapters and sections as shown in Example 2. This template can accommodate up to four levels if needed.

Example 1 The outline below shows a flat structure, with all pages on the same hierarchical level. In this example, all items would be on level 1.	This is the navbar that results from this outline. Links to all items are visible at all times.

Example 2 This outline shows a more complex hierarchical structure with chapters and sub-sections. In this example, the Competency Criteria page and the Chapter Introductions would be on level 1 and the Subtopics would all be on level 2.	This is the navbar that results from this outline. Only the top level (level1) items are visible at all times. Other levels are visible when browsing any page in the respective chapter. NOTE: each page on level 1 should have a different chapter number.