« Joomla! (again) | Main | A SCORM-compatible learning module template: Part 2 of 6 »

April 26, 2007

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

Part 1: Features, Outline your Module
Part 2: Creating the Navigation
Part 3: Other Configuration Elements
Part 4: Start Building Your Pages
Part 5: Modifying the CSS Styles
Part 6: Branching Behavior

Features

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


  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."




The directory structure of each module.




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.

Simple structure outline

 

navbar from simple outline

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.

Hierarchical Structure outline

array for hierarchical outline

 


Part 1: Features, Outline your Module
Part 2: Creating the Navigation
Part 3: Other Configuration Elements
Part 4: Start Building Your Pages
Part 5: Modifying the CSS Styles
Part 6: Branching Behavior

For more articles on scorm, web development, powerpoint and other topics, see The Designspace

Posted by emeiselm at April 26, 2007 09:35 PM

Comments

Login to leave a comment. Create a new account.