• Site Logo, Articulate

Busca de Artigos

Selecione um Produto

Diretório de suporte de null

Explore todos os artigos de null (Last Updated )

Nenhum artigo encontrado.

Resultados da pesquisa

Nenhum artigo encontrado.

Storyline 360: melhores práticas e exemplos de JavaScript

Artigo atualizado pela última vez em 16 de jan. de 2026

Use gatilhos de JavaScript para interatividade avançada nos cursos do Storyline 360. (Para saber mais sobre gatilhos, consulte este guia do usuário.)

Melhores práticas

Embora não forneçamos suporte para codificação em JavaScript, essas dicas ajudarão:

  • A partir de março de 2025, você pode usar a API JavaScript avançada para obter controle preciso sobre as propriedades do objeto e muito mais.
  • Instale a atualização de fevereiro de 2024 ou posterior para usar o console integrado.
  • A partir de janeiro de 2024, você pode visualizar os gatilhos locais de JavaScript no player moderno. Por exemplo, acionadores de JavaScript que recuperam ou definem o valor de uma variável Storyline 360. Se você estiver usando gatilhos complexos de JavaScript, ainda desejará publicar seu curso em um servidor web ou LMS para testes adequados.
  • Em novembro de 2021, aprimoramos o editor de JavaScript no Storyline 360. Agora ele apresenta destaque de sintaxe e números de linha.
  • Use o método player.getVar para recuperar o valor das variáveis do Storyline 360 e use o método player.setVar para definir o valor de uma variável do Storyline 360. Em outras palavras, você pode extrair informações das variáveis do Storyline 360 com Player.getVar e inserir informações nas variáveis do Storyline 360 com Player.setVar.
  • Não inclua <script type="text/javascript"> em seus gatilhos.
  • Cada gatilho de JavaScript pode ter até 32.767 caracteres de código.
  • Você não pode chamar funções JavaScript de um gatilho em outro. No entanto, você pode chamar funções JavaScript dentro do mesmo gatilho.
  • Se você quiser incluir todas as suas funções JavaScript em um arquivo JavaScript (.js) separado, coloque seu arquivo JavaScript personalizado na pasta story_content da saída publicada e adicione a seguinte linha de código ao arquivo story.html antes da</head> tag de fechamento.

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

    Chame as funções apropriadas em seus gatilhos do Storyline 360. Observe que esse método não é oficialmente suportado pelo Articulate.
  • Se você usa jQuery em seus gatilhos de JavaScript, certifique-se de referenciar a biblioteca jQuery.
  • O Storyline 360 não tem variáveis de sistema documentadas que você possa usar em JavaScript. Você pode descobrir alguns trabalhando com os resultados publicados do Storyline 360 ou pesquisando nos fóruns da comunidade. Esteja ciente de que eles podem interferir na reprodução do curso e podem não funcionar em todas as versões do Storyline 360.
  • Para obter informações gerais sobre codificação em JavaScript, consulte w3schools.com ou Codecademy.

Exemplos

Veja exemplos de gatilhos comuns de JavaScript abaixo. E não deixe de conferir nosso desafio de JavaScript e recapitular dezenas de demonstrações da nossa maravilhosa comunidade de desenvolvedores de e-learning!

Alterar o valor de uma
variável do Storyline 360 Este exemplo atribui a data atual a uma variável do Storyline 360. Demonstração em 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);

Mensagem pop-up (somente texto)

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

Mensagem pop-up (texto e valor de uma variável do Storyline 360)

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

Imprimir o slide atual (somente HTML5)

window.print();

O código simples acima imprime o slide atual e o player Storyline 360. Se você quiser imprimir somente o conteúdo do slide, não o player Storyline 360, consulte este código JavaScript de Brian Batt. Observe que esse método funciona apenas com o estilo clássico do player.

Certificado de conclusão de impressão

Veja esta demonstração e um exemplo para download de Tracy Carroll, onde ela usa dois gatilhos de JavaScript para obter a data atual, capturar o nome do aluno e imprimir um certificado.

Lançar nova mensagem de e-mail

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');

Rolagem automática da página da web para um local específico

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

Rolagem automática da página da web em relação à localização atual

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

Alterar a cor de fundo do HTML (somente no player clássico)

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

Altere a imagem de fundo HTML (somente no player clássico)
Coloque uma cópia do arquivo image.jpg na pasta raiz da saída 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";

Gere um número aleatório
Este exemplo gera um número aleatório entre 1 e 10. Demonstrações em vídeo aqui e aqui.

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

Você sabia que o Storyline 360 tem variáveis numéricas aleatórias? Eles são super fáceis de usar! Confira este vídeo de demonstração e essas instruções para saber mais.