2016-03-28 7 views
0

(Ich bin neu in SCORM und Web-Entwicklung, verzeihen Sie mir, wenn ich etwas erklären nicht allzu gut.)SCORM-Kurs in Iframe kann nicht finden, API

Ich versuche, einige SCORM-Kurse zu laufen und haben diesem Tutorial folgen, um dies zu tun: http://www.vsscorm.net/2009/05/31/getting-started-the-rte-frameset/

In diesem Tutorial verwenden sie jedoch ein Frameset und Frames, um diese Verbindung vom Kurs zur API-Implementierung herzustellen. Ich muss meinen Kurs in einem iframe ausführen und weiß nicht, wo/wie ich mein API-Dokument platzieren soll, damit mein SCORM-Kurs es finden und eine Verbindung herstellen kann, weiß jemand wie?

Antwort

2

In einem typischen SCORM-Kurs wird die API-Verbindung im übergeordneten Frame beibehalten, während der Kursinhalt in einen untergeordneten Frame (iframe) geladen wird. Der Inhalt im Iframe kann beliebig geladen und entladen werden; Der Inhalt im iframe enthält in der Regel die wichtigen SCORM-Aufrufe, die Sie über die Lebensdauer eines Kurses machen möchten, z. B. den Score und den Abschlussstatus. Dies geschieht jedoch, indem die Informationen an den übergeordneten Frame weitergeleitet werden, der den Kommunikation mit dem LMS.

Hier schnelles Beispiel ist SCORM mit 1.2 (nicht in ein LMS getestet, Barebones, müssten konkretisiert werden)

index.html (Mutterrahmen)

<!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 (Kinder Rahmen)

<!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> 

Sie würden normalerweise verwenden möchten eine SCORM-Wrapper einige schweres Heben zu handhaben, und Sie würden einen abstraction layer zu verbessern Code Wartbarkeit und ce verwenden möchten ntralisieren Sie Ihre SCORM-Befehle im übergeordneten Frame. Die endCourse()-Funktion ist ein sehr einfaches Beispiel für eine Abstraktionsschicht. Anstatt die API direkt im untergeordneten Frame aufzurufen, rufen Sie eine Funktion auf.