How do I create SCORM content?
From ClarolineDoc
| Table of contents [showhide] |
A brief introduction to SCORM ...
The purpose of this page is to help you to build your own interactive courses using the Scorm standard so that they will work on any Scorm 1.2 compliant platform like Claroline 1.5.
There are different level of conformance in SCORM 1.2, what is discussed here only concerns Scorm 1.2 minimal conformance level.
A complete interactive course that is Scorm 1.2 conformant consist of a zipped file which contains all the files needed for the different lessons of your course. At the root of this zipped file we must also find a very important file called imsmanifest.xml. You must also organize your course in several « lessons » or « modules » (or whatever name you want to give to separate unit of learning activities inside the course) They are called SCO's (for Sharable content Object) in the Scorm standards. Here are the two important steps to proceed you must know this:
- How to make SCO's.
- How to aggregate them them into one content package and build the associated imsmanifest.xml file.
These two steps can be done in several different ways, we will try to explain some suggestions in this page to make it yourself. Some private (but somewhat expensive in general) solutions also exist to make the two steps through a WYSIWYG editor that allow you to build the packages and import you contents as flash or html pages, it package them for you and insert the javascript code needed to make your contents act like SCO's, see more about that kind of products in the Existing tools links section of this article.
Building your own SCO's
A single unit, lesson, or module into a course is called a SCO (Sharable content object) in the Scorm vocabulary. A SCO can consist in many different things : it can be an interactive quiz as just some web content pages in HTML, Flash,... A SCO is an entity that is able to communicate with the LMS (Learning managment system) using some special (JavaScript, ECMAscript) functions well defined in Scorm. We will see in this manual how to build some basic entities of that kind without having to code anything. Although it is possible do it in other technologies, we will only take a look at how to make some HTML pages to become a SCO.
Using a Dreamweaver extension : the SCORM runtime wrapper
This possibility requires you to use Dreamweaver MX, a trial version is available on the Macromedia web site : http://www.macromedia.com. You will also need to install the Scorm Runtime Wrapper extension also available on their site as a freeware. SCORM Runtime Wrapper Extension (http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=329357) Install it using the Macromedia Extension Manager. See the help files or the Macromedia website to understand how to install it. Once this is done, open your HTML page(s) with dreamweaver.
Make a single HTML page to be a SCO
Making a new SCO with only one HTML page is very easy with the scorm runtime wrapper extension. When your page is opened with Dreamweaver, select the « commandes » menu and then « SCORM Runtime wrapper ». You should get the following pop-up window :
Set Status onLoad : This option sets the status of the lesson (SCO) to the selected value when the page is loaded. We recommand to set the status to « Incomplete » like in the screenshot.
The Trigger for LMSFinish option allows you to decid what event will cause the lesson to end. We recommand to choose the 'Finish lesson' button which will add it at the top of your HTML page, but you can place it wherever you want it to be on the page.
Set Status Based on trigger : This option allows you to decide which status will be given to the lesson when it is ended. We recommand you to set it a « Complete » like in the screenshot.
For a single HTML page SCO, it is recommended to leave the default advanced options. The three checkbox should remain empty.
When you are done, just click on OK. This will insert in your HTML page some Javascript functions used for Scorm purpose. Save your page, this SCO is now ready to be put in a content package. If you use related files like images or javascript files in your page, pay attention to use relatives links to them in the page and use them as well for the packaging step.
Make a multiple HTML pages to be a SCO
It is also possible to build a SCO with more than one HTML page. According to the SCORM standard definition, there is a lot of different way to proceed this operation. To keep this simple, we will show you one simple solution to do it, still using the Dreamweaver extension and without having to edit anything in the JavaScript code generated by the extension. But this is, of course, not the only way to do it. Suppose that you have some pages that are your lesson content. There must be a start page to begin the lesson. For this page, proceed just like in the last chapter, but set the advanced options like this :
Disable the LMSFinish option for the start page. The other pages of your lessons should normally be accessible from the start page. As the user navigate through the pages, he will finally arrives on a page that ends your lesson/SCO. For this kind of page, you must then reuse the SCORM wrapper and set the options like this :
Set the advanced option « disable LMSInitialize » to checked. Set Status Based on Trigger option to « Complete ».
Note. if you have more than one page that can be an end page for the lesson, you can set different status depending on the fact that arriving on this page means that the user completed or failed the lesson. Be aware that you must have at least one end page that allows the user to finish the lesson with either the « Complete » or the « Passed » status. This is required to let your SCO behave correctly on any SCORM compliant platform, as it must be possible to finish your SCO correctly. For all the other middle pages (that neither start the lesson, nor end it) you must NOT change anything with the wrapper. They should stay browsable pages as normal web pages.
When you are done with this, your multiple page SCO is ready to be put in a content package. Pay attention to use only relative links between your pages and for your image files. Subdirectories of images or javascript files for example can be used as it is and need no change to be use in the SCO.
Writing your own Scorm Javascript calls to build SCO's and track user informations
If you are familiar with HTML and Javascript coding, it is also possible to write your own SCO's and tracking interactions. In this chapter, we will explain the main features of Scorm you need to know to write your own interactive SCO's and give some tips and examples.
Using the API javascript functions
With Scorm, the dialog between the Scorm compliant LMS (Learning Managment System, the webserver like Claroline for example) and the SCO (your pages) is made in Javascript, using some specific fucntions of a Javascript object named API. It is the responsablility of the LMS to create this object and its related functions in Javascript. But it is the responsablility of your SCO to find this object and to use the functions. All you need to know is then :
- How to find the API object ?
- Which function of this object to use and what for?
Finding the API object is quite simple: you can simply add the following javascript code at the beginning of your start page of the SCO:
<script type="text/javascript" language="JavaScript">
var API = null; /* SCORM API */
/* look up through the frameset hierarchy for the SCORM API */
function findAPI(win)
{
while ((win.API == null) && (win.parent != null) && (win.parent != win))
{
win = win.parent;
}
API = win.API;
}
/* init the SCORM API */
function initAPI(win)
{
/* look for the SCORM API up in the frameset */
findAPI(win);
/* if we still have not found the API, look at the opener and it's frameset */
if ((API == null) && (win.opener != null))
{
findAPI(win.opener);
}
}
</script>
Note. You could also put it into a .js file so that it can be reused for your other SCO's.
Then modify the onload event of in <body> to call this function :
<body onload="initAPI(window)">
The SCORM API is now correctly used to tell the LMS that the SCO is launched when the start page is browsed. There are other functions of the SCORM API you will have to use :
API.LMSInitialize("")
API.LMSFinish("")
API.LMSGetValue(dataElement)
API.LMSSetValue(dateElement, value)
Some other functions exists in the Scorm standards, report to the official web site of Scorm to get more information about that: http://www.adlnet.org.
The LMSInitialize function should be called when the SCO starts. Indeed, when the user load the first page of the SCO.
The LMSFinish function should be called when the SCO ends. This could be triggered by an onunload event of the last page of the SCO or by adding a button « done » or « end » on the last page(s) of your SCO. This implementation is up to you, but you must also be aware that each of these solution could give better or worse on some Scorm compliant player, depending on how they implement the Javascript API.
There are several data elements that you can get or set using the LMSSetValue and the LMSGetValue functions of the API. We won't explain all of them but we will show you some of them that we found interesting to track some useful user progression informations in your SCOs.
The API data elements you can use
cmi.core.score.raw element : store the score of the user in this lesson. It must be a normalized value bteween 0 and 100. (%) cmi.core.lesson_status element : store the status of the lesson for this user, permitted values are : passed, failed, completed, incomplete and browsed.
A good practice of use of this element in your Javascripts could be the following : Set this element at « browsed » or « incomplete » when the lesson starts (in the init function for example) :
API.LMSSetValue("cmi.core.lesson_status", "incomplete");
Set it as « passed » or « failed » when the user arrives on a end page of your lesson, depending on the score he got the the tests and questions in the lesson.
API.LMSSetValue("cmi.core.lesson_status", "passed");
We will give two example of tracking information that you could code in javascript quite easily. For further information about the tracking element you could use with Scorm, please refer to official documentation on http://www.adlnet.org.
Tracking user's score in a SCO
Let's suppose that your lesson / SCO contains some exercises, quizz... and that the total result is stored in a Javascript variable called totalScore. You can report this information to the server with the data element « cmi.core.score.raw ». When the exercise is done, just add the Javascript call
API.LMSSetValue("cmi.core.score.raw",totalScore );
Where to put this call exactly depend on how you organized your HTML page(s) with the quizz. It could be on the event triggered when a « submit » button is pressed (using the onClick event in javacript) as well as on the onload event of the last page of your test that shows the correct answers for example. The decision is up to you. All you have to know is that the score wil really be saved on the server only when this call will happen and that a call to LMScommit and/or LMSfinish is done.(this depend a lot on the LMS you use).
Tracking time spent by user in a SCO
You could also want to track the time spent by the user in your lessons. Here is a javascript solution using scorm to do so :
- Set the time spent by the user in the lesson whenever the LMSFinish function is called, by calling just before the LMSsetValue like this :
var myTime = computeTime();
API.LMSSetValue("cmi.core.session_time",myTime );
API.LMSSetValue("cmi.core.lesson_status", ScormStatus);
API.LMSFinish("");
- Declare the following Javascript functions :
function startTimer()
{
startDate = new Date().getTime();
}
function computeTime()
{
var formattedTime = "00:00:00.0";
if ( startDate != 0 )
{
var currentDate = new Date().getTime();
var elapsedSeconds = ( (currentDate - startDate) / 1000 );
formattedTime = convertTotalSeconds( elapsedSeconds );
}
return formattedTime;
}
function convertTotalSeconds(ts)
{
var Sec = (ts % 60);
ts -= Sec;
var tmp = (ts % 3600); //# of seconds in the total # of minutes
ts -= tmp; //# of seconds in the total # of hours
if ( (ts % 3600) != 0 ) var Hour = "00" ;
else var Hour = ""+ (ts / 3600);
if ( (tmp % 60) != 0 ) var Min = "00";
else var Min = ""+(tmp / 60);
Sec=""+Sec
Sec=Sec.substring(0,Sec.indexOf("."))
if (Hour.length < 2)Hour = "0"+Hour;
if (Min.length < 2)Min = "0"+Min;
if (Sec.length <2)Sec = "0"+Sec;
var rtnVal = Hour+":"+Min+":"+Sec;
return rtnVal;
}
The function startTimer() should, in this case be called at the begining of the lesson (same time as the LMSinitialize()), when the first page is loaded or whenever you think that the lesson really starts depending on the content you put in the lesson or that the time should be counted.
A complete example : a single page Quizz SCO with score tracking
Coming soon...
Creating the SCORM Manifest
A SCORM manifest is an XML file (imsmanifest.xml) that describes a course. The manifest file provides metadata such as the title and description of the course, the sequence of the SCOs, the name of the launch file for each SCO and a list of all of the files in the course. Manifest Maker (http://www.e-learningconsulting.com/products/index.html) is a free Dreamweaver extension that you can use to create SCORM manifest files.
Existing tools links
free tools :
- The Reload Editor and the Reload SCORM player : http://www.reload.ac.uk Those tools are open source java applications :
- The Reload Editor : this tools allows you to create and edit an IMS manifest with a convinient graphical interface to visualize its content.
- The Reload SCORM player : This toolkit allows the playing of SCORM 1.2 packages; You can easily see the behaviour of the content and visualize what happens with the SCORM API.
- The EClass Opensource project (BSD license) :http://www.eclass.net This tool allow to build IMS packages with html pages, but not yet with interactive SCORM and not yet as an archive directly usable and uploadable into Claroline. Further version might integrate this option.
- The eXe project : a promizing opensource project, this tool allows you to create structured contents (learning paths with quizes, ...) and export them with the SCORM format. The exported contents work fine within Claroline. http://exe.cfdl.auckland.ac.nz
- MOS Solo : [1] (http://www.moschorus.com/centre/MosPub/solo_fr/index.html). Windows application to create IMS Packages and SCORM contents.
- CourseLab : [2] (http://courselab.com/db/cle/default.html). Windows application to create IMS Packages and SCORM contents.
others :
- ReadyGo webcourse builder : http://www.readygo.com allows the creation of html/javascript interactive SCORM contents.
- A free dreamweaver extension is available here : e-Learning Course Development Kit (http://www.e-learningconsulting.com/products/index.html) HTML developers can create SCOs using it.
- E-Doceo E-learning maker : http://www.e-doceo.fr This tool allows you to build interactive contents in Shockwave or Flash that can be exported as SCORM packages.
- Lectora
- ...
