دوّامة التحدي الذكية

🎡 البرومبت الاحترافي: دوّامة التحدي الذكية

من مكتبة نبض الدرس التعليمية

تصرّف كفريق عالمي يضم خبير مناهج تعليمية، وخبير تقويم تربوي، ومصمم ألعاب تعليمية، ومطور HTML5 وCSS3 وJavaScript، ومصمم رسوم متحركة وتجارب تفاعلية للأطفال.

المهمة: أنشئ لعبة تعليمية تفاعلية احترافية باسم «دوّامة التحدي الذكية»، تجمع بين عجلة الأسئلة الدوارة والاختيار العشوائي للطلاب والتنافس بالنقاط، في ملف HTML واحد كامل يعمل على الهاتف والتابلت والكمبيوتر والسبورة الذكية، دون الحاجة إلى الإنترنت.

أولًا: محتوى الدرس

سأرفق صور صفحات الدرس أو ملف PDF، أو أكتب الأسئلة بنفسي.

حلّل المحتوى التعليمي أولًا، واستخرج الأهداف والمفاهيم والمواقف والتقويم. أنشئ أسئلة متنوعة تقيس الفهم والتطبيق والتفكير، وليس الحفظ فقط.

لا تختلق معلومات غير موجودة في المصدر، ولا تنشئ أسئلة مكررة.

اجعل الأسئلة قابلة للتعديل والإضافة والحذف من داخل اللعبة.

ثانيًا: تصميم اللعبة

صمّم واجهة عربية بالكامل باتجاه RTL، بألوان مشرقة وتدرجات أنيقة، وحركات سلسة ومؤثرات جذابة، دون ازدحام بصري.

في منتصف منطقة اللعب عجلة ضخمة مقسمة إلى قطاعات ملونة، محاطة بأضواء متحركة، ومؤشر ثابت في الأعلى.

اجعل العجلة تدور فعليًا مع تسارع وتباطؤ طبيعي، ويجب أن يتطابق القطاع الذي يقف عند المؤشر مع السؤال المعروض بالضبط.

أضف زرًا كبيرًا بعنوان «🎡 أدر العجلة»، مع عداد متحرك لاختيار اسم الطالب.

اجعل تصميم اللعبة متجاوبًا تمامًا مع شاشة iPhone والتابلت والسبورة الذكية.

ثالثًا: نظام اختيار الطلاب

* إضافة أسماء الطلاب أو الطالبات يدويًا أو بلصق قائمة كاملة.
* حفظ عدة فصول والانتقال بينها.
* اختيار عشوائي متحرك دون تكرار حتى انتهاء دورة الأسماء.
* إمكانية استبعاد طالب مؤقتًا.
* نمط لعب فردي ونمط فرق من 2 إلى 6 فرق.
* زر «تغيير الطالب» مع بقاء السؤال نفسه.
* زر «تغيير السؤال» مع بقاء الطالب نفسه.
* منع احتساب النقاط مرتين للسؤال نفسه.

رابعًا: بنك الأسئلة

ادعم الأنواع التالية:

1. اختيار من متعدد بأربعة خيارات.
2. صح أو خطأ.
3. سؤال مفتوح يحكم عليه المعلم.
4. سؤال موقف حياتي يتطلب اختيار التصرف الصحيح.
5. سؤال تحدٍّ ذهبي بنقاط مضاعفة.

عند الإجابة الصحيحة، تظهر تغذية راجعة تشرح سبب الصحة، مع مؤثر احتفالي.

عند الإجابة الخاطئة، تظهر تغذية راجعة تعليمية مناسبة دون إحراج الطالب.

عند انتهاء أسئلة العجلة، تُنشأ جولة جديدة من الأسئلة غير المستخدمة إن وجدت.

خامسًا: مفاجآت العجلة

أضف قطاعات تحدٍّ خاصة يمكن للمعلم تشغيلها أو إيقافها:

* ⭐ السؤال الذهبي: مضاعفة النقاط.
* 🎁 صندوق المفاجأة: مكافأة عشوائية معلنة.
* ⚡ تحدي السرعة: وقت أقصر ونقاط إضافية.
* 🤝 تحدي التعاون: سؤال يجيب عنه الفريق.
* 🛡️ فرصة ثانية: إعادة المحاولة دون نقاط إضافية.

يجب أن تكون المفاجآت عادلة وواضحة، وألا تسمح بتكرار المكافآت بسبب الضغط المتعدد.

سادسًا: لوحة تحكم المعلم

أنشئ لوحة تحكم تحتوي على تبويبات:

اللعب: اختيار الطالب، بدء الدوران، تغيير السؤال، تغيير الطالب، الانتقال للجولة التالية.

الفصول: إضافة الطلاب والفصول وتعديل الأسماء وحذفها وحفظها.

الأسئلة: إضافة الأسئلة وتعديلها وحذفها واستيرادها وتصديرها بصيغة JSON.

الإعدادات: عدد القطاعات 4 أو 6 أو 8 أو 10 أو 12، سرعة الدوران، المؤقت، الأصوات، النقاط، نمط الفرق، الثيم اللوني.

النتائج: ترتيب الطلاب والفرق، عدد الإجابات الصحيحة والخاطئة، وإعلان الفائز.

سابعًا: المؤقت والأصوات

أضف مؤقتًا قابلًا للضبط: 10 أو 20 أو 30 أو 60 ثانية أو بدون مؤقت.

أضف أصواتًا مولدة برمجيًا باستخدام Web Audio API، بحيث تعمل دون ملفات خارجية:

* صوت دوران العجلة.
* صوت توقف المؤشر.
* صوت اختيار الطالب.
* صوت الإجابة الصحيحة.
* صوت الإجابة الخاطئة.
* صوت التحدي الذهبي.
* صوت الاحتفال بالفائز.

أضف زر كتم الصوت.

ثامنًا: الاحتفال والنتائج

عند نهاية اللعبة، اعرض منصة تتويج متحركة للمراكز الثلاثة الأولى، مع قصاصات احتفالية ونجوم متلألئة.

اعرض اسم الفائز ونقاطه، مع إمكانية بدء لعبة جديدة أو متابعة اللعب.

احفظ بيانات الفصول والأسئلة والإعدادات والنتائج محليًا باستخدام localStorage، مع إمكانية استكمال الجولة بعد تحديث الصفحة.

تاسعًا: شروط البرمجة

* استخدم HTML وCSS وJavaScript داخل ملف HTML واحد.
* لا تعتمد على مكتبات خارجية أو CDN.
* استخدم SVG لرسم العجلة وتحريكها بدقة.
* تأكد من عدم تكرار السؤال داخل الجولة.
* امنع تداخل المؤقت والدوران والإجابة.
* لا تسمح بالنقر المتكرر الذي يغيّر النتائج.
* اجعل الأزرار قابلة للاستخدام باللمس.
* أضف معالجة لحالات عدم وجود طلاب أو أسئلة.
* اختبر منطق اختيار القطاع والتوقف والنقاط والحفظ.
* لا تدّعِ اختبار المتصفح إذا لم تتمكن من تشغيله فعليًا.

عاشرًا: التسليم

أريد ملف HTML كاملًا قابلًا للتنزيل والتشغيل، وليس صورة أو نموذجًا شكليًا أو شرحًا برمجيًا.

يجب أن تكون العجلة قابلة للدوران فعلًا، وأن تعمل الأسئلة والأزرار والنقاط والمؤثرات، لا أن تكون مجرد واجهة.

ضع في أسفل اللعبة:

نبض الدرس | فكرة وإعداد وتصميم: ثريا ناصر المعمري

ابدأ بتحليل صفحات الدرس المرفقة، ثم نفّذ اللعبة مباشرة. إذا لم أرفق محتوى تعليميًا، اطلب مني صفحات الدرس أو الأسئلة قبل توليد اللعبة.

ملحق تدقيق إلزامي للبرومبت الثامن (إصلاح ملاحظات التجربة):
- يجب ربط زاوية توقف عجلة SVG بالقطاع المختار وبالسؤال المعروض ربطًا حسابيًا واحدًا؛ لا تختَر سؤالًا عشوائيًا مستقلًا بعد التوقف.
- امنع دوران العجلة أثناء حركة اختيار اسم الطالب، ولا تبدأ السؤال حتى تستقر الهوية والقطاع.
- انتهاء المؤقت يغلق الإجابة تلقائيًا ويسجل المحاولة مرة واحدة، ولا يمنح نقاطًا بعد انتهاء الوقت.
- احفظ النقاط وحالة السؤال والدوران والجولة والمؤقت والقطاع المختار في localStorage، واستعدها دون إعادة منح المكافآت.
- قطاعات المفاجآت الخمسة يجب أن تنفذ أثرًا حقيقيًا محددًا، أو تُخفى إذا كانت غير مفعّلة؛ لا تكتفِ بإظهار اسم المفاجأة.
- اختبر يدويًا/برمجيًا توافق المؤشر مع القطاع، والتكرار السريع، وتحديث الصفحة، ونفاد الأسئلة؛ صرّح بما لم تختبره.