جدول اختبارات الفصل الثالث وأهم النصائح للتحضير المثالي

/* Scoped-ish styles (avoid affecting the host page too much) */ #arabic-timeline-tool .glass { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(2, 6, 23, 0.08); } #arabic-timeline-tool .ring-soft { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.12); } #arabic-timeline-tool .focus-outline:focus { outline: 3px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; } #arabic-timeline-tool .progressbar { height: 10px; border-radius: 9999px; overflow: hidden; background: rgba(15, 23, 42, 0.08); border: 1px solid rgba(15, 23, 42, 0.10); } #arabic-timeline-tool .progressbar > div { height: 100%; border-radius: 9999px; transition: width 280ms ease; } #arabic-timeline-tool .badge { border: 1px solid rgba(2, 6, 23, 0.12); background: rgba(255, 255, 255, 0.65); } #arabic-timeline-tool .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, « Liberation Mono », « Courier New », monospace; font-size: 12px; border: 1px solid rgba(2, 6, 23, 0.18); background: rgba(255, 255, 255, 0.7); padding: 2px 6px; border-radius: 8px; } /* Keep tool height reasonable (<= 2000px). Avoid huge expansion. */ #arabic-timeline-tool .timeline-scroll { max-height: 980px; overflow: auto; overscroll-behavior: contain; } /* APIs externes: – هذا الأدوات لا تحتاج لأي API خارجي. (صفر طلبات شبكة) – مثال (غير مستخدم): https://worldtimeapi.org/api/timezone/Africa/Algiers // مثال رد JSON: // { // « abbreviation »: »CET », // « client_ip »: »x.x.x.x », // « datetime »: »2026-05-30T10:12:34.123456+01:00″, // « timezone »: »Africa/Algiers », // « unixtime »:1780135954 // } */ (function () { // ====== I18N (French strings only, easily editable) ====== // Note: UI text inside the timeline remains exclusively Arabic as requested. const I18N_FR = { storageKey: « ar_timeline_term3_v1 », a11yProgressLabel: « مؤشر التقدّم العام », // Keep Arabic in UI; FR here only for easy edit if needed. copied: « تم النسخ. », copyFailed: « تعذّر النسخ. انسخ يدويًا. », }; // ====== Data (Arabic only for timeline content) ====== const DAYS = [ { day: 1, title: « تثبيت الأساسيات », tasks: « ملخصات + مفاهيم », goal: « تجميع أهم المفاهيم في ورقة واحدة ومراجعتها مرتين. », tip: « قسّم الوقت إلى 3 فترات قصيرة مع استراحة 5 دقائق بين كل فترة. », estMinutes: 70 }, { day: 2, title: « رياضيات بزمن محدد », tasks: « حل نموذج بزمن محدد + تصحيح », goal: « حل نموذج كامل مع ضبط الوقت ثم تدوين الأخطاء المتكررة. », tip: « ابدأ بالأسئلة السهلة أولًا لضمان نقاط سريعة ثم ارجع للصعب. », estMinutes: 90 }, { day: 3, title: « علوم », tasks: « مخططات + أسئلة علّل », goal: « رسم/مراجعة مخططين على الأقل والإجابة عن 6 أسئلة علّل. », tip: « استخدم قاعدة 25/5: 25 دقيقة تركيز + 5 دقائق مراجعة سريعة. », estMinutes: 75 }, { day: 4, title: « لغة عربية », tasks: « فهم نص + قواعد + كتابة », goal: « حل فهم نص واحد + مراجعة قاعدتين + كتابة فقرة قصيرة. », tip: « خصص 10 دقائق للتخطيط قبل الكتابة لتجنب إعادة الصياغة. », estMinutes: 85 }, { day: 5, title: « لغة أجنبية », tasks: « مفردات + قواعد + تعبير قصير », goal: « حفظ 15 مفردة + تطبيق قاعدة واحدة + كتابة تعبير من 6 أسطر. », tip: « اجعل آخر 10 دقائق لمراجعة المفردات بطريقة البطاقات السريعة. », estMinutes: 70 }, { day: 6, title: « مراجعة شاملة », tasks: « مراجعة أخطاء الأسبوع + نموذج شامل », goal: « تلخيص الأخطاء في قائمة واحدة ثم حل نموذج شامل مع التصحيح. », tip: « لا تكرر نفس الخطأ: اكتب «سبب الخطأ» بجانب كل سؤال. », estMinutes: 100 }, { day: 7, title: « راحة نشطة », tasks: « نوم مبكر + ترتيب الأدوات + قراءة خفيفة », goal: « استعادة الطاقة وتجهيز الأدوات وخطة الغد بدون ضغط. », tip: « ابتعد عن الشاشات قبل النوم بـ 30 دقيقة لتحسين التركيز. », estMinutes: 50 } ]; // ====== State ====== const defaultState = { activeDay: 1, compact: false, onlyIncomplete: false, sessionMinutes: 45, energyLevel: 3, perDay: DAYS.reduce((acc, d) => { acc[String(d.day)] = { done: false, progress: 0 }; // progress 0..100 return acc; }, {}) }; function loadState() { try { const raw = localStorage.getItem(I18N_FR.storageKey); if (!raw) return structuredClone(defaultState); const parsed = JSON.parse(raw); // minimal validation / merging const state = structuredClone(defaultState); state.activeDay = clampInt(parsed.activeDay ?? 1, 1, 7); state.compact = !!parsed.compact; state.onlyIncomplete = !!parsed.onlyIncomplete; state.sessionMinutes = clampInt(parsed.sessionMinutes ?? 45, 10, 180); state.energyLevel = clampInt(parsed.energyLevel ?? 3, 1, 5); if (parsed.perDay && typeof parsed.perDay === « object ») { for (const d of DAYS) { const k = String(d.day); const v = parsed.perDay[k]; if (v) { state.perDay[k].done = !!v.done; state.perDay[k].progress = clampInt(v.progress ?? 0, 0, 100); } } } return state; } catch { return structuredClone(defaultState); } } function saveState() { localStorage.setItem(I18N_FR.storageKey, JSON.stringify(state)); } function clampInt(n, min, max) { const x = Number.isFinite(+n) ? Math.trunc(+n) : min; return Math.max(min, Math.min(max, x)); } function pct(n) { return `${Math.max(0, Math.min(100, n))}%`; } let state = loadState(); // ====== Elements ====== const $ = (sel) => document.querySelector(sel); const timelineEl = $(« #timeline »); const overallTextEl = $(« #overallText »); const overallBarEl = $(« #overallBar »); const overallBarWrap = timelineEl.closest(« #arabic-timeline-tool »).querySelector(‘[role= »progressbar »]’); const activeDayBadgeEl = $(« #activeDayBadge »); const focusTitleEl = $(« #focusTitle »); const focusGoalEl = $(« #focusGoal »); const focusTipEl = $(« #focusTip »); const sessionMinutesEl = $(« #sessionMinutes »); const energyLevelEl = $(« #energyLevel »); const energySuggestionEl = $(« #energySuggestion »); const sessionEstimateEl = $(« #sessionEstimate »); const toggleCompactEl = $(« #toggleCompact »); const toggleOnlyIncompleteEl = $(« #toggleOnlyIncomplete »); const btnMarkAllEl = $(« #btnMarkAll »); const btnResetEl = $(« #btnReset »); const btnExportEl = $(« #btnExport »); const btnFocusActiveEl = $(« #btnFocusActive »); const liveRegionEl = $(« #liveRegion »); const modalEl = $(« #exportModal »); const btnCloseModalEl = $(« #btnCloseModal »); const exportTextEl = $(« #exportText »); const btnCopyEl = $(« #btnCopy »); const btnSelectAllEl = $(« #btnSelectAll »); const copyStatusEl = $(« #copyStatus »); // ====== Render ====== function render() { // Controls sessionMinutesEl.value = String(state.sessionMinutes); energyLevelEl.value = String(state.energyLevel); toggleCompactEl.checked = state.compact; toggleOnlyIncompleteEl.checked = state.onlyIncomplete; // Active day badge activeDayBadgeEl.textContent = `اليوم ${state.activeDay}`; // Focus panel const dayObj = DAYS.find(d => d.day === state.activeDay) || DAYS[0]; focusTitleEl.textContent = `${dayObj.title} — ${dayObj.tasks}`; focusGoalEl.textContent = dayObj.goal; focusTipEl.textContent = dayObj.tip; // Energy suggestion (Arabic) energySuggestionEl.textContent = getEnergySuggestion(state.energyLevel); // Estimate sessions const sessions = Math.max(1, Math.ceil(dayObj.estMinutes / state.sessionMinutes)); sessionEstimateEl.textContent = `${sessions} جلسة تقريبًا (≈ ${dayObj.estMinutes} دقيقة)`; // Overall progress const doneCount = DAYS.filter(d => state.perDay[String(d.day)].done).length; overallTextEl.textContent = `${doneCount} من 7 أيام مكتملة`; const overallPct = Math.round((doneCount / 7) * 100); overallBarEl.style.width = pct(overallPct); overallBarWrap.setAttribute(« aria-valuenow », String(doneCount)); // Timeline items const items = []; for (const d of DAYS) { const key = String(d.day); const s = state.perDay[key]; if (state.onlyIncomplete && s.done) continue; const isActive = d.day === state.activeDay; items.push(renderItem(d, s, isActive)); } timelineEl.innerHTML = items.join(«  »); // Attach listeners to injected nodes bindItemEvents(); } function renderItem(d, s, isActive) { const compact = state.compact; const done = s.done; const progress = clampInt(s.progress, 0, 100); const outerClass = [ « group », « relative », « rounded-3xl », « border », « border-slate-900/10 », « bg-white/70 », « p-4 », « md:p-5 », « transition », « hover:bg-white/80 », isActive ? « ring-soft » : «  » ].join( » « ); const dotClass = done ? « bg-emerald-500 » : (isActive ? « bg-blue-600 » : « bg-slate-400 »); const statusText = done ? « مكتمل » : « غير مكتمل »; const compactBlock = compact ? « hidden » : «  »; return `

${d.day}

${d.title}

${statusText} إنجاز: ${progress}%

${d.tasks}

اكتمل عرض

الهدف

${d.goal}

نصيحة الوقت

${d.tip}

تقدير الزمن

≈ ${d.estMinutes} دقيقة

مؤشر الإنجاز

${progress}%

اقتراح: ارفع المؤشر بعد كل جلسة قصيرة بدلًا من الانتظار حتى نهاية اليوم.

`; } function bindItemEvents() { // Event delegation on timeline container timelineEl.onclick = (e) => { const btn = e.target.closest(« [data-action] »); if (!btn) return; const card = e.target.closest(« [data-day] »); if (!card) return; const day = clampInt(card.getAttribute(« data-day »), 1, 7); const action = btn.getAttribute(« data-action »); if (action === « select-day ») { setActiveDay(day, true); } else if (action === « toggle-done ») { const key = String(day); state.perDay[key].done = !state.perDay[key].done; // If marked done, snap progress to 100; if un-done keep current progress if (state.perDay[key].done) state.perDay[key].progress = Math.max(state.perDay[key].progress, 100); announce(`تم تحديث حالة اليوم ${day}.`); saveState(); render(); } else if (action === « jump ») { setActiveDay(day, false); card.scrollIntoView({ behavior: « smooth », block: « start » }); } }; timelineEl.oninput = (e) => { const input = e.target.closest(‘input[type= »range »][data-action= »progress »]’); if (!input) return; const card = e.target.closest(« [data-day] »); if (!card) return; const day = clampInt(card.getAttribute(« data-day »), 1, 7); const key = String(day); const val = clampInt(input.value, 0, 100); state.perDay[key].progress = val; // Auto mark done if 100%, otherwise keep done false unless user set it if (val === 100) state.perDay[key].done = true; if (val (liveRegionEl.textContent = «  »), 900); } // ====== Top controls ====== btnMarkAllEl.addEventListener(« click », () => { for (const d of DAYS) { const k = String(d.day); state.perDay[k].done = true; state.perDay[k].progress = 100; } announce(« تم إكمال جميع الأيام. »); saveState(); render(); }); btnResetEl.addEventListener(« click », () => { state = structuredClone(defaultState); saveState(); announce(« تمت إعادة الضبط. »); render(); }); toggleCompactEl.addEventListener(« change », () => { state.compact = toggleCompactEl.checked; saveState(); render(); }); toggleOnlyIncompleteEl.addEventListener(« change », () => { state.onlyIncomplete = toggleOnlyIncompleteEl.checked; saveState(); render(); }); sessionMinutesEl.addEventListener(« input », () => { state.sessionMinutes = clampInt(sessionMinutesEl.value, 10, 180); saveState(); render(); }); energyLevelEl.addEventListener(« input », () => { state.energyLevel = clampInt(energyLevelEl.value, 1, 5); saveState(); render(); }); btnFocusActiveEl.addEventListener(« click », () => { const el = timelineEl.querySelector(`[data-day= »${state.activeDay} »]`); if (el) el.scrollIntoView({ behavior: « smooth », block: « start » }); }); // ====== Keyboard navigation (←/→) ====== // In RTL, ArrowLeft often means « next » visually, but key meaning is logical. // We’ll map: // ArrowRight: previous day, ArrowLeft: next day (more natural in RTL timeline). window.addEventListener(« keydown », (e) => { if (modalIsOpen()) return; if (e.key === « ArrowLeft ») { e.preventDefault(); setActiveDay(state.activeDay + 1, true); } else if (e.key === « ArrowRight ») { e.preventDefault(); setActiveDay(state.activeDay – 1, true); } }); // ====== Export modal ====== btnExportEl.addEventListener(« click », () => { exportTextEl.value = buildExportText(); openModal(); }); btnCloseModalEl.addEventListener(« click », closeModal); modalEl.addEventListener(« click », (e) => { if (e.target === modalEl.querySelector(« .absolute.inset-0 »)) closeModal(); }); btnSelectAllEl.addEventListener(« click », () => { exportTextEl.focus(); exportTextEl.select(); }); btnCopyEl.addEventListener(« click », async () => { copyStatusEl.textContent = «  »; try { await navigator.clipboard.writeText(exportTextEl.value); copyStatusEl.textContent = I18N_FR.copied; // FR string (editable) } catch { copyStatusEl.textContent = I18N_FR.copyFailed; // FR string (editable) } }); window.addEventListener(« keydown », (e) => { if (e.key === « Escape » && modalIsOpen()) closeModal(); }); function buildExportText() { const lines = []; lines.push(« خطة مراجعة الفصل الثالث — التقدّم الحالي »); lines.push(« ——————————–« ); for (const d of DAYS) { const s = state.perDay[String(d.day)]; const status = s.done ? « مكتمل » : « غير مكتمل »; lines.push(`اليوم ${d.day}: ${d.title} | ${status} | إنجاز ${clampInt(s.progress,0,100)}%`); } const doneCount = DAYS.filter(d => state.perDay[String(d.day)].done).length; lines.push(« ——————————–« ); lines.push(`الإجمالي: ${doneCount}/7`); return lines.join(« n »); } function openModal() { modalEl.classList.remove(« hidden »); copyStatusEl.textContent = «  »; setTimeout(() => exportTextEl.focus(), 50); } function closeModal() { modalEl.classList.add(« hidden »); copyStatusEl.textContent = «  »; } function modalIsOpen() { return !modalEl.classList.contains(« hidden »); } // ====== Init ====== render(); })();