Adicione interatividade avançada aos seus cursos do Storyline 360 com gatilhos de JavaScript que vão além do cotidiano para oferecer experiências mais personalizadas aos alunos.

• Dicas de exploração
• Encontre exemplos
• Torne as interações de JavaScript mais acessíveis

Dicas de exploração

Não oferecemos suporte direto para codificação em JavaScript, mas as dicas a seguir podem ajudar você a começar:

• Não inclua <script type="text/javascript"> em seus gatilhos.
• Observe que cada gatilho de JavaScript pode ter até 32.767 caracteres de código.
• Aproveite o realce de sintaxe e os números de linha nos recursos do editor de JavaScript.
• Solucione problemas com seu código com o console integrado.
• Se você usa jQuery em seus gatilhos de JavaScript, faça referência à biblioteca jQuery.
• Obtenha informações gerais sobre codificação em JavaScript em w3schools.com ou Codecademy.
• Use a API JavaScript avançada para obter controle preciso sobre as propriedades do objeto e muito mais.
• 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. No entanto, eles podem interferir na reprodução do curso e podem não funcionar em todas as versões do Storyline 360.
• Visualize acionadores locais de JavaScript no player moderno, por exemplo, acionadores de JavaScript que recuperam ou definem o valor de uma variável do Storyline 360. Se você estiver usando gatilhos complexos de JavaScript, você ainda vai querer publicar seu curso em um servidor web ou LMS para testes adequados.
• 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.
• Use o gatilho que chama a função. As funções JavaScript só são executadas dentro do gatilho a partir do qual você as chama, não em vários gatilhos.
• Para 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>
  
  Você pode chamar as funções apropriadas em seus gatilhos do Storyline 360. Observe que não oferecemos suporte a esse método.

Encontre exemplos

Quer saber o que você poderia fazer com o JavaScript? Nosso desafio e resumo de JavaScript oferecem dezenas de demonstrações de nossa maravilhosa comunidade de desenvolvedores de e-learning. Continue lendo para encontrar exemplos de alguns acionadores comuns de JavaScript e até mesmo algumas demonstrações!

Torne as interações de JavaScript mais acessíveis

Ao criar elementos interativos que usam JavaScript, não se esqueça da acessibilidade! Lembre-se dessas dicas para tornar suas interações mais inclusivas para todos os alunos:

• Melhore com JavaScript, mas não confie nele. Comece com os gatilhos e recursos integrados no Storyline 360, que são projetados para acessibilidade e lidam com a maioria das interações automaticamente. Use JavaScript somente quando precisar de funcionalidades adicionais, como animações personalizadas ou pop-ups. Seu curso também deve funcionar sem JavaScript, para que todos os alunos possam participar.
• Mantenha indicadores de foco claros. Ajude os alunos a se manterem orientados enquanto navegam pelo curso. Mude o foco adequadamente quando o conteúdo mudar, use o aria-hidden atributo para gerenciar a visibilidade das tecnologias assistivas e mantenha os indicadores de foco visíveis (2.4.3 Ordem do foco e 2.4.7 Visível do foco).
• Use controles padrão com rotulagem clara. Escolha botões e links padrão para melhor acessibilidade. Para elementos personalizados, adicione rótulos ou funções ARIA significativos e certifique-se de que os alunos possam navegar por eles usando um teclado (4.1.2 Nome, Função, Valor e 2.1.1 Teclado).
• Honre as preferências. Permita que os alunos mantenham o controle. Use regiões ativas para mudanças importantes, respeite as configurações de movimento reduzido e de idioma, evite movimento ou áudio automáticos e permita que os alunos ampliem ou dimensionem a interface (2.3.3 Animação a partir de interações, 1.4.2 Controle de áudio e 2.2.2 Pausar, parar, ocultar).
• Teste com tecnologias assistivas. Use leitores de tela, navegação pelo teclado e recursos de zoom para testar seu curso. Verifique se os alunos conseguem acompanhar as atualizações e têm tempo suficiente para responder ou explorar o conteúdo (2.2.1 Tempo ajustável).

Dica profissional: tente alcançar suas metas de interatividade com HTML padrão antes de adicionar atributos ARIA.