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:
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.
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!