Pada artikel sebelumnya telah dibahas apa itu SCORM secara singkat dan juga menyiapkan 3 laman HTML dan 1 kode javascript. Pada artikel ini saya akan membahas teknis mengenai isi dari ketiga laman HTML tersebut.

Buka dokumen index.html dengan menggunakan notepad atau code editor yang dimiliki dan masukkan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Index</title>
  <script src="SCORM_API_wrapper.js"></script> 
  <script>
    var quit = false;
    function quitSCO() {
      if (quit) return;
      quit = true;
      pipwerks.SCORM.save();
      pipwerks.SCORM.quit();
    }
  </script> 
</head>
<body 
  onload="pipwerks.SCORM.init()" 
  onunload="quitSCO()" 
  onbeforeunload="quitSCO()" >

  <h1>Konten Pembelajaran SCORM 1.2 Compliant</h1>
  <p>Ini adalah halaman awal, biasanya berisi objektif pembelajaran. Klik di <a href="konten.html">sini</a> untuk melanjutkan.</p> 

</body>
</html>

Bagi yang tidak terbiasa dengan kode HTML dan Javascript mungkin akan terintimidasi dengan uraian di atas, namun sederhananya adalah yang akan muncul ke pembelajar adalah bagian dari <h1> sampai dengan </p>. dan terdapat hyperlink yang dapat diklik oleh pembelajar berupa teks sini, untuk menuju ke laman konten.html

Bagi para programmer, yang perlu diperhatikan adalah pada bagian:

  1. Head script reference harus menautkan source SCORM_API_wrapper.js
  2. Body onload dan onunload harus memanggil fungsi tersebut untuk memastikan LMS dapat menginisialisasi sesi SCORM.

Untuk laman konten.html, silakan membuat dokumennya dan masukkan kode berikut.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Konten</title>
  <script src="SCORM_API_wrapper.js"></script> 
  <script>
    var quit = false;
    function quitSCO() {
      if (quit) return;
      quit = true;
      pipwerks.SCORM.save();
      pipwerks.SCORM.quit();
    }
  </script> 
</head>
<body 
  onload="pipwerks.SCORM.init()" 
  onunload="quitSCO()" 
  onbeforeunload="quitSCO()" >

  <h1>Konten video</h1>
  <p>Bisa saja konten video di-embed di sini, misalnya ke sebuah laman Youtube</p> 
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JGz3i6zhJ3E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  <p>Bila sudah menonton video ini, klik di <a href="penutup.html">sini</a> untuk melihat konklusi.</p>

</body>
</html>

Sangat mirip seperti laman sebelumnya, namun isinya saja yang berbeda. Pada laman ini pembelajar akan melihat video Youtube yang ter-embed ke dalam konten (tentu anda dapat menggantinya dengan yang lain, ini hanya untuk kesederhanaan). Serta terdapat tautan berupa hyperlink dengan teks sini untuk menuju ke laman penutup.html.

Laman penutup.html akan kita gunakan sesuai fungsinya yaitu “penutup” yang akan mengirimkan status completed kepada LMS dalam sesi pembelajaran.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Penutup</title>
  <script src="SCORM_API_wrapper.js"></script> 
  <script>
    var quit = false;
    function quitSCO() {
      if (quit) return;
      quit = true;
      pipwerks.SCORM.save();
      pipwerks.SCORM.quit();
    }
    function completeSCO() {
      pipwerks.SCORM.data.set("cmi.core.lesson_status", "completed");
    }
  </script> 
</head>
<body 
  onload="pipwerks.SCORM.init(); completeSCO();" 
  onunload="quitSCO()" 
  onbeforeunload="quitSCO()" >

  <h1>Penutup</h1>
  <p>Anda telah mengunjungi laman ini yang berarti Anda telah selesai mengakses materi, sistem LMS akan mencatat selesai "completed".</p>

</body>
</html>

Pada laman penutup.html ini terdapat kode tambahan yaitu completeSCO… kode ini berfungsi untuk mengirimkan status “completed” dari konten ke LMS ketika laman ini ter-load.

Sampai saat ini, seharusnya ketiga laman HTML ini sudah bisa dibuka dan dicoba secara offline dengan web browser tanpa harus menggunakan LMS. Namun bila ada yang masih kesulitan / terdapat error, dapat men-download seluruh dokumennya di tautan berikut https://binusianorg-my.sharepoint.com/personal/herru_binus_ac_id/_layouts/15/guestaccess.aspx?docid=084491a0d95f74a778a9cbadf98dd6c5c&authkey=AbkPj2IWtqGcY7QQlBFdU8Q&e=cpCA0z

Pada artikel selanjutnya akan dibahas mengenai bagaimana menambahkan metadata terhadap konten ini dan membungkusnya menjadi sebuah SCO berupa dokumen ZIP yang dapat diunggah pada LMS.

Terima kasih telah membaca dan mengikuti artikel ini, semoga bermanfaat.