Browse Articles

Browse Articles

Storyline 360: prácticas recomendadas y ejemplos de JavaScript

Artículo actualizado el

Este artículo se aplica a:

Storyline 360

Usa activadores de JavaScript para una interactividad avanzada en los cursos de Storyline 360. (Para obtener más información sobre los desencadenantes, consulta esta guía del usuario).

Mejores prácticas

Aunque no ofrecemos soporte técnico para la codificación de JavaScript, estos consejos te ayudarán:

  • Instala la actualización de febrero de 2024 o una versión posterior para usar la consola integrada.
  • A partir de enero de 2024, podrás previsualizar los activadores locales de JavaScript en el reproductor moderno. Por ejemplo, los activadores de JavaScript que recuperan o establecen el valor de una variable de Storyline 360. Si utilizas activadores de JavaScript complejos, igual querrás publicar tu curso en un servidor web o en un LMS para probarlo adecuadamente.
  • A partir de noviembre de 2021, mejoramos el editor de JavaScript en Storyline 360. Ahora incluye resaltado de sintaxis y números de línea.
  • Utilice el método Player.getVar para recuperar el valor de las variables de Storyline 360 y utilice el método Player.setVar para establecer el valor de una variable de Storyline 360. En otras palabras, puede extraer información de las variables de Storyline 360 con player.getVar e introducir información en las variables de Storyline 360 con player.setVar.
  • <script type="text/javascript">No la incluyas en tus activadores.
  • Cada accionador de JavaScript puede tener hasta 32.767 personajes de código.
  • No puede llamar a funciones de JavaScript desde un activador dentro de otro. Sin embargo, puede llamar a funciones de JavaScript dentro del mismo accionador.
  • Si deseas incluir todas las funciones de JavaScript en un archivo JavaScript (.js) independiente, coloca el archivo JavaScript personalizado en la carpeta story_content de la salida publicada y, a continuación, agrega la siguiente línea de código al archivo story.html antes de la etiqueta</head> de cierre.

    <script LANGUAGE="JavaScript1.2" SRC="/story_content/MyJavaScriptFunctions.js" TYPE="text/javascript"></script>

    Llama a las funciones correspondientes en tus activadores de Storyline 360. Ten en cuenta que Articulate no admite oficialmente este método.
  • Si utilizas jQuery en tus activadores de JavaScript, asegúrate de hacer referencia a la biblioteca jQuery.
  • Storyline 360 no tiene variables de sistema documentadas que puedas usar en JavaScript. Puede descubrir algunos trabajando con los resultados publicados de Storyline 360 o buscando en los foros de la comunidad. Tenga en cuenta que podrían interferir con la reproducción del curso y que podrían no funcionar en todas las versiones de Storyline 360.
  • Para obtener información general sobre la codificación de JavaScript, visita w3schools.com o Codecademy.

Ejemplos

A continuación, encontrará ejemplos de activadores comunes de JavaScript. ¡Y no dejes de echar un vistazo a nuestro desafío de JavaScript y a resumir docenas de demostraciones de nuestra maravillosa comunidad de desarrolladores de cursos de e-learning!

Cambiar el valor de una
variable de Storyline 360 En este ejemplo se asigna la fecha actual a una variable de Storyline 360. Demostración en vídeo.

var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var dateString=month + "/" + day + "/" + year
var player = GetPlayer();
player.SetVar("SystemDate",dateString);

Mensaje emergente (solo texto)

alert("Your message here...");

Mensaje emergente (texto y valor de una variable de Storyline 360)

var player = GetPlayer();
alert("Welcome back, " + player.GetVar("FirstName") + ".");

Imprimir la diapositiva actual (solo HTML5)

window.print();

El sencillo código anterior imprime la diapositiva actual y el reproductor Storyline 360. Si quieres imprimir solo el contenido de la diapositiva, no el reproductor Storyline 360, consulta este código JavaScript de Brian Batt. Tenga en cuenta que este método solo funciona con el estilo de reproductor clásico.

Imprima el certificado de finalización

Vea esta demostración y ejemplo descargable de Tracy Carroll en el que utiliza dos activadores de JavaScript para obtener la fecha actual, capturar el nombre del alumno e imprimir un certificado.

Lanza un nuevo mensaje de correo electrónico

var email="yourAddress@email.com";
var subject="subject line";
var body_start="How you want to begin your body.";
var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;
win=window.open(mailto_link,'emailWin');

Desplazamiento automático de la página web a una ubicación específica

window.scroll(0,150); // horizontal and vertical location

Desplazamiento automático de la página web en relación con la ubicación actual

window.scrollBy(0,150); // horizontal and vertical scroll increments

Cambiar el color de fondo HTML (solo en el reproductor clásico)

parent.document.body.style.backgroundColor = "#990000";

Cambie la imagen de fondo HTML (solo en el reproductor clásico)
Coloque una copia del archivo image.jpg en la carpeta raíz de la salida publicada. Crédito: Alexandros Anoyatis

parent.document.body.style.backgroundImage = "url('image.jpg')";
parent.document.body.style.backgroundSize = "cover";
parent.document.body.style.backgroundRepeat = "no-repeat";

Genera un número aleatorio
Este ejemplo genera un número aleatorio entre 1 y 10. Demostraciones en vídeo aquí y aquí.

var randomnumber = Math.floor((Math.random()*10)+1);
var player = GetPlayer();
player.SetVar("randnum",randomnumber);

¿Sabías que Storyline 360 tiene variables numéricas aleatorias? ¡Son muy fáciles de usar! Consulta este vídeo de demostración y estas instrucciones para obtener más información.