القائمة الرئيسية

الاختبار الإلكتروني الشامل الثاني : تصميم وتطوير مواقع الويب

اختبار إلكتروني شامل وتفاعلي (20 سؤالاً) مقسم على 4 جولات تقييمية - الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية

28 مشاهدة آخر تحديث: 18 أكتوبر 2026
الاختبار الإلكتروني الشامل الثاني : تصميم وتطوير مواقع الويب
الصف الثاني الثانوي - حاسب وبرمجة الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية

الاختبار الإلكتروني الشامل الثاني : تصميم وتطوير مواقع الويب

اختبار إلكتروني شامل وتفاعلي (20 سؤالاً) مقسم على 4 جولات تقييمية - الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية

المحطة 1 من 4 الجولة 1: أسئلة الانطلاقة (1 - 5)
السؤال 1 من 20 درجة واحدة
أين يجب وضع وسم العنوان في البنية الهيكلية لصفحة الويب ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_1" id="exq_sec2_s97_o8_1_0" value="0"> <span class="fw-bold fs-6 text-dark">أسفل وسم </html></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_1" id="exq_sec2_s97_o8_1_1" value="1"> <span class="fw-bold fs-6 text-dark">داخل وسم جسم الصفحة <body></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_1" id="exq_sec2_s97_o8_1_2" value="2"> <span class="fw-bold fs-6 text-dark">قبل وسم <!DOCTYPE html></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_1" id="exq_sec2_s97_o8_1_3" value="3"> <span class="fw-bold fs-6 text-dark">داخل وسم الرأس <head></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_1" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_2" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 2 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما وظيفة الوسم <br> عند استخدامه داخل فقرة نصية في صفحة الويب ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_2" id="exq_sec2_s97_o8_2_0" value="0"> <span class="fw-bold fs-6 text-dark">تغيير نوع الخط المستخدم في الكتابة</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_2" id="exq_sec2_s97_o8_2_1" value="1"> <span class="fw-bold fs-6 text-dark">رسم خط أفقي عريض يفصل الفقرات</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_2" id="exq_sec2_s97_o8_2_2" value="2"> <span class="fw-bold fs-6 text-dark">إحداث كسر سطر والانتقال للسطر التالي مباشرة</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_2" id="exq_sec2_s97_o8_2_3" value="3"> <span class="fw-bold fs-6 text-dark">جعل النص مائلاً بخط خفيف</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_2" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_3" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 3 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">الوسم <hr> يُستخدم برمجياً في لغة HTML من أجل :</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_3" id="exq_sec2_s97_o8_3_0" value="0"> <span class="fw-bold fs-6 text-dark">إنشاء جدول بيانات من صف واحد</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_3" id="exq_sec2_s97_o8_3_1" value="1"> <span class="fw-bold fs-6 text-dark">إدراج رابط تشعبي لصفحة سابقة</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_3" id="exq_sec2_s97_o8_3_2" value="2"> <span class="fw-bold fs-6 text-dark">تشغيل مقطع صوتي في الخلفية</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_3" id="exq_sec2_s97_o8_3_3" value="3"> <span class="fw-bold fs-6 text-dark">رسم خط أفقي فاصل يعبر عن تحول دلالي في الموضوع</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_3" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_4" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 4 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">أي الخصائص التالية في الوسم <html> مسؤولة عن تحديد لغة محتوى الصفحة (مثل اللغة العربية) ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_4" id="exq_sec2_s97_o8_4_0" value="0"> <span class="fw-bold fs-6 text-dark">charset='arabic'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_4" id="exq_sec2_s97_o8_4_1" value="1"> <span class="fw-bold fs-6 text-dark">code='ar-eg'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_4" id="exq_sec2_s97_o8_4_2" value="2"> <span class="fw-bold fs-6 text-dark">dir='ar'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_4" id="exq_sec2_s97_o8_4_3" value="3"> <span class="fw-bold fs-6 text-dark">lang='ar'</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_4" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_5" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 5 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">أي من الوسوم التالية يمثل وسم فقرة نصية قياسية في لغة HTML ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_5" id="exq_sec2_s97_o8_5_0" value="0"> <span class="fw-bold fs-6 text-dark"><paragraph></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_5" id="exq_sec2_s97_o8_5_1" value="1"> <span class="fw-bold fs-6 text-dark"><p></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_5" id="exq_sec2_s97_o8_5_2" value="2"> <span class="fw-bold fs-6 text-dark"><text></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_5" id="exq_sec2_s97_o8_5_3" value="3"> <span class="fw-bold fs-6 text-dark"><para></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_5" class="mt-2 small fw-bold"></div> </div> <div class="alamin-bottom-nav"> <div></div> <button type="button" class="alamin-nav-btn alamin-nav-btn-next" onclick="exGoStep_sec2_s97_o8(2)"> الانتقال للجولة 2 (الأسئلة 6 - 10) <i class="fas fa-arrow-left"></i> </button> </div> </div> <!-- MILESTONE 2 --> <div class="alamin-station" id="exStation_sec2_s97_o8_2"> <div id="exCard_sec2_s97_o8_6" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 6 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الفرق الوظيفي الجوهري بين الوسم <audio> والوسم <video> في HTML5 ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_6" id="exq_sec2_s97_o8_6_0" value="0"> <span class="fw-bold fs-6 text-dark">الوسم <audio> يتطلب برامج خارجية مساعدة لتشغيله</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_6" id="exq_sec2_s97_o8_6_1" value="1"> <span class="fw-bold fs-6 text-dark">الوسم <audio> مخصص لتشغيل الصوتيات فقط بينما <video> يعرض مقاطع مرئية وصوتية معاً</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_6" id="exq_sec2_s97_o8_6_2" value="2"> <span class="fw-bold fs-6 text-dark">الوسم <audio> يوضع خارج وسم <body> دائماً</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_6" id="exq_sec2_s97_o8_6_3" value="3"> <span class="fw-bold fs-6 text-dark">الوسم <video> لا يدعم خاصية التحكم controls إطلاقاً</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_6" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_7" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 7 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">أي الخصائص التالية تجعل مقطع الفيديو أو الصوت يُعاد تشغيله تلقائياً وبشكل متكرر فور انتهائه ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_7" id="exq_sec2_s97_o8_7_0" value="0"> <span class="fw-bold fs-6 text-dark">repeat</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_7" id="exq_sec2_s97_o8_7_1" value="1"> <span class="fw-bold fs-6 text-dark">autoplay</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_7" id="exq_sec2_s97_o8_7_2" value="2"> <span class="fw-bold fs-6 text-dark">loop</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_7" id="exq_sec2_s97_o8_7_3" value="3"> <span class="fw-bold fs-6 text-dark">continue</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_7" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_8" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 8 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">في بنية الجداول، ما الوسم المخصص لإنشاء صف أفقي جديد ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_8" id="exq_sec2_s97_o8_8_0" value="0"> <span class="fw-bold fs-6 text-dark"><th></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_8" id="exq_sec2_s97_o8_8_1" value="1"> <span class="fw-bold fs-6 text-dark"><row></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_8" id="exq_sec2_s97_o8_8_2" value="2"> <span class="fw-bold fs-6 text-dark"><tr></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_8" id="exq_sec2_s97_o8_8_3" value="3"> <span class="fw-bold fs-6 text-dark"><td></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_8" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_9" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 9 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الوسم المخصص لإنشاء خلية بيانات عادية داخل صف الجدول ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_9" id="exq_sec2_s97_o8_9_0" value="0"> <span class="fw-bold fs-6 text-dark"><td></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_9" id="exq_sec2_s97_o8_9_1" value="1"> <span class="fw-bold fs-6 text-dark"><tr></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_9" id="exq_sec2_s97_o8_9_2" value="2"> <span class="fw-bold fs-6 text-dark"><cell></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_9" id="exq_sec2_s97_o8_9_3" value="3"> <span class="fw-bold fs-6 text-dark"><th></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_9" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_10" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 10 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الوسم الصحيح لإنشاء رابط تشعبي ينقل الزائر إلى موقع مدرستي التعليمي ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_10" id="exq_sec2_s97_o8_10_0" value="0"> <span class="fw-bold fs-6 text-dark"><a src='https://school.edu'>مدرستي</a></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_10" id="exq_sec2_s97_o8_10_1" value="1"> <span class="fw-bold fs-6 text-dark"><link src='https://school.edu'>مدرستي</link></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_10" id="exq_sec2_s97_o8_10_2" value="2"> <span class="fw-bold fs-6 text-dark"><url target='https://school.edu'>مدرستي</url></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_10" id="exq_sec2_s97_o8_10_3" value="3"> <span class="fw-bold fs-6 text-dark"><a href='https://school.edu'>مدرستي</a></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_10" class="mt-2 small fw-bold"></div> </div> <div class="alamin-bottom-nav"> <button type="button" class="alamin-nav-btn alamin-nav-btn-prev" onclick="exGoStep_sec2_s97_o8(1)"> <i class="fas fa-arrow-right"></i> العودة للجولة 1 </button> <button type="button" class="alamin-nav-btn alamin-nav-btn-next" onclick="exGoStep_sec2_s97_o8(3)"> الانتقال للجولة 3 (الأسئلة 11 - 15) <i class="fas fa-arrow-left"></i> </button> </div> </div> <!-- MILESTONE 3 --> <div class="alamin-station" id="exStation_sec2_s97_o8_3"> <div id="exCard_sec2_s97_o8_11" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 11 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">أي من أنواع حقول الإدخال التالية يتيح للمستخدم تحديد أكثر من خيار في نفس الوقت ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_11" id="exq_sec2_s97_o8_11_0" value="0"> <span class="fw-bold fs-6 text-dark">type='submit'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_11" id="exq_sec2_s97_o8_11_1" value="1"> <span class="fw-bold fs-6 text-dark">type='radio'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_11" id="exq_sec2_s97_o8_11_2" value="2"> <span class="fw-bold fs-6 text-dark">type='password'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_11" id="exq_sec2_s97_o8_11_3" value="3"> <span class="fw-bold fs-6 text-dark">type='checkbox'</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_11" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_12" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 12 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما وظيفة الخاصية placeholder عند استخدامها داخل حقل الإدخال النصي ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_12" id="exq_sec2_s97_o8_12_0" value="0"> <span class="fw-bold fs-6 text-dark">قفل الحقل ومنع المستخدم من التعديل</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_12" id="exq_sec2_s97_o8_12_1" value="1"> <span class="fw-bold fs-6 text-dark">تلوين خلفية الحقل تلقائياً</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_12" id="exq_sec2_s97_o8_12_2" value="2"> <span class="fw-bold fs-6 text-dark">عرض نص تلميحي إرشادي داخل المربع يختفي بمجرد بدء الكتابة</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_12" id="exq_sec2_s97_o8_12_3" value="3"> <span class="fw-bold fs-6 text-dark">تحديد الحد الأقصى للحروف المكتوبة</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_12" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_13" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 13 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما نوع زر الإدخال المخصص لتفريغ كافة حقول النموذج وإعادتها لقيمها الأولية ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_13" id="exq_sec2_s97_o8_13_0" value="0"> <span class="fw-bold fs-6 text-dark">type='button'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_13" id="exq_sec2_s97_o8_13_1" value="1"> <span class="fw-bold fs-6 text-dark">type='reset'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_13" id="exq_sec2_s97_o8_13_2" value="2"> <span class="fw-bold fs-6 text-dark">type='submit'</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_13" id="exq_sec2_s97_o8_13_3" value="3"> <span class="fw-bold fs-6 text-dark">type='clear'</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_13" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_14" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 14 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">العنصر المخصص لإنشاء قائمة خيارات منسدلة (Drop-down list) في نماذج HTML هو :</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_14" id="exq_sec2_s97_o8_14_0" value="0"> <span class="fw-bold fs-6 text-dark"><options></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_14" id="exq_sec2_s97_o8_14_1" value="1"> <span class="fw-bold fs-6 text-dark"><select></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_14" id="exq_sec2_s97_o8_14_2" value="2"> <span class="fw-bold fs-6 text-dark"><dropdown></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_14" id="exq_sec2_s97_o8_14_3" value="3"> <span class="fw-bold fs-6 text-dark"><list></span> </label> </div> </div> <div id="exFb_sec2_s97_o8_14" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_15" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 15 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الخاصية التي تحدد الملف أو الرابط المسؤول عن معالجة بيانات النموذج بالخادم عند إرساله ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_15" id="exq_sec2_s97_o8_15_0" value="0"> <span class="fw-bold fs-6 text-dark">method</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_15" id="exq_sec2_s97_o8_15_1" value="1"> <span class="fw-bold fs-6 text-dark">action</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_15" id="exq_sec2_s97_o8_15_2" value="2"> <span class="fw-bold fs-6 text-dark">target</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_15" id="exq_sec2_s97_o8_15_3" value="3"> <span class="fw-bold fs-6 text-dark">handler</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_15" class="mt-2 small fw-bold"></div> </div> <div class="alamin-bottom-nav"> <button type="button" class="alamin-nav-btn alamin-nav-btn-prev" onclick="exGoStep_sec2_s97_o8(2)"> <i class="fas fa-arrow-right"></i> العودة للجولة 2 </button> <button type="button" class="alamin-nav-btn alamin-nav-btn-next" onclick="exGoStep_sec2_s97_o8(4)"> الانتقال للجولة 4 (الأسئلة 16 - 20) <i class="fas fa-arrow-left"></i> </button> </div> </div> <!-- MILESTONE 4 --> <div class="alamin-station" id="exStation_sec2_s97_o8_4"> <div id="exCard_sec2_s97_o8_16" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 16 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الرمز الذي يبدأ به محدد المعرف الفريد (ID Selector) في لغة CSS ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_16" id="exq_sec2_s97_o8_16_0" value="0"> <span class="fw-bold fs-6 text-dark">علامة التعجب (!)</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_16" id="exq_sec2_s97_o8_16_1" value="1"> <span class="fw-bold fs-6 text-dark">علامة النسبة المئوية (%)</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_16" id="exq_sec2_s97_o8_16_2" value="2"> <span class="fw-bold fs-6 text-dark">النقطة (.)</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_16" id="exq_sec2_s97_o8_16_3" value="3"> <span class="fw-bold fs-6 text-dark">علامة الشباك (#)</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_16" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_17" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 17 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">في نموذج الصندوق (Box Model)، ما الطبقة التي تمثل الحشوة والمساحة بين المحتوى الداخلي وإطار العنصر ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_17" id="exq_sec2_s97_o8_17_0" value="0"> <span class="fw-bold fs-6 text-dark">Border</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_17" id="exq_sec2_s97_o8_17_1" value="1"> <span class="fw-bold fs-6 text-dark">Content</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_17" id="exq_sec2_s97_o8_17_2" value="2"> <span class="fw-bold fs-6 text-dark">Margin</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_17" id="exq_sec2_s97_o8_17_3" value="3"> <span class="fw-bold fs-6 text-dark">Padding</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_17" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_18" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 18 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">أين يُوضع الوسم <script> var quizQuestions = [{"q": "أين يجب وضع وسم العنوان في البنية الهيكلية لصفحة الويب ؟", "options": ["أسفل وسم", "داخل وسم جسم الصفحة", "قبل وسم", "داخل وسم الرأس"], "correct": 3, "explain": "وسم <title> يوضع دائماً داخل وسم رأس المستند <head> ويظهر نصه في شريط عنوان المتصفح."}, {"q": "ما وظيفة الوسم عند استخدامه داخل فقرة نصية في صفحة الويب ؟", "options": ["تغيير نوع الخط المستخدم في الكتابة", "رسم خط أفقي عريض يفصل الفقرات", "إحداث كسر سطر والانتقال للسطر التالي مباشرة", "جعل النص مائلاً بخط خفيف"], "correct": 2, "explain": "الوسم <br> يُحدث كسر سطر فوري دون مسافة رأسية تفصل بين الفقرات."}, {"q": "الوسم يُستخدم برمجياً في لغة HTML من أجل :", "options": ["إنشاء جدول بيانات من صف واحد", "إدراج رابط تشعبي لصفحة سابقة", "تشغيل مقطع صوتي في الخلفية", "رسم خط أفقي فاصل يعبر عن تحول دلالي في الموضوع"], "correct": 3, "explain": "الوسم <hr> (Horizontal Rule) يُدرج خطاً أفقياً فاصلاً بين أقسام الصفحة."}, {"q": "أي الخصائص التالية في الوسم مسؤولة عن تحديد لغة محتوى الصفحة (مثل اللغة العربية) ؟", "options": ["charset='arabic'", "code='ar-eg'", "dir='ar'", "lang='ar'"], "correct": 3, "explain": "الخاصية lang='ar' تحدد لغة المحتوى المكتوب للمتصفحات ومحركات البحث."}, {"q": "أي من الوسوم التالية يمثل وسم فقرة نصية قياسية في لغة HTML ؟", "options": ["", "", "", ""], "correct": 1, "explain": "الوسم <p> هو الوسم القياسي المعتمد لإنشاء الفقرات النصية في لغة HTML."}, {"q": "ما الفرق الوظيفي الجوهري بين الوسم والوسم في HTML5 ؟", "options": ["الوسم يتطلب برامج خارجية مساعدة لتشغيله", "الوسم مخصص لتشغيل الصوتيات فقط بينما يعرض مقاطع مرئية وصوتية معاً", "الوسم يوضع خارج وسم دائماً", "الوسم لا يدعم خاصية التحكم controls إطلاقاً"], "correct": 1, "explain": "الوسم <audio> مخصص للصوتيات المجردة، بينما <video> يعرض المكون البصري والصوتي معاً."}, {"q": "أي الخصائص التالية تجعل مقطع الفيديو أو الصوت يُعاد تشغيله تلقائياً وبشكل متكرر فور انتهائه ؟", "options": ["repeat", "autoplay", "loop", "continue"], "correct": 2, "explain": "الخاصية loop تفعل التكرار الحلقي المستمر لتشغيل ملف الوسائط تلقائياً."}, {"q": "في بنية الجداول، ما الوسم المخصص لإنشاء صف أفقي جديد ؟", "options": ["", "", "", ""], "correct": 2, "explain": "الوسم <tr> يمثل Table Row وهو المخصص لبناء صفوف الجدول الأفقية."}, {"q": "ما الوسم المخصص لإنشاء خلية بيانات عادية داخل صف الجدول ؟", "options": ["", "", "", ""], "correct": 0, "explain": "الوسم <td> (Table Data) يمثل خلية البيانات الاعتيادية داخل الصف."}, {"q": "ما الوسم الصحيح لإنشاء رابط تشعبي ينقل الزائر إلى موقع مدرستي التعليمي ؟", "options": ["مدرستي", "مدرستي", "مدرستي", "مدرستي"], "correct": 3, "explain": "الصيغة المعيارية الصحيحة للرابط هي <a href='URL'>النص الظاهر</a>."}, {"q": "أي من أنواع حقول الإدخال التالية يتيح للمستخدم تحديد أكثر من خيار في نفس الوقت ؟", "options": ["type='submit'", "type='radio'", "type='password'", "type='checkbox'"], "correct": 3, "explain": "صناديق الاختيار checkbox مصممة لتمكين المستخدم من اختيار متعدد حر."}, {"q": "ما وظيفة الخاصية placeholder عند استخدامها داخل حقل الإدخال النصي ؟", "options": ["قفل الحقل ومنع المستخدم من التعديل", "تلوين خلفية الحقل تلقائياً", "عرض نص تلميحي إرشادي داخل المربع يختفي بمجرد بدء الكتابة", "تحديد الحد الأقصى للحروف المكتوبة"], "correct": 2, "explain": "الخاصية placeholder تعرض نصاً إرشادياً شفافاً يزول تلقائياً فور كتابة أول حرف."}, {"q": "ما نوع زر الإدخال المخصص لتفريغ كافة حقول النموذج وإعادتها لقيمها الأولية ؟", "options": ["type='button'", "type='reset'", "type='submit'", "type='clear'"], "correct": 1, "explain": "الزر type='reset' يقوم بمسح مدخلات النموذج وإعادة ضبط الحقول لوضعها الابتدائي."}, {"q": "العنصر المخصص لإنشاء قائمة خيارات منسدلة (Drop-down list) في نماذج HTML هو :", "options": ["", "", "", ""], "correct": 1, "explain": "العنصر <select> المشتمل على وسوم <option> هو المخصص لبناء القوائم المنسدلة."}, {"q": "ما الخاصية التي تحدد الملف أو الرابط المسؤول عن معالجة بيانات النموذج بالخادم عند إرساله ؟", "options": ["method", "action", "target", "handler"], "correct": 1, "explain": "الخاصية action تحدد وجهة ومسار معالجة بيانات النموذج على جانب الخادم."}, {"q": "ما الرمز الذي يبدأ به محدد المعرف الفريد (ID Selector) في لغة CSS ؟", "options": ["علامة التعجب (!)", "علامة النسبة المئوية (%)", "النقطة (.)", "علامة الشباك (#)"], "correct": 3, "explain": "محدد المعرف الفريد ID يبدأ دائماً بعلامة الشباك # متبوعة باسم المعرف."}, {"q": "في نموذج الصندوق (Box Model)، ما الطبقة التي تمثل الحشوة والمساحة بين المحتوى الداخلي وإطار العنصر ؟", "options": ["Border", "Content", "Margin", "Padding"], "correct": 3, "explain": "الحشوة الداخلية Padding هي المسافة الفاصلة بين النص أو المحتوى وإطار الصندوق."}, {"q": "أين يُوضع الوسم المخصص لكتابة وتضمين أكواد لغة جافاسكريبت ؟", "options": ["يمكن وضعه داخل وسم أو داخل وسم", "يوضع خارج وسم في نهاية الملف فقط", "يوضع داخل وسم فقط", "يوضع داخل وسم حصرياً"], "correct": 0, "explain": "يمكن وضع وسوم <script> داخل رأس الصفحة <head> أو في نهاية جسم الصفحة <body>."}, {"q": "الحدث التفاعلي onsubmit يُستخدم برمجياً من أجل :", "options": ["تغيير حجم خط الصفحة تلقائياً", "حذف قاعدة بيانات الموقع", "فحص والتحقق من صحة بيانات النموذج قبل إتمام إرسالها للخادم", "إغلاق نافذة المتصفح فوراً"], "correct": 2, "explain": "الحدث onsubmit يُفعل عند محاولة إرسال النموذج لفحص الحقول والتأكد من صحتها."}, {"q": "ما الخاصية التي نستخدمها في جافاسكريبت لقراءة النص المكتوب داخل مربع الإدخال النصي ؟", "options": ["htmlContent", "text", "innerText", "value"], "correct": 3, "explain": "الخاصية .value هي التي ترجع القيمة النصية المدخلة فعلياً في حقل الإدخال."}]; المخصص لكتابة وتضمين أكواد لغة جافاسكريبت ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_18" id="exq_sec2_s97_o8_18_0" value="0"> <span class="fw-bold fs-6 text-dark">يمكن وضعه داخل وسم <head> أو داخل وسم <body></span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_18" id="exq_sec2_s97_o8_18_1" value="1"> <span class="fw-bold fs-6 text-dark">يوضع خارج وسم <html> في نهاية الملف فقط</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_18" id="exq_sec2_s97_o8_18_2" value="2"> <span class="fw-bold fs-6 text-dark">يوضع داخل وسم <style> فقط</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_18" id="exq_sec2_s97_o8_18_3" value="3"> <span class="fw-bold fs-6 text-dark">يوضع داخل وسم <title> حصرياً</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_18" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_19" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 19 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">الحدث التفاعلي onsubmit يُستخدم برمجياً من أجل :</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_19" id="exq_sec2_s97_o8_19_0" value="0"> <span class="fw-bold fs-6 text-dark">تغيير حجم خط الصفحة تلقائياً</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_19" id="exq_sec2_s97_o8_19_1" value="1"> <span class="fw-bold fs-6 text-dark">حذف قاعدة بيانات الموقع</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_19" id="exq_sec2_s97_o8_19_2" value="2"> <span class="fw-bold fs-6 text-dark">فحص والتحقق من صحة بيانات النموذج قبل إتمام إرسالها للخادم</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_19" id="exq_sec2_s97_o8_19_3" value="3"> <span class="fw-bold fs-6 text-dark">إغلاق نافذة المتصفح فوراً</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_19" class="mt-2 small fw-bold"></div> </div> <div id="exCard_sec2_s97_o8_20" class="card mb-4 border-0 shadow-sm rounded-4 p-4 bg-white" style="border-right: 6px solid #0891b2;"> <div class="d-flex justify-content-between align-items-center mb-2"> <span class="badge text-white px-3 py-2 rounded-pill fs-6 fw-bold" style="background-color: #0891b2;">السؤال 20 من 20</span> <span class="text-muted small"><i class="fas fa-star text-warning ms-1 me-1"></i> درجة واحدة</span> </div> <h5 class="fw-bold mb-3 text-dark" style="font-size: 1.18rem; line-height: 1.7;">ما الخاصية التي نستخدمها في جافاسكريبت لقراءة النص المكتوب داخل مربع الإدخال النصي ؟</h5> <div class="row g-2 mb-2"> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_20" id="exq_sec2_s97_o8_20_0" value="0"> <span class="fw-bold fs-6 text-dark">htmlContent</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_20" id="exq_sec2_s97_o8_20_1" value="1"> <span class="fw-bold fs-6 text-dark">text</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_20" id="exq_sec2_s97_o8_20_2" value="2"> <span class="fw-bold fs-6 text-dark">innerText</span> </label> </div> <div class="col-sm-6 mb-2"> <label class="card h-100 p-3 rounded-3 d-flex flex-row align-items-center gap-2 ex-option-label" style="cursor: pointer; background: #ffffff; border: 2px solid #e2e8f0; transition: all 0.2s;"> <input class="form-check-input mt-0 fs-5" type="radio" name="exq_sec2_s97_o8_20" id="exq_sec2_s97_o8_20_3" value="3"> <span class="fw-bold fs-6 text-dark">value</span> </label> </div> </div> <div id="exFb_sec2_s97_o8_20" class="mt-2 small fw-bold"></div> </div> <div class="card p-4 rounded-4 border-0 shadow-sm text-center mb-3" style="background: #ecfeff;"> <h4 class="fw-bold mb-2" style="color: #0891b2;"> <i class="fas fa-check-circle me-1"></i> اكتملت جميع جولات الاختبار! </h4> <p class="mb-3 text-secondary">راجع إجاباتك جيداً ثم اضغط على الزر لتسليم الاختبار ومعرفة نتيجتك:</p> <div class="d-flex justify-content-center gap-3"> <button type="button" class="btn text-white px-5 py-3 rounded-pill fw-bold fs-5 shadow" style="background-color: #0891b2;" onclick="submitAlAminExam_sec2_s97_o8()"> <i class="fas fa-paper-plane ms-2 me-2"></i> تسليم الاختبار وحساب النتيجة 🚀 </button> <button type="button" class="btn btn-outline-secondary px-4 py-3 rounded-pill fw-bold" onclick="resetAlAminExam_sec2_s97_o8()"> <i class="fas fa-undo ms-1 me-1"></i> إعادة المحاولة </button> </div> </div> <div id="exAlert_sec2_s97_o8" class="alert mt-3 d-none fw-bold" role="alert"></div> <div class="alamin-bottom-nav"> <button type="button" class="alamin-nav-btn alamin-nav-btn-prev" onclick="exGoStep_sec2_s97_o8(3)"> <i class="fas fa-arrow-right"></i> العودة للجولة 3 </button> <div></div> </div> </div> </form> </div> <script> var exMilestoneNames_sec2_s97_o8 = ["الجولة 1: أسئلة الانطلاقة (1 - 5)", "الجولة 2: الفهم والتحليل (6 - 10)", "الجولة 3: التطبيق والتفكير (11 - 15)", "الجولة 4: الإتقان والريادة (16 - 20)"]; var exAnswers_sec2_s97_o8 = {"exq_sec2_s97_o8_1": 3, "exq_sec2_s97_o8_2": 2, "exq_sec2_s97_o8_3": 3, "exq_sec2_s97_o8_4": 3, "exq_sec2_s97_o8_5": 1, "exq_sec2_s97_o8_6": 1, "exq_sec2_s97_o8_7": 2, "exq_sec2_s97_o8_8": 2, "exq_sec2_s97_o8_9": 0, "exq_sec2_s97_o8_10": 3, "exq_sec2_s97_o8_11": 3, "exq_sec2_s97_o8_12": 2, "exq_sec2_s97_o8_13": 1, "exq_sec2_s97_o8_14": 1, "exq_sec2_s97_o8_15": 1, "exq_sec2_s97_o8_16": 3, "exq_sec2_s97_o8_17": 3, "exq_sec2_s97_o8_18": 0, "exq_sec2_s97_o8_19": 2, "exq_sec2_s97_o8_20": 3}; var exExplanations_sec2_s97_o8 = {"exq_sec2_s97_o8_1": "وسم <title> يوضع دائماً داخل وسم رأس المستند <head> ويظهر نصه في شريط عنوان المتصفح.", "exq_sec2_s97_o8_2": "الوسم <br> يُحدث كسر سطر فوري دون مسافة رأسية تفصل بين الفقرات.", "exq_sec2_s97_o8_3": "الوسم <hr> (Horizontal Rule) يُدرج خطاً أفقياً فاصلاً بين أقسام الصفحة.", "exq_sec2_s97_o8_4": "الخاصية lang='ar' تحدد لغة المحتوى المكتوب للمتصفحات ومحركات البحث.", "exq_sec2_s97_o8_5": "الوسم <p> هو الوسم القياسي المعتمد لإنشاء الفقرات النصية في لغة HTML.", "exq_sec2_s97_o8_6": "الوسم <audio> مخصص للصوتيات المجردة، بينما <video> يعرض المكون البصري والصوتي معاً.", "exq_sec2_s97_o8_7": "الخاصية loop تفعل التكرار الحلقي المستمر لتشغيل ملف الوسائط تلقائياً.", "exq_sec2_s97_o8_8": "الوسم <tr> يمثل Table Row وهو المخصص لبناء صفوف الجدول الأفقية.", "exq_sec2_s97_o8_9": "الوسم <td> (Table Data) يمثل خلية البيانات الاعتيادية داخل الصف.", "exq_sec2_s97_o8_10": "الصيغة المعيارية الصحيحة للرابط هي <a href='URL'>النص الظاهر</a>.", "exq_sec2_s97_o8_11": "صناديق الاختيار checkbox مصممة لتمكين المستخدم من اختيار متعدد حر.", "exq_sec2_s97_o8_12": "الخاصية placeholder تعرض نصاً إرشادياً شفافاً يزول تلقائياً فور كتابة أول حرف.", "exq_sec2_s97_o8_13": "الزر type='reset' يقوم بمسح مدخلات النموذج وإعادة ضبط الحقول لوضعها الابتدائي.", "exq_sec2_s97_o8_14": "العنصر <select> المشتمل على وسوم <option> هو المخصص لبناء القوائم المنسدلة.", "exq_sec2_s97_o8_15": "الخاصية action تحدد وجهة ومسار معالجة بيانات النموذج على جانب الخادم.", "exq_sec2_s97_o8_16": "محدد المعرف الفريد ID يبدأ دائماً بعلامة الشباك # متبوعة باسم المعرف.", "exq_sec2_s97_o8_17": "الحشوة الداخلية Padding هي المسافة الفاصلة بين النص أو المحتوى وإطار الصندوق.", "exq_sec2_s97_o8_18": "يمكن وضع وسوم <script> داخل رأس الصفحة <head> أو في نهاية جسم الصفحة <body>.", "exq_sec2_s97_o8_19": "الحدث onsubmit يُفعل عند محاولة إرسال النموذج لفحص الحقول والتأكد من صحتها.", "exq_sec2_s97_o8_20": "الخاصية .value هي التي ترجع القيمة النصية المدخلة فعلياً في حقل الإدخال."}; var exCorrectTexts_sec2_s97_o8 = {"exq_sec2_s97_o8_1": "داخل وسم الرأس <head>", "exq_sec2_s97_o8_2": "إحداث كسر سطر والانتقال للسطر التالي مباشرة", "exq_sec2_s97_o8_3": "رسم خط أفقي فاصل يعبر عن تحول دلالي في الموضوع", "exq_sec2_s97_o8_4": "lang='ar'", "exq_sec2_s97_o8_5": "<p>", "exq_sec2_s97_o8_6": "الوسم <audio> مخصص لتشغيل الصوتيات فقط بينما <video> يعرض مقاطع مرئية وصوتية معاً", "exq_sec2_s97_o8_7": "loop", "exq_sec2_s97_o8_8": "<tr>", "exq_sec2_s97_o8_9": "<td>", "exq_sec2_s97_o8_10": "<a href='https://school.edu'>مدرستي</a>", "exq_sec2_s97_o8_11": "type='checkbox'", "exq_sec2_s97_o8_12": "عرض نص تلميحي إرشادي داخل المربع يختفي بمجرد بدء الكتابة", "exq_sec2_s97_o8_13": "type='reset'", "exq_sec2_s97_o8_14": "<select>", "exq_sec2_s97_o8_15": "action", "exq_sec2_s97_o8_16": "علامة الشباك (#)", "exq_sec2_s97_o8_17": "Padding", "exq_sec2_s97_o8_18": "يمكن وضعه داخل وسم <head> أو داخل وسم <body>", "exq_sec2_s97_o8_19": "فحص والتحقق من صحة بيانات النموذج قبل إتمام إرسالها للخادم", "exq_sec2_s97_o8_20": "value"}; function exGoStep_sec2_s97_o8(step) { for (var i = 1; i <= 4; i++) { var st = document.getElementById('exStation_sec2_s97_o8_' + i); var btn = document.getElementById('exBtn_sec2_s97_o8_' + i); if (st) st.classList.remove('active'); if (btn) { btn.classList.remove('active'); if (i < step) { btn.classList.add('completed'); btn.querySelector('.alamin-step-circle').innerHTML = '✓'; } else { btn.classList.remove('completed'); btn.querySelector('.alamin-step-circle').innerHTML = i; } } } var activeSt = document.getElementById('exStation_sec2_s97_o8_' + step); var activeBtn = document.getElementById('exBtn_sec2_s97_o8_' + step); if (activeSt) activeSt.classList.add('active'); if (activeBtn) activeBtn.classList.add('active'); var progressEl = document.getElementById('exProgress_sec2_s97_o8'); if (progressEl) { progressEl.style.width = (((step - 1) / 3) * 100) + '%'; } var stepNumEl = document.getElementById('exStepNum_sec2_s97_o8'); var stepNameEl = document.getElementById('exStepName_sec2_s97_o8'); if (stepNumEl) stepNumEl.innerText = step; if (stepNameEl) stepNameEl.innerText = exMilestoneNames_sec2_s97_o8[step - 1] || ''; var container = document.getElementById('exContainer_sec2_s97_o8'); if (container) { container.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } function submitAlAminExam_sec2_s97_o8() { var score = 0; var total = Object.keys(exAnswers_sec2_s97_o8).length; var answeredAll = true; for (var qKey in exAnswers_sec2_s97_o8) { var correctIdx = exAnswers_sec2_s97_o8[qKey]; var qNum = qKey.replace('exq_sec2_s97_o8_', ''); var selected = document.querySelector('input[name="' + qKey + '"]:checked'); var fb = document.getElementById('exFb_sec2_s97_o8_' + qNum); var correctOptInput = document.getElementById(qKey + '_' + correctIdx); if (!selected) { answeredAll = false; if (fb) fb.innerHTML = '<span class="text-warning"><i class="fas fa-exclamation-circle"></i> لم تقم بالإجابة عن هذا السؤال!</span>'; } else { var chosenIdx = parseInt(selected.value); if (correctOptInput && correctOptInput.closest('.ex-option-label')) { correctOptInput.closest('.ex-option-label').style.borderColor = '#10b981'; correctOptInput.closest('.ex-option-label').style.backgroundColor = '#ecfdf5'; } if (chosenIdx === correctIdx) { score++; if (fb) fb.innerHTML = '<span class="text-success"><i class="fas fa-check-circle"></i> إجابة صحيحة وممتازة! ' + exExplanations_sec2_s97_o8[qKey] + '</span>'; } else { if (selected.closest('.ex-option-label')) { selected.closest('.ex-option-label').style.borderColor = '#ef4444'; selected.closest('.ex-option-label').style.backgroundColor = '#fef2f2'; } var rawExp = exExplanations_sec2_s97_o8[qKey] || ''; var cleanExp = rawExp.replace(/^(🎉\s*|❌\s*|أحسنت[^\.!\?؟]*[\.!\?؟]*|رائع[^\.!\?؟]*[\.!\?؟]*|ممتاز[^\.!\?؟]*[\.!\?؟]*|عظيم[^\.!\?؟]*[\.!\?؟]*|بارك الله فيك[^\.!\?؟]*[\.!\?؟]*|إجابة[^\.!\?؟]*[\.!\?؟]*|صحيح[^\.!\?؟]*[\.!\?؟]*|تطبيق متميز[^\.!\?؟]*[\.!\?؟]*)\s*/, ''); if (!cleanExp) cleanExp = rawExp; if (fb) fb.innerHTML = '<span class="text-danger"><i class="fas fa-times-circle"></i> إجابة غير صحيحة. الإجابة النموذجية هي: <strong>' + (exCorrectTexts_sec2_s97_o8[qKey] || '') + '</strong>. ' + cleanExp + '</span>'; } } } var alertBox = document.getElementById('exAlert_sec2_s97_o8'); alertBox.classList.remove('d-none', 'alert-success', 'alert-warning', 'alert-info'); if (!answeredAll) { alertBox.classList.add('alert-warning'); alertBox.innerHTML = '<i class="fas fa-exclamation-triangle ms-2 me-2"></i> تنبيه: لم تكمل الإجابة على جميع الأسئلة. راجع الجولات السابقة وأجب عن كافة الأسئلة!'; } else { var percent = total > 0 ? Math.round((score / total) * 100) : 0; if (percent >= 80) { alertBox.classList.add('alert-success'); alertBox.innerHTML = '🌟 🏆 <strong>إنجاز رائع ومتقن!</strong> درجتك النهائية: ' + score + ' / ' + total + ' (' + percent + '%). أنت مستعد تماماً للاختبارات وتحقيق أعلى المراتب الوزارية!'; } else { alertBox.classList.add('alert-info'); alertBox.innerHTML = '👍 <strong>محاولة طيبة!</strong> درجتك: ' + score + ' / ' + total + ' (' + percent + '%). راجع الأسئلة التي أخطأت فيها وأعد المحاولة لتحقق الدرجة النهائية.'; } var pathMatch = window.location.pathname.match(/\/Lesson\/(\d+)/i); var lessonId = window.alaminLessonId || (pathMatch ? parseInt(pathMatch[1]) : 0); fetch('/Account/RecordProgress', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ lessonId: lessonId, score: score, maxScore: total }) }) .then(function(res) { return res.json(); }) .then(function(data) { if (!data || !data.success) { var loginUrl = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname); var cta = document.createElement('div'); cta.className = 'alamin-exam-login-cta mt-3 pt-3 border-top text-center'; cta.innerHTML = '<p class="mb-2 text-dark fw-bold">🌟 ' + (true ? 'حققت نتيجة متميزة! سجّل الدخول لحفظ نقاطك وترتيبك بين الأوائل:' : 'حققت نتيجة متميزة! سجّل الدخول لحفظ نقاطك وترتيبك بين الأوائل:') + '</p>' + '<a href="' + loginUrl + '" class="btn btn-warning fw-bold px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-sign-in-alt me-1 ms-1"></i> ' + (true ? 'تسجيل الدخول لحفظ النتيجة في لوحة المتصدرين 🚀' : 'تسجيل الدخول لحفظ النتيجة في لوحة المتصدرين 🚀') + '</a>'; alertBox.appendChild(cta); } }); } alertBox.scrollIntoView({ behavior: 'smooth' }); } function resetAlAminExam_sec2_s97_o8() { document.getElementById('exForm_sec2_s97_o8').reset(); document.querySelectorAll('[id^="exFb_sec2_s97_o8_"]').forEach(function(el) { el.innerHTML = ''; }); document.querySelectorAll('.ex-option-label').forEach(function(lbl) { lbl.style.borderColor = '#e2e8f0'; lbl.style.backgroundColor = '#ffffff'; }); document.getElementById('exAlert_sec2_s97_o8').classList.add('d-none'); } </script> </div> </div> <!-- Videos Section --> <!-- Exams Section --> <!-- Al-Amin Student Progress Completion Card --> <div class="alamin-completion-card" id="alaminLessonCompletionCard"> <div class="alamin-completion-content"> <div class="alamin-completion-badge"> <i class="fas fa-award"></i> </div> <div class="alamin-completion-info"> <h3 class="alamin-completion-title"> أكملت دراسة هذا الدرس؟ </h3> <p class="alamin-completion-subtitle"> احفظ إنجازك الآن لإضافة <strong>5 نقاط تميز</strong> إلى رصيدك وتسجيل الدرس في لوحة إحصائياتك! </p> </div> <div class="alamin-completion-action"> <a href="/Account/Login?returnUrl=/Secondary2/Learn/Lesson/2358" class="alamin-completion-btn alamin-login-prompt"> <i class="fas fa-sign-in-alt me-2"></i>سجّل الدخول لحفظ تقدمك </a> </div> </div> <div id="alaminCompletionAlert" class="alamin-completion-alert" style="display:none;" role="status"></div> </div> <!-- Next & Previous Lesson Navigation Bar --> <div class="lesson-pagination-card" aria-label="التنقل بين الدروس"> <div class="lesson-pagination-header"> <div class="pagination-title-group"> <i class="fas fa-route"></i> <span>رحلة التعلم المستمرة — الحاسب الآلي والبرمجة</span> </div> <span class="pagination-progress-badge"> الدرس 16 من 16 </span> </div> <div class="lesson-pagination-grid"> <a href="/Secondary2/Learn" class="lesson-nav-btn lesson-nav-complete"> <div class="nav-btn-content"> <span class="nav-btn-label"> <i class="fas fa-trophy me-1"></i> أحسنت! أتممت آخر درس في هذه المادة </span> <span class="nav-btn-title">العودة إلى صفحة جميع مواد ودروس الصف الثاني الثانوي</span> </div> <div class="nav-btn-icon"> <i class="fas fa-th-large"></i> </div> </a> <a href="/Secondary2/Learn/Lesson/2357" class="lesson-nav-btn lesson-nav-prev"> <div class="nav-btn-icon"> <i class="fas fa-arrow-right"></i> </div> <div class="nav-btn-content"> <span class="nav-btn-label">الدرس السابق</span> <span class="nav-btn-title">الاختبار الإلكتروني الشامل الأول : تصميم وتطوير مواقع الويب</span> </div> </a> </div> </div> </div> </div> <div class="col-lg-4"> <!-- Lesson Sidebar --> <div class="lesson-sidebar"> <!-- Lesson Info --> <div class="sidebar-card lesson-info"> <h4><i class="fas fa-info-circle me-2"></i>معلومات الدرس</h4> <div class="info-item"> <div class="info-label-group"> <i class="fas fa-layer-group"></i> <span class="label">المرحلة:</span> </div> <span class="value">المرحلة الثانوية</span> </div> <div class="info-item"> <div class="info-label-group"> <i class="fas fa-graduation-cap"></i> <span class="label">الصف:</span> </div> <span class="value">الصف الثاني الثانوي</span> </div> <div class="info-item"> <div class="info-label-group"> <i class="fas fa-book"></i> <span class="label">المادة:</span> </div> <span class="value">الحاسب الآلي والبرمجة</span> </div> <div class="info-item"> <div class="info-label-group"> <i class="fas fa-bookmark"></i> <span class="label">الوحدة:</span> </div> <span class="value">الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية</span> </div> </div> <!-- Unit Lessons Playlist --> <div class="sidebar-card unit-lessons-card"> <h4><i class="fas fa-list-ol me-2"></i>دروس الوحدة الثانية: تصميم وتطوير مواقع الويب التفاعلية</h4> <div class="unit-lessons-list"> <a href="/Secondary2/Learn/Lesson/2351" class="unit-lesson-item "> <span class="unit-lesson-num">1</span> <span class="unit-lesson-title">مقدمة في لغة HTML5 وبنية صفحة الويب الأساسية</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2352" class="unit-lesson-item "> <span class="unit-lesson-num">2</span> <span class="unit-lesson-title">الوسائط المتعددة والروابط التشعبية والجداول في HTML5</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2353" class="unit-lesson-item "> <span class="unit-lesson-num">3</span> <span class="unit-lesson-title">تصميم نماذج الويب التفاعلية HTML5 Forms</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2354" class="unit-lesson-item "> <span class="unit-lesson-num">4</span> <span class="unit-lesson-title">مدخل إلى صفحات الأنماط الانسيابية CSS3 وتنسيق الصفحات</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2355" class="unit-lesson-item "> <span class="unit-lesson-num">5</span> <span class="unit-lesson-title">التفاعل والتحقق من صحة البيانات باستخدام جافاسكريبت</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2356" class="unit-lesson-item "> <span class="unit-lesson-num">6</span> <span class="unit-lesson-title">مراجعة شاملة وتكامل تقنيات الويب الحديثة</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2357" class="unit-lesson-item "> <span class="unit-lesson-num">7</span> <span class="unit-lesson-title">الاختبار الإلكتروني الشامل الأول : تصميم وتطوير مواقع الويب</span> <i class="fas fa-chevron-left unit-lesson-arrow"></i> </a> <a href="/Secondary2/Learn/Lesson/2358" class="unit-lesson-item active"> <span class="unit-lesson-num">8</span> <span class="unit-lesson-title">الاختبار الإلكتروني الشامل الثاني : تصميم وتطوير مواقع الويب</span> <span class="unit-lesson-current-badge">الحالي</span> </a> </div> </div> <!-- Social Sharing --> <div class="sidebar-card social-sharing"> <h4><i class="fas fa-share-alt me-2"></i>مشاركة الدرس</h4> <div class="social-buttons"> <div class="fb-like" data-href="https://alamin-edu.com/Secondary2/Learn/Lesson/2358" data-width="" data-layout="button_count" data-action="like" data-size="small" data-share="false"></div> <div class="fb-share-button" data-href="https://alamin-edu.com/Secondary2/Learn/Lesson/2358" data-layout="button_count" data-size="small"> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://alamin-edu.com/Secondary2/Learn/Lesson/2358" class="fb-xfbml-parse-ignore">مشاركة</a> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Exam Modal --> <div id="examModal" class="exam-modal" style="display: none;"> <div class="exam-modal-overlay"></div> <div class="exam-modal-container"> <div class="exam-modal-header"> <h4 id="examModalTitle" class="exam-modal-title"> <i class="fas fa-clipboard-check me-2"></i>الاختبار التفاعلي </h4> <button class="exam-modal-close" onclick="closeExamModal()"> <i class="fas fa-times"></i> </button> </div> <div class="exam-modal-body"> <iframe id="examModalIframe" class="exam-modal-iframe" src="" frameborder="0" allowfullscreen></iframe> </div> <div class="exam-modal-footer"> <button class="btn btn-secondary me-2" onclick="restartExamModal()"> <i class="fas fa-redo me-2"></i>إعادة الاختبار </button> <button class="btn btn-outline-secondary" onclick="closeExamModal()"> <i class="fas fa-times me-2"></i>إغلاق </button> </div> </div> </div> <style> /* Al-Amin Student Progress Completion Card */ .alamin-completion-card { margin: 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%); border: 2px solid #bbf7d0; border-radius: 20px; box-shadow: 0 4px 16px rgba(22, 163, 74, 0.08); transition: all 0.3s ease; } .alamin-completion-card.completed { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #86efac; } .alamin-completion-content { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; } .alamin-completion-badge { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); flex-shrink: 0; } .alamin-completion-info { flex: 1; min-width: 240px; } .alamin-completion-title { font-size: 1.15rem; font-weight: 800; color: #0f172a; margin: 0 0 0.35rem 0; } .alamin-completion-subtitle { font-size: 0.92rem; color: #475569; margin: 0; line-height: 1.45; } .alamin-completion-action { flex-shrink: 0; } .alamin-completion-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.4rem; border-radius: 12px; border: none; background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); color: #ffffff !important; font-weight: 700; font-size: 0.98rem; cursor: pointer; text-decoration: none !important; box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25); transition: all 0.2s ease; } .alamin-completion-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35); color: #ffffff !important; } .alamin-completion-btn.completed { background: linear-gradient(135deg, #059669 0%, #047857 100%); cursor: default; transform: none !important; } .alamin-completion-btn.alamin-login-prompt { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25); } .alamin-completion-alert { margin-top: 1rem; padding: 0.85rem 1.1rem; border-radius: 12px; background: #f0fdf4; border: 1px solid #86efac; color: #166534; font-size: 0.92rem; animation: alaminFadeIn 0.3s ease; } @keyframes alaminFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .alamin-completion-content { flex-direction: column; text-align: center; } .alamin-completion-btn { width: 100%; } } /* Fix radio/checkbox placement for LTR English quizzes */ [dir="ltr"] .form-check, .content-body[dir="ltr"] .form-check, .ltr-quiz .form-check { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; direction: ltr !important; } [dir="ltr"] .form-check .form-check-input, .content-body[dir="ltr"] .form-check .form-check-input, .ltr-quiz .form-check .form-check-input { float: none !important; margin: 0 !important; flex-shrink: 0 !important; order: 1 !important; } [dir="ltr"] .form-check .form-check-label, .content-body[dir="ltr"] .form-check .form-check-label, .ltr-quiz .form-check .form-check-label { margin: 0 !important; cursor: pointer !important; order: 2 !important; text-align: left !important; } /* Continuous scroll display for all lesson sections */ .content-body .tab-content > .tab-pane, .modern-lesson-page .tab-content > .tab-pane, #lessonTabContent > .tab-pane { display: block !important; opacity: 1 !important; visibility: visible !important; margin-bottom: 2.5rem !important; padding-top: 1.5rem !important; border-top: 1px dashed #cbd5e1 !important; scroll-margin-top: 140px; } .content-body .tab-content > .tab-pane:first-child, .modern-lesson-page .tab-content > .tab-pane:first-child, #lessonTabContent > .tab-pane:first-child { border-top: none !important; padding-top: 0 !important; } /* Compact, modern sticky navigation pills */ .content-body #lessonTabs, .modern-lesson-page #lessonTabs, .nav-pills#lessonTabs { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; margin-bottom: 1.5rem !important; padding: 6px 12px !important; background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #e2e8f0 !important; border-radius: 50px !important; max-width: fit-content !important; margin-left: auto !important; margin-right: auto !important; position: sticky !important; top: 75px !important; z-index: 100 !important; backdrop-filter: blur(8px) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; } .content-body #lessonTabs .nav-item, .modern-lesson-page #lessonTabs .nav-item { margin: 0 !important; } .content-body #lessonTabs .nav-link, .modern-lesson-page #lessonTabs .nav-link { font-size: 0.8rem !important; padding: 5px 12px !important; border-radius: 20px !important; color: #005078 !important; background: transparent !important; border: 1px solid transparent !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.2s ease !important; white-space: nowrap !important; line-height: 1.4 !important; } .content-body #lessonTabs .nav-link:hover { background: rgba(0, 80, 120, 0.08) !important; color: #003a57 !important; } .content-body #lessonTabs .nav-link.active { background: #005078 !important; color: #ffffff !important; box-shadow: 0 2px 8px rgba(0, 80, 120, 0.25) !important; } .modern-lesson-page { background: #f8fafc; min-height: 100vh; padding: 1.5rem 0; overflow-x: hidden; } .lesson-breadcrumb { background: white; border-radius: 12px; padding: 1rem 1.5rem; margin-bottom: 2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .lesson-breadcrumb .breadcrumb { margin: 0; background: none; } .lesson-breadcrumb .breadcrumb-item a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } .lesson-breadcrumb .breadcrumb-item a:hover { color: var(--secondary-color); } .lesson-header { background: white; border-radius: 16px; padding: 2.5rem; margin-bottom: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border: 2px solid #f8f9fa; } .lesson-title { color: var(--dark-color); font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, #005078, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lesson-subtitle { color: var(--secondary-color); font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.6; } .lesson-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; } .meta-item { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-color); font-size: 0.95rem; padding: 0.5rem 1rem; background: #f8f9fa; border-radius: 20px; border: 1px solid #e9ecef; } .meta-item i { color: var(--primary-color); font-size: 1rem; } .lesson-image-container { position: relative; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: transparent; padding: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .lesson-main-image { max-width: 100%; width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: center; border-radius: 16px; transition: transform 0.3s ease; } .lesson-main-image:hover { transform: scale(1.02); } .lesson-content-section { display: flex; flex-direction: column; gap: 1.5rem; } .lesson-description { background: transparent; border-radius: 0; padding: 0; box-shadow: none; border: none; } .lesson-videos, .lesson-exams { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border: 1px solid #eef2f6; } .lesson-videos h3, .lesson-exams h3 { color: var(--dark-color); font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #f8f9fa; font-size: 1.4rem; } .content-body { line-height: 1.8; color: var(--text-color); font-size: 1.15rem; } .videos-grid, .exams-grid { display: flex; flex-direction: column; gap: 2rem; } .video-card, .exam-card { background: #f8f9fa; border-radius: 12px; overflow: hidden; border: 2px solid #e9ecef; transition: transform 0.3s ease, box-shadow 0.3s ease; } .video-card:hover, .exam-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .video-header, .exam-header { background: white; padding: 1.5rem; border-bottom: 2px solid #f8f9fa; } .video-header h4, .exam-header h4 { margin: 0; color: var(--dark-color); font-weight: 600; font-size: 1.2rem; } .exam-info { display: flex; gap: 1rem; margin-top: 0.5rem; } .question-count, .view-count { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-color); font-size: 0.9rem; } .video-container, .exam-container { position: relative; width: 100%; background: #000; } .video-iframe { width: 100%; height: 400px; border: none; } .exam-iframe { width: 100%; min-height: 600px; border: none; background: white; } .video-description, .exam-description { padding: 1rem 1.5rem; background: white; color: var(--text-color); border-top: 1px solid #f8f9fa; } .exam-actions { padding: 1rem 1.5rem; background: white; border-top: 1px solid #f8f9fa; text-align: center; } .restart-exam { background: linear-gradient(135deg, #005078, #003a57); border: none; color: white; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 500; transition: transform 0.3s ease, box-shadow 0.3s ease; } .restart-exam:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); } .lesson-sidebar { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .sidebar-card { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); border: 2px solid #f8f9fa; } .sidebar-card h4 { color: var(--dark-color); font-weight: 600; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid #f8f9fa; font-size: 1.1rem; } .info-item { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid #f1f5f9; font-size: 0.95rem; } .info-item:last-child { border-bottom: none; } .info-label-group { display: flex; align-items: center; gap: 0.65rem; } .info-label-group i { color: var(--primary-color); width: 22px; font-size: 1.1rem; text-align: center; } .info-label-group .label { font-weight: 700; color: var(--dark-color); white-space: nowrap; } .info-item .value { color: #0369a1; font-weight: 600; text-align: left; } .nav-buttons { display: flex; flex-direction: column; gap: 0.75rem; } .nav-btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; text-decoration: none; color: var(--dark-color); transition: all 0.3s ease; } .nav-btn:hover { transform: translateX(-5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); text-decoration: none; color: white; } .nav-btn.videos-btn:hover { background: linear-gradient(135deg, #ef4444, #dc2626); } .nav-btn.exams-btn:hover { background: linear-gradient(135deg, #22c55e, #16a34a); } .social-buttons { display: flex !important; flex-direction: row !important; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: flex-start; width: 100% !important; } .social-buttons > div { display: inline-block !important; margin: 0 !important; vertical-align: top !important; float: none !important; } /* Force Facebook widgets to display horizontally */ .social-buttons .fb-like, .social-buttons .fb-share-button { display: inline-block !important; vertical-align: top !important; margin-right: 10px !important; } .social-buttons .fb-like span, .social-buttons .fb-share-button span { display: inline-block !important; vertical-align: top !important; } /* Override any Facebook CSS that might stack buttons */ .social-buttons iframe { vertical-align: top !important; } @media (max-width: 768px) { .modern-lesson-page { padding: 0.25rem 0 1.5rem 0; background: #f8fafc; } .container { padding-left: 10px; padding-right: 10px; } .row { margin-left: 0; margin-right: 0; } .col-lg-8, .col-lg-4 { padding-left: 0; padding-right: 0; } /* Minimal Mobile Breadcrumb - No nested white card */ .lesson-breadcrumb { background: transparent; padding: 4px 6px; margin-bottom: 6px; border-radius: 0; box-shadow: none; overflow-x: auto; white-space: nowrap; scrollbar-width: none; border: none; } .lesson-breadcrumb::-webkit-scrollbar { display: none; } .lesson-breadcrumb .breadcrumb { flex-wrap: nowrap; font-size: 11px; gap: 4px; margin: 0; } /* Sleek Mobile Lesson Header */ .lesson-header { padding: 12px 12px; margin-bottom: 10px; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03); background: #ffffff; } .lesson-title { font-size: 1.25rem; line-height: 1.4; margin-bottom: 4px; background: none; -webkit-text-fill-color: initial; color: #1e3a8a; font-weight: 800; } .lesson-title i { display: none; } .lesson-subtitle { font-size: 0.88rem; line-height: 1.5; margin-bottom: 8px; color: #475569; } /* Horizontal Scrollable Metadata Badges (No vertical bloat) */ .lesson-meta { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; gap: 6px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lesson-meta::-webkit-scrollbar { display: none; } .meta-item { padding: 4px 10px; font-size: 11px; border-radius: 14px; flex-shrink: 0; } .lesson-image-container { margin-top: 10px; min-height: auto; padding: 0; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border: none; background: transparent; } .lesson-main-image { max-height: 190px; width: 100%; object-fit: cover; border-radius: 12px; } .lesson-content-section { gap: 0.75rem; } .lesson-description { padding: 0; border-radius: 0; border: none; box-shadow: none; margin-bottom: 0; background: transparent; } .lesson-description > h3 { display: none !important; } .lesson-videos, .lesson-exams, .sidebar-card { padding: 14px 12px; border-radius: 14px; border: 1px solid #e2e8f0; margin-bottom: 12px; } .lesson-videos h3, .lesson-exams h3 { font-size: 1.15rem; margin-bottom: 1rem; padding-bottom: 0.5rem; } /* Highly readable mobile typography for lesson body */ .content-body { font-size: 1.05rem; line-height: 1.85; } .lesson-sidebar { position: static; margin-top: 1rem; } .video-iframe { height: 210px; } .exam-iframe { min-height: 380px; } .info-item { display: flex; flex-direction: row; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 0.75rem 0; } .info-label-group { display: flex; align-items: center; gap: 0.5rem; } .info-label-group i { width: 20px; font-size: 1rem; } .info-label-group .label { min-width: auto; white-space: nowrap; } .info-item .value { text-align: left; font-weight: 600; } .nav-btn:hover { transform: none; } } /* Modal Styling */ .exam-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .exam-modal.active { display: block !important; opacity: 1; visibility: visible; } .exam-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px); } .exam-modal-container { position: relative; width: 95%; height: 95%; max-width: 1200px; margin: 2.5% auto; background: white; border-radius: 12px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: scale(0.8); transition: transform 0.3s ease; } .exam-modal.active .exam-modal-container { transform: scale(1); } .exam-modal-header { background: linear-gradient(135deg, #2196f3, #1976d2); color: white; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; border-radius: 12px 12px 0 0; } .exam-modal-title { margin: 0; font-size: 1.3rem; font-weight: 600; } .exam-modal-close { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .exam-modal-close:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); } .exam-modal-body { flex: 1; position: relative; overflow: hidden; } .exam-modal-iframe { width: 100%; height: 100%; border: none; background: white; } .exam-modal-footer { background: #f8f9fa; padding: 1rem 1.5rem; display: flex; justify-content: center; gap: 1rem; border-top: 1px solid #e9ecef; flex-shrink: 0; border-radius: 0 0 12px 12px; } .exam-preview { background: linear-gradient(135deg, #f8f9fa, #e9ecef); border: 2px dashed #dee2e6; border-radius: 8px; padding: 2rem; text-align: center; color: #6c757d; margin-bottom: 1rem; transition: all 0.3s ease; } .exam-preview:hover { border-color: #4CAF50; background: linear-gradient(135deg, #f1f8e9, #e8f5e8); color: #2e7d2e; } .exam-preview-icon { font-size: 3rem; margin-bottom: 1rem; color: #4CAF50; } .exam-modal-trigger { font-weight: 600; padding: 0.75rem 2rem; border-radius: 8px; transition: all 0.3s ease; } .exam-modal-trigger:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); } /* Mobile Modal Styling */ @media (max-width: 768px) { .exam-modal-container { width: 100%; height: 100%; margin: 0; border-radius: 0; } .exam-modal-header { padding: 1rem; } .exam-modal-title { font-size: 1.1rem; } .exam-modal-footer { padding: 1rem; flex-direction: column; } .exam-modal-footer .btn { width: 100%; } } /* Next & Previous Lesson Pagination Card */ .lesson-pagination-card { background: #ffffff; border-radius: 20px; padding: 1.75rem; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); border: 2px solid #e2e8f0; margin-top: 0.5rem; } .lesson-pagination-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-bottom: 1.1rem; margin-bottom: 1.25rem; border-bottom: 2px dashed #e2e8f0; } .pagination-title-group { display: flex; align-items: center; gap: 0.65rem; font-size: 1.15rem; font-weight: 800; color: #1e293b; } .pagination-title-group i { color: #2563eb; font-size: 1.3rem; } .pagination-progress-badge { background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1d4ed8; font-weight: 800; font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid #bfdbfe; } .lesson-pagination-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.1rem; } .lesson-nav-btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 16px; text-decoration: none !important; transition: all 0.25s ease; } .lesson-nav-next { background: linear-gradient(135deg, #16a34a 0%, #059669 100%); color: #ffffff !important; box-shadow: 0 8px 22px rgba(22, 163, 74, 0.28); border: 2px solid #15803d; } .lesson-nav-next:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22, 163, 74, 0.38); color: #ffffff !important; } .lesson-nav-complete { background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); color: #ffffff !important; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.25); border: 2px solid #1d4ed8; } .lesson-nav-complete:hover { transform: translateY(-3px); color: #ffffff !important; } .lesson-nav-prev { background: #f8fafc; color: #1e293b !important; border: 2px solid #cbd5e1; } .lesson-nav-prev:hover { background: #f1f5f9; border-color: #3b82f6; transform: translateY(-2px); color: #1d4ed8 !important; } .nav-btn-content { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; } .nav-btn-label { font-size: 0.85rem; font-weight: 800; opacity: 0.92; text-transform: uppercase; letter-spacing: 0.3px; } .lesson-nav-prev .nav-btn-label { color: #64748b; } .nav-btn-title { font-size: 1.05rem; font-weight: 800; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav-btn-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.15rem; background: rgba(255, 255, 255, 0.22); } .lesson-nav-prev .nav-btn-icon { background: #e2e8f0; color: #334155; } /* Sidebar Unit Lessons Playlist */ .unit-lessons-list { display: flex; flex-direction: column; gap: 0.55rem; max-height: 360px; overflow-y: auto; padding-left: 4px; } .unit-lesson-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155 !important; text-decoration: none !important; font-size: 0.92rem; font-weight: 600; transition: all 0.2s ease; } .unit-lesson-item:hover { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8 !important; } .unit-lesson-item.active { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid #3b82f6; color: #1e40af !important; font-weight: 800; } .unit-lesson-num { width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; color: #475569; display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; flex-shrink: 0; } .unit-lesson-item.active .unit-lesson-num { background: #2563eb; color: #ffffff; } .unit-lesson-title { flex: 1; min-width: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .unit-lesson-current-badge { background: #2563eb; color: #ffffff; font-size: 0.72rem; font-weight: 800; padding: 0.2rem 0.55rem; border-radius: 999px; flex-shrink: 0; } .unit-lesson-arrow { color: #94a3b8; font-size: 0.8rem; flex-shrink: 0; } .sidebar-next-lesson-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1rem; padding: 0.85rem 1.2rem; border-radius: 12px; background: linear-gradient(135deg, #16a34a 0%, #059669 100%); color: #ffffff !important; font-weight: 800; font-size: 1rem; text-decoration: none !important; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25); transition: all 0.2s ease; } .sidebar-next-lesson-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35); color: #ffffff !important; } @media (max-width: 768px) { .lesson-pagination-grid { grid-template-columns: 1fr; } .lesson-pagination-card { padding: 1.25rem; } } </style> <script> function restartExam(examUrl) { const iframe = event.target.closest('.exam-card').querySelector('.exam-iframe'); iframe.src = iframe.src; } // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { const href = this.getAttribute('href'); if (!href || href === '#' || href.length <= 1) return; try { const target = document.querySelector(href); if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } catch (err) {} }); }); // Auto-resize iframes document.addEventListener('DOMContentLoaded', function() { const iframes = document.querySelectorAll('.exam-iframe'); iframes.forEach(iframe => { iframe.onload = function() { try { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; const height = iframeDoc.documentElement.scrollHeight; if (height > 400) { iframe.style.height = height + 'px'; } } catch (e) { // Cross-origin restrictions - keep default height } }; }); }); </script> <!-- Facebook SDK --> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ xfbml: true, version: 'v18.0' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/ar_AR/sdk.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); // Exam Modal Functionality let currentExamUrl = ''; function openExamModal(examUrl, examName) { const modal = document.getElementById('examModal'); const iframe = document.getElementById('examModalIframe'); const title = document.getElementById('examModalTitle'); currentExamUrl = examUrl; iframe.src = examUrl; title.innerHTML = '<i class="fas fa-clipboard-check me-2"></i>' + examName; modal.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeExamModal() { const modal = document.getElementById('examModal'); const iframe = document.getElementById('examModalIframe'); modal.classList.remove('active'); document.body.style.overflow = ''; // Clear iframe after animation setTimeout(function() { iframe.src = 'about:blank'; }, 300); } function restartExamModal() { const iframe = document.getElementById('examModalIframe'); iframe.src = currentExamUrl; } // Initialize modal functionality document.addEventListener('DOMContentLoaded', function() { // Add click handlers to exam triggers document.querySelectorAll('.exam-modal-trigger').forEach(button => { button.addEventListener('click', function() { const examUrl = this.getAttribute('data-exam-url'); const examName = this.getAttribute('data-exam-name'); openExamModal(examUrl, examName); }); }); // Close modal on overlay click const overlay = document.querySelector('.exam-modal-overlay'); if (overlay) { overlay.addEventListener('click', closeExamModal); } // Close modal on escape key document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { closeExamModal(); } }); // Continuous Lesson Sections: Smooth Scroll Navigation const tabLinks = document.querySelectorAll('#lessonTabs .nav-link, .lesson-nav-pills .nav-link'); if (tabLinks.length > 0) { tabLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); const targetSelector = this.getAttribute('data-bs-target') || this.getAttribute('href'); if (targetSelector && targetSelector.startsWith('#')) { const targetEl = document.querySelector(targetSelector); if (targetEl) { const navOffset = 130; const elPosition = targetEl.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({ top: elPosition - navOffset, behavior: 'smooth' }); tabLinks.forEach(l => l.classList.remove('active')); this.classList.add('active'); } } }); }); // Sync active pill with scroll position const panes = document.querySelectorAll('#lessonTabContent > .tab-pane, .tab-content > .tab-pane'); if (panes.length > 0) { window.addEventListener('scroll', function() { let currentId = ''; const scrollPos = window.pageYOffset + 160; panes.forEach(pane => { if (pane.offsetTop <= scrollPos) { currentId = '#' + pane.id; } }); if (currentId) { tabLinks.forEach(link => { const target = link.getAttribute('data-bs-target') || link.getAttribute('href'); if (target === currentId) { tabLinks.forEach(l => l.classList.remove('active')); link.classList.add('active'); } }); } }, { passive: true }); } } }); // Al-Amin Unified Learning Progress & Smart Evaluation Tracker var alaminProgressSaved = false; function alaminSaveCompletion(lessonId, score, maxScore, onResult) { return window.alaminWebsiteProgress.submit(maxScore > 0 ? 'assessment' : 'completion', onResult); } function alaminRenderStation5CelebrationCard(isLoggedIn, correctCount, totalQuestions, finalScore, pct) { var boxId = 'alaminStation5ResultBox'; var existingBox = document.getElementById(boxId); if (!existingBox) { existingBox = document.createElement('div'); existingBox.id = boxId; existingBox.className = 'alamin-station-result-wrap'; // Find best insertion point in Station 5 var st5 = document.querySelector('.alamin-station[id$="_5"] .alamin-card, #stStation_5 .alamin-card, [id^="stStation_"][id$="_5"] .alamin-card'); if (st5) { st5.appendChild(existingBox); } else { var lastQ = document.querySelector('.alamin-quiz-q:last-of-type'); if (lastQ && lastQ.parentNode) { lastQ.parentNode.insertBefore(existingBox, lastQ.nextSibling); } else { var container = document.querySelector('.modern-lesson-page .container') || document.body; container.appendChild(existingBox); } } } var loginUrl = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname); if (isLoggedIn) { existingBox.innerHTML = '<div style="background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%); border: 2px solid #10b981; border-radius: 18px; padding: 1.5rem; margin-top: 1.5rem; text-align: center; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.15); animation: alaminPopIn 0.4s ease;">' + '<div style="font-size: 2.6rem; line-height: 1; margin-bottom: 0.6rem;">🏆 🎉</div>' + '<h3 style="color: #065f46; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.5rem;">' + 'أحسنت صنعاً يا بطل التميز!' + '</h3>' + '<div style="font-size: 1.05rem; color: #047857; margin-bottom: 0.85rem; font-weight: 700;">' + 'درجة التقييم الذكي: <span style="background: #10b981; color: #ffffff; padding: 3px 14px; border-radius: 20px; font-weight: 800;">' + correctCount + ' / ' + totalQuestions + ' (' + pct + '%)</span>' + '</div>' + '<div style="background: #ffffff; border-radius: 12px; padding: 10px 18px; display: inline-block; color: #0f172a; font-weight: 700; margin-bottom: 0.5rem; border: 1px dashed #10b981; box-shadow: 0 2px 6px rgba(0,0,0,0.04);">' + '<i class="fas fa-star text-warning me-1 ms-1"></i> رصيد هذا الدرس (' + finalScore + ' من 10 نقاط) إلى رصيدك وترتيبك في لوحة الصدارة بنجاح ✓' + '</div>' + '</div>'; } else { existingBox.innerHTML = '<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 2px solid #f59e0b; border-radius: 18px; padding: 1.5rem; margin-top: 1.5rem; text-align: center; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15); animation: alaminPopIn 0.4s ease;">' + '<div style="font-size: 2.6rem; line-height: 1; margin-bottom: 0.6rem;">🌟 🚀</div>' + '<h3 style="color: #92400e; font-weight: 800; font-size: 1.35rem; margin-bottom: 0.5rem;">' + 'إنجاز رائع ومتميز يا بطل!' + '</h3>' + '<div style="font-size: 1.05rem; color: #b45309; margin-bottom: 0.85rem; font-weight: 700;">' + 'درجة التقييم الذكي: <span style="background: #f59e0b; color: #ffffff; padding: 3px 14px; border-radius: 20px; font-weight: 800;">' + correctCount + ' / ' + totalQuestions + ' (' + pct + '%)</span>' + '</div>' + '<p style="color: #78350f; font-size: 0.98rem; max-width: 620px; margin: 0 auto 1.25rem; font-weight: 600; line-height: 1.7;">' + 'أنت تستحق وسام التفوق! سجّل الدخول بحسابك الآن لحفظ نقاطك (+' + finalScore + ' من 10 نقاط) ومتابعة تقدمك وترتيبك بين الأوائل في لوحة شرف المنصة.' + '</p>' + '<div>' + '<a href="' + loginUrl + '" class="btn btn-warning btn-lg fw-bold px-4 py-2 shadow-sm rounded-pill" style="background: #f59e0b; border: none; color: #ffffff; font-size: 1.05rem;">' + '<i class="fas fa-sign-in-alt me-2 ms-2"></i>سجّل الدخول لحفظ نقاطك ومتابعة ترتيبك الآن 🚀' + '</a>' + '</div>' + '</div>'; } setTimeout(function() { existingBox.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 120); } // Auto hooks for seamless student progress tracking document.addEventListener('DOMContentLoaded', function() { var lessonId = 2358; // 1. Station 5 Smart Quiz Universal Auto-Tracker var quizQuestions = document.querySelectorAll('.alamin-quiz-q'); var totalQuizQuestions = quizQuestions.length; var station5Triggered = false; function evaluateStation5Completion() { if (station5Triggered || totalQuizQuestions === 0) return; var answeredExps = document.querySelectorAll('.alamin-quiz-exp.correct-state, .alamin-quiz-exp.wrong-state'); if (answeredExps.length === totalQuizQuestions) { station5Triggered = true; var correctCount = document.querySelectorAll('.alamin-quiz-exp.correct-state').length; var quizBonus = Math.round((correctCount / totalQuizQuestions) * 5); var finalScore = 5 + quizBonus; // 5 base + up to 5 quiz = 5 to 10 var maxScore = 10; var pct = Math.round((correctCount / totalQuizQuestions) * 100); alaminSaveCompletion(lessonId, correctCount, totalQuizQuestions, function(isLoggedIn, saved) { alaminRenderStation5CelebrationCard(isLoggedIn, correctCount, totalQuizQuestions, isLoggedIn ? saved.points : finalScore, pct); }); } } if (totalQuizQuestions > 0) { document.addEventListener('click', function(e) { var optBtn = e.target.closest('.alamin-quiz-opt'); if (optBtn) { setTimeout(evaluateStation5Completion, 80); } }); } // 2. Unit Exams (20-question milestones) Auto-Tracker var examAlerts = document.querySelectorAll('[id^="exAlert_"]'); if (examAlerts.length > 0 && window.MutationObserver) { var examObs = new MutationObserver(function(mutations) { mutations.forEach(function(m) { var target = m.target; if (target && !target.classList.contains('d-none') && (target.classList.contains('alert-success') || target.classList.contains('alert-info'))) { var text = target.innerText || ''; var match = text.match(/(\d+)\s*\/\s*(\d+)/); if (match && !alaminProgressSaved) { var examScore = parseInt(match[1]); var examTotal = parseInt(match[2]); alaminSaveCompletion(lessonId, examScore, examTotal, function(isLoggedIn) { if (!isLoggedIn && !target.querySelector('.alamin-exam-login-cta')) { var loginUrl = '/Account/Login?returnUrl=' + encodeURIComponent(window.location.pathname); var cta = document.createElement('div'); cta.className = 'alamin-exam-login-cta mt-3 pt-3 border-top text-center'; cta.innerHTML = '<p class="mb-2 text-dark fw-bold">🌟 نتيجة رائعة! احفظ درجتك ونقاطك في الترتيب العام الآن:</p>' + '<a href="' + loginUrl + '" class="btn btn-warning fw-bold px-4 py-2 rounded-pill shadow-sm"><i class="fas fa-sign-in-alt me-1 ms-1"></i> تسجيل الدخول لحفظ النتيجة في لوحة المتصدرين 🚀</a>'; target.appendChild(cta); } }); } } }); }); examAlerts.forEach(function(el) { examObs.observe(el, { attributes: true, attributeFilter: ['class'] }); }); } // 3. Auto-save completion when navigating to next lesson // 4. Legacy certificate reward banners var certBanners = document.querySelectorAll('[data-quiz-reward-banner="true"], [id^="quizCertBanner"]'); if (certBanners.length > 0 && window.MutationObserver) { var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { if (m.target && m.target.style && m.target.style.display !== 'none' && !alaminProgressSaved) { alaminSaveCompletion(lessonId, 10, 10); } }); }); certBanners.forEach(function(banner) { observer.observe(banner, { attributes: true, attributeFilter: ['style', 'class'] }); }); } }); </script> </main> <footer class="modern-portal-footer py-4 py-md-5 mt-5 text-light" dir="rtl"> <div class="container"> <div class="row g-4 align-items-start"> <!-- About Section --> <div class="col-lg-5 col-12 mb-2 mb-lg-0"> <div class="d-flex align-items-center gap-2 mb-3"> <img src="/images/iconLogo.png" alt="الأمين التعليمية" height="38" class="footer-logo"> <h5 class="footer-brand-title mb-0">الأمين التعليمية</h5> </div> <p class="footer-about-text mb-3"> دروس تفاعلية، ومحاكيات بصرية، وأسئلة تدريبية، وأدوات تعليمية تساعد على الفهم والتدريب، من رياض الأطفال حتى المرحلة الثانوية، مع ملف مستقل لكل طالب ومتابعة تقدمه. </p> <div class="footer-social-links d-flex align-items-center gap-2"> <a href="https://www.facebook.com/AlaminEduPortal" class="social-btn facebook" target="_blank" aria-label="فيسبوك" title="فيسبوك"> <i class="fab fa-facebook-f"></i> </a> <a href="https://www.youtube.com/channel/UCXkUcPA-3b5PfFJ_w3YkrKg" class="social-btn youtube" target="_blank" aria-label="يوتيوب" title="يوتيوب"> <i class="fab fa-youtube"></i> </a> <a href="https://twitter.com/AlaminEduGate" class="social-btn twitter" target="_blank" aria-label="تويتر" title="تويتر"> <i class="fab fa-twitter"></i> </a> </div> </div> <!-- Quick Links & Legal: Side-by-side on mobile (col-6) to keep footer compact and professional! --> <div class="col-lg-3 col-6"> <h6 class="footer-heading mb-3">روابط سريعة</h6> <ul class="list-unstyled footer-list mb-0"> <li class="mb-2"><a href="/" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>الرئيسية</a></li> <li class="mb-2"><a href="/about" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>عن البوابة</a></li> <li class="mb-2"><a href="/contact" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>اتصل بنا</a></li> <li class="mb-2"><a href="/Arabic/Tools" class="footer-link"><i class="fas fa-angle-left ms-1 text-primary opacity-75"></i>الأدوات التعليمية</a></li> </ul> </div> <div class="col-lg-4 col-6"> <h6 class="footer-heading mb-3">وثائق ومعلومات</h6> <ul class="list-unstyled footer-list mb-0"> <li class="mb-2"><a href="/privacy" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>سياسة الخصوصية</a></li> <li class="mb-2"><a href="/terms" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>شروط الاستخدام</a></li> <li class="mb-2"><a href="/disclaimer" class="footer-link"><i class="fas fa-angle-left ms-1 text-info opacity-75"></i>إخلاء المسؤولية</a></li> </ul> </div> </div> <!-- Copyright --> <hr class="footer-divider my-4"> <div class="row align-items-center"> <div class="col-12 text-center"> <p class="footer-copyright mb-0"> © 2026 الأمين التعليمية. جميع الحقوق محفوظة. </p> </div> </div> </div> </footer> <!-- Scripts --> <script src="/vendor/family/bootstrap.bundle.min.js"></script> <!-- Professional Header JavaScript --> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize tooltips var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // Navbar scroll effect const navbar = document.querySelector('.navbar'); let lastScrollY = window.scrollY; function updateNavbar() { if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } } // Search input focus enhancement const searchInput = document.querySelector('.search-input .form-control'); if (searchInput) { searchInput.addEventListener('focus', function() { this.parentElement.style.transform = 'scale(1.02)'; }); searchInput.addEventListener('blur', function() { this.parentElement.style.transform = 'scale(1)'; }); } // Mobile menu enhancements with improved scroll behavior const mobileMenu = document.getElementById('mobileMenu'); if (mobileMenu) { // Allow background scrolling when offcanvas is open mobileMenu.addEventListener('show.bs.offcanvas', function() { // Don't disable body scroll - allow users to scroll the main page // The offcanvas overlay will handle touch events properly }); mobileMenu.addEventListener('hide.bs.offcanvas', function() { // Nothing needed here since we didn't disable body scroll }); // Close menu when clicking on links (better UX) const menuLinks = mobileMenu.querySelectorAll('a[href]:not([href="#"])'); menuLinks.forEach(function(link) { link.addEventListener('click', function() { const offcanvasInstance = bootstrap.Offcanvas.getInstance(mobileMenu); if (offcanvasInstance) { offcanvasInstance.hide(); } }); }); } // Dropdown menu enhancements const dropdownElements = document.querySelectorAll('.dropdown-toggle'); dropdownElements.forEach(function(element) { element.addEventListener('show.bs.dropdown', function() { this.setAttribute('aria-expanded', 'true'); }); element.addEventListener('hide.bs.dropdown', function() { this.setAttribute('aria-expanded', 'false'); }); }); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(function(anchor) { anchor.addEventListener('click', function(e) { const href = this.getAttribute('href'); if (!href || href === '#' || href.length <= 1) return; try { const target = document.querySelector(href); if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } catch (err) {} }); }); // Keyboard navigation enhancements document.addEventListener('keydown', function(e) { if (e.key === 'Escape') { // Close any open dropdowns const openDropdowns = document.querySelectorAll('.dropdown-menu.show'); openDropdowns.forEach(function(dropdown) { const toggle = dropdown.previousElementSibling; if (toggle) { bootstrap.Dropdown.getInstance(toggle)?.hide(); } }); // Close mobile menu if open const mobileMenuInstance = bootstrap.Offcanvas.getInstance(mobileMenu); if (mobileMenuInstance) { mobileMenuInstance.hide(); } } }); // Performance optimization: Debounce scroll events let ticking = false; function requestTick() { if (!ticking) { requestAnimationFrame(updateNavbar); ticking = true; setTimeout(() => { ticking = false; }, 16); } } window.addEventListener('scroll', requestTick, { passive: true }); }); </script> <!-- Modern CSS Styles --> <style> :root { --primary-color: #005078; --primary-hover: #003a57; --secondary-color: #64748b; --success-color: #16a34a; --warning-color: #d97706; --danger-color: #dc2626; --info-color: #0ea5e9; --light-color: #f8fafc; --dark-color: #1e293b; --border-color: #e2e8f0; --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); } body { font-family: 'Cairo', 'Tajawal', Arial, sans-serif; line-height: 1.6; color: #334155; background-color: #fafbfc; } /* Professional Header Styles */ .navbar { padding: 0.75rem 0; background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; } .navbar.scrolled { padding: 0.5rem 0; box-shadow: var(--shadow-lg); } .navbar-brand { font-weight: 700; transition: transform 0.3s ease; } .navbar-brand:hover { transform: scale(1.02); } .brand-text h1 { font-weight: 700; color: var(--primary-color); font-size: 1.3rem; line-height: 1.2; } .brand-text small { font-size: 0.8rem; color: var(--secondary-color); font-weight: 500; } /* Navigation Links */ .navbar-nav .nav-link { color: var(--dark-color); font-weight: 500; transition: all 0.3s ease; position: relative; border-radius: 8px; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--primary-color); background: rgba(0, 80, 120, 0.06); transform: translateY(-1px); } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: -2px; right: 50%; transform: translateX(50%); width: 0; height: 2px; background: var(--primary-color); transition: width 0.3s ease; } .navbar-nav .nav-link:hover::after { width: 80%; } /* Dropdown Menus */ .dropdown-menu { border: none; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.5rem 0; margin-top: 0.5rem; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.98); } .dropdown-item { padding: 0.75rem 1rem; font-weight: 500; color: var(--dark-color); transition: all 0.3s ease; border-radius: 8px; margin: 0 0.5rem; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(0, 80, 120, 0.10); color: var(--primary-color); transform: translateX(-3px); } .dropdown-item i { font-size: 0.9rem; } /* Search Input Styling */ .search-input .form-control { border: 2px solid var(--border-color); border-radius: 25px 0 0 25px; padding: 0.75rem 1rem; font-size: 0.95rem; transition: all 0.3s ease; background: #fafbfc; } .search-input .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.15); background: white; } .search-input .btn { border: 2px solid var(--border-color); border-right: none; border-radius: 0 25px 25px 0; padding: 0.75rem 1rem; transition: all 0.3s ease; background: #fafbfc; } .search-input .btn:hover { background: var(--primary-color); border-color: var(--primary-color); color: white; } /* Social Media Buttons */ .btn-outline-primary, .btn-outline-danger, .btn-outline-info { border-width: 2px; transition: all 0.3s ease; } .btn-outline-primary:hover, .btn-outline-danger:hover, .btn-outline-info:hover { transform: scale(1.1); box-shadow: var(--shadow-md); } /* Mobile Toggle */ .navbar-toggler { border: none; border-radius: 8px; padding: 0.5rem; transition: all 0.3s ease; } .navbar-toggler:hover { background: rgba(0, 80, 120, 0.10); } .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.15); } /* Mobile Offcanvas */ .offcanvas { width: 320px; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1); z-index: 1055; } .offcanvas-header { background: linear-gradient(135deg, var(--primary-color), #08749e); border-bottom: none; } /* Ensure offcanvas backdrop doesn't interfere with scrolling */ .offcanvas-backdrop { background-color: rgba(0, 0, 0, 0.3); } /* Allow body scrolling even when offcanvas is open */ body.offcanvas-open { overflow: visible !important; padding-right: 0 !important; } /* Improve touch scrolling on mobile */ .offcanvas-body { -webkit-overflow-scrolling: touch; overflow-y: auto; height: 100%; } .list-group-item-action { transition: all 0.3s ease; border: none; } .list-group-item-action:hover { background: rgba(0, 80, 120, 0.06); color: var(--primary-color); transform: translateX(-3px); } .accordion-button { font-weight: 500; } .accordion-button:not(.collapsed) { background: rgba(0, 80, 120, 0.06); color: var(--primary-color); } .accordion-button:focus { box-shadow: none; border: none; } /* Enhanced Mobile Responsive Design */ @media (max-width: 991.98px) { .navbar-brand .brand-text h1 { font-size: 1.1rem; } .brand-text small { display: none !important; } .hero-section { padding: 60px 0; } .hero-title { font-size: 2.2rem; } .hero-subtitle { font-size: 1.1rem; padding: 0 1rem; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .features-grid { grid-template-columns: 1fr; gap: 1.5rem; } .lessons-grid { grid-template-columns: 1fr; gap: 1.5rem; } } @media (max-width: 575.98px) { .navbar { padding: 0.5rem 0; } .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; } .navbar-brand img { height: 35px; } .navbar-brand .brand-text h1 { font-size: 0.95rem; } .hero-section { padding: 40px 0 50px 0; } .hero-title { font-size: 1.8rem; margin-bottom: 1rem; } .hero-subtitle { font-size: 1rem; margin-bottom: 1.5rem; padding: 0 0.5rem; } .hero-buttons { flex-direction: column; gap: 0.75rem; padding: 0 1rem; } .hero-buttons .btn { width: 100%; max-width: 280px; padding: 12px 20px; font-size: 0.95rem; } .stats-section { padding: 60px 0; } .stats-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .stat-item { padding: 1.5rem; } .stat-icon { width: 60px; height: 60px; font-size: 1.5rem; } .stat-number { font-size: 2rem; } .section-title { font-size: 1.8rem; margin-bottom: 2rem; } .features-section { padding: 60px 0; } .feature-card { padding: 1.5rem; margin-bottom: 1rem; } .feature-icon { width: 60px; height: 60px; font-size: 1.5rem; } .feature-title { font-size: 1.3rem; } .lessons-section { padding: 60px 0; } .lessons-header { flex-direction: column; gap: 1rem; text-align: center; margin-bottom: 2rem; } .lessons-title { font-size: 1.8rem; } .lesson-card { margin-bottom: 1rem; } .lesson-image { height: 160px; } .lesson-content { padding: 1.25rem; } .lesson-title { font-size: 1.1rem; } .lesson-actions { flex-direction: column; gap: 0.5rem; } .lesson-btn { width: 100%; justify-content: center; } .cta-section { padding: 60px 0; } .cta-title { font-size: 1.8rem; } .cta-subtitle { font-size: 1rem; padding: 0 0.5rem; } .cta-buttons { flex-direction: column; gap: 0.75rem; padding: 0 1rem; } .cta-buttons .btn { width: 100%; max-width: 280px; } } @media (max-width: 480px) { .hero-title { font-size: 1.6rem; } .section-title { font-size: 1.6rem; } .container { padding-left: 0.75rem; padding-right: 0.75rem; } .offcanvas { width: 280px; } } /* Tooltip Styling */ .tooltip { font-size: 0.8rem; } /* Smooth Animations */ * { scroll-behavior: smooth; } /* Loading Animation for Search */ .search-loading { opacity: 0.7; pointer-events: none; } /* Accessibility Improvements */ .nav-link:focus, .dropdown-item:focus, .btn:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Enhanced Visual Hierarchy */ .navbar-brand { z-index: 1001; } /* Performance Optimizations */ .navbar-nav, .dropdown-menu, .offcanvas { will-change: transform; } .hero-section { background: linear-gradient(135deg, var(--primary-color), #08749e); color: white; padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .hero-title { font-size: 2.8rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; } .hero-subtitle { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.95; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; } .hero-buttons .btn { padding: 12px 24px; font-weight: 600; border-radius: 8px; } .stats-section { padding: 80px 0; background: var(--light-color); } .section-title { font-size: 2.5rem; font-weight: 700; text-align: center; margin-bottom: 3rem; color: var(--dark-color); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; } .stat-item { background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .stat-item:hover { transform: translateY(-5px); } .stat-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; } .stat-icon.lessons-icon { background: var(--primary-color); } .stat-icon.students-icon { background: var(--success-color); } .stat-icon.tools-icon { background: var(--warning-color); } .stat-icon.videos-icon { background: var(--danger-color); } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--dark-color); margin-bottom: 0.5rem; } .stat-label { font-size: 1.1rem; color: var(--secondary-color); } .features-section { padding: 80px 0; } .section-subtitle { text-align: center; font-size: 1.1rem; color: var(--secondary-color); margin-bottom: 3rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 2rem; } .feature-card { background: white; padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .feature-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 2rem; color: white; } .feature-icon.arabic-icon { background: linear-gradient(135deg, #16a34a, #22c55e); } .feature-icon.lessons-icon { background: linear-gradient(135deg, #005078, #08749e); } .feature-icon.tools-icon { background: linear-gradient(135deg, #d97706, #f59e0b); } .feature-icon.interactive-icon { background: linear-gradient(135deg, #dc2626, #ef4444); } .feature-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-color); } .feature-description { color: var(--secondary-color); line-height: 1.6; } .lessons-section { padding: 80px 0; background: var(--light-color); } .lessons-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .lessons-title { font-size: 2.5rem; font-weight: 700; color: var(--dark-color); } .view-all-btn { background: var(--primary-color); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: background-color 0.3s ease; } .view-all-btn:hover { background: #003a57; color: white; } .lessons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .lesson-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; } .lesson-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .lesson-image { height: 200px; background: linear-gradient(135deg, var(--primary-color), #08749e); position: relative; overflow: hidden; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: center; } .lesson-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform 0.3s ease, filter 0.3s ease; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px; } .lesson-image img:hover { transform: scale(1.02); filter: brightness(1.1); } .lesson-image img.loading { filter: blur(2px); opacity: 0.7; } .lesson-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%); pointer-events: none; } .lesson-content { padding: 1.5rem; } .lesson-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--dark-color); line-height: 1.4; } .lesson-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .lesson-badge { background: var(--light-color); color: var(--secondary-color); padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; display: flex; align-items: center; gap: 4px; } .lesson-badge.grade { background: #dbeafe; color: var(--primary-color); } .lesson-badge.subject { background: #dcfce7; color: var(--success-color); } .lesson-badge.views { background: #fef3c7; color: var(--warning-color); } .lesson-description { color: var(--secondary-color); line-height: 1.6; margin-bottom: 1.5rem; } .lesson-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .lesson-btn { padding: 8px 16px; border-radius: 6px; text-decoration: none; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; } .lesson-btn.primary { background: var(--primary-color); color: white; } .lesson-btn.primary:hover { background: #003a57; color: white; } .lesson-btn.success { background: var(--success-color); color: white; } .lesson-btn.success:hover { background: #15803d; color: white; } .lesson-btn.secondary { background: var(--secondary-color); color: white; } .lesson-btn.secondary:hover { background: #475569; color: white; } .cta-section { background: linear-gradient(135deg, var(--dark-color), #374151); color: white; padding: 80px 0; text-align: center; } .cta-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; } .cta-subtitle { font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9; } .cta-buttons .btn { margin: 0.5rem; padding: 12px 24px; font-weight: 600; border-radius: 8px; } /* Responsive Design */ @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .section-title { font-size: 2rem; } .lessons-header { flex-direction: column; gap: 1rem; text-align: center; } .lessons-title { font-size: 2rem; } .cta-title { font-size: 2rem; } .cta-subtitle { font-size: 1rem; } .navbar-nav .nav-link { padding: 0.5rem 0; } } /* Animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate__animated { animation-duration: 1s; animation-fill-mode: both; } .animate__fadeInUp { animation-name: fadeInUp; } .animate__delay-1s { animation-delay: 0.5s; } .animate__delay-2s { animation-delay: 1s; } /* Modern Portal Footer Styling */ .modern-portal-footer { background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #cbd5e1; } .footer-brand-title { color: #ffffff !important; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .footer-about-text { color: #94a3b8; font-size: 0.9rem; line-height: 1.7; max-width: 440px; } .footer-heading { color: #f8fafc; font-weight: 700; font-size: 0.98rem; position: relative; padding-bottom: 8px; } .footer-heading::after { content: ''; position: absolute; bottom: 0; right: 0; width: 26px; height: 2px; background: #38bdf8; border-radius: 2px; } .footer-list { margin: 0; padding: 0; } .footer-link { color: #94a3b8 !important; text-decoration: none !important; font-size: 0.88rem; display: inline-block; transition: all 0.25s ease; } .footer-link:hover { color: #38bdf8 !important; transform: translateX(-4px); } .footer-divider { border-color: rgba(255, 255, 255, 0.08); } .footer-copyright { color: #94a3b8; font-size: 0.86rem; } .footer-social-links .social-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: #e2e8f0; text-decoration: none; transition: all 0.25s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .footer-social-links .social-btn:hover { transform: translateY(-2px); } .footer-social-links .social-btn.facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; } .footer-social-links .social-btn.youtube:hover { background: #ff0000; color: #fff; border-color: #ff0000; } .footer-social-links .social-btn.twitter:hover { background: #1da1f2; color: #fff; border-color: #1da1f2; } @media (max-width: 767.98px) { .modern-portal-footer { padding-top: 2rem !important; padding-bottom: 2rem !important; text-align: right; } .footer-about-text { font-size: 0.84rem; margin-bottom: 1rem; } .footer-heading { font-size: 0.92rem; margin-bottom: 0.75rem !important; } .footer-link { font-size: 0.84rem; } } /* Content Pages Styling */ .content-page { background: #f8f9fa; min-height: calc(100vh - 200px); padding: 2rem 0; } .content-container { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 3rem; margin: 2rem auto; max-width: 1000px; } .page-header-content { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 2px solid #e9ecef; } .page-title-content { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; } .page-subtitle-content { font-size: 1.1rem; color: var(--secondary-color); margin-bottom: 0; } .content-section { margin-bottom: 3rem; } .content-section h2 { font-size: 1.8rem; font-weight: 600; color: var(--dark-color); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--primary-color); display: inline-block; } .content-section h3 { font-size: 1.4rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1rem; margin-top: 2rem; } .content-section h4 { font-size: 1.2rem; font-weight: 600; color: var(--dark-color); margin-bottom: 1rem; margin-top: 1.5rem; } .content-section p { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 1.5rem; } .content-section ul { margin: 1.5rem 0; padding-right: 2rem; } .content-section li { font-size: 1rem; line-height: 1.8; color: #555; margin-bottom: 0.8rem; } .content-section li strong { color: var(--primary-color); font-weight: 600; } .highlight-box { background: linear-gradient(135deg, #e3f2fd, #f3e5f5); border: 1px solid #bbdefb; border-radius: 8px; padding: 2rem; margin: 2rem 0; position: relative; } .highlight-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary-color); border-radius: 4px 0 0 4px; } .contact-form { background: #f8f9fa; border-radius: 12px; padding: 2rem; margin: 2rem 0; } .form-group { margin-bottom: 1.5rem; } .form-label { font-weight: 600; color: var(--dark-color); margin-bottom: 0.5rem; display: block; } .form-control { border: 2px solid #e9ecef; border-radius: 8px; padding: 0.75rem 1rem; font-size: 1rem; transition: border-color 0.3s ease; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(0, 80, 120, 0.25); } .btn-primary { background: var(--primary-color); border: none; padding: 0.75rem 2rem; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .btn-primary:hover { background: #003a57; transform: translateY(-2px); } /* Responsive adjustments for content pages */ @media (max-width: 768px) { /* Fix mobile container spacing - remove excessive margins */ .content-page { padding: 0.5rem 0 !important; margin: 0 !important; } .container { max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; margin: 0 !important; } .content-container { padding: 1.5rem 1rem !important; margin: 0.5rem 5px !important; border-radius: 8px !important; max-width: 100% !important; box-sizing: border-box !important; } /* Make all cards full width on mobile */ .card { margin-left: 0 !important; margin-right: 0 !important; border-radius: 8px !important; } /* Remove breadcrumb margins on mobile */ .breadcrumb { margin-bottom: 0.5rem !important; padding: 0.5rem 0 !important; background: transparent !important; } /* Optimize page header for mobile */ .page-header-content { padding: 1rem 0 !important; margin-bottom: 1.5rem !important; text-align: center !important; } .page-title-content { font-size: 1.8rem !important; margin-bottom: 0.5rem !important; line-height: 1.3 !important; } .page-subtitle-content { font-size: 1rem !important; margin-bottom: 1rem !important; line-height: 1.5 !important; padding: 0 0.5rem !important; } .content-section h2 { font-size: 1.5rem; } .content-section h3 { font-size: 1.3rem; } /* Ensure forms and inputs are mobile-friendly */ .form-control { font-size: 16px !important; /* Prevents zoom on iOS */ padding: 12px 15px !important; } /* Make buttons more touch-friendly while respecting small buttons */ .btn:not(.btn-sm):not(.btn-sound) { min-height: 44px !important; padding: 12px 20px !important; font-size: 1rem !important; } .btn-sm { min-height: auto !important; padding: 5px 12px !important; font-size: 0.85rem !important; } /* Better spacing for educational badges */ .educational-badges .badge { display: block !important; margin-bottom: 0.5rem !important; font-size: 0.9rem !important; padding: 0.5rem 0.75rem !important; } .badge { white-space: normal !important; line-height: 1.45 !important; text-align: right !important; max-width: 100% !important; word-break: break-word !important; overflow-wrap: break-word !important; } .alamin-exam-hero, .alamin-card, .card.alamin-card { padding: 1.25rem 1rem !important; border-radius: 16px !important; box-sizing: border-box !important; max-width: 100% !important; width: 100% !important; overflow: hidden !important; } .alamin-exam-hero h1, .alamin-card h1 { font-size: 1.25rem !important; line-height: 1.55 !important; } .alamin-exam-hero p, .alamin-card p { font-size: 0.95rem !important; line-height: 1.65 !important; } } @media (max-width: 480px) { .content-container { margin: 0.25rem 2px !important; padding: 1rem 0.75rem !important; } .page-title-content { font-size: 1.6rem !important; } .page-subtitle-content { font-size: 0.9rem !important; } } /* Arabic Font Enhancement for Better Diacritic Rendering */ /* Override Bootstrap's default body font for Arabic content with size compensation */ body [lang="ar"]:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), body .arabic-text:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), body .arabic-content:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), body .arabic-sentence-large:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), body .arabic-word:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), body .rtl:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), .card-body *[lang="ar"]:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), .results-section *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), .educational-footer *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text), #advancedTips *:not(.content-body):not(.content-body *):not(.detailed-token-analysis *):not(.grammatical-details *):not(.token-card *):not(.word-text) { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1em !important; /* Baseline size to avoid shrinking Arabic content */ font-feature-settings: 'liga' 1, 'kern' 1, 'dlig' 1; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures discretionary-ligatures; } /* I'rab Results Font Restoration - Override small fonts for I'rab analysis */ .detailed-token-analysis, .detailed-token-analysis *, .grammatical-details, .grammatical-details *, .token-card, .token-card *, .word-text, .results-section .card-body .arabic-text, .results-section .card-body [lang="ar"], .results-section .word-text, .results-section .token-card .badge { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.1em !important; /* Restored readable size for I'rab */ line-height: 1.6 !important; font-feature-settings: 'liga' 1, 'kern' 1, 'dlig' 1; text-rendering: optimizeLegibility; } /* FontAwesome Icon Fix - Preserve FontAwesome font for icons */ .fas, .far, .fab, .fad, .fal, .fa, [class*="fa-"], .results-section .fas, .results-section .far, .results-section .fab, .results-section .fad, .results-section .fal, .results-section .fa, .results-section [class*="fa-"], .educational-footer .fas, .educational-footer .far, .educational-footer .fab, .educational-footer .fad, .educational-footer .fal, .educational-footer .fa, .educational-footer [class*="fa-"], #advancedTips .fas, #advancedTips .far, #advancedTips .fab, #advancedTips .fad, #advancedTips .fal, #advancedTips .fa, #advancedTips [class*="fa-"] { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal !important; font-variant: normal !important; text-transform: none !important; line-height: 1 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; font-feature-settings: normal !important; font-variant-ligatures: normal !important; } .far, .results-section .far, .educational-footer .far, #advancedTips .far { font-weight: 400 !important; } .fab, .results-section .fab, .educational-footer .fab, #advancedTips .fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; } /* Input textbox - make bigger */ body textarea[name="Sentence"], .tool-form textarea { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.5em !important; /* Increased to 1.5em for better input readability */ line-height: 1.6; letter-spacing: 0.02em; } /* I'rab suggestion paths - make bigger */ .path-card .btn, body .path-card .btn { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.5em !important; /* Increased to 1.5em for suggestions */ } /* Analysis results - override global size */ .results-section .word-text, body .results-section .word-text { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.25em !important; /* Boost readability for token summaries */ line-height: 1.65; letter-spacing: 0.015em; } .ierab-badge { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.05em !important; /* Set to 1.05em as requested */ } /* Detailed I'rab descriptions - override global size */ .results-section .brief-ierab-container *, .results-section .brief-ierab-card, .results-section .detailed-ierab *, .results-section .ierab-content *, .results-section .educational-display *, body .results-section .detailed-ierab *, body .results-section .ierab-content * { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.15em !important; /* Increased for better readability */ line-height: 1.75 !important; } /* Arabic word size overrides - must come after global rules */ .results-section .arabic-word, body .results-section .arabic-word, body .results-section .arabic-word *, .results-section .role-detailed, body .results-section .role-detailed, .results-section .word-text .arabic-word, body .results-section .word-text { font-size: 1.2em !important; /* Boost size for core token displays */ } /* Force balanced font for specific I'rab result elements */ body .token-analysis *, body .token-card *, body .brief-ierab-card *, body .detailed-analysis *, body .ierab-badge, body .results-section .badge { font-size: 1.12em !important; /* Enhanced readability across all token cards */ } /* Enhanced diacritic visibility for specific educational content */ .tashkeel-enhanced, .arabic-analysis-content { font-family: 'Amiri', 'Scheherazade New', serif !important; font-size: 1.18em !important; line-height: 1.85; letter-spacing: 0.02em; } /* === MOBILE LESSON EXAM IFRAME FIXES === */ @media (max-width: 768px) { .exam-iframe { min-height: 400px !important; max-height: calc(100vh - 200px) !important; height: auto !important; overflow-y: auto !important; display: block !important; } .exam-container { border-radius: 8px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; margin-bottom: 1rem !important; display: block !important; } .exam-actions { position: sticky !important; bottom: 0 !important; z-index: 1000 !important; background: white !important; border-top: 2px solid #e9ecef !important; padding: 1rem !important; margin-top: 0 !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.15) !important; } .restart-exam { width: 100% !important; padding: 1rem 1.5rem !important; font-size: 1.1rem !important; min-height: 48px !important; border-radius: 6px !important; background: linear-gradient(135deg, #08749e, #003a57) !important; border: none !important; color: white !important; font-weight: 500 !important; } .exam-card { margin-bottom: 1rem !important; } } </style> <script> window.alAminUserContext = { isAuthenticated: false, userId: null, isAdmin: false }; </script> <script> // Mobile Lesson Exam Iframe Auto-Resize Fix document.addEventListener('DOMContentLoaded', function() { function initMobileIframeFix() { const examIframes = document.querySelectorAll('.exam-iframe'); if (examIframes.length === 0) return; function resizeExamIframe(iframe) { try { const iframeDoc = iframe.contentDocument || iframe.contentWindow.document; if (iframeDoc) { const height = Math.max( iframeDoc.documentElement.scrollHeight, iframeDoc.body.scrollHeight || 0 ); // Mobile responsive height calculation const isMobile = window.innerWidth <= 768; const minHeight = isMobile ? 500 : 600; const maxHeight = isMobile ? window.innerHeight * 0.7 : window.innerHeight * 0.8; const finalHeight = Math.min(Math.max(height, minHeight), maxHeight); iframe.style.height = finalHeight + 'px'; // Ensure exam actions button is visible and properly styled const examCard = iframe.closest('.exam-card'); if (examCard && isMobile) { const actionButton = examCard.querySelector('.restart-exam'); if (actionButton) { actionButton.style.width = '100%'; actionButton.style.minHeight = '48px'; actionButton.style.fontSize = '1.1rem'; } } } } catch (e) { // Cross-origin restrictions - set responsive default height const isMobile = window.innerWidth <= 768; const defaultHeight = isMobile ? 500 : 600; iframe.style.height = defaultHeight + 'px'; } } // Apply to all exam iframes examIframes.forEach(iframe => { iframe.addEventListener('load', () => { setTimeout(() => resizeExamIframe(iframe), 100); }); // Initial resize for already loaded iframes if (iframe.contentDocument || iframe.contentWindow) { setTimeout(() => resizeExamIframe(iframe), 100); } }); // Re-resize on window resize/orientation change let resizeTimeout; window.addEventListener('resize', function() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function() { examIframes.forEach(iframe => resizeExamIframe(iframe)); }, 250); }); } initMobileIframeFix(); }); </script> <script src="/js/lesson-pronunciation.js?v=aX5n05zSjVoqAGiekOJ93LLt3bSGPAoIrFAGEd6lWbo"></script> </body> </html>