• Site Logo, Articulate

Busqueda de Articulos

Selecciona un Producto

Directorio de soporte de null

Explore todos los artículos de null (Last Updated )

No se encontraron articulos.

Resultados de busqueda

No se encontraron articulos.

Storyline 360: consejos y ejemplos de JavaScript

Artículo actualizado por última vez el 16 ene 2026

Añada interactividad avanzada a sus cursos de Storyline 360 con activadores de JavaScript que van más allá de lo cotidiano para ofrecer experiencias de aprendizaje más personalizadas.

Explore los consejos

No ofrecemos soporte técnico directo para la codificación de JavaScript, pero los siguientes consejos pueden ayudarte a empezar:

  • No lo <script type="text/javascript"> incluyas entre tus factores desencadenantes.
  • Tenga en cuenta que cada accionador de JavaScript puede tener hasta 32.767 caracteres de código.
  • Aproveche el resaltado de sintaxis y los números de línea de las funciones del editor de JavaScript.
  • Solucione los problemas del código con la consola integrada.
  • Si utilizas jQuery en tus activadores de JavaScript, consulta la biblioteca jQuery.
  • Obtén información general sobre la codificación de JavaScript en w3schools.com o Codecademy.
  • Usa la API avanzada de JavaScript para obtener un control preciso sobre las propiedades de los objetos y mucho más.
  • 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. Sin embargo, podrían interferir con la reproducción del curso y es posible que no funcionen en todas las versiones de Storyline 360.
  • Obtenga una vista previa de los activadores de JavaScript locales 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.
  • 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.
  • Usa el accionador que llama a la función. Las funciones de JavaScript solo se ejecutan en el activador desde el que se llaman, no en varios activadores.
  • Para 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>

    Puedes llamar a las funciones correspondientes en tus activadores de Storyline 360. Ten en cuenta que no ofrecemos soporte técnico para este método.

Encuentra ejemplos

¿Te preguntas qué puedes hacer con JavaScript? Nuestro desafío y resumen de JavaScript ofrecen docenas de demostraciones de nuestra maravillosa comunidad de desarrolladores de cursos de e-learning. Sigue leyendo para encontrar ejemplos de algunos de los activadores más comunes de JavaScript, ¡e incluso algunas demostraciones!

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") + ".");

Imprima el certificado de finalización

Echa un vistazo a esta demostración y a un ejemplo descargable de Tracy Carroll. Tracy usa 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');

Barra de desplazamiento horizontal

He aquí una demostración y un ejemplo descargable de Asbjorn Reinhold. Asbjorn establece un accionador de JavaScript para conectar una variable deslizante a la posición de un objeto, creando el efecto de una barra de desplazamiento horizontal.

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

Generar 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? Consulta este vídeo de demostración y estas instrucciones para obtener más información.

Haga que las interacciones de JavaScript sean más accesibles

Cuando crees elementos interactivos que usen JavaScript, ¡no olvides la accesibilidad! Tenga en cuenta estos consejos para que sus interacciones sean más inclusivas para todos los alumnos:

  • Mejore con JavaScript, pero no confíe en él. Comience con los activadores y las funciones integrados en Storyline 360, que están diseñados pensando en la accesibilidad y gestionan la mayoría de las interacciones automáticamente. Usa JavaScript solo cuando necesites funciones adicionales, como animaciones personalizadas o ventanas emergentes. El curso también debería funcionar sin JavaScript para que todos los alumnos puedan participar.
  • Mantenga indicadores de enfoque claros. Ayude a los alumnos a mantenerse orientados mientras navegan por el curso. Cambie el enfoque de forma adecuada cuando el contenido cambie, utilice el aria-hidden atributo para administrar la visibilidad de las tecnologías de asistencia y mantenga visibles los indicadores de enfoque (2.4.3 Orden de enfoque y 2.4.7 Enfoque visible).
  • Utilice controles estándar con un etiquetado claro. Elija botones y enlaces estándar para una mejor accesibilidad. Para los elementos personalizados, agregue etiquetas o roles ARIA significativos y asegúrese de que los alumnos puedan navegar por ellos con un teclado (4.1.2 Nombre, rol, valor y teclado 2.1.1).
  • Respeta las preferencias. Deje que los alumnos mantengan el control. Utilice regiones en directo para realizar cambios importantes, respete los ajustes de movimiento e idioma reducidos, evite el movimiento o el audio automáticos y deje que los alumnos amplíen o escalen la interfaz (2.3.3 Animación a partir de interacciones, 1.4.2 Control de audio y 2.2.2 Pausar, detener y ocultar).
  • Realice pruebas con tecnologías de asistencia. Utilice lectores de pantalla, navegación por teclado y funciones de zoom para probar su curso. Comprueba que los alumnos puedan seguir las actualizaciones y tengan tiempo suficiente para responder o explorar el contenido (2.2.1 Tiempo ajustable).

Consejo profesional: intente alcanzar sus objetivos de interactividad con el HTML estándar antes de añadir los atributos ARIA.