Para ofrecer navegación ininterrumpida en temas de contenido con múltiples páginas, los diseñadores de cursos pueden agregar una solución JavaScript de D2L a temas de contenido HTML que contienen enlaces a varias páginas HTML. Con este JavaScript, cuando un estudiante navega a un tema de contenido de múltiples páginas, los enlaces a las páginas HTML están ocultos en el tema de contenido de múltiples páginas, y los botones Siguiente y Anterior de la herramienta de contenido navegan entre las páginas HTML vinculadas, en lugar de navegar entre temas de contenido. Sin este JavaScript, los estudiantes podrían perder los enlaces a las páginas HTML y hacer clic en el botón Siguiente de la herramienta de contenido, navegando al siguiente tema de contenido.
Nota: Un diseñador de curso con experiencia avanzada en HTML y JavaScript debe agregar la solución JavaScript de D2L a un tema de contenido HTML de múltiples páginas en un curso con Lecciones activada.
Uso de navegación de múltiples páginas
Para aprovechar la navegación del tema de múltiples páginas, los diseñadores de cursos deben incluir varios componentes de JavaScript y agregar una pequeña parte de marcado especial para su HTML.
Agregue estilos CSS para ocultar su navegación (opcional, pero recomendado)
Puede optar por utilizar HTML, como el siguiente ejemplo, para ocultar sus elementos de navegación. Ocultar sus elementos de navegación interna ayuda a reducir la confusión a los estudiantes, ya que hace que solo la navegación de Brightspace esté disponible.
<style>
.d2l-hide { display: none; }
</style>
Incluir el JavaScript
Hay tres referencias de JavaScript para incluir en su HTML. Debe hacer referencia a la ruta totalmente calificada a estos recursos mediante su propio dominio de Brightspace en la URL. Por ejemplo:
1. Jquery (disponible bajo licencia MIT)
<script src="https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. Simular Jquery (disponible bajo licencia MIT)
<script src=" /d2l/lms/content/static/scripts/jquery.Simulate/jquery.simulate.js">
</script>
3.d2l-nav.js (derecho de autor de D2L)
<script src=" /d2l/lms/content/static/scripts/d2l-nav.js"></script>
Ocultar su navegación (opcional, pero recomendado)
Marcar su navegación para aprovechar el CSS agregado en el primer paso. Por ejemplo:
<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>
Marcar su navegación para identificar los enlaces Anterior y Siguiente
Utilice las clases d2l-nav-next y d2l-nav-prev para identificar qué enlaces href se deben utilizar cuando el estudiante haga clic en los enlaces Siguiente y Anterior. Por ejemplo:
<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>