In my previous post, I briefly explained how to add SCORM code to an existing Flash file by using the pipwerks SCORM wrapper and SCORM ActionScript class.
Today, I’m going to explain how to add SCORM code to a plain HTML file. This example uses SCORM 1.2 syntax, but as I explain at the end of the tutorial, it’s really easy to edit the code to use SCORM 2004 syntax.
I certify that…
Let’s say you have a project where all you need to do is allow a user to confirm that they have completed a task, sort of like a digital signature. In e-learning, our clients often run into compliance issues where all they really need to do (or have time to do) is prove an employee was exposed to certain training materials.
“I, [name here], certify that I have read the materials presented to me.”
[Button: I agree]
This scenario is really easy to handle in any LMS with SCORM support. Let’s start by creating an HTML file containing a simple form.
Create the HTML
I’m using XHTML 1.0 Transitional in this example, but you can use XHTML 1.0 Strict or HTML 4 if you prefer… it doesn’t really matter.
<form id="myform" method="post"> <fieldset> <legend>Please indicate your choice</legend> I, [name here], certify that I have read the materials presented to me. <input id="submit" name="submit" type="submit" value="Yes, I agree" /> </fieldset> </form>Code language: HTML, XML (xml)
Here is a functioning example of the plain HTML file (with CSS styling added).
Note: I always try to use progressive enhancement techniques in my web projects — avoid all inline scripting — which means we’ll use a window.onload event to apply our form submission code:
In our simple example, we want to provide feedback when the form is submitted (something along the lines of “Your choice has been recorded”). We also want to disable the submit button when it’s clicked so that it doesn’t get submitted twice by mistake. We can kill two birds with one stone here by replacing the submission form with a custom feedback message. And it only takes one line of code in the
initForm function! Sweet!
SCORM it up
Okay, now that we have a functioning HTML file, lets’ add some SCORM code to it! The ‘course’ will need to perform the following tasks:
- Connect to the LMS
- Get the learner’s name (and add it to the HTML page)
- Check for a previous completion
- Set the course to “completed” if the user clicks the form submission button
- disconnect from the LMS
Before we can start adding the SCORM code, we need to link to the pipwerks SCORM API wrapper (this example uses version 1.1.5).
Add the SCORM wrapper
Note: I’ve seen that some people don’t understand the difference between my pipwerks SCORM wrapper and the SCORM wrapper available from the ADL or other sources. The short version is: you only need the pipwerks wrapper! Do not include the other wrappers or you may run into errors; the pipwerks wrapper was designed to replace those wrappers while adding extra functionality and error-checking. As MacLeod used to say, “There can be only one…”. 😉
After linking to the wrapper, you’ll need to create two global variables (you can use object notation if you prefer, but I’ll keep it simple here to make it easier to follow).
scorm is a shortcut that helps reduce typing. If you didn’t use this shortcut, you’d need would need to use the full phrase
<strong>pipwerks.scorm</strong>.xxx wherever you see
lmsConnected is used to store a boolean (true/false) indicating whether or not we’re connected to the LMS.
You should always include some kind of error handling in your code to let the user know what’s going on. For this example, I’m using a function that displays an alert, then closes the course window.
Starting the course
Before we can make any calls to the LMS, we have to get the course connected! We’ll do this using a function named
initCourse (feel free to use another name if you like).
Edit the HTML
If you read through the code comments, you’ll see that we need to add an element named “learnername” to the page. I plan to display the username in the main sentence; here’s the edited HTML code:
<form id="myform" method="post"> <fieldset> <legend>Please indicate your choice</legend> I, <span id="learnername">[name here]</span>, certify that I have read the materials presented to me. <input id="submit" name="submit" type="submit" value="Yes, I agree" /> </fieldset> </form>Code language: HTML, XML (xml)
initCourse will replace the text
[name here] with the
cmi.core.student_name from the LMS.
Add the completion code
Now that we’ve connected to the LMS, how do we set the course to complete? With a function named
setComplete, of course! (Again, you can rename any of these functions of you prefer)
All that’s left now is adding the
setComplete(); call to the form submission event (the course will not be set to complete unless the form is submitted), and adding the
initCourse() call to the
Here is the final product.
Prefer SCORM 2004 over SCORM 1.2?
This example uses the SCORM 1.2 calls
cmi.core.student_name. If you prefer to use SCORM 2004, just change
cmi.learner_name. You should also remove the code snippet
|| completionstatus == "passed", since SCORM 2004 doesn’t use the term “passed”. The rest of the code remains the same!
Don’t forget the manifest!
LMSs require that SCORM courses include an imsmanifest.xml file. You will need to include one to get this example working on an LMS. The imsmanifest files vary greatly between SCORM 1.2 and SCORM 2004 (SCORM 2004 uses much more complex manifests).
To borrow a line from A List Apart, “was it good for you, too?” Please let me know. Until next time…
Regarding manifests, do you know of any good resources for learning about the elements/structure of these? I guess the ADL documentation is the best place, but I was wondering if there is anything a little less verbose?
Thanks. Regarding manifests, they’re my least favorite part of SCORM by a very large margin. I’ve yet to find a clear, easy-to-follow set of guidelines for creating and/or editing a manifest, and the manifests themselves can be so verbose they hurt my eyes! 🙂
Most people I’ve talked to simply suggest using one of the many manifest-generating programs out there, such as reload or exe. Personally, I haven’t really found those programs any easier than manually editing a copy of an existing manifest.
If you find any good manifest resources, please share!
Great article about scorm!
I found very useful e-learning tool, but it’s a bit difficult to find technical docs
Thanks for the wonderful tutorial and wrapper code, etc.– but I have a question. Adapting your examples I find that status somehow gets set to “completed” (and saved as uch by the LMS) even when I do NOT call the setCompleted() method, e.g. if I exit from the SCORM object (in Moodle) before setting the status to completed. In my adaptation I have multiple pages, on the first of which I call initialize and on the last of which I call setComplete.
Any thoughts or suggestions? Can I reach you through email?
Thanks in advance,
@alan try posting your question on the eLearning Technology and Development Google Group
Hello, I’m totally newbie at SCORM. I have a problem with examples from download section (SCORM JS Wrapper). When I open scorm2004.html in my browser, I get error “Course could not connect with the LMS”. What am I doing wrong?
@Lukasz SCORM-based courses must be launched from an LMS (or SCORM test environment like cloud.scorm.com) or they’ll throw errors because the SCORM API is not found.
Comments are closed.