لتوفير التنقل السلس في موضوعات المحتوى متعددة الصفحات، يمكن لمصممي المقرر التعليمي إضافة حل JavaScript لـ D2L إلى موضوعات محتوى HTML التي تحتوي على ارتباطات إلى صفحات HTML متعددة. باستخدام حل JavaScript هذا، عندما ينتقل المتعلّم إلى موضوع محتوى متعدد الصفحات، يتم إخفاء الارتباطات إلى صفحات HTML في موضوع المحتوى متعدد الصفحات، ويوفر الزران "التالي" و"السابق" في أداة المحتوى التنقل بين صفحات HTML المرتبطة بدلاً من التنقل بين موضوعات المحتوى. من دون حل JavaScript هذا، قد يغفل المتعلّمون عن الارتباطات إلى صفحات HTML وينقرون فوق الزر "التالي" في أداة المحتوى ما يؤدي إلى الانتقال إلى موضوع المحتوى التالي.
ملاحظة: يجب على مصمم المقرر التعليمي ذي الخبرة المتقدمة في HTML وJavaScript إضافة حل D2L JavaScript إلى موضوع محتوى HTML متعدد الصفحات في المقرر التعليمي الذي يتم تمكين الدروس فيه.
استخدام التنقل متعدد الصفحات
للاستفادة من التنقل في الموضوعات متعددة الصفحات، يجب على مصممي المقررات التعليمية تضمين عدة مكونات JavaScript وإضافة القليل من العلامات الخاصة إلى HTML.
إضافة تصميم css لإخفاء التنقل (اختياري، لكن يُنصح به)
يمكنك أن تختار استخدام HTML مثل المثال الآتي لإخفاء عناصر التنقل لديك. يساعد إخفاء عناصر التنقل الداخلي على تقليل الالتباس لدى المتعلّمين لأنه يؤدي إلى توفر التنقل في Brightspace فقط.
<style>
.d2l-hide { display: none; }
</style>
تضمين حل JavaScript
ثمة ثلاثة مراجع JavaScript لتضمينها في HTML. يجب عليك الإشارة إلى المسار المؤهل بالكامل إلى هذه الموارد باستخدام مجال Brightspace الخاص بك في عنوان URL. على سبيل المثال:
1. Jquery (متوفر بموجب ترخيص MIT)
<script src=”https://s.brightspace.com/lib/jquery/1.11.0/jquery.min.js"></script>
2. Jquery simulate (متوفر بموجب ترخيص 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>
إخفاء التنقل (اختياري، لكن يُنصح به)
قم بتمييز التنقل للاستفادة من CSS الذي تمت إضافته في الخطوة الأولى. على سبيل المثال:
<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>
تمييز التنقل لتحديد ارتباطي التالي والسابق
استخدم فئتَي d2l-nav-next وd2l-nav-prev لتحديد أي ارتباطات href التي يجب استخدامها عندما ينقر المتعلّم فوق ارتباطي التالي والسابق. على سبيل المثال:
<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>