Improve navigation in multi-page content topics

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. With this JavaScript, when a learner navigates to a multi-page content topic, 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, learners might miss the links to the HTML pages and click the Content tool's next button, 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 a small bit of special markup to their HTML.

Add css styling to hide your navigation (optional, but recommended)

You can choose to use HTML like the following example to hide your navigation elements. Hiding your internal navigation helps reduce confusion to learners since it results in only the Brightspace navigation being available.

<style>

.d2l-hide { display: none; }

</style>

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>

Hide your navigation (optional, but recommended)

Mark up your navigation to leverage the CSS added in the first step. 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>