« April 2007 | Main | November 2007 »

May 12, 2007

A SCORM-compatible learning module template: Part 6 of 6

Branching behavior

Several branching functions are included in js/branchingToolkit.js and are available to be used in your modules. Note: These haven't been thoroughly tested!
InsertList: This function inserts a new pages into the page list right after the current page To use, you must add a second PageArray to the pageArray.js file, called PageArray2, containing the pages to be inserted.
function insertList(){
	 for(var i=0; i< PageArray2.length; i++) { 
	parent.data.PageArray.splice((window.parent.data.znThisPage-1),0,PageArray2[i]);
	parent.data.determineParents();
	} 
	wipePageNo();
	wipeNavBar();
	printNavBar();
     }
	  function writeArray(){
	  for(var i=0; i< parent.data.PageArray.length; i++) { 
	  document.getElementById('writeItHere').innerHTML +=(parent.data.PageArray[i].url +" " + parent.data.PageArray[i].title +'
'); } }

addOnePagetoEnd: The following function pushes just one new page at a time into the page list. To use, add title, url, chapter and level information to the "mystring" line, similar to what you did when filling out each line in the page array.


function addOnePagetoEnd() {
mystring=({title:'I am new',url:'page303.htm',chapter:0,level:1});
parent.data.PageArray.push(mystring);
document.getElementById('NavBar').innerHTML = ('');
parent.data.determineParents();//haven't testedd yet but you have to run determineParents after modifying the array
wipePageNo();
wipeNavBar();
printNavBar();}



replaceAllPages: This function replaces the entire page list with a new list.
To use, you must add a second PageArray to the pageArray.js file, called PageArray2.

function replaceAllPages() {
	parent.data.PageArray=parent.data.PageArray2;
	parent.data.determineParents();
	wipePageNo();
	wipeNavBar();
    printNavBar();
    NextPage(); }
 //**end branching toolkit**//

For more articles on scorm, web development, powerpoint and other topics, see The Designspace

Posted by emeiselm at 11:37 AM | Comments (0)

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

Modifying the CSS styles

The css styles are defined in several sheets. Any of the styles can be overridden by adding a new definition for the selector to /css-local/userStyles.js or to individual pages or even individual elements on a page. YOU WILL NOT BE ABLE TO change any of the files inside the css/ folder but you can add your own overrides to userStyles.css.

If you need special text styles or need to control the positioning of content-specific elements, add those to the userStyles file.

css/allBrowsers.css contains most of the styles used. These include the pseudo-class selectors, and the styles that define the structure of the page, including most of the navBar.

A few Internet Explorer-specific styles are included in includes/headContent.htm, using a conditional comment to hide them from all other browsers. These were unavoidable, since IE still has some unique differences. These override their counterparts in allBrowsers.css.

css/print.css removes the Navbar when printing to make the document fit the page better.

css/header.css contains styles for header and footer.

css/stylesMac.css is not being used at this time.

css/styles800x600 is experimental for use with smaller screens or low resolution monitors, but is not really working well yet.


How to override a style

Let's say you wanted to change the style of all h4 elements to dark blue. In userStyles.css, add the following:

h4 {
color: #003366
}

That's all there is to it! Of course you can also create your own styles as well. userStyles.css is already included in the headContent file so it will automatically be picked up if there is anything in it.




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 11:35 AM | Comments (0)

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

Start building your pages

Now you are ready to start building pages.

Important: You will find that Dreamweaver 8 does a much better job of displaying this module, complete with all the Server Side Includes, than earlier versions. It is possible to use earlier versions, but you will only see the central content area of the page, and not the Header/Footer areas or Navbar area.



Note: Typical Dreamweaver-generated javascripts used for rollover images and creating popup windows are already included in the template. You do not need to add them again.

  • MM_openBrWindow
  • MM_swapImage
  • MM_swapImgRestore
  • MM_preloadImages
  • MM_findObj


    The content area


    Start adding your own content to the module

    1. Open page01.htm and look at the source code.

      Module Template - Put Content below this line

      Find the lines that say:


      "*****Put content below this line!!!****"

      and


      "*********Put content above this line!!!******"

      Add your content between these lines! The area between these two comments is the only area in this file you should need to modify, except if you wish to hide chapter and page titles as described below.

    2. If you do not want the automatic Chapter and Page titles to show, simply add the following to your css-local/userStyles:
      
      

      #pageTitle {
      display:none;
      visibility:hidden;
      }




    The Standard Layout Grid

    A grid has been devised to facilitate a standard look for all the modules. The grid consists of two columns, with a width ratio of 67% to 33%. The order and width of the columns can vary as needed, but try to keep the overall ratio the same wherever possible.

    Click the image below to see the two columns highlighted in red.


    Module Template -Grid layout



    Layout Examples
    Some examples of the use of the grid are shown below for inspiration. Click each image to see enlarged view.









    Module Template - Nova 3
     

    Module Template - Nova 2
     


    Module Template - Nova 4
     

    Module Template - Nova 5
     


    Module Template - Nova 6
     



    For more articles on scorm, web development, powerpoint and other topics, see The Designspace

    Posted by emeiselm at 11:32 AM | Comments (0)

    A SCORM-compatible learning module template: Part 3 of 6

    Other configuration variables: chapterArray, docTitle and headerTitle

    In the same file as the pageArray, you will find several other variables: chapterArray, docTitle, and headerTitle.

    The chapterArray can be filled out with chapter titles if desired. This is optional - the chapter and page titles can both be hidden if not needed.

    The docTitle and headerTitle are required. The docTitle is the title that shows up at the top of every window -in other words the <title> tag on each page. The headerTitle is the title which shows up in the blue header at the top of each page.


    Chapter and Page Titles

    If you want, you may have Chapter titles and Page titles show up automatically on every page, or on only the pages you choose.




    1. You must fill in the Chapter titles in /js-local/pageArray.js

      Look for:


      var chapterArray

      and add the chapter titles.

      Add chapters as necessary, observing the usual caution about the punctuation at the end of the array.
      chapterArray: Add Chapter titles to the chapterArray


    2. How it works
      Once the titles are filled in, when the page is loaded, the module looks for a div with the id "subTitleBar". If it finds this on the page, it populates it with the chapter and page titles you entered into the arrays, and styles them per the CSS style sheets.

    3. To remove this functionality from any page, delete the line highlighted in yellow, shown below. Be very careful not to remove the lines above or below it.

      subTitleBar




    For more articles on scorm, web development, powerpoint and other topics, see The Designspace

    Posted by emeiselm at 11:29 AM | Comments (0)

    A SCORM-compatible learning module template: Part 2 of 6


    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

      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


      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


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


      navbar for hierarchical outline





    For more articles on scorm, web development, powerpoint and other topics, see The Designspace

    Posted by emeiselm at 11:27 AM | Comments (0)