Browse Articles

Browse Articles

Storyline 3: Prácticas recomendadas y ejemplos de JavaScript

Artículo actualizado el

Este artículo se aplica a:

Storyline 3

Utilice desencadenadores JavaScript para crear interactividad avanzada en los cursos de Storyline 3. (Para obtener más información sobre los desencadenadores, consulte esta guía del usuario).

Prácticas recomendadas

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

  • Utilice el player.GetVar método para recuperar el valor de las variables Storyline y utilice el player.SetVar método para establecer el valor de una variable Storyline. En otras palabras, puede extraer información de variables Storyline con player.GetVar y insertar información en variables Storyline con player.SetVar.
  • No lo incluyas <script type="text/javascript"> en tu código.
  • Cada accionador de JavaScript puede tener hasta 32.767 caracteres de código.
  • No puede llamar a las funciones de JavaScript desde un accionador en otro desencadenador. Sin embargo, puede llamar a funciones JavaScript dentro del mismo accionador.
  • Si desea incluir todas sus funciones JavaScript en un archivo JavaScript (.js) separado, coloque su archivo JavaScript personalizado en la carpeta story_content de su salida publicada y, a continuación, agregar la siguiente línea de código al archivo story.html antes de la etiqueta de cierre </head>.

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

    Llame a las funciones apropiadas en sus disparadores de línea de Storyline. Tenga en cuenta que este método no es oficialmente compatible con Articulate.
  • Si usa jQuery en sus desencadenadores de JavaScript, asegúrese de hacer referencia a la biblioteca jQuery.
  • Storyline no tiene variables de sistema documentadas que se puedan usar en JavaScript. Puede descubrir algunos trabajando con la salida publicada de Storyline o buscando en los foros de la comunidad. Ten en cuenta que podrían interferir con la reproducción del curso, y es posible que no funcionen en todas las versiones de Storyline.
  • Para obtener información general sobre la codificación de JavaScript, consulte w3schools.com o Codecademy .

Ejemplos

Encuentre ejemplos de desencadenadores de JavaScript comunes a continuación. ¡Y asegúrate de echar un vistazo a nuestro desafío de JavaScript y recapitular para decenas de demostraciones de nuestra maravillosa comunidad de desarrolladores de cursos de e-learning!

Cambiar el valor de una variable Storyline
En este ejemplo se asigna la fecha actual a una variable Storyline. 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 (sólo texto)

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

Mensaje emergente (texto y valor de una variable Storyline)

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

Imprimir diapositiva actual (sólo HTML5)

window.print();

El código simple anterior imprime la diapositiva actual y el reproductor Storyline. Si desea imprimir sólo el contenido de la diapositiva, no el reproductor Storyline, consulte este código JavaScript de Brian Batt .

Imprimir certificado de finalización

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

Iniciar 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 relativa a la ubicación actual

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

Cambiar el color de fondo HTML

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

Cambiar imagen de fondo HTML
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";

Generar un número aleatorio
Este ejemplo genera un número aleatorio entre 1 y 10. Demostraciones en video aquí y aquí .

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