# تطبيق Quiz بسيط باستخدام React

هذا المشروع هو تطبيق Quiz بسيط تم بناؤه باستخدام React. يهدف إلى تقديم تجربة تفاعلية للمستخدمين للإجابة على مجموعة من الأسئلة.

## الميزات الرئيسية:

*   عرض الأسئلة: يتم عرض الأسئلة للمستخدم واحدًا تلو الآخر.
*   اختيار الإجابات: يمكن للمستخدم اختيار إجابته من بين الخيارات المتاحة لكل سؤال.
*   التحقق من الإجابة: يقوم التطبيق تلقائيًا بالتحقق مما إذا كانت إجابة المستخدم صحيحة أم خاطئة.
*   التتبع: يتم تتبع درجة المستخدم (عدد الإجابات الصحيحة).
*   عرض النتيجة النهائية: بعد الانتهاء من جميع الأسئلة، يعرض التطبيق النتيجة النهائية للمستخدم.
*   إعادة التشغيل: يتيح للمستخدم إعادة لعب الـ Quiz.

## التقنيات المستخدمة:

*   React: مكتبة JavaScript لبناء واجهات المستخدم.
*   Create React App: أداة مساعدة لإنشاء مشاريع React بسرعة.
*   JavaScript/ES6+: لكتابة منطق التطبيق.
*   CSS: لتنسيق العناصر وجعل التطبيق يبدو جذابًا.

## هيكل المشروع:

quiz-app/
├── public/           # الملفات العامة (مثل index.html)
├── src/              # ملفات الكود المصدري
│   ├── components/   # المكونات القابلة لإعادة الاستخدام (مثل Question, Answer)
│   │   ├── Question.js
│   │   └── Answer.js
│   ├── App.js        # المكون الرئيسي للتطبيق
│   ├── index.js      # نقطة الدخول للتطبيق (render App)
│   └── quizData.js   # ملف يحتوي على بيانات الأسئلة (أسئلة، خيارات، إجابة صحيحة)
├── package.json      # ملف تعريف المشروع وإدارة الاعتماديات
└── README.md         # هذا الملف


## كيفية تشغيل المشروع محليًا:

1. استنساخ المستودع (Clone the repository):
        git clone https://github.com/your-username/quiz-app.git
    cd quiz-app
    
    *(استبدل `https://github.com/your-username/quiz-app.git` برابط المستودع الفعلي الخاص بك)*

2. تثبيت الاعتماديات (Install dependencies):
    تأكد من أن لديك Node.js و npm (أو Yarn) مثبتين على جهازك.
        npm install
    # أو إذا كنت تستخدم Yarn
    # yarn install
    

3. تشغيل التطبيق:
        npm start
    # أو
    # yarn start
    
    سيتم فتح التطبيق تلقائيًا في متصفحك على العنوان `http://localhost:3000/`.

## كيفية إضافة أسئلة جديدة:

يمكنك تعديل ملف `src/quizData.js` لإضافة المزيد من الأسئلة أو تعديل الأسئلة الحالية. يجب أن يكون كل سؤال على شكل كائن (object) يحتوي على:

*   `id`: معرف فريد للسؤال.
*   `question`: نص السؤال.
*   `options`: مصفوفة (array) تحتوي على خيارات الإجابة الممكنة.
*   `correctAnswer`: الإجابة الصحيحة لهذا السؤال.

مثال على تنسيق بيانات سؤال:

{
  id: 1,
  question: "ما هي عاصمة فرنسا؟",
  options: ["برلين", "مدريد", "باريس", "روما"],
  correctAnswer: "باريس"
}


## الاعتبارات المستقبلية:

*   مؤقت زمني: إضافة عداد زمني لكل سؤال أو للـ Quiz بالكامل.
*   مستويات صعوبة: تصنيف الأسئلة حسب مستوى الصعوبة.
*   التخزين المحلي: حفظ درجة المستخدم أو تقدمه باستخدام `localStorage`.
*   تصميم أفضل: تحسين الواجهة وتجربة المستخدم.
*   أنواع أسئلة مختلفة: دعم أسئلة صح/خطأ، أسئلة ملء الفراغ، إلخ.

---