لتوفير التنقل السلس في موضوعات المحتوى متعددة الصفحات، يمكن لمصممي المقرر التعليمي إضافة حل JavaScript لـ D2L إلى موضوعات محتوى HTML التي تحتوي على ارتباطات إلى صفحات HTML متعددة. عندما ينتقل المتعلم إلى موضوع محتوى متعدد الصفحات باستخدام حل JavaScript، يتم إخفاء الارتباطات إلى صفحات HTML في موضوع المحتوى متعدد الصفحات، ويوفر الزران التالي والسابق في أداة المحتوى التنقل بين صفحات HTML المرتبطة بدلاً من التنقل بين موضوعات المحتوى. من دون حل JavaScript هذا، قد يغفل المتعلّم عن الارتباطات إلى صفحات HTML وينقرون فوق الزر التالي في أداة المحتوى ما يؤدي إلى الانتقال إلى موضوع المحتوى التالي.
|
ملاحظة: يجب على مصمم المقرر التعليمي ذي الخبرة المتقدمة في HTML وJavaScript إضافة حل D2L JavaScript إلى موضوع محتوى HTML متعدد الصفحات في المقرر التعليمي الذي يتم تمكين الدروس فيه. |
استخدام التنقل متعدد الصفحات
للاستفادة من التنقل في الموضوعات متعددة الصفحات، يجب على مصممي المقررات التعليمية تضمين عدة مكونات JavaScript وإضافة بعض العلامات الخاصة إلى HTML.
تضمين حل 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 لإخفاء التنقل
|
ملاحظة: بينما توصي D2L بإضافة تصميم CSS لإخفاء التنقل، فهي خطوة اختيارية. |
يمكنك أن تختار استخدام HTML لإخفاء عناصر التنقل لديك. يساعد إخفاء عناصر التنقل الداخلي على تقليل الالتباس لدى المتعلّم لأنه يؤدي إلى توفر التنقل في Brightspace فقط. على سبيل المثال:
<style>
.d2l-hide { display: none; }
</style>
إخفاء تنقلاتك
|
ملاحظة: بينما توصي D2L بإخفاء التنقل، فإنه خطوة اختيارية. |
ضع علامة على التنقل للاستفادة من 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>