بناء بطاقة درس تفاعلية بأسلوب الألعاب
حوّل محتواك إلى لعبة
الطلاب يُركّزون أكثر حين يشعر التعلّم بأنه لعبة. النقاط والتقدّم والتحدي الواضح يحوّلون الدرس العادي إلى شيء يستحق الإكمال. في هذا الدرس ستبني بطاقة درس تفاعلية بأسلوب الألعاب، والذكاء الاصطناعي هو شريكك في البناء.
ستجمع ثلاثة عناصر يشترك فيها كل واجهة لعبة رائعة: شارة نقاط تكافئ الجهد، وشريط تقدّم يُظهر مدى ما أنجزه الطالب، وبطاقة تحدٍّ تمنحه هدفًا. في نهاية الدرس سيكون لديك مكوّن قابل لإعادة الاستخدام يمكنك إضافته إلى أي درس.
لا تقلق بشأن كتابة كود مثالي من الذاكرة. اتّبع كل خطوة، استعن بالتلميحات، ودع المعاينة المباشرة تؤكد لك أنك على الطريق الصحيح.
التعليمات
أنشئ حاوية بطاقة الدرس: عنصر div بزوايا مدوّرة rounded-xl، وحشو داخلي، وخلفية رمادية داكنة gray-800.
تلميح: استخدم: `<div class="max-w-md w-full bg-gray-800 rounded-xl p-6 shadow-lg">`
أين أكتب هذا؟
<!-- ابنِ بطاقة الدرس التفاعلية هنا -->اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أضف شارة نقاط باستخدام عنصر span بخلفية صفراء زاهية تعرض رصيد الطالب.
أضف شريط تقدّم: عنصر div رمادي كمسار يحتوي بداخله على عنصر div أخضر للتعبئة بعرض محدد.
أضف بطاقة تحدٍّ بعنوان «تحدي اليوم» وهدف قصير للطالب.
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أنشئ حاوية بطاقة الدرس: عنصر div بزوايا مدوّرة rounded-xl، وحشو داخلي، وخلفية رمادية داكنة gray-800.