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

 

ARCHIVOS PARA SCORM – INDEX

Estándar

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 XD ), 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!)