بناء واجهة مستخدم تكيفية للدرس التالي
محتوى يتكيف مع كل طالب
أفضل تجربة تعليمية هي التي تلتقي بكل طالب في مستواه. الطالب الذي أتقن الاختبار يحتاج إلى تحدٍّ أكبر، والطالب الذي واجه صعوبة يحتاج إلى مراجعة. في هذا الدرس ستبني واجهة «الدرس التالي الموصى به» التي تقترح مساراً بناءً على الأداء.
ستنشئ ثلاث بطاقات توصية مُصنَّفة، واحدة لكل مستوى أداء: مسار مراجعة للطلاب الذين يحتاجون إلى مزيد من التدريب، ومسار ثابت لمن هم على المسار الصحيح، ومسار تحدٍّ للمتفوقين. التسميات الواضحة وإشارات الألوان تجعل الاختيار الصحيح واضحاً للعيان.
هنا يُثبت المحتوى المبني بالذكاء الاصطناعي قيمته الحقيقية — لا يرى طالبان الخطوة التالية ذاتها بالضبط. اتبع الخطوات وشاهد واجهتك التكيفية تتشكل.
التعليمات
أضف عنوان الصفحة «الدرس التالي الموصى به» وعنواناً فرعياً قصيراً يشرح أن المسار يتكيف.
تلميح: استخدم `<h1 class="text-3xl font-bold">الدرس التالي الموصى به</h1>` يليه `<p>` كعنوان فرعي.
أين أكتب هذا؟
<!-- ابنِ واجهة التوصيات التكيفية هنا -->اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أنشئ حاوية شبكة متجاوبة لاحتواء بطاقات التوصية الثلاث.
أضف ثلاث بطاقات rounded-xl، كل منها تحتوي على span بتسمية مستوى الأداء (مثلاً «يحتاج مراجعة»).
أضف لكل بطاقة زر دعوة للعمل حتى يتمكن الطالب من بدء مساره.
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف عنوان الصفحة «الدرس التالي الموصى به» وعنواناً فرعياً قصيراً يشرح أن المسار يتكيف.