Les concepteurs de cours peuvent offrir une navigation améliorée dans les sujets de contenu couvrant plusieurs pages en ajoutant une solution JavaScript D2L aux sujets de contenu HTML qui comprennent des liens vers plusieurs pages HTML. Lorsqu’un étudiant utilise cette solution JavaScript pour naviguer au sein d’un sujet de contenu couvrant plusieurs pages, les liens vers les pages HTML sont masqués dans le sujet et les boutons Précédent et Suivant de l’outil Contenu permettent de naviguer entre les pages HTML liées au lieu de naviguer entre les sujets de contenu. Sans la solution JavaScript, l’étudiant peut ne pas voir les liens vers les pages HTML et cliquer sur le bouton Suivant, le menant vers le prochain sujet de contenu.
|
Remarque : Un concepteur de cours possédant une expérience avancée en HTML et JavaScript doit ajouter la solution JavaScript D2L à un sujet de contenu HTML couvrant plusieurs pages dans un cours dont l'outil Leçons est activé. |
Utilisation de la navigation multipage
Pour permettre la navigation dans les sujets couvrant plusieurs pages, les concepteurs de cours doivent inclure quelques éléments JavaScript et ajouter une petite balise spéciale à leur code HTML.
Ajout des références JavaScript
Trois références JavaScript doivent être incluses dans votre code HTML. Il est recommandé de faire référence au chemin d’accès complet de ces ressources en utilisant votre propre domaine Brightspace dans l’URL. Par exemple :
1. Jquery (disponible sous licence MIT)
<script src=”https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. Jquery simulate (disponible sous licence MIT)
<script src=" /d2l/lms/content/static/scripts/jquery.Simulate/jquery.simulate.js">
</script>
3. d2l-nav.js (© D2L)
<script src=" /d2l/lms/content/static/scripts/d2l-nav.js"></script>
Ajouter le style CSS pour masquer votre navigation
|
Remarque : Bien que D2L recommande d'ajouter un style CSS pour masquer votre navigation, il s'agit d'une étape facultative. |
Vous pouvez choisir d’utiliser HTML pour masquer vos éléments de navigation. Masquer les éléments de navigation interne contribue à réduire la confusion de l’étudiant en n’affichant que les éléments de navigation de Brightspace disponibles. Par exemple :
<style>
.d2l-hide { display: none; }
</style>
Masquer votre navigation
|
Remarque : Bien que D2L recommande de masquer votre navigation, il s'agit d'une étape facultative. |
Marquez votre navigation pour tirer parti de votre CSS. Par exemple :
<div id=”nav” class="d2l-hide">
<a href=" page1.html">Page 1/4 – Qu’est-ce que Lorem Ipsum?</a>
<a href=" page3.html">Page 3/4 – Pourquoi l’utilisons-nous?</a>
</div>
Attribution de balises à votre navigation pour identifier les liens Suivant et Précédent
Utilisez les classes d2l-nav-next et d2l-nav-prev pour identifier les liens href qui devraient être utilisés lorsque l’étudiant clique sur les liens Suivant et Précédent. Par exemple :
<div id=”nav” class="d2l-hide">
<a href=" page1.html" class=”d2l-nav-next”>Page 1/4 – What</a>
<a href=" page3.html" class=”d2l-nav-prev”>Page 3/4 – Why</a>
</div>