To provide seamless navigation in multi-page content topics, course designers can add a D2L JavaScript solution to HTML content topics containing links to multiple HTML pages. When a learner navigates to a multi-page content topic with this JavaScript, the links to the HTML pages are hidden in the multi-page content topic and the Content tool's Next and Previous buttons navigate between the linked HTML pages instead of navigating between content topics. Without this JavaScript, the learner may miss the links to the HTML pages and click Next, navigating to the next content topic.
|
Note: A course designer with advanced experience in HTML and JavaScript must add the D2L JavaScript solution to a multi-page HTML content topic in a Lessons-enabled course. |
Using multi-page navigation
To leverage the multi-page topic navigation, course designers must include several JavaScript components and add some special markup to their HTML.
Include the JavaScript
There are three JavaScript references to include in your HTML. You should reference the fully qualified path to these resources by using your own Brightspace domain in the URL. For example:
1. Jquery (Available under MIT License)
<script src=”https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. Jquery simulate (Available under MIT License)
<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>
Add CSS styling to hide your navigation
|
Note: While D2L recommends adding CSS styling to hide your navigation, it is an optional step. |
You can choose to use HTML to hide your navigation elements. Hiding your internal navigation elements help reduce confusion to learner as only the Brightspace navigation being available. For example:
<style>
.d2l-hide { display: none; }
</style>
Hide your navigation
|
Note: While D2L recommends hiding your navigation, it is an optional step. |
Mark up your navigation to leverage your CSS. For example:
<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>
Mark up your navigation to identify next and previous links
Use the d2l-nav-next and d2l-nav-prev classes to identify which href links should be used when the learner clicks the next and previous links. For example:
<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>