• Filipe Adão

Articulate Storyline: como colocar o SCORM em tela cheia no Moodle

Finalmente uma solução para a visualização mobile do Articulate Storyline dentro do Moodle na versão mobile.


E aí E-ducador, blz?!


Estava trabalhando em um projeto SCORM no Articulate Storyline 3 e ao inserir o pacote no Moodle me deparei com o seguinte dilema: em desktops e tablets rodava perfeitamente em qualquer modo de exibição, mas no mobile vieram alguns problemas de usabilidade. Tanto no app do moodle quanto pelo navegador, ao abrir o conteúdo, ele ficava cortado na tela devido ao espaço ocupado pelas barras do navegador. Isso ocorria mesmo quando coloquei para abrir em popup sem exibir as opções de browser. Além disso o bloqueador de popup acabava se tornando, também, um obstáculo para o aluno.







Enfim, diante desse caso, comecei a buscar soluções nos fóruns da comunidade do Articulate e percebi que era um problema recorrente e que nem mesmo os desenvolvedores da empresa acharam soluções nativas para isso. E esse problema ocorre em outros LMS's também.



Recorri à comunidade Moodle, mas também não encontrei a solução desejada. Daí pensei: “e se eu utilizasse o javascript para iniciar a exibição em tela cheia no navegador?” Sabe, quando a gente aperta F11 no teclado? Fiquei otimista com a ideia e para a minha surpresa funcionou muito bem utilizando um trigger ao iniciar a timeline no slide master.






Vamos inicialmente recapitular as boas práticas na utilização de javascript no Storyline?


De acordo com a comunidade E-learning Heroes, embora não forneçam suporte para codificação JavaScript, existem umas regrinhas a seguir em caso de aplicação em triggers:


  • Use o método player.GetVar para recuperar o valor das variáveis do Storyline e use o método player.SetVar para definir o valor de uma variável do Storyline. Em outras palavras, você pode obter informações das variáveis do Storyline com player.GetVar e inserir informações nas variáveis do Storyline com player.SetVar .

  • Não inclua <script type="text/javascript"> em seus triggers.

  • Cada trigger JavaScript pode ter até 32.767 caracteres de código.

  • Você não pode chamar funções JavaScript de um trigger em outro trigger. No entanto, você pode chamar funções JavaScript no mesmo trigger.

  • Se desejar incluir todas as suas funções JavaScript em um arquivo JavaScript separado (.js), coloque seu arquivo JavaScript personalizado na pasta story_content de sua saída publicada e, em seguida, adicione a seguinte linha de código ao arquivo story.html antes de tag de fechamento </head>.

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

  • Chame as funções apropriadas em seus triggers do Storyline. Observe que este método não é oficialmente compatível com o Articulate.

  • Se você usar jQuery em seus triggers de JavaScript, certifique-se de fazer referência à biblioteca jQuery .

  • O Storyline não tem variáveis de sistema documentadas que você pode usar em JavaScript. Você pode descobrir alguns trabalhando com a produção publicada do Storyline 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.

  • Para informações gerais sobre codificação JavaScript, consulte w3schools.com ou Codecademy .



E a função?


Agora que estamos por dentro de como funciona o javascript no Storyline vem a função e como ela foi aplicada. Lembrando que esse teste foi no LMS Moodle, em outros LMS's, talvez seja necessário criar um arquivo (.js) externo e acioná-lo via tag como vimos.


Explicação breve:


O document.documentElement retorna o Element que é o elemento raiz do documento (por exemplo, o elemento <html> para documentos HTML).


O Element.requestFullscreen() método emite uma solicitação assíncrona para fazer o elemento ser exibido no modo de tela inteira. Este método tem compatibilidade prevista para todos os navegadores.


O elemento que você deseja colocar no modo de tela inteira deve atender a um pequeno número de requisitos simples:


  • Deve ser um dos elementos HTML padrão ou <svg>ou <math>.

  • É não um <dialog> elemento.

  • Ele deve estar localizado no documento de nível superior ou em um <iframe> que tenha o allowfullscreen atributo aplicado a ele.

No caso do Moodle, a exibição do player SCORM se dá através de um iframe e na minha versão do LMS (3.10) já está com allowscreen aplicado nativamente. Versões mais antigas, talvez precisem dessa modificação no código fonte do player SCORM do Moodle.


Sendo assim, cheguei à função:


function fullScreen() {
 var element = document.documentElement;
 
 if (element.requestFullscreen) {
 element.requestFullscreen();
 } else if (element.mozRequestFullScreen) {
 element.mozRequestFullScreen();
 } else if (element.webkitRequestFullscreen) {
 element.webkitRequestFullscreen();
 } else if (element.msRequestFullscreen) {
 element.msRequestFullscreen();
 }
}

Para utilizar em um arquivo (.js) externo, esta versão da função é a adequada.



Como apliquei num trigger, segui a orientação que a comunidade Articulate recomendou, apliquei a partir do var element e ficou assim:


var element = document.documentElement;
 
 if (element.requestFullscreen) {
 element.requestFullscreen();
 } else if (element.mozRequestFullScreen) {
 element.mozRequestFullScreen();
 } else if (element.webkitRequestFullscreen) {
 element.webkitRequestFullscreen();
 } else if (element.msRequestFullscreen) {
 element.msRequestFullscreen();
 }
}
Essa função ativa o modo tela cheia em basicamente todos os navegadores.

Aplicando o gatilho


Clique no campo Triggers e crie um novo gatilho.





Em Action, selecione “Execute JavaScript”




Em Script, escreva a função




Em When, selecione Timeline Starts para executar assim que abrir.




Em Object, selecione o primeiro slide do curso.




Apenas com isso já funciona muito bem e tanto no desktop quanto no mobile o curso fica em tela cheia. É importante configurar o player para que ele se adapte ao tamanho da tela.


Observado isso fui para os testes de usabilidade e identifiquei 2 problemas:


  1. Para usuários leigos (que não sabem que a tecla ESC desativa a tela cheia), ficaria difícil saber como voltar à tela principal do Moodle.

  2. Quando o usuário saia do curso e retornava depois, quando reiniciava o curso a tela cheia não funcionava, pois, se começasse de qualquer slide que não fosse o primeiro a função javascript não era acionada.

Para resolver o problema 1, criei um botão de fechar e um de minimizar o curso no próprio player. Nas propriedades do Player em features > Player Tabs e criei dois itens de menu na topbar right.



Para o "Fechar":

  • Em Action selecionei Exit Course



Em When selecionei User clicks




Para o "Minimizar/Maximizar" (tela cheia e tela normal) usei mais uma função JavaScript:


  • Em action selecionei Execute JavaScript



  • Em Script coloquei a seguinte função:


 if (document.fullscreenElement) { 
 document.exitFullscreen()
 .then(() => console.log("Document Exited form Full screen mode"))
 .catch((err) => console.error(err))
 }



Essa função identifica se está ou não em tela cheia e executa a ação necessária.

  • Em When, selecionei User clicks



Para resolver o problema 2, eu simplesmente tirei a função do slide 1 da minha scene e coloquei em todos os slides (Slide master view) do meu tema conforme as imagens abaixo:


1.


2.


3.




Com isso em qualquer slide que o aluno voltasse a função seria iniciada.


E foi assim que solucionei essa questão da visualização do SCORM na versão mobile. Me diz aí nos comentários o que achou da solução ou se sabe alguma alternativa para casos semelhantes.


Espero que esse post possa ajudar e/ou facilitar as buscas de outras pessoas com o mesmo problema. Se gostou, curta e compartilhe e deixe sua sugestão de temas para os próximos posts.


Valeu!

44 visualizações0 comentário