Om naadloze navigatie te bieden in inhoudsonderwerpen van meerdere pagina's, kunnen cursusontwerpers een D2L®-JavaScript-oplossing toevoegen aan HTML-inhoudsonderwerpen die koppelingen bevatten naar meerdere HTML-pagina's. Als een cursist met dit JavaScript naar een inhoudsonderwerp van meerdere pagina's navigeert, worden de koppelingen naar de HTML-pagina's verborgen in het inhoudsonderwerp van meerdere pagina's en navigeren de knoppen Volgende en Vorige van het Inhoudstool tussen de gekoppelde HTML-pagina's, in plaats van tussen inhoudsonderwerpen te navigeren. Zonder dit JavaScript kunnen cursisten de koppelingen naar de HTML-pagina's missen en op de knop Volgende van de Inhoudstool klikken, om naar het volgende inhoudsonderwerp te gaan.
Opmerking: een cursusontwerper met gevorderde ervaring in HTML en JavaScript moet de D2L®-JavaScript-oplossing toevoegen aan een HTML-inhoudsonderwerp van meerdere pagina's in een cursus met lessen.
Navigatie met meerdere pagina's gebruiken
Om de navigatie van meerdere pagina's te kunnen gebruiken, moeten cursusontwerpers verschillende JavaScript-componenten opnemen en een klein beetje speciale opmaak aan hun HTML toevoegen.
Css-styling toevoegen om uw navigatie te verbergen (optioneel, maar aanbevolen)
U kunt HTML gebruiken zoals in het volgende voorbeeld om uw navigatie-elementen te verbergen. Het verbergen van uw interne navigatie-elementen helpt verwarring voor cursisten te verminderen, omdat hierdoor alleen de Brightspace®-navigatie beschikbaar is.
<style>
.d2l-hide { display: none; }
</style>
Het JavaScript opnemen
Er zijn drie JavaScript-verwijzingen die in uw HTML moeten worden opgenomen. U dient het volledige, juiste pad naar deze bronnen laten verwijzen door uw eigen Brightspace®-domein in de URL te gebruiken. Bijvoorbeeld:
1. Jquery (beschikbaar onder MIT-licentie)
<script src=”https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. Jquery simulate (beschikbaar onder MIT-licentie)
<script src=" /d2l/lms/content/static/scripts/jquery.Simulate/jquery.simulate.js">
</script>
3.d2l-nav.js (D2L® Copyright)
<script src=" /d2l/lms/content/static/scripts/d2l-nav.js"></script>
Uw navigatie verbergen (optioneel, maar aanbevolen)
Markeer uw navigatie om de CSS te gebruiken die in de eerste stap is toegevoegd. Bijvoorbeeld:
<div id=”nav” class="d2l-hide">
<a href="page1.html">Page 1/4 - What is Lorem Ipsum?</a>
<a href="page3.html">Page 3/4 - Why do we use it?</a>
</div>
Markeer uw navigatie om de volgende en vorige koppelingen te identificeren
Gebruik de groepen d2l-nav-next en d2l-nav-prev om te bepalen welke href-koppelingen moeten worden gebruikt wanneer de cursist op de koppelingen Volgende en Vorige klikt. Bijvoorbeeld:
<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>