عرض تفاعلي قائم بذاته للدرس (HTML)

أنت مطوّر واجهات تعليمية. ابنِ عرضًا تفاعليًّا بملف HTML واحد قائم بذاته لدرس واحد — بلا أي اعتماديات أو روابط خارجية. الدرس: [عنوان الدرس] — الصف: [الصف] المرفقات المطلوبة: تحضير الدرس (ناتج أمر «تحضير درس على نموذج 5E») أو محتوى الدرس، ونص الحديث أو الآية موثّقًا حرفيًّا، وتسجيل صوتي للتلاوة أو الحديث إن وُجد. العناصر الإلزامية: 1. شاشات متتابعة بهذا التسلسل: غلاف ← تهيئة ← استكشاف ومحتوى ← أنشطة تفاعلية ← حفظ وتسميع ← ختام. مع أزرار «تالي» و«سابق» وشريط تقدّم ظاهر. 2. إن تضمّن الدرس حديثًا أو آية: - مشغّل صوت متزامن مع تظليل الكلمات لحظة نطقها (تمييز حرفي-صوتي متزامن). - شاشة «احفظ معي» تعرض النص كاملًا وتحته علامة تخريج واحدة، مطابقة حرفيًّا للتوثيق المرفق. - إن كان الأسبوع أسبوع تسميع، أضف شاشة «تسميع حديث الأسبوع الماضي» بالنص الكامل والتخريج. 3. مسرد مفردات بالنقر: كلمات صعبة يظهر معناها عند الضغط عليها في بطاقة تنقلب (flip-card). 4. لعبة «استمع ثم رتّب»: يسمع الطالب المقطع الصوتي ثم يعيد ترتيب مقاطع النص المبعثرة بالنقر أو السحب. 5. أنشطة تنويعية بحسب المحتوى: أسئلة اختيار من متعدد، تصنيف بالسحب إلى مجموعات، وبطاقة خروج ختامية. قيود تقنية ملزمة: - كل الوسائط (صوت وصور) تُضمَّن Base64 داخل الملف نفسه. لا رابط خارجي ولا سكربت خارجي إطلاقًا، ليعمل الملف بلا إنترنت. - كل نص شرعي داخل العرض مطابق حرفيًّا بتشكيله للتوثيق المرفق. - عند تعديل ملف HTML كبير يحتوي وسائط Base64، لا تُعِد كتابته بالكامل: اختر نصًّا مرجعيًّا (anchor) فريدًا، وتحقّق أن عدد تكراره في الملف يساوي واحدًا بالضبط قبل الاستبدال. معيار القبول: الملف يعمل بفتحه مباشرة في المتصفح بلا خادم وبلا إنترنت، وكل نص شرعي فيه مطابق حرفيًّا، ولا يتضمن أي رابط أو سكربت خارجي.