A SCORM-Ready Template Tutorial Series, Part 1: Setting up the module
<< Part 1A. Features | Part 1C. Page Array Generator >>

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


Add the data to create your module structure

pageArray(Click to enlarge)

Carefully replace the button and page titles with the titles from your outline. Add the relative URL’s for each page. You may use any filename for your pages, not just page01, page02, etc. However if you choose to change the name of the first page, “page01.htm”, please be sure to change it in the “index.htm” page as well or the frameset will open with a “not-found” error.

It is very important that you DO NOT DELETE ANY PUNCTUATION, so be careful when you are pasting in titles. If you do, and cannot find what you deleted, use the backup file you just created, and try again. Every line in the array gets a comma after it, except for the last one.

Note: make sure the number of chapters in the Chapter Array matches the number in the Page Array.

Examples of completed pageArrays

For the simple outline shown here

Module Template - array for simple outline

the page array would look like this:

pageArray for simple outline

Click to enlarge

and would result in this navbar:

navbar from simple outline

For the more complex hierarchical outline shown here:

Hierarchical Structure outline

the page array would look like this:

array for hierarchical

(click to enlarge)

and would result in this navbar, with Chapter III shown open.

navbar for hierarchical outline

A SCORM-Ready Template Tutorial Series, Part 1: Setting up the module
<< Part 1A. Features | Part 1C. Page Array Generator >>

Also in SCORM Template Tutorial

  1. A SCORM-ready template: Part 1A. Features
  2. A SCORM-ready template: Part 1B. Plan the Navigation
  3. A SCORM-ready template: Part 1D. Settings
  4. A SCORM-ready template: Part 1E. Building Pages
  5. A SCORM-ready template: Part 1F. Modifying the CSS styles
  6. A SCORM-ready template: Part 1G . Branching behaviors
  7. A SCORM-ready template: Part 3A. Embedded Questionmark Perception Quizzes
  8. A SCORM-ready template: Part 2A. Add Flash Video to your learning module
  9. A SCORM-ready template: Part 2B. Create an FLV clip
  10. A SCORM-ready template: Part 2C. Create a Playlist file
  11. A SCORM-ready template: Part 2D. Create a Captions file for the JW Media Player
  12. A SCORM-ready template: Part 2E. Add the video player to your learning module
  13. A SCORM-Ready Template: Part 6A. Adapt the SCORM template for Moodle
  14. A SCORM-Ready Template: Part 4A. Embedded Qualtrics Quizzes
  15. A SCORM-Ready Template: Part 4B. Qualtrics Quizzes : End of Survey Message
  16. A SCORM-Ready Template: Part 4C. Qualtrics Quizzes – Create the quiz
  17. A SCORM-Ready Template: Part 4D. Qualtrics Quizzes – Create Feedback
  18. A SCORM-Ready Template: Part 4E. Qualtrics Quizzes – Set scores for each question
  19. A SCORM-Ready Template: Part 4F. Qualtrics Quizzes – LMS-related settings
  20. A SCORM-Ready Template: Part 4G. Qualtrics Quizzes – Add the quiz to the module
  21. A SCORM-Ready Template: Part 5A. Captivate Quizzes – Introduction
  22. A SCORM-Ready Template: Part 5B. Captivate Quizzes – Captivate settings
  23. A SCORM-Ready Template: Part 5C. Captivate Quizzes – Add the quiz to the module
  24. A SCORM-Ready Template: Part 1C. Navigation – PageArray generator

View the entire series