Storyline 3: Prácticas recomendadas y ejemplos de JavaScript

Artículo actualizado el

Este artículo se aplica a:

Use los activadores de 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 ofrecemos compatibilidad para la codificación de JavaScript, estos consejos le ayudarán:

  • Los desencadenadores de JavaScript son compatibles con el contenido publicado HTML5 y Flash. Sin embargo, JavaScript no es compatible con la aplicación Articulate Mobile Player. (para ver una comparación completa de los diferentes reproductores, consulte este artículo).
  • Utilice el método player.GetVar para recuperar el valor de las variables de Storyline y use el método player.SetVar para configurar el valor de una variable de Storyline. En otras palabras, puede obtener información de las variables de Storyline con player.GetVar e insertar información en ellas con player.SetVar.
  • No incluyas <script type="text/javascript"> en tu código.
  • Cada desencadenador de JavaScript puede tener hasta 32.767 caracteres de código.
  • No puede invocar las funciones de JavaScript de un desencadenador en otro. No obstante, puede invocar las funciones de JavaScript dentro del mismo desencadenador.
  • Si desea incluir todas las funciones de JavaScript en un archivo JavaScript (.js) independiente, coloque el archivo JavaScript personalizado en la carpeta story_content de su contenido publicado y luego agregue la siguiente línea de código a los archivos story_html5.html o story_flash.html antes de la etiqueta de cierre</head>.

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

    Invoque las funciones apropiadas en los desencadenadores de Storyline. Tenga en cuenta que Articulate no respalda oficialmente este método.
  • Storyline no ha documentado variables de sistemas que pueda usar en JavaScript. Es posible que descubra algunos trabajando con el contenido publicado de Storyline o buscando en los foros de la comunidad. Simplemente, tenga en cuenta que pueden interferir con la reproducción del curso y que 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

Encontrará ejemplos de activadores de JavaScript comunes a continuación. Y asegúrese de echarle una mirada a nuestro desafío y resúmenes de JavaScript para ver docenas de demostraciones de nuestra maravillosa comunidad de desarrolladores de aprendizaje en línea.

Cambie el valor de una variable de Storyline
En este ejemplo, se asigna la fecha actual a una variable de Storyline.
[video de demostración aquí]

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

Mensaje emergente (solo texto)

alert("Su mensaje aquí...");

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

var player = GetPlayer();
alert ("Bienvenido de nuevo" + player.GetVar("Nombre") + ".");

Imprimir diapositiva actual (solo HTML5)

window.print();

Consulte cómo Owen Holt usa este código simple para imprimir ingeniosamente cualquier diapositiva desde un botón en el reproductor del curso.

El código simple anterior imprime la diapositiva actual y el reproductor de Storyline. Si deseas imprimir solo la diapositiva de contenido, no el reproductor de Storyline, consulta este código JavaScript de Brian Batt.

Imprimir certificado de finalización

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

Redactar nuevo mensaje de correo electrónico

var email="sudirección@email.com";
var subject="línea de asunto";
var body_start="Cómo desea que comience el cuerpo del correo.";
var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;
win=window.open(mailto_link,'emailWin');

Página web con desplazamiento automático a una ubicación específica

window.scroll(0,150); // ubicación horizontal y vertical

Página web con desplazamiento automático relativo a la ubicación actual

window.scrollBy(0,150); // incrementos de desplazamiento horizontal y vertical

Cambiar el color de fondo en HTML

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

Cambiar la imagen de fondo en HTML
Colocar una copia del archivo image.jpg en la carpeta raíz de la salida publicada. Créditos: 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
En este ejemplo, se 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);