Publicar un curso con SCORM

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

 

Archivos para Scorm – Funciones JS

scorm

¿En qué estábamos?

Regresamos con este tema del Scorm y nuestro hola mundo que ya se hizo súper largo verdad 😄 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

ARCHIVOS PARA SCORM – INDEX

scorm

 

 

 

EL ARCHIVO INDEX.html

Hola de nuevo, ahora vamos a realizarlo que es el archivo donde ya vamos a empezar a ver lo que hace Scorm, en este archivo como les mencioné en el post pasado, vamos a ver como obtener el nombre de usuario de la plataforma para mostrarlo en pantalla.

comencemos…

Empecemos abriendo nuestro editor de código favorito (SublimeText2 ❤ 4ever 😄 ), una vez hecho esto vamos a crear un archivo nuevo llamado “index.html” obviamente sin las comillas,  y vamos a crear lo elemental de una pagina web, les digo porque me gusta tanto SublimeText2, pues solo pongo ésta instrucción:

html:5 > Presiono tabulador y listo, me sale esto 😀 (primero instala emmet)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
</body>
</html>

Modificamos el título y ponemos algo que sea de nuestro agrado, yo pues pondré algo único, “Hola mundo”, no me juzgues jajaja, vale entonces vamos a empezar a crear nuestro documento.

Agregamos el SCORM API que descargamos el Github y lo vamos a agregar dentro del head para que podamos utilizarlo.

<head>
    <meta charset="UTF-8">
    <title>Hola Mundo WordPress</title>
    <script type="text7javascript" src="SCORM_API_wrapper.js"></script>
</head>

y en el body vamos a poner dos botones  y un div con el id Nombre, en este div vamos a mostrar el nombre del alumno que esta viendo el curso. Así que tendremos algo parecido a esto:

<body>
    <h2>Primera conexión a la plataforma LMS</h2>
    <input> type="button" onclick="ObtenerNombre()" value="Obtener Nombre">
    <input> type="button" onclick="CompletarCurso()" value="Completar Curso">
    <div id="Nombre"></div>
</body>

Perfecto, ya tenemos listo la estructura HTML que necesitamos, ahora vamos a escribir algo de código javascript, en nuestra prueba vamos a utilizar 7 funciones, a continuación las listo.

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

Estas funciones las vamos a ver en la siguiente entrada, por hoy es todo 😀 , Saludos! y nos vemos para codear algo de Javascript y ver por fin la luz al final del tunel jajaja.

J. Antonio Mora

RaptorsArts

RaptorsArts

Disfrutar que es viernes!! un viernes con muchísima energía 😀 (visiten nuestra pagina web, cualquier duda no piensen en mandar mail!)