السلام عليكم ورحمة الله وبركاته،
أحببت مشاركتكم تجربة تطوير هذا التطبيق: مسابقة القرآن للأطفال (Quran Quiz). هو تطبيق ويب (PWA) تفاعلي يهدف لجعل اختبار المعلومات القرآنية للأطفال تجربة ممتعة ومشجعة، مع دعم اللغتين العربية والإنجليزية.
فكرة التطبيق جائت عند تصفحي مجموعة من الأسئلة الموجهة للأطفال عن القرآن الكريم، وأردت تحويل التجربة من مجرد أسئلة مكتوبة إلى تطبيق صغير تفاعليّ وأردت تجربة بعض الأمور أثناء العمل عليه كالعادة.
الكود المصدري متاح مفتوح المصدر (Open Source) للجميع.
رابط المستودع: من هنا
رابط التجربة الحيّة: من هنا
نظرة عامة
أبرز المميزات:
- استخدام المؤثرات البصرية وبعض الحركات في الواجهة - هذه محاولتي في جعل الواجهة مناسبة للإطفال، لا أدري إن كانت نافعة أم لا.
- إمكانيّة إنشاء صورة للنتيجة بضغطة زر لمشاركتها مع الأهل والأصدقاء - أيضاً محاولتي في التلعيب Gamification ولكن التصميم بسيط وأعتقد يمكن الخروج بتصميم أفضل ملائم أكثر للفئة العمرية.
- يعمل بدون إنترنت (Offline): بفضل تقنية الـ PWA، يمكن تثبيت التطبيق واستخدامه حتى دون اتصال.
التصميم وتجربة المستخدم (UX/UI)
اعتمدت في التصميم على مكتبة TailwindCSS مع محاكاة نظام Shadcn لإنشاء الواجهة - هذا خياري المفضل في الآونة الأخيرة ويوفّر عليّ الكثير من التفكير أثناء العمل. ركّزت على مبدأ Mobile-First، حيث أن معظم الأطفال يستخدمون الأجهزة اللوحية أو الهواتف.
البنية التقنية
ينقسم الكود إلى وحدات بسيطة ومباشرة لسهولة التعديل:
Data Layer (data.js):
ملف منفصل يحتوي على بنك الأسئلة. تم الاعتماد على أسئلة من موقع نور أكاديمي مع تعديلها لتناسب نظام الاختيار من متعدد (MCQ) وضمان تطابق النسختين العربية والإنجليزية. الأسئلة الأصليّة باللغة الانجليزية، عملت على ترجمتها بالذكاء الاصطناعيّ مع التدقيق اليدويّ بعد الترجمة.
Canvas Rendering:
ميزة مشاركة النتيجة لا تعتمد على أخذ "Screenshot" بل تقوم برسم الصورة برمجياً باستخدام HTML5 Canvas API لضمان جودة عالية وتصميم موحد للصورة المصدرة مهما كان حجم شاشة الجهاز. وهذا تكنيك أفضل برأيي من طلب مشاركة الشاشة من المستخدم، وأرى كثيراً من مطوّري الويب يغفلون عنه.
التخزين والأداء
للحفاظ على الخفة والسرعة، التطبيق لا يستخدم قاعدة بيانات (Database). كل شيء يعمل في المتصفح (Client-side).
يتم استخدام Service Worker لتخزين الملفات الأساسية (HTML, JS, CSS) في ذاكرة المتصفح (Cache Storage) لضمان العمل السريع وبدون إنترنت.
الآفاق المستقبلية
هذه نسخة أولية، وهناك أفكار للتطوير:
- إضافة مستويات أكثر وتصنيفات (تجويد، قصص الأنبياء) وأسئلة أكثر - أرغب مستقبلاً في إنشاء لوحة تحكم تسهّل إدخال هذه الأسئلة والإجابات.
- حفظ تقدم الطفل باستخدام
LocalStorage ليعود ويكمل من حيث توقف أو عرض النتائج السابقة.
- إضافة أصوات تفاعلية عند الإجابة الصحيحة أو الخاطئة - أعتقد هذا قد يحسّن التجربة من ناحية الملاءمة للأطفال.
