ARTICLE
SECTIONS:
 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.
|
| 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. |
 |
| 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
Features
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."
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 1The 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. |
|
 |
Example 2This 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. |
|
 |
ARTICLE
SECTIONS:
Hello,
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?
Thanks
grizzou
P.S.: Sorry for my english I'm french canadian...
Posted by: grizzou on August 1, 2008 12:05 PMHi,
The template makes extensive use of Server Side Includes (SSI's). This is why there is so little code at the top of each content page (page01.htm, page02.htm, etc.). Most of it is contained in included files.
Older versions of Dreamweaver do a poor job of displaying the SSI's. You will need either Dreamweaver 8 or the CS3 version to see them displayed in place.
Note the text in red on this page which says:
"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."
Try uploading the files to a server that has had this change made. To make this change on a hosted server using CPanel, you would click on "Apache Handlers" and add ".htm" as "server-parsed".
Posted by: Ellen on August 2, 2008 11:21 AMHello,
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?
Thanks,
Posted by: RF on December 17, 2008 5:29 PMRF
The former - it will complete if they are on the last page. It was a very minimal attempt to ensure they at least looked at the module. We abandoned it quickly, which is why it is commented out.
It would not be very hard to modify things to do what you want. You'd add a "done" property to each item on the pageArray to record if that page had been visited. Then you could decide when and how often to loop through the array and check if all pages have been read, upon which the module would be marked complete. That way the user could view the pages in any order, but would ultimately have to view them all.
My tendency is to avoid such restrictive requirements. The goal is to have them learn something, not to have them page through a document, so the real test is if they have achieved whatever your learning objectives are. Usually forcing them to turn pages is not the best way to determine that.
Posted by: Ellen on December 18, 2008 12:29 AMHi,
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!
Posted by: Rich F on January 6, 2009 6:21 AMRF
Hi Rich,
We never use level 4 so I didn't spend much time in checking its CSS styles. I'll take a look and get back to you. It's probably a fairly minor fix.
Posted by: Ellen on January 6, 2009 9:36 AMThanks 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.
RF
Posted by: Rich F on January 6, 2009 11:38 AMquick and dirty fix:
try adding
else if (currentPage.chapter == chapter&&(currentPage.level==level||level==currentPage.level+1)){expand='open'}
just after the line:
else if (currentPage.branch==branch && (currentPage.level==level||level==currentPage.level+1)){expand='open'} //current page on same level And in same branch
in js/pageNavigation.js
Keep it all on one line from "else" to " the final "}", even though it is wrapped here.
Posted by: Ellen on January 6, 2009 8:24 PMI don't have time to test thoroughly right now, so can't guarantee it works in all cases.
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...
Thanks.
Posted by: Judy on May 28, 2009 9:33 AMI'll write something on this soon.
Posted by: Ellen on June 2, 2009 6:37 PMSee "How to use the HTML SCORM template with Moodle - unscored example"
Posted by: Ellen on February 12, 2010 3:52 PMhttp://thedesignspace.net/MT2archives/000646.html