SCORM-ready template: Part 1
February 04, 2006
Tutorials | Elearning | Javascript | SCORM

Note: this tutorial has been superceded by a new version. If you aren't redirected there automatically,

click here to view the new version.



Here is a SCORM-compatible HTML learning module template which is easy to use, and easy to modify. View it here | Download it here

Template Features

This template is designed to simplify the creation of MLearning 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. Javascript-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.
  • Clean 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 control).

    Ads by Google

    Posted by ellen at February 04, 2006 08:37 PM

    Using the SCORM template

    1. Make an Outline

    Start by outlining your entire learning module. List all the pages you want to include. Don't worry, you can change the list after you get started! The module structure can be very simple as shown below, or more structured with chapters and sections as shown at right. This template can accommodate up to four levels. The module structure can be very simple.

    The outline below shows a flat structure, with all pages on the same hierarchical level.
    simpleOutline.gif

    This outline shows a more complex hierarchical structure with chapters and sub-sections.
    hierarchicalStructureOutline.gif

    2. Customize the Header

    Web view of the header: headerExample.jpg
    Open header file. Find the file named "header.htm," and open it. This file controls the look of the header at the top of every page in the module.
    headerfile.gif

    Select Code View.
    selectCodeView.gif
    Show the line numbers by selecting Line Numbers from the Visual Aids dropdown menu.
    showLineNumbers.gif
    In Code View, you can see precisely where to type the new title and target audience information. Replace the default text with your own. Find lines 7 and 8 and enter your own module title and target audience. Do not delete or type over any tags.

    GO TO PART 2


    Ads by Google


  • Ads by Google

     RSS   |   Contact Me


    Ads by Google