« A SCORM-compatible learning module template: Part 1 of 6 | Main | A SCORM-compatible learning module template: Part 3 of 6 »

May 12, 2007

A SCORM-compatible learning module template: Part 2 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

Create the Navigation

The Page Array controls all navigation within the module


The engine that drives most of the module is the Page Array. The Page Array, a variable located in js-local/pageArray.js, is simply a list of all the pages in your module. It contains information about each page: the button title, page title, what chapter, and what outline level it is on. The navbar, "Previous" and "Next" buttons are based on the Page Array.

What does all this stuff mean?

Find the file js-local/pageArray.js and duplicate it to make a backup copy. Then open the original file js-local/pageArray.js


Don't be intimidated by all the code on this page. You will simply be adding titles to the list of pages.


    Look for the line: "var PageArray" as shown here (approx line 50.)

look for this line
(Click to enlarge image)

You can see that there is a line for each page in the module. Each line in the Array contains the following:

  • buttonTitle: this is the title that you want to appear on the associated button in the navbar
  • pageTitle: this is the full title that you want to appear on the page itself (you can turn this off if desired)
  • url: this is the relative path to the page from the root folder of the module.
  • chapter: (0 and up) the chapter number, starting with 0.
  • level: (1 and up) In the navbar, buttons for pages at level 1 will always show up. Buttons for pages with level numbers greater than 1 will only be displayed when you click on a button for a page in that chapter. The effect is that when you click on the opening page of any chapter, the menu expands to show what is in that chapter. All of this behavior is easily customized to your needs using CSS styles and level numbers.

 


How to add the data for your module structure


Examples of completed pageArrays

For the simple outline shown here



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 May 12, 2007 11:27 AM

Comments

Login to leave a comment. Create a new account.