تطبيق الاختبار التفاعلي الأول لك
تطبيق الاختبار التفاعلي الأول لك
المحاضرة تواصل في اتجاه واحد. الاختبار محادثة حقيقية.
الطلاب الذين يختبرون أنفسهم يحتفظون بـ 50% أكثر مما يحتفظ به من يعيد القراءة فقط. في هذا الدرس ستبني تطبيق اختبار حقيقياً قابلاً للنقر — مع سؤال، وخيارات إجابة تضيء باللون الأخضر أو الأحمر عند النقر، وعداد نقاط، ورسالة نتيجة. يعمل في المتصفح مباشرةً. بدون أطر عمل، بدون خادم خلفي. فقط HTML + قليل من JavaScript.
التعليمات
أضف <h1> بعنوان اختبارك — ما الموضوع الذي يختبره هذا الاختبار؟
تلميح: جرّب: `<h1 class="text-3xl font-bold text-white mb-2">اختبار معرفة سريع</h1>`
أضف <div class="question"> يحتوي على نص سؤال الاختبار
أضف على الأقل 3 أزرار إجابة <button class="answer-btn">. ضع علامة على الإجابة الصحيحة بـ data-correct="true"
أضف <div class="score-counter"> في الأسفل يعرض "النقاط: 0" — سيقوم JavaScript الموجود في الكود تلقائياً بتحديثه عند النقر على الإجابة الصحيحة
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف <h1> بعنوان اختبارك — ما الموضوع الذي يختبره هذا الاختبار؟