En este post vamos a ver cómo se puede usar JavaScript en Storyline 360 para pasarle datos al LMS o para obtener datos del LMS y utilizarlos dentro del curso SCORM.
JavaScript es un código ampliamente utilizado en la programación web y hemos visto cómo algunos desarrolladores lo usan para crear interacciones visuales en Storyline 360. Lo interesante es que JavaScript también puede usarse dentro de un curso SCORM para la comunicación con el LMS que lo aloja.
Esta comunicación entre curso y LMS es algo que ya hace SCORM en sí, lo que vamos a ver es una manera alternativa de enviar y recibir “mensajes” (o variables) para potenciar la funcionalidad de un curso o afinar la calidad de sus reportes de actividad.
En estos 4 ejemplos vamos a ver lo siguiente:
- Cómo recuperar el nombre de un usuario desde el LMS.
- Como tomar la fecha actual y mostrarla en un curso o en un certificado.
- Cómo establecer un puntaje personalizado que se guarde en la plataforma.
- Cómo establecer una finalización del curso sin informar sobre su aprobación o no.
Bienvenidos al lado oscuro
El uso de JavaScript está incorporado a Storyline desde 2014 a través de un accionador que se llama precisamente Agregar JavaScript pero Articulate no da soporte sobre su uso. Todo lo que se proponga en la comunidad de usuarios es bienvenido, pero no hay tutoriales oficiales. Lo que podemos encontrar en la comunidad de Articulate son recomendaciones generales y consejos sobre dónde aprender más del tema.
JavaScript tiene sus propias reglas y esto puede ser complejo para los creadores de cursos que tenemos base en la didáctica o en el diseño gráfico. Es por ello que la idea de este post es proponer algunos snippets sencillos de JavaScript que sabemos que funcionan “así como están” en Storyline. En algún caso entendemos que hace cada línea del código y lo comentamos.
Obtener el nombre del usuario desde el LMS
Hay cursos en los que se incluye un campo de formulario para que los alumnos ingresen su nombre. En las sucesivas escenas del curso, esa variable se usa para llamar al usuario con ese nombre. Esto no es necesario si tomamos esa información directamente desde el LMS y por otra parte sería lo más razonable, porque el alumno ya está logueado en la plataforma.
Para tomar el nombre del usuario desde el LMS hay que incluir el siguiente código Javascript en nuestro Storyline:
// Tomar el nombre del usuario y guardarlo
// en las variables Nombre y Apellido de Storyline
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}
var lmsAPI = findLMSAPI(this);
var newName = "Invitado";
if (lmsAPI) {
var myName = lmsAPI.GetStudentName();
var array = myName.split(',');
var firstName = array[1];
var lastName = array[0];
}
var player = GetPlayer();
player.SetVar("Nombre", firstName);
player.SetVar("Apellido", lastName);
// esto es opcional y con propósitos de verificación
// alert(firstName + " " + lastName);
¿Qué hace este código línea por línea?
- Las primeras 6 líneas de código hasta var lmsAPI = findLMSAPI(this) buscan la conexión del curso con el LMS a través de algo que se llama API. Son varias líneas porque el LMS podría agregar un iframe (ventana dentro de la ventana que muestra el curso) y se trata de recorrer estos iframes hasta encontrar el que realmente necesitamos para conectarnos al LMS.
- La línea var newName = “Invitado” establece un valor para el nombre del alumno en caso de que no encontráramos nada. Invitado queda mejor que una cadena de texto vacía.
- La línea var myName = lmsAPI.GetStudentName supone que ya establecimos la conexión con el LMS y pedimos el nombre del alumno que accedió a ese curso. El nombre se va a guardar en una variable que se llama myName, pero no es una variable de Storyline sino de JavaScript.
- En el LMS el nombre está guardado como “Perez, Juan” y nosotros queremos transformarlo en “Juan Perez”. Para eso son las siguientes tres líneas, que dividen en dos el contenido de la variable con myName.split(‘,’) y ponen cada parte en nuevas variables de JavaScript: firstName y lastName. Hasta ahora todo sigue dentro de JavaScript.
- La siguiente línea de código, var player = GetPlayer() es para conectar Storyline con JavaScript. Es algo que no está en todos los ejemplos que vimos, pareciera que es redundante pero no daña. Luego hay dos líneas en las que se asigna el contenido de las variables de JavaScript firstName y lastName a las variables de Storyline Nombre y Apellido.
- La última línea //alert (firstName + ” ” + lastName) sirve para ver rápidamente si funciona todo lo anterior. La doble barra delantera deshabilita esta línea, pero si se sacan las barras, Storyline mostrará un mensaje emergente con el nombre del usuario logueado. O bien el texto Invitado si es que algo salió mal.
Guardar la fecha actual en una variable de texto de Storyline
Este recurso también nos puede servir para crear un certificado y mostrárselo al alumno, entre otras cosas.
JavaScript tiene incorporados todos los elementos de manejo de fecha. La formas de guardar la fecha actual en una variable de Storyline es con el agregado del siguiente código:
// Guardar fecha actual en una variable de Storyline
// ya creada SLDiadehoy
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1; //Enero es 0!
var year = currentDate.getFullYear();
var player = GetPlayer();
var diaHoy = day + "/" + month + "/" +year
player.SetVar("SLDiadehoy", diaHoy);
Adicionalmente, JavaScript brinda muchas opciones de formato de fecha.
Una de las formas sencillas de obtener el formato local es usando el método toLocaleDateString (). Los formatos locales de fecha y sus opciones están muy bien explicados en el curso Rise de Zsolt Olahhttps sobre cómo usar JavaScript en Articulate Rise 360.
Guardar un puntaje personalizado en el LMS
En el ejemplo del nombre del alumno trajimos algo desde el LMS, pero también podemos almacenar datos allí. Por ejemplo, una puntuación de una prueba con un resultado personalizado. En este segundo ejemplo veremos cómo almacenar un puntaje de prueba o scoring directamente en el LMS, sin pasar por el cuestionario de SCORM.
¿Para qué nos serviría esto? Supongamos que nuestro curso no tiene una única instancia de prueba, sino varias. O mejor, no tiene pruebas y el scoring se establece de acuerdo a los recorridos que hace cada cursante. Es decir, los puntajes se van obteniendo por sumas y restas de puntos con algunos mecanismos de gamificación a lo largo de distintas instancias. En este caso, la calificación no tiene nada que ver con el resultado de un cuestionario. Vamos a generar el puntaje como resultado de un recorrido o de un juego y vamos a querer que el LMS lo registre y lo informe en la forma correcta.
Para generar un puntaje del usuario en el LMS vamos a usar el siguiente código JavaScript:
// pasamos un scoring al LMS desde nuestra variable SLResultado
function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}
var lmsAPI = findLMSAPI(this);
var myScore = 0;
if (lmsAPI) {
var player = SetPlayer();
var myScore = player.GetVar("SLResultado");
lmsAPI.SetScore(myScore,100,80);
}
// en SetScore, el primer valor es el puntaje
Por supuesto, la variable SLResultado debe existir en nuestro proyecto de Storyline y debemos verificar que efectivamente está generando el puntaje correcto para cada recorrido.
¿Qué hacen las líneas de este código?
- Igual que en el caso anterior, las primeras 6 líneas buscan establecer una conexión con la API de la plataforma.
- La línea var myScore = 0 establece una variable de JavaScript myScore que empezará teniendo el valor cero.
- Las líneas clave son las que que vienen después de var player = SetPlayer() que conecta al player del curso con JavaScript.
- La línea var myScore = player.GetVar(“SLResultado”) es la que cambia el valor de myScore y le asigna el contenido de la variable de Storyline SLResultado. Así que ahora la variable de JavaScript myScore contiene el contenido de la variable de Storyline SLResultado, es decir el puntaje que se sumó en nuestro curso.
- La siguiente línea de código lmsAPI.SetScore(myScore,100,80) establece que el puntaje guardado en el LMS será el valor de myScore. En esa línea hay 3 valores separados por comas: el primero es el puntaje que efectivamente quedará registrado para ese usuario, el segundo es el puntaje máximo posible y el tercero es el mínimo puntaje necesario para aprobar. Solo el primero de estos valores es relevante en este ejemplo.
El resultado es que, si no hay ningún otro elemento de SCORM que modifique lo anterior, el LMS guardará un puntaje personalizado sin determinar nada más acerca del estado del curso, es decir no se informará si el curso fue aprobado o si fue completado, solo se guardará el puntaje:
En nuestro caso, este snippet sirvió para informar al LMS el puntaje alcanzado en un curso con recorridos no lineales. El puntaje se iba obteniendo con las preguntas distribuidas en distintas escenas. Las escenas podían recorrerse en cualquier orden, por lo cual no existía el clásico cuestionario final.
El último ejemplo es sobre cómo configurar un estado de finalización personalizado en Storyline.
Informar un estado de finalización al LMS
A diferencia de lo que sucede en el caso anterior, con este código solo se informará que el curso ha sido finalizado. Nada más se dirá acerca del scoring del usuario ni de su estado de aprobación o desaprobación.
Por si acaso: estado de finalización, estado de aprobación y scoring son 3 cosas distintas, más detalles en estados de scorm.
¿Para qué puede servir esto? Es simplemente para tener otras opciones de finalización del curso que no dependan de un cuestionario ni de haber recorrido tooodas las diapositivas. Cuando se hace un recorrido en base a escenarios, por ejemplo, es altamente improbable que se puedan recorrer todas las diapositivas, porque la navegación se va condicionando hacia distintas diapositivas. Lo que se puede establecer es que se dará por completado o finalizado el curso si el usuario vió determinadas diapositivas o una cantidad equis de diapositivas clave.
Esto también puede hacerse actualmente con un accionador de finalización estándar de Storyline, que establece que el curso ha sido completado sin enviar un aprobado o desaprobado. Pero bueno, este código JavaScript ya estaba en este post y son solo dos líneas:
// pasamos un finalizado al LMS
var lmsAPI = parent;
lms.API.SetReachedEnd();
En la primera línea nos conectamos a la API de LMS y en la segunda, lms.API.SetReachedEnd significa que hemos llegado al final del curso y le pasamos un “completado” al LMS.
¿Cómo funciona esto en cloud.scorm? Al hacer clic en el botón o la diapositiva que acciona este código, se genera este estado:
No importa si Storyline tiene otro accionador de finalización más adelante, o si en SCORM hemos configurado que hay que ver muchas otras diapositivas o responder un cuestionario para que el curso se informe como finalizado. Al haber pasado por este accionador, el curso deberá darse por completado en el LMS.
Recomendaciones generales para trabajar con JavaScript en Storyline
- El curso debe publicarse para probar su funcionamiento, JavaScript no funciona en la Vista Previa. Puede publicarse en un simple archivo web para abrirlo con un navegador, o como vimos en los ejemplos, en la cuenta gratis de scormcloud.
- Para ver el curso con tu navegador, deberías activar el en modo desarrollador (F12, luego Console en Chrome) para ver si hay errores. Un punto y coma en lugar de una coma puede hacer que no funcione. No hay modo de saberlo si no ves los errores en el modo desarrollador. Lo que se ve en la consola de desarrollador es un mensaje en rojo que al menos indica en qué línea está el error.
- Esto es opcional, pero ayuda mucho: todo el JavaScript de tu proyecto va a terminar en el archivo /story_content/user.js. Si el código de tu curso no funciona, podrías abrir ese archivo user.js con un procesador de texto simple como Notepad++ e intentar arreglar las cosas allí mismo. Luego guardar el archivo y actualizar la pantalla del navegador. Así no es necesario volver a publicar todo el curso cada vez que hay que cambiar una coma ;). De todas maneras, al final hay que arreglar el código en el proyecto de Storyline también.
Fuentes consultadas para este artículo
- Prácticas recomendadas y ejemplos de JavaScript en el sitio de Articulate.
- Video de Mark Spermon de Upward Online Learning.
- Recomendaciones de Zsolt Olah para trabajar con JavaScript en Storyline.
- Video de eLearningLocker con ejemplos de visualización de datos en Storyline.
4 respuestas
intente utilizar e código del ejemplo 4 pero no me funcionó
Por favor me podrían ayudar para traer el correo electrónico de un lms
Intente usar el código del ejemplo 3 “Cómo establecer un puntaje personalizado que se guarde en la plataforma.”, pero este ejemplo no funciono en storyline360, ¿hay algún cambio en el código?
Son snippets que usamos y funcionan, pero no están soportados por Articulate. Si no te funcionan en la publicación del curso (ojo, en la Vista Previa no funcionan) lo mejor es consultar con un especialista en javascript. Mirando la consola del navegador se ven los errores. También los podés probar en scorm.com gratis.