Quiz App

مشروع Quiz App هو تطبيق بسيط لتقديم اختبارات تفاعلية يعمل بالكامل على جانب المتصفح، ويعتمد على HTML وTailwind CSS وJavaScript Vanilla. يوفّر للمستخدم تجربة أسئلة اختيار من متعدد يتم جلبها مباشرة من واجهة برمجة تطبيقات خارجية خاصة بالأسئلة العامة. يمكن للمستخدم اختيار الإجابة الصحيحة، ومعرفة النتيجة فورًا عبر تمييز الإجابة باللون الأخضر أو الأحمر، ثم الانتقال إلى السؤال التالي بضغطة زر.

الملفات المستخدمة:

• index.html: يحتوي على الهيكل الرئيسي للواجهة، زرّي تبديل اللغة، منطقة عرض الأسئلة، وأزرار الخيارات

• app.js: يحتوي على كامل منطق التطبيق، مثل جلب البيانات، عرض الأسئلة، تغيير اللغة، التحكم بالأزرار، والتنقل بين الأسئلة

الميزات والخدمات المقدمة:

• جلب الأسئلة من API خارجي وعرضها مباشرة للمستخدم

• اختيار الإجابة الصحيحة وعرض التغذية الراجعة فورًا

• زر “التالي” للانتقال عبر الأسئلة خطوة بخطوة

• التبديل بين الإنجليزية والعربية مع تغيير اتجاه الصفحة (RTL/LTR)

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

• HTML لبنية الصفحات

• Tailwind CSS من خلال CDN لتنسيق الواجهة

• Vanilla JavaScript للتحكم بالتفاعلات

• مكتبات خارجية مضمنة:

Google Fonts (خط Ubuntu)

SweetAlert2 موجود ولكنه غير مستخدم حاليًا

طبيعة البيانات وسبب استخدامها:

جميع البيانات الواردة عبارة عن أسئلة معلومات عامة يتم جلبها من واجهة OpenTDB وتحتوي على:

• نص السؤال

• إجابة صحيحة

• ثلاثة إجابات خاطئة

الهدف من هذه البيانات:

توفير تجربة اختبارات عامة وبسيطة لاختبار معلومات المستخدم وتعزيز تفاعله.

Quiz App is a simple interactive quiz application that runs entirely on the client side and is built using HTML, Tailwind CSS, and Vanilla JavaScript. It provides users with a multiple-choice quiz experience, where questions are fetched directly from an external trivia API. The user can select an answer, instantly see whether it is correct or incorrect through color feedback (green for correct, red for incorrect), and then move to the next question with a single click.

Files Included:

• index.html: Contains the main UI structure, language toggle buttons, question display area, and answer option buttons

• app.js: Contains the full application logic such as fetching questions, rendering UI, switching language, handling user actions, and navigating between questions

Features and Services Provided:

• Fetching trivia questions from an external API and displaying them to the user

• Allowing the user to select an answer and receive real-time feedback

• A “Next” button to advance through questions step by step

• Language toggle between English and Arabic with direction switching (LTR/RTL)

Technologies Used:

• HTML for page structure

• Tailwind CSS via CDN for styling

• Vanilla JavaScript for interaction logic

• External libraries included:

– Google Fonts (Ubuntu font)

– SweetAlert2, included but not currently utilized

Data Source and Purpose:

All displayed data consists of general-knowledge trivia questions fetched from the OpenTDB API, including:

• Question text

• One correct answer

• Three incorrect answers