بوابة النجوم الذكية

البرومبت 15 | بوابة النجوم الذكية — مكتبة نبض الدرس

تصرّف كفريق عالمي من مطوري ألعاب HTML5 وCSS3 وJavaScript، ومصممي مؤثرات سينمائية وواجهات UX/UI، وخبراء ألعاب تعليمية صفية.

المهمة: أنشئ لعبة ويب عربية RTL فعلية بعنوان «بوابة النجوم الذكية»، لا مجرد صورة أو واجهة وهمية. تستخدم لاختيار الطلاب والطالبات عشوائيًا عبر بوابة ثلاثية الأبعاد ذات حلقات مضيئة وأسماء تدور حولها، مع تحدي سؤال تعليمي اختياري.

الواجهة: عنوان «مين عليه الدور؟» للطلاب أو «مين عليها الدور؟» للطالبات. بوابة مركزية من حلقات متداخلة ومركز طاقة وشعاع يمسح بطاقات الأسماء وجزيئات ضوئية. خطوط عربية كبيرة مناسبة لشاشة الصف والآيفون.

الثيمات الثلاثة القابلة للتبديل دون تحديث: (1) مستقبلية كحلية وبنفسجية وسماوية نيون، (2) عُمانية ببوابة مستوحاة من الحصون العُمانية وزخارف هندسية خفيفة وألوان زمردية وذهبية، (3) فضائية بمجرة ونجوم وحلقات طاقة. نفّذ الرسوم عبر CSS/SVG/Canvas دون اعتماد على مكتبات خارجية.

لوحة التحكم: إدخال اسم في كل سطر، حفظ وتعديل وحذف الأسماء، عداد الإجمالي والمتبقي، قائمة المختارين، خيار منع التكرار، إعادة الدورة، اختيار جديد، تبديل طلاب/طالبات، كتم الصوت، ملء الشاشة، اختيار الثيم، ووضع العرض. لا تضع أسماء طلاب حقيقية افتراضية. احفظ البيانات والإعدادات محليًا باستخدام localStorage.

الاختيار: عند الضغط «شغّل البوابة» تدور الحلقات تدريجيًا، تتسارع الأسماء مع أصوات إلكترونية ثم تتباطأ ويظهر الاسم المختار بوميض واحتفال. اختر الفائز عشوائيًا من المؤهلين عند بدء الجولة باستخدام crypto.getRandomValues مع تجنب تحيز اختيار الفهرس. لا تجعل ترتيب العناصر أو الحركة تحدد الفائز. عند منع التكرار، استبعد المختارين إلى نهاية الدورة. امنع الجولات المتزامنة. احفظ حالة الدورة بعد كل اختيار.

تحدي السؤال: خيار تشغيل/إيقاف. تسمح المعلمة بإدخال أسئلة متعددة يدويًا مع 3 أو 4 اختيارات وإجابة صحيحة وتفسير، أو أسئلة شفهية وزر «إظهار الإجابة للمعلمة». بعد اختيار الاسم يظهر سؤال عشوائي من البنك، وتغذية راجعة وتعليل عند الإجابة. أضف خيار منع تكرار الأسئلة وحفظها محليًا. لا تدّعِ توليد أسئلة من صور الدرس بالذكاء الاصطناعي دون خدمة حقيقية متصلة.

وضع العرض: يخفي الإعدادات ويكبر البوابة والاسم، ويسمح بالاختيار بالنقر على البوابة والخروج بزر واضح. أضف ملء الشاشة مع معالجة عدم دعم المتصفح؛ هذا ليس تسجيل فيديو تلقائيًا.

الصوت: أنشئ مؤثرات البدء والتشويق والاختيار والاحتفال عبر Web Audio API بعد تفاعل المستخدم فقط، مع كتم الصوت. احترم إعداد تقليل الحركة.

المتطلبات التقنية: ملف HTML مستقل واحد يحوي CSS وJavaScript، RTL، يعمل دون إنترنت ودون API أو تسجيل دخول، ومتوافق مع iPhone وAndroid وiPad والكمبيوتر، ويدعم اللمس والفأرة. لا تستخدم صورًا أو مكتبات خارجية، ولا تضع أزرارًا وهمية. امنع تداخل الأسماء والأزرار على الشاشات الصغيرة.

قبل التسليم راجع إدخال الأسماء وحفظها، العشوائية ومنع التكرار، تبديل الثيمات، الصوت، الأسئلة وتصحيحها، وضع العرض، زر ملء الشاشة، والحالات الفارغة. إذا تعذر الاختبار الفعلي صرّح بذلك. سلّم HTML قابلًا للتنزيل والنشر على Netlify، مع تعليمات تشغيل مختصرة. ابدأ ببناء اللعبة الآن ولا تكتفِ بالشرح.