第12回 SCORM APIとJavaScript 2

最低限の構成要素を持つ，簡単な SCORMコンテンツの例を見て， それを元にSCORMに準拠したコンテンツを作成します。

■ SCORMコンテンツの例

ほとんど最小限の構成とも言える， 簡単なSCORMコンテンツの例を見てみましょう。 SCORMコンテンツは通常， 構成要素である複数のファイルを（ZIP形式等によって）一つのファイルに まとめた形になっています。
＞＞ SCORMコンテンツのサンプルファイル (scorm1.zip) のダウンロード ＜＜

サンプル scorm1.zip の中身は，4つのファイルから成っています。

これらの内，最初の imsmanifest.xml というファイルだけは 名前が固定です。（他の名前を付けることはできません。）

これら各ファイルの内容を以下にも載せておきます。 （これらの内容を理解するには，前のタスク11で得た知識が必要です。）

なお，scorm1.zipに含まれるファイルの再配布，一部転載，改変等はご自由にどうぞ。

◆ imsmanifest.xml

SCORMコンテンツには必ず必要なファイル。
identifierref と identifier の対応に注意しつつ，見てください。 
<?xml version="1.0" encoding="UTF-8"?>
<manifest identifier="Manifest-jke12" xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd" >

<metadata />

<organizations default="jke12">
  <organization identifier="jke12">
    <title> 2shinsuu </title>
    <item identifier="jke12a" identifierref="r-jke12a">
      <title> Hajimeni </title>
      <item identifier="jke12a-1" identifierref="r-jke12a-1">
        <title> Kakunin tesuto </title>
      </item>
    </item>
  </organization>
</organizations>

<resources>
  <resource identifier="r-jke12a" type="webcontent" adlcp:scormtype="sco" href="index.html"> 
    <file href="index.html"/>
    <file href="jke12.js"/>
  </resource>
  <resource identifier="r-jke12a-1" type="webcontent" adlcp:scormtype="sco" href="page2.html"> 
    <file href="page2.html"/>
    <file href="jke12.js"/>
  </resource>
</resources>

</manifest>
imsmanifest.xml の中の title 要素には本来，日本語などの UTF-8 の文字が使えますが， 後程利用する MoodleのSCORMモジュールでは， Moodleのバージョンによってはうまく読み込めないようなので， このサンプルでは敢えてローマ字表記にしてあります。

◆ index.html

最初に見るページ。コンテンツの導入部。
ページを開いた時とページから去る時に， それぞれ scInit() と scFin() という命令が実行されるようになっている。 scInit() と scFin() は，jke12.js の中で定義されている。 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
  <title>はじめに</title>
  <script type="text/javascript" src="jke12.js"></script>
</head>

<body onload="scInit();" onunload="scFin();">
<h2>はじめに</h2>

<div style="background-color:#cfc; padding:1em;">
2進数って分かりますか？
</div>

<p style="font-size: 14px">
皆さんは普段の生活の中で計算をするときに，10進数を使っていますが，<br />  
コンピュータが計算するときには，2進数を使って計算しています。
</p>
<p style="font-size: 18px">
コンピュータの気持ちを少し分かってあげるためには，
2進数についての知識が必要です。
</p>
</body>
</html>

◆ page2.html

2番目に見る。 自動採点される小テストがあるページ。
ページを開いた時とページから去る時に， それぞれ scInit() と scFin() という命令が実行されるのは， 上のindex.htmlと同じ。
LMSからユーザ名を取得して，小テストの結果表示には学習者の名前も出る。 小テストの採点結果は LMS にも送信される。 
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
  <title>確認テスト</title>
  <script type="text/javascript" src="jke12.js"></script>
</head>

<body onload="scInit();" onunload="scFin();">

<h2>確認テスト</h2>

<script type="text/javascript">
<!--
var question0;
var key0 = 2;
        
function tellScore(){
  var quizScore = 0;

  for (var i= 0; i < 3; i++){
    if (document.getElementById("quiz1").quest1[i].checked){
      question0 = document.getElementById("quiz1").quest1[i].value;
      break;
    }
  }
  if (question0 == key0){
    quizScore += 100;
  }

  var stName= API.LMSGetValue( "cmi.core.student_name" );
  alert(stName + "さん，今回の点数は" + quizScore + "点です。")   
  API.LMSSetValue( "cmi.core.score.raw", quizScore );

  if ( quizScore < 60 ){
    API.LMSSetValue( "cmi.core.lesson_status", "failed" );
  }else{
    API.LMSSetValue( "cmi.core.lesson_status", "passed" );
  }

  API.LMSCommit("");
}
-->
</script>

<form id="quiz1" action="javascript:tellScore();">
<div style="background-color:#9cf; padding:1em;">
簡単なテスト
</div>
<b><p>2進数の 110 は，10進数では何ですか？</p></b><br/>
<table>
<tr><td><input type="radio" name="quest1" value="1" /></td>
<td>ケイサツ</td></tr>
<tr><td><input type="radio" name="quest1" value="2" /></td>
<td>6</td></tr>
<tr><td><input type="radio" name="quest1" value="3" /></td>
<td>12</td></tr>
</table><br/>
<input type="submit" value="解答提出" />
</form>

</body>
</html>

◆ jke12.js

index.htmlおよびpage2.htmlでの 共通の処理である scInit() と scFin() という命令が定義されている。 
var API= null;

var findAPIcount= 0;

function findAPI(win){
  if( typeof(win.API != "undefined") && (win.API != null) ){
    return win.API;
  }else if ( (win.location == top.location) || (findAPIcount > 7) ){
    return null;
  }else{
    findAPIcount++;
    return findAPI(win.parent);
  }
}

function scInit(){
  API= findAPI(window);
  if (API != null){
    API.LMSInitialize("");
  }else{
    alert("APIが見つけられません。");
  }
}

function scFin(){
  if (API != null){
    API.LMSFinish("");
  }
}

黒髪小学校の植木鉢