quiz app

هذا المشروع هو عبارة عن تطبيق لعبة مسابقات (Quiz Game) تعتمد على أسئلة متعددة الخيارات (MCQs)، ويتم بناؤها باستخدام التقنيات الأساسية للويب: HTML و CSS و JavaScript.

متطلبات تجربة المستخدم (User Stories)

تمثل هذه النقاط الميزات التي يجب أن يراها ويجربها اللاعب داخل اللعبة:

الشاشة الرئيسية والبدء:

شرح اللعبة: عند فتح الصفحة، يجب أن يرى المستخدم وصفاً مختصراً عن اللعبة وقواعدها (كيفية اللعب).

قائمة الصدارة (Leaderboard): يجب أن تحتوي الصفحة على جدول أو قائمة تعرض أعلى النقاط (High Scores) التي حققها اللاعبون السابقون مع أسمائهم.

زر البدء (Start Button): وجود زر واضح لبدء اللعبة. فور الضغط عليه، تطلب اللعبة من اللاعب إدخال اسمه قبل الانتقال للأسئلة.

آلية اللعب (Gameplay):

الأسئلة العشوائية: تقدم اللعبة 10 أسئلة عشوائية من نوع "اختيار من متعدد"، وكل سؤال يحتوي على 4 خيارات (إجابة واحدة فقط هي الصحيحة).

عداد الأسئلة: يجب أن يرى اللاعب مؤشراً يوضح تقدمه (مثلاً: 2/10 تعني أنه الآن في السؤال الثاني من أصل 10).

زر الانتقال للتالي (Next Button): * يوجد زر للانتقال للسؤال التالي.

شرط مهم: هذا الزر يكون مخفياً أو غير مفعل (Disabled)، ولا يظهر أو يتفعل إلا بعد أن يقوم اللاعب باختيار إجابة للسؤال الحالي.

نهاية اللعبة وحفظ البيانات:

عرض النتيجة: بعد الإجابة على السؤال العاشر والأخير، تظهر للاعب شاشة النهاية وتعرض النتيجة الإجمالية التي حققها.

التخزين المحلي (Local Storage): وهو عصب المشروع التقني؛ حيث يجب عليك استخدام الـ localStorage في المتصفح لـ:

حفظ الأسئلة وقراءتها منها.

حفظ قائمة الصدارة (الأسماء والنقاط) وتحديثها باستمرار حتى لا تختفي البيانات عند إعادة تنشيط الصفحة (Refresh).