Para fornecer navegação contínua em tópicos de conteúdo de várias páginas, os designers de curso podem adicionar uma solução JavaScript da D2L a tópicos de conteúdo HTML contendo links para várias páginas HTML. Quando um aluno navega para um tópico de conteúdo de várias páginas com este JavaScript, os links para as páginas HTML ficam ocultos no tópico de conteúdo de várias páginas, e os botões Avançar e Voltar da ferramenta Conteúdo navegam entre as páginas HTML vinculadas, em vez de navegar entre tópicos de conteúdo. Sem esse JavaScript, o aluno pode perder os links para as páginas HTML e clicar no botão Avançar, navegando para o próximo tópico de conteúdo.
|
Observação: um designer de curso com experiência avançada em HTML e JavaScript deve adicionar a solução JavaScript da D2L a um tópico de conteúdo HTML de várias páginas em um curso habilitado para Lições. |
Uso da navegação de várias páginas
Para aproveitar a navegação por tópicos de várias páginas, os designers de curso devem incluir vários componentes JavaScript e adicionar algumas marcações especiais ao HTML.
Incluir o JavaScript
Há três referências JavaScript a serem incluídas no HTML. Você deve consultar o caminho totalmente qualificado para esses recursos usando o próprio domínio do Brightspace no URL. Por exemplo:
1. JQuery (disponível na licença MIT)
<script src=”https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. JQuery simulate (disponível na licença MIT)
<script src=" /d2l/lms/content/static/scripts/jquery.Simulate/jquery.simulate.js">
</script>
3.d2l-nav.js (Direitos autorais da D2L)
<script src=" /d2l/lms/content/static/scripts/d2l-nav.js"></script>
Adicione o estilo CSS para ocultar sua navegação
|
Nota: embora a D2L recomende adicionar um estilo CSS para ocultar sua navegação, essa etapa é opcional. |
Você pode optar por usar HTML para ocultar os elementos de navegação. Ocultar os elementos de navegação interna ajuda a reduzir a confusão para o aluno, uma vez que apenas a navegação do Brightspace ficará disponível. Por exemplo:
<style>
.d2l-hide { display: none; }
</style>
Oculte sua navegação
|
Nota: embora a D2L recomende ocultar sua navegação, essa é uma etapa opcional. |
Marque sua navegação para aproveitar seu CSS. Por exemplo:
<div id=”nav” class="d2l-hide">
<a href="page1.html">Página 1/4 - O que é Lorem Ipsum?</a>
<a href="page3.html">Página 3/4 - Por que usamos isso?</a>
</div>
Marque a navegação para identificar links anteriores e posteriores
Use as classes d2l-nav-next e d2l-nav-prev para identificar quais links href devem ser usados quando o aluno clicar nos links anteriores e posteriores. Por exemplo:
<div id=”nav” class="d2l-hide">
<a href="page1.html" class=”d2l-nav-next”>Página 1/4 - O quê</a>
<a href="page3.html" class=”d2l-nav-prev”>Página 3/4 – Por quê</a>
</div>