Publicar un curso con SCORM

Estándar

scorm

 

 

 

Publicar el paquete

¡Hey que tal! ya regrese con este ultimo post de como publicar nuestro paquete SCORM, en si no tenia planeado hacer todo esto, pero sentí que era necesario, el objetivo era como integrar SCORM con Unity 3D, pero como les mencioné, quizá era necesario que entendieran un poco cómo es que funciona el SCORM, así que en la siguiente entrada voy a empezar con la integración.

Ahora vamos a la parte final de esto, vamos a publicar el paquete en nuestra plataforma LMS, en mi caso voy a utilizar la plataforma Moodle, pero en dado caso de que no tengas alguna instalado ya en tu computadora como lo dije en el primer post de SCORMpueden instalar un moodle en su localhost (enlace en la parte final de la entrada) o pueden utilizar la siguiente opción, moodlecloud para utilizar una pagina ya con moodle pre-instalado, te registras y listo 😀 .

Comencemos

En nuestra página principal del Moodle vamos a ir a la administración del sitio, después vamos a ir a la sección de cursos y seleccionamos la opción de administrar cursos.

Administrar Cursos

Administrar Cursos

En ésta sección vamos a crear una nueva categoría, en mi caso voy a ponerle de nombre a la categoría “Prueba SCORM” y damos en crear.

Agregar categoría

Agregar categoría

Una vez creada la categoría vamos a agregar un nuevo curso en la categoría que acabamos de crear, como nombre le pondré algo sencillo, “test”, y nos vamos a la parte donde se muestran las opciones de Formato de Curso, aquí es muy importante  seleccionar Actividad simple y Paquete SCORM, recuerden, ¡MUY IMPORTANTE! :D.

Formato de curso

Formato de curso

Damos clic en mostrar y visualizar para después dar clic en la opción de Proceder al contenido del curso, en este punto vamos a subir nuestro empaquetado .zip que creamos en el post anterior en el apartado de “Paquete” y seleccionamos nuestro archivo y damos clic en subir.

Contenido de curso

Contenido de curso

Una cosa más, es mejor utilizar una ventana solo para nuestro contenido, esto lo hacemos cambiando la opción en la Apariencia de nuestro curso.

Apariencia

Apariencia

 

Perfecto, guardamos los cambios y podemos dar clic en la opción “Entar” para ver lo que hicimos 😀 .

Iniciando

Iniciando

En la página emergente podemos ver que se muestra el contenido que creamos en la entrada de Crear el archivo index, un par de botones para conocer el nombre del usuario y para marcar el curso como completado.

Al iniciar el curso vemos como sale un alert indicando que se esta iniciando el curso. Aceptamos el cuadro de diálogo y vemos el contenido, del lado izquierdo vemos que hay un apartado con el nombre que pusimos cuando creamos el archivo imsmanifest.xml, hay un recuadro en blanco, eso índica que el contenido no está terminado.

Obtener nombre

Obtener nombre

Si damos clic en el botón de obtener nombre, nos mostrará el nombre del usuario debajo del botón, ¡Genial! 😀 se comunica nuestro contenido con el LMS.

Probemos ahora en pasar el curso a completado presionando el botón correspondiente.

Completar curso

Completar curso

Mandará la ventana emergente y si todo sale bien nos regresara una respuesta de true que será como equivalente a felicidad (jajaja xD). Vale, ahora podemos cerrar la ventana emergente y volver a abrirla para que cuando se cargue de nuevo el contenido veamos algo como lo siguiente.

Curso completado

Curso completado

¿Notas algo diferente?, ¡Claro! hay una palomita en el recuadro blanco del lado izquierdo, eso significa que esa parte del curso ya estaba completada, entonces eso significa que nuestro contenido funcionó correctamente 😀 .

Con esto se termina esta mini serie de tutoriales, en donde cada día les dejaba algo para poder realizar el demo, ahora es tu turno de implementarlo en lo que mas quieras. En mi caso vamos a implementarlo dentro de Unity 3D.

¡Nos estamos leyendo! Hasta la próxima 😀 Terminemos el lunes con algo tranquilo ❤

Recuerden que tienen el Github con los archivos para el demo, si tienen alguna duda no duden en consultar el repositorio o dejar algún comentario 😀 .

Repositorio de Github: https://github.com/JoseAntonioMora/ScormDemo/

J. Antonio Mora

RaptorsArts

RaptorsArts

 

¿Cómo empaquetar un SCORM?

Estándar

scorm

Empaquetando nuestro scorm

Bienvenidos de nuevo, hemos llegado por fin (Yei! 😀 ) al momento de empaquetar nuestro curso/contenido para poder subirlo a nuestra plataforma LMS y poder ver lo que hemos hecho.

Contenido de nuestro empaquetado

El empaquetado debe tener ciertos archivos en la raíz de nuestro archivo .zip, así es, vamos a crear un archivo .zip para agregar ahí todo el contenido de nuestro curso.

Es muy importante tener en la raíz de nuestro .zip el imsmanifest.xml y el archivo index.html así como el SCORM_API ya que si no se tienen en la correcta ubicación tendremos errores a la hora de hacer la publicación del módulo.

La estructura de mi carpeta es la siguiente:

Estructura de carpeta

Estructura de carpeta

Entonces vamos a seleccionar directamente los archivos, es muy importando, seleccionar directamente los archivos para después dar clic en dar comprimir, pero en formato  .zip, ya que la mayoría de los LMS utilizan este formato.

Comprimir Archivos

Comprimir Archivos

Entonces vamos a tener nuestro archivo ya listo para poder publicarlo en nuestra plataforma, pero eso lo realizaremos en el siguiente post 😀 .

Por lo pronto pueden empezar este magnífico lunes con un poco de música que alegra el alma 😀 Nos estamos leyendo pronto, ¡Saludos y que tengas un excelente día!

J. Antonio Mora

RaptorsArts

RaptorsArts

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