Français 4ème : Exercice imparfait 3ème groupe

.qcmf-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; max-width: 800px; margin: 24px auto; padding: 16px; } .qcmf-card { background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 24px; } .qcmf-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; gap:12px; flex-wrap: wrap; } .qcmf-title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; margin:0; } .qcmf-badge { font-size:12px; padding:6px 10px; border-radius:999px; background:#f2f4f7; } .qcmf-progress { height:10px; background:#eef2f7; border-radius:999px; overflow:hidden; margin:12px 0 20px; } .qcmf-progress > div { height:100%; width:0; background: linear-gradient(90deg,#4f46e5,#22c55e); transition: width .35s ease; } .qcmf-question { font-size: clamp(18px, 2.6vw, 22px); line-height: 1.4; margin: 10px 0 14px; } .qcmf-options { display:grid; gap:12px; grid-template-columns: 1fr; } .qcmf-btn { border:1px solid #e5e7eb; background:#fff; border-radius: 12px; padding: 12px 14px; text-align:left; cursor:pointer; font-size:16px; transition: transform .06s ease, border-color .2s, background .2s; color:#111; } .qcmf-btn:hover { transform: translateY(-1px); border-color:#c7d2fe; background:#f8fafc; } .qcmf-btn[disabled] { opacity:.8; cursor:not-allowed; } .qcmf-btn.correct { border-color:#22c55e; background:#ecfdf5; } .qcmf-btn.wrong { border-color:#ef4444; background:#fef2f2; } .qcmf-feedback { margin-top: 12px; padding: 12px 14px; border-left: 4px solid #e5e7eb; border-radius:10px; background:#f8fafc; font-size:14px; } .qcmf-feedback.good { border-color:#22c55e; background:#ecfdf5; } .qcmf-feedback.bad { border-color:#ef4444; background:#fef2f2; } .qcmf-actions { display:flex; gap:10px; margin-top:16px; } .qcmf-cta { border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; } .qcmf-cta.primary { background:#4f46e5; color:#fff; } .qcmf-note { font-size: clamp(20px, 3vw, 28px); font-weight:800; margin-top:12px; } .qcmf-encourage { font-size:14px; color:#1f2937; margin-top:8px; } @media (min-width: 640px) { .qcmf-options { grid-template-columns: 1fr 1fr; } } (function(){ const QUESTIONS = [ { question: « Je (prendre) mon sac. », options: [« Je prenais », « Je prendais », « Je pris », « Je prendait »], correctIndex: 0, explications: [ « Correct : imparfait → radical ‘pren-’ + -ais : je prenais. », « Erreur : *prendais* n’existe pas (on écrit *prenais*). », « Erreur : *je pris* = passé simple, pas imparfait. », « Erreur : terminaison -ait pour il/elle, pas pour je. » ] }, { question: « Tu (venir) souvent ici. », options: [« Tu venais », « Tu venait », « Tu viens », « Tu venaient »], correctIndex: 0, explications: [ « Correct : tu venais (terminaison -ais). », « Erreur : -ait = 3e pers. singulier. », « Erreur : c’est le présent. », « Erreur : -aient = 3e pers. pluriel. » ] }, { question: « Il (dire) la vérité. », options: [« Il disais », « Il disait », « Il dirait », « Il dit »], correctIndex: 1, explications: [ « Erreur : -ais pour je/tu. », « Correct : il disait (terminaison -ait). », « Erreur : conditionnel, pas imparfait. », « Erreur : présent ou passé simple selon le contexte. » ] }, { question: « Elle (faire) du sport. », options: [« Elle faisais », « Elle faisait », « Elle fessait », « Elle fit »], correctIndex: 1, explications: [ « Erreur : -ais pour je/tu. », « Correct : verbe *faire* → elle faisait. », « Erreur : orthographe incorrecte. », « Erreur : passé simple (*elle fit*). » ] }, { question: « Nous (voir) la mer. », options: [« Nous voyions », « Nous voyons », « Nous voyait », « Nous voyionss »], correctIndex: 0, explications: [ « Correct : double ‘i’ → nous voyions. », « Erreur : présent. », « Erreur : terminaison de il/elle (-ait). », « Erreur : orthographe inventée. » ] }, { question: « Vous (pouvoir) entrer. », options: [« Vous pouviez », « Vous pouvait », « Vous pouvez », « Vous pouvaient »], correctIndex: 0, explications: [ « Correct : imparfait → vous pouviez. », « Erreur : -ait = 3e pers. singulier. », « Erreur : présent. », « Erreur : -aient = 3e pers. pluriel. » ] }, { question: « Ils (vouloir) apprendre. », options: [« Ils voulait », « Ils voulaient », « Ils voulez », « Ils voulut »], correctIndex: 1, explications: [ « Erreur : -ait pour singulier. », « Correct : ils voulaient (terminaison -aient). », « Erreur : présent 2e pers. pluriel. », « Erreur : passé simple. » ] }, { question: « Elles (devoir) partir. », options: [« Elles devait », « Elles devaient », « Elles doivent », « Elles devions »], correctIndex: 1, explications: [ « Erreur : -ait pour singulier. », « Correct : elles devaient. », « Erreur : présent. », « Erreur : terminaison ‘nous’. » ] }, { question: « Je (savoir) la réponse. », options: [« Je savais », « Je savait », « Je su », « Je savoir »], correctIndex: 0, explications: [ « Correct : je savais. », « Erreur : -ait pour il/elle. », « Erreur : passé simple (*je sus*), pas imparfait. », « Erreur : infinitif. » ] }, { question: « Tu (écrire) une carte. », options: [« Tu écrivais », « Tu écrivait », « Tu écrivit », « Tu écris »], correctIndex: 0, explications: [ « Correct : tu écrivais. », « Erreur : -ait pour 3e pers. sing. », « Erreur : passé simple. », « Erreur : présent. » ] }, { question: « Il (lire) un roman. », options: [« Il lisais », « Il lisait », « Il lissait », « Il lit »], correctIndex: 1, explications: [ « Erreur : -ais pour je/tu. », « Correct : il lisait. », « Erreur : autre verbe (*lisser*). », « Erreur : présent ou passé simple selon le contexte. » ] }, { question: « Nous (mettre) la table. », options: [« Nous mettions », « Nous mettons », « Nous mettait », « Nous mettionss »], correctIndex: 0, explications: [ « Correct : nous mettions. », « Erreur : présent. », « Erreur : -ait pour il/elle. », « Erreur : orthographe inventée. » ] }, { question: « Vous (boire) de l’eau. », options: [« Vous buviez », « Vous buvez », « Vous buvaient », « Vous buvais »], correctIndex: 0, explications: [ « Correct : vous buviez. », « Erreur : présent. », « Erreur : terminaison pluriel 3e pers. », « Erreur : terminaison ‘je/tu’. » ] }, { question: « Ils (partir) tôt. », options: [« Ils partaient », « Ils partait », « Ils partirent », « Ils partaientt »], correctIndex: 0, explications: [ « Correct : ils partaient. », « Erreur : -ait singulier. », « Erreur : passé simple. », « Erreur : orthographe incorrecte. » ] }, { question: « Elles (ouvrir) la porte. », options: [« Elles ouvraient », « Elles ouvrait », « Elles ouvrirent », « Elles ouvriers »], correctIndex: 0, explications: [ « Correct : elles ouvraient. », « Erreur : -ait singulier. », « Erreur : passé simple. », « Erreur : mot sans rapport. » ] } ]; const elRoot = document.getElementById(« qcm-francais-imparfait3 »); let index = 0, correct = 0; const h = (t, a = {}, …c) => { const e = document.createElement(t); for (const [k, v] of Object.entries(a || {})) { if (k === « class ») e.className = v; else if (k === « html ») e.innerHTML = v; else e.setAttribute(k, v); } c.forEach(x => { if (x != null) e.appendChild(typeof x === « string » ? document.createTextNode(x) : x); }); return e; }; function render(){ elRoot.innerHTML = «  »; const q = QUESTIONS[index]; const header = h(« div »,{class: »qcmf-header »}, h(« h2″,{class: »qcmf-title »}, »Imparfait – 3ème groupe (Français 4ème) »), h(« span »,{class: »qcmf-badge »},`Question ${index+1}/${QUESTIONS.length}`) ); const progress = h(« div »,{class: »qcmf-progress »}, h(« div »,{style:`width:${(index/QUESTIONS.length)*100}%`})); const opts = h(« div »,{class: »qcmf-options »}); q.options.forEach((opt,i)=>{ const btn = h(« button »,{class: »qcmf-btn »},opt); btn.onclick = ()=>{ […opts.children].forEach(b=>b.disabled=true); if(i===q.correctIndex){ correct++; btn.classList.add(« correct »); } else { btn.classList.add(« wrong »); } const fb = h(« div »,{class: »qcmf-feedback « +(i===q.correctIndex? »good »: »bad »)}, q.explications[i] + (i===q.correctIndex ?  » 💪 » :  » Courage, tu vas y arriver ! 💡 ») ); opts.appendChild(fb); const next = h(« button »,{class: »qcmf-cta primary »}, »Suivant »); next.onclick = ()=>{ if(index=15 ? « Excellent ! Continue sur ta lancée 🔥 » : note>=10 ? « Bien joué ! Encore un petit effort et ce sera parfait 👍 » : « Pas grave ! Recommence et observe bien les terminaisons 😉 »), (()=>{ const btn = h(« button »,{class: »qcmf-cta primary »}, »Recommencer »); btn.onclick = ()=>{ index=0; correct=0; render(); }; return btn; })() ); elRoot.appendChild(card); } render(); })();