Zeroday Camp — منصة بوتكامب برمجي يكتب فيه الطلاب كودًا حقيقيًا (ويبقون ملتزمين)
معظم دورات البرمجة الإلكترونية مقاطع فيديو مع اختبار في النهاية. Zeroday Camp مختلف — يكتب الطلاب كودًا حقيقيًا في محرر Monaco مع معاينة مباشرة، ويعملون عبر 29 وحدة منظمة، ويُتتبع تفاعلهم في الوقت الفعلي عبر كشف التركيز القائم على الكاميرا. بنينا كل جزء من هذا من الصفر.
عن هذا المشروع
Zeroday Camp بوتكامب برمجي إلكتروني يركز على تعليم HTML وCSS من الصفر — منظم وخاضع للمساءلة ومُبنى للطلاب الذين يحتاجون أكثر من مشاهدة الفيديو السلبية للتعلم فعلًا.\n\nكانت للمنصة ثلاثة متطلبات لا تستطيع أدوات LMS القياسية تلبيتها: محرر كود يعمل في المتصفح ويُقيِّم المخرجات الحقيقية مقابل حالات اختبار حقيقية، ونظام دروس مرن بما يكفي للمدربين لتحديثه دون تهجيرات قواعد البيانات، ونظام تفاعل يُبقي الطلاب مسؤولين دون الحاجة إلى مدرب حي في الغرفة.\n\nللمحرر، دمجنا Monaco (المحرك ذاته الذي يشغّل VS Code) مع Sandpack للمعاينة الحية في المتصفح. يكتب الطلاب HTML وCSS، يرون المخرجات تُحدَّث في الوقت الفعلي في معاينة مقسومة الشاشة، ويُقدِّمون مقابل حالات اختبار تُقيَّم من جهة الخادم. نتائج الاختبار قاطعة — لا توجد طريقة للتلاعب بتقديم ناجح.\n\nمحرك الدروس مبني على YAML. يكتب المدربون الدروس بتنسيق YAML منظم مع حالات اختبار وأنظمة تلميح وملفات بداية مُعيَّنة. يُحلِّل التطبيق YAML عند وقت الطلب — إضافة وحدة جديدة أو تحديث درس قائم هو تعديل ملف بدون تهجير قاعدة بيانات. 29 وحدة (12 HTML و17 CSS) مباشرة.\n\nنظام تتبع التركيز هو الجزء الأكثر تعقيدًا تقنيًا. كشف الوجه القائم على الكاميرا يعمل في web worker (لا يوقف المحرر أبدًا)، يسجّل نوافذ التفاعل ونسب التشتت وأحداث الغياب وبيانات ساعة الدراسة. بنية JS تستخدم event bus مع محولات قابلة للتوصيل: كاميرا وساعة وتفاعل (لوحة مفاتيح/ماوس) وإضافات جلسة الدراسة — كلها قابلة للاختبار والاستبدال بشكل مستقل.\n\nالتسجيل متعدد الخطوات يتعامل مع طلبات السداد والتحقق من المتطلبات الأساسية — لا يستطيع الطلاب الوصول إلى الوحدات المتقدمة دون إتمام المتطلبات السابقة.
ما المشكلة التي واجهوها؟
أدوات LMS القياسية تقدم تشغيل الفيديو واختبارات متعددة الخيارات. لا شيء من هذا يعطي المدربين إشارة حقيقية حول ما إذا كان الطالب يتعلم — أو حاضرًا. يمكن للطلاب إنهاء وحدة دورة دون كتابة سطر كود واحد، دون إثبات الفهم، ودون مساءلة. كانت المنصة تحتاج أيضًا إلى أن تكون قابلة للصيانة من قِبل المدربين دون تدخل هندسي.
Monaco code editor + live Sandpack preview — in-browser
Focus tracking — camera-based, real-time engagement data
YAML lesson engine — 29 modules, no database edits needed
ما الذي بنيناه ولماذا
محرر Monaco (محرك VS Code) مع معاينة Sandpack الحية — يكتب الطلاب HTML/CSS حقيقيًا ويرون المخرجات تُحدَّث فورًا. تقييم الاختبار من جهة الخادم يعني أن النتائج قاطعة؛ لا توجد طريقة للتلاعب بتقديم ناجح. محرك دروس YAML: يكتب المدربون الدروس كملفات منظمة مع اختبارات مدمجة وتلميحات وكود بداية. تتبع التركيز القائم على الكاميرا يعمل في web worker خلفي، يسجّل الحضور والتفاعل وبيانات التشتت دون إيقاف المحرر. تسجيل متعدد الخطوات مع تحقق من المتطلبات الأساسية.
المخرجات والنتائج
- ✓ محرر Monaco + Sandpack — كود حقيقي ومعاينة حقيقية في المتصفح
- ✓ دروس YAML — المدربون يحدثون المحتوى بدون مطورين
- ✓ نظام تركيز قائم على الكاميرا — مساءلة بدون مراقب
- ✓ تقييم اختبار من جهة الخادم — نتائج لا يمكن التلاعب بها
منهجيتنا في هذا المشروع
Discovery & Strategy
We audited the client's current position, competitors, and conversion goals before any design began.
Design & Copy
Full visual design and all copy written by Quality X — approved by the client before development.
Development
Custom-built — no page builders. Fast, SEO-ready, and fully manageable post-launch.
Launch & Support
Live with training, documentation, and a 30-day support window included.
Ready to build a website
يحقق تحويلات فعلية؟
ابدأ بمكالمة مجانية لمدة 30 دقيقة. سنرسم بالضبط ما يحتاجه مشروعك — الاستراتيجية أولاً.
لا التزامات. لا ضغط مبيعات. مجرد محادثة صادقة.