CODEWITHSUNDEEP
javascriptiframescorm
Juanki
Juanki

Reputation: 43

SCORM Course in Iframe can't find API

(I'm new to SCORM and Web Development, pardon me if I do not explain something too well.)

I'm trying to run some SCORM courses and have been following this tutorial to do so: http://www.vsscorm.net/2009/05/31/getting-started-the-rte-frameset/

However, in this tutorial they use a frameset and frames to establish this connection from the course to the API implementation. I need to run my course in an iframe, and do not know where/how to place my API document so my SCORM course can find it and connect to it, does anybody know how?

Upvotes: 4

Views: 4915

Answers (1)

pipwerks
pipwerks

Reputation: 4581

In a typical SCORM course, the API connection is maintained in the parent frame while the course content is loaded into a child frame (iframe). The content in the iframe can be loaded and unloaded at will; the content in the iframe will tend to contain the important SCORM calls you'd want to make through the lifespan of a course, such as score and completion status, but they will do so by relaying the info to the parent frame, which owns the communication with the LMS.

Here's quick example using SCORM 1.2 (not tested in an LMS, barebones, would need to be fleshed out)

index.html (parent frame)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Course Title</title>
    <style>
    /* Use CSS to make the iframe fill the parent frame, 
       giving impression no frames are being used */
    body { padding: 0; margin: 0; overflow: hidden; }
    iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; }
    </style>
  </head>
  <body>
    <iframe src="" id="course-content" frameborder="0"></iframe>
    <script>

    //Place initialization routine here.
    //Connect to SCORM API, run API.LMSInitialize()
    var SCORM_API = window.API; //shortcut reference

    function setScore(score){
      SCORM_API.LMSSetValue("cmi.core.score.raw", score);
    }

    function setStatus(status){
      SCORM_API.LMSSetValue("cmi.core.lesson_status", status);
    }

    function endCourse(){
      SCORM_API.LMSCommit();//Save, just in case
      SCORM_API.LMSFinish();//Close API connection
    }

    SCORM_API.LMSInitialize();

    //Load child frame once SCORM_API is ready
    document.getElementById("course-content").setAttribute("src", "content.html");

    </script>
  </body>
</html>

content.html (child frame)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Course Content</title>
  </head>
  <body>
    <p>This is the content of the course. Add scripts to make it do something.</p>
    <script>
    //Place course functionality here, such as setting a bookmark or score.
    //'parent' is the parent frame.
    //This is a very arbitrary example of what you can do when a course loads
    parent.setScore("100");
    parent.setStatus("completed");
    parent.endCourse();
    </script>
  </body>
</html>

You'd typically want to use a SCORM wrapper to handle some of the heavy lifting, and you'd want to use an abstraction layer to improve code maintainability and centralize your SCORM commands in the parent frame. The endCourse() function is a very simple example of an abstraction layer. Instead of invoking the API directly in the child frame, you invoke a function.

Upvotes: 4

Related Questions