En este artículo

Cómo enviar y recibir información del LMS usando JavaScript en Storyline

En este post vamos a ver cómo se puede usar JavaScript en Storyline 2, 3 o 360 para pasarle datos al LMS. También vamos a ver cómo tomar algunos 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 Articulate Storyline. Lo interesante es que JavaScript también puede usarse en 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:

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.

me repetis tu nombre
No es necesario pedirle al alumno que ingrese sus nombre si ya está logueado en el LMS.

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 la variable Nombre 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); 

El proyecto de SL tiene que tener creadas las variables Nombre y Apellido para guardar ambos contenidos. A su vez, este código debe estar asociado a una acción, por ejemplo, “cuando esta diapositiva se inicia, ejecutar este JavaScript” o bien “cuando el usuario haga clic en el botón siguiente, ejecutar este JavaScript “. Lo importante es que se ejecute al menos una vez.

Analizando que 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.

Para probar esta función es recomendable usar cloud.scorm.com. Simplemente se sube el curso publicado como SCORM y se ejecuta el accionador de Storyline que ejecuta este código.

El resultado en nuestro caso sirvió para que los usuarios de una plataforma corporativa pudieran visualizar y descargar un certificado con su nombre:

coca cola certificado
Javascript en Storyline: nombre del usuario aplicado a un certificado.

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:

javascript storyline scormcloud
Javascript en Storyline: puntaje de curso en cloud.scorm.com

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.

Configurar un estado de finalización en el 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 😉 > ver 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 probable que el recorrido de todas las diapositivas sea imposible de completar. 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 tampoco puede hacerse con un accionador de finalización estándar de Storyline (que establece si el curso ha sido completado y al mismo tiempo si ha sido aprobado o desaprobado). Este código JavaScript solo informará un estado de finalización.

Son solo dos líneas de código JavaScript:

// 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:

Javascript en Storyline: Estado de Finalización informado, sin score.
Javascript en Storyline: Estado de Finalización informado, sin score.

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

Artículos relacionados

Facebook
Twitter
LinkedIn
Pinterest
Tumblr

4 respuestas

  1. 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?

    1. Son snippets que en su momento usamos y funcionaron, pero no están soportados por Articulate. Si no te funcionan en la publicación del curso (en la Vista Previa no funcionan) lo mejor es consultar a un especialista en js que mire la consola del navegador. Saludos,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *