الحالة
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 (محرك VS Code) مع معاينة Sandpack الحية — يكتب الطلاب HTML/CSS حقيقيًا ويرون المخرجات تُحدَّث فورًا. تقييم الاختبار من جهة الخادم يعني أن النتائج قاطعة؛ لا توجد طريقة للتلاعب بتقديم ناجح. محرك دروس YAML: يكتب المدربون الدروس كملفات منظمة مع اختبارات مدمجة وتلميحات وكود بداية. تتبع التركيز القائم على الكاميرا يعمل في web worker خلفي، يسجّل الحضور والتفاعل وبيانات التشتت دون إيقاف المحرر. تسجيل متعدد الخطوات مع تحقق من المتطلبات الأساسية.
ما حصل عليه العميل
- 01 محرر Monaco + Sandpack — كود حقيقي ومعاينة حقيقية في المتصفح
- 02 دروس YAML — المدربون يحدثون المحتوى بدون مطورين
- 03 نظام تركيز قائم على الكاميرا — مساءلة بدون مراقب
- 04 تقييم اختبار من جهة الخادم — نتائج لا يمكن التلاعب بها
