« March 2007 | Main | May 2007 »

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


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 09:35 PM | Comments (0)

April 05, 2007

Joomla! (again)

It's been a while since I posted to this blog... In part it is because I was so darn busy, not the least with the new SI Computing's site. However, I'm happy to report that the Joomla! platform has proved to be a great find!

We now have the site pretty much ready and are working like crazy adding content to it. The (really) good news is that once you have the basic structure of your site in place (in the Joomla! parlance that means mostly "Sections", and "Categories"), adding content is so easy, it's nearly a pleasure. Putting the structure together wasn't too great of a challenge, either. In fact, I have yet to look at any sort of Joomla! manual - yes, it is that intuitive! (Or I'm that smart... Nah!)

A digression: There has been a recent discussion on the WWW-SIG mailing list (if my memory serves me right) about the problem of sharing and preserving content when every department, and even groups within a department, is using a different tool - now with disparate Content Management Systems adding complexity and further incompatibilities into the mix. I can see how this could be a reason for concern, but in our particular case preservation and sharing were not of paramount importance; rather, the ease of collaboratively building a dynamic, constantly evolving site was what we were after.

I can honestly say that we did take a good look at the tools already available on this campus, including Sitemaker and Drupal, but none of them gave us the capability we wanted without presenting us with a learning curve we just didn't have the time to tackle. I am a bit sad that we had to go outside, but I'm very, very pleased with what we found there.

Our new site is not yet public, but if you'd like to take a peek, send me a message, and I will provide you with the URL.

Posted by wlodek at 05:15 PM | Comments (0)