بناء لوحة تقدم الفصل الدراسي
متتبع تقدم الطلاب
معرفة مستوى كل طالب بنظرة واحدة هي من أقوى الأدوات التي يمكن أن يمتلكها المعلم. لوحة التقدم الأنيقة تحوّل جدول الأرقام إلى شيء يمكنك قراءته في ثوانٍ. في هذا الدرس ستبني لوحة كهذه بمساعدة الذكاء الاصطناعي في كل خطوة.
ستنشئ جدولاً يعرض الطلاب، ويُظهر تقدم كل منهم بشريط مرئي، ويُصنّف حالتهم حتى ترى فوراً من هو متقدم ومن يحتاج إلى مساعدة. هذا بالضبط النوع من الأدوات التي يمكنك تكييفها لأي فصل وأي مادة.
اتبع الخطوات، وراقب المعاينة المباشرة، وستحصل على لوحة يمكنك استخدامها فعلاً صباح يوم الاثنين.
التعليمات
أضف عنواناً للوحة بنص «تقدم الفصل» داخل حاوية بطاقة بزوايا مستديرة rounded-xl.
تلميح: ضع `<h1>تقدم الفصل</h1>` داخل `<div class="... rounded-xl ...">`.
أين أكتب هذا؟
<!-- ابنِ لوحة تقدم الفصل الدراسي هنا -->اكتبه في السطر 11 — أسفل هذا التعليق، بعد الكود الذي أضفته بالفعل.
أنشئ جدولاً بأعمدة رأسية للطالب والتقدم والحالة.
في كل صف طالب، أضف شريط تقدم بـ div تعبئة أخضر يعكس عرضه نسبة التقدم.
أضف شارة حالة في كل صف باستخدام span. تأكد من أن واحدة على الأقل تقول «في المسار».
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف عنواناً للوحة بنص «تقدم الفصل» داخل حاوية بطاقة بزوايا مستديرة rounded-xl.