在典型的SCORM課程中,當課程內容加載到子框架(iframe)中時,API連接保留在父框架中。 iframe中的內容可以隨意加載和卸載; iframe中的內容將傾向於包含您希望在課程的整個生命週期中進行的重要SCORM調用,例如分數和完成狀態,但是他們會通過將信息中繼到父框架來實現,父框架擁有與LMS溝通。
下面是使用SCORM 1.2簡單的例子(在LMS沒有測試,準系統,將需要充實)
的index.html(父幀)
<!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(子幀)
<!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>
通常你想使用一個SCORM包裝來處理一些繁重的工作,和你想使用的abstraction layer提高代碼的可維護性和CE在父框架中集中您的SCORM命令。 endCourse()
函數是抽象層的一個非常簡單的例子。不是直接在子框架中調用API,而是調用一個函數。