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

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!