Archivos para Scorm – Funciones JS

Estándar

scorm

¿En qué estábamos?

Regresamos con este tema del Scorm y nuestro hola mundo que ya se hizo súper largo verdad XD pero ya casi terminamos, espero… en el último post creamos nuestro archivo index.html y también ya configuramos el archivo imsmanifest.xml que contiene algunos datos de nuestro paquete.

Vamos con #Javascript

Perfecto, ahora vamos a continuar con un poco de javascript, ¿Para qué Javascript?, sencillo, para comunicar nuestro curso/material con nuestra plataforma LMS a través de nuestro Scorm. Comencemos, primer abrimos nuestro editor de código preferido, en mi caso (por milésima vez ❤ ) SublimeText2.

Como mencione la última vez que nos leímos, vamos a crear siete funciones que utilizaremos para comunicarnos con el Scorm, estas funciones son:

  1. init()
  2. CompletarCurso()
  3. ObtenerNombre()
  4. fin()
  5. Mensaje()
  6. onload()
  7. onunload()

Antes de comenzar a escribir las funciones vamos a iniciar una variable con el nombre scorm, esta variable contendrá en sí el API de Scorm.

//inicializamos el objeto scorm
var scorm = pipwerks.SCORM;

Función init()

Ahora si comenzamos con la función init(). La función va a contener la versión de Scorm que vamos a utilizar, en nuestro caso va a ser el Scorm 1.2 😀 .

Para que podamos visualizar de alguna manera el proceso, pues vamos a lanzar un alert(), en este caso vamos a utilizar la función Mensaje(), mandándole el parámetro de “Inicializando el curso”.

Ahora vamos a crear una variable en donde vamos a iniciar la conexión con el scorm y él nos responderá con un valor Booleano, si se conectó de manera correcta será un True, de lo contrario regresará un False, por último, mandamos el mensaje al usuario para informarle el resultado de la conexión.

//Funcion para inicializar el curso
function init(){
    scorm.version = "1.2";
    Mensaje("Iniciando el Curso.");
    var respuesta = scorm.init();
    Mensaje("Curso iniciado correctamente? " + respuesta);
}

Eso es todo para la función init(), la función en sí es muy corta, de hecho todoas las funciones que vamos a hacer son así de cortas.

Función CompletarCurso()

La función que vamos a escribir a continuación es la que le comunicará al LMS que el alumno ha terminado el curso, así que definiremos la función con el nombre CompletarCurso().

Avisaremos al usuario que se está intentando marcar el curso como completado utilizando la función Mensaje(), el LMS nos responderá como al iniciar el curso si esta petición se realizó de la manera correcta o no.

//Asigna el curso como completado
function CompletarCurso(){
    Mensaje("Marcando curso como Completado.");
    var respuesta = scorm.set("cmi.core.lesson_status", "completed");
    Mensaje("Curso Completado? " + respuesta);
}

Función ObtenerNombre()

Con ésta función vamos a preguntarle al LMS cual es el nombre del alumno que está realizando el curso. Se crea la función ObtenerNombre() y utilizamos una variable para almacenar el nombre que nos devolverá el LMS al preguntarle por él.

Por último lo mostramos en el div que creamos en el HTML utilizando innerHTML.

// Pregunta ala plataforma por el nombre del usuario
function ObtenerNombre(){
    var nombreUser = scorm.get("cmi.core.student_name");
    document.getElementById('Nombre').innerHMTL = '<b>' + nombreUser + '</b>';
}

Función fin()

La función end() tiene la utilidad de terminar la conexión con el LMS, así que solo mandamos el mensaje al usuario que se termina la conexión y la plataforma de nueva cuenta nos mandará la respuesta a la petición, nos devolverá un True o un False.

//Termina la conexion con el LMS
function end(){
    Mensaje("Conexion terminada.");
    var respuesta = scorm.quit();
    Mensaje("Termino correctamente? " + respuesta);
}

Función Mensaje()

Como les había dicho, al inicio de las funciones, creo que en todas las funciones se utiliza ésta funcion, y en sí solo es la utilización de un alert() que recibe como parámetro un mensaje que se lanzará al usuario.

//Manda un Alert al usuario
function Mensaje(msg){
    alert(msg);
}

Función onload()

En sí ésta función es un evento de javascript que se ejecuta al cargar la ventana, es por eso que accesamos al evento onload para mandar a llamar a la funcion init() que iniciará la conexión con el LMS.

//Se ejecuta al cargar la pagina
window.onload = function(){
    init();
}

Función onunload()

De igual menra el evento onunload es de javascript y se ejecuta al cerrar la página, es en este momento cuando mandamos a llamar la funcion end() que terminará la conexión con el LMS.

//Se ejecuta al terminar la pagina
window.onunload = function(){
    end();
}

Código completo

Así que el codigo con todas las funciones nos debería quedar de ésta manera:

//inicializamos el objeto scorm
var scorm = pipwerks.SCORM;

//Funcion para inicializar el curso
function init(){
	scorm.version = "1.2";
	Mensaje("Iniciando el Curso.");
	var callSucceeded = scorm.init();
	Mensaje("Curso iniciado correctamente? " + callSucceeded);
}

//Asigna el curso como completado
function CompletarCurso(){
	Mensaje("Marcando curso como Completado.");
	var callSucceeded = scorm.set("cmi.core.lesson_status", "completed");
	Mensaje("Curso Completado? " + callSucceeded);
}

// Pregunta ala plataforma por el nombre del usuario
function ObtenerNombre(){
	var nombreUser = scorm.get("cmi.core.student_name");
	document.getElementById('Nombre').innerHTML = '<b>' + nombreUser + '</b>';
}

//Termina la conexion con el LMS
function end(){
	Mensaje("Conexion terminada.");
	var callSucceeded = scorm.quit();
	Mensaje("Termino correctamente? " +callSucceeded);
}

//Manda una Alert al usuario
function Mensaje(msg){
	alert(msg);
}

//Se ejecuta al cargar la pagina
window.onload = function (){
	init();
}

//Se ejucuta al terminar la pagina
window.onunload = function (){
	end();
}

Genial, terminamos la parte de javascript, ahora solo queda empaquetar y subir a nuestra plataforma para poder ver lo que hemos hecho 😀 , en la siguiente entrada vamos a ver como empaquetar nuesro contenido Scorm para poder publicarlo correctamente en nuestra plataforma LMS.

Saludos y que tengan un buen fin de semana  😀

 

Si tienen alguna duda pueden dejar un comentario o mandar mail 😀

J. Antonio Mora

RaptorsArts

RaptorsArts

Anuncios

Un comentario en “Archivos para Scorm – Funciones JS

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s