A SCORM-ready template: Part 1 - Features
May 12, 2007
Most Popular | Tutorials | Elearning | Free Downloads | Must Reads | SCORM | Snippets | Web Building

Here's a screenshot of the template, showing part of the left-hand navigation expanded. Note the previous/next navigation buttons at upper right, which are automatically created based on your list of pages, as is the progress bar and page numbering at upper right.

Ads by Google

Posted by ellen at May 12, 2007 06:57 PM

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

>> View a live demo of the template here

>> Download the template files here

>>Get it on GitHub now!

Another example of a module based on the template. The navigation bar shown here is the latest version.

>> View a live demo of the template here

>> Download the template files here

>>Get it on GitHub now!


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).
  • Can be used with no LMS as well -scorm-function buttons are hidden when module is viewed outside an LMS
  • Requires no server-side languages or processing other than Server Side Includes (SSI's). Javascript/DHTML-based. NOTE: Your server must be set up to process the extension ".htm" for SSI's. This can usually be done even if you are on a hosted server, using the control panel. Instructions for making this change on an IIS server are here.
  • 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.
  • Deep linking. Although the module is structured as a frameset by necessity, linking directly to specific pages is possible, now both when under scorm control and when used outside the LMS.< /li>
  • Versions: easily make multiple versions from the same set of pages.
  • Embedded Questionmark Perception Quizzes (requires Questionmark server and an LMS)
  • Soon to come: Embedded Captivate Quizzes


Getting Started

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


Ads by Google



Great ressource!! I was searching something like that while some time and now I'm happy to have find it.

I just want to ask you a little question about a problem I meet after downloading the template. I don't know what I'm doing wrong, but I'm not able to show it correctly localy in a browser needer in Dreamweaver. But, when I go to the online live demo everything look ok. Just to have an other view on the problem I capture this part of the site with HTTrack and the pages downloaded on my pc look like the online demo.

What I'm doing wrong when downloading the template.zip file?



P.S.: Sorry for my english I'm french canadian...

If I uncomment the code for index.htm file to allow:

<!--use the following line if you want the module to complete only after all pages have been looked at (do not use if you have embedded quizzes):
<frameset rows="100%,*%" onunload="completeIfLastPage()" onbeforeunload="completeIfLastPage()" id="moduleFrameset">

Does this mean that the course will be marked as complete in the LMS if the student just visits the last page or do they have to click through each page in the course and the completion status gets updated when the get to the last page?


I noticed that adding menu items to the pageArray.js file under level:4 do not show up in the left menu navigation. Furthermore, anything after that level:4 do not show up. Surprisingly, when I 'Expand All', level:4 items show up.

Is there a fix that you recommend in the pageNavigation.js?

Thank you!

Thanks Ellen. That would be great. I've tried everything and can't get both the 3rd level and 4th level working correctly without showing everything in the menu.


Can you provide some instructions for how to use the template with an LMS, specifically with Moodle? I'm having trouble understanding how the SCORM components actually integrate with Moodle, and how the template would be uploaded into Moodle, etc...


See "How to use the HTML SCORM template with Moodle - unscored example"

i use php server but it seems that you suppose to use IIS?can yu help me in this way?
AND where can i open your template?i use reload editor to make scorm coursesbut i couldn't open your template there?

thanx a lot for your reply.As i need to work with a database like moodle to store or retrieve data from tables of database, i really need to have server side transactions.As my course should be scorm i have to use SSIs.Now i don't know how to Make other extensions besides ".shtml" process for Server Side includes in apache.can you help me in this way and do you have any sample of such thing?I'm really in hurry and need your guidance as soon as possible.

Hi Ellen... Nice ressource...

I work on a SCORM project where I will use your template (the Moodle version).

I plan to have 4 levels of pages. But, with the original css/allBrowser.css file, the 4th level appear like the level 1. So I have make a little change to this CSS file.

Here is the code I add to that file (a copy of the a.navlevel3):

#NavBar a.navlevel4 {
border-top:1px solid #113868;
border-bottom:1px solid #000;
border-left:1px solid #0D2E58;

I will change the color of the navlevel4 to fit with our own look.

A note, I also changed the padding-left for the level 2 to 4 to be abble to show correctly the level 4. Here are the padding-left settings for all these three levels:
- for navlevel2 padding-left:18px;
- for navlevel3 padding-left:24px;
- for navlevel4 padding-left:30px;

Hope that could help somebody else...

See you and thanks again for that great ressource!


Hello Ellen!

My tests in IE 8 give me a compatibility error. The template seem to be optimize for IE 7 and before...

When I launch the template with IE 8 (launch from Moodle), the menu don't appear to me and an icon of a broken page appear on the top right corner of the page. It said that this problem is relate to the code of the page. When I click on it, the page is reload correctly. I can also reload the page with + and everything appear OK.

The problem is that I whant my page to load directly on the correct way.

I found on msdn (http://msdn.microsoft.com/en-us/library/cc288325.aspx#SetMode) it is possible to include in the HTML code a metadata to say to IE we whant him to load the content with a specific mode. In the example we found in that page, it's propose to write the code below in the HEAD section of the page.

I must test that code on other versions of IE (such as 5.5, 6, 7), but it could fix that problem...

Do you think I am on the good way?

I cant give you more infos from the debug mode... I loose that kind of setting when the guys from the IT service decide to secure the system. Now I'm a kind of admin in our Moodle installation with limited rights.

I will take a look at your bookmark solution, but it's sound a nice idea...

I'll give you more news later

Ads by Google

 RSS   |   Contact Me

Ads by Google