Français 4ème : Exercice imparfait 1er 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-cta { border:none; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; margin-top:16px; } .qcmf-cta.primary { background:#4f46e5; color:#fff; } .qcmf-note { font-size: clamp(20px, 3vw, 28px); font-weight:800; margin-top:12px; } @media (min-width: 640px) { .qcmf-options { grid-template-columns: 1fr 1fr; } } (function(){ const QUESTIONS = [ { question: « Je (chanter) une chanson. », options: [« Je chantais », « Je chantait », « Je chantaient », « Je chanté »], correctIndex: 0, explications: [« Correct : terminaison -ais → je chantais. », « Erreur : terminaison -ait pour ‘il/elle’, pas pour ‘je’. », « Erreur : terminaison -aient est pour ‘ils/elles’. », « Erreur : ce n’est pas un imparfait. »]}, { question: « Tu (marcher) dans la rue. », options: [« Tu marchais », « Tu marchait », « Tu marchaient », « Tu marcher »], correctIndex: 0, explications: [« Correct : terminaison -ais → tu marchais. », « Erreur : -ait correspond à ‘il/elle’. », « Erreur : -aient correspond à ‘ils/elles’. », « Erreur : infinitif, pas imparfait. »]}, { question: « Il (regarder) la télévision. », options: [« Il regardais », « Il regardait », « Il regardaient », « Il regarda »], correctIndex: 1, explications: [« Erreur : terminaison -ais est pour ‘je/tu’. », « Correct : terminaison -ait → il regardait. », « Erreur : -aient est pluriel. », « Erreur : c’est du passé simple. »]}, { question: « Elle (jouer) au piano. », options: [« Elle jouait », « Elle jouais », « Elle jouaient », « Elle joue »], correctIndex: 0, explications: [« Correct : terminaison -ait → elle jouait. », « Erreur : -ais pour ‘je/tu’. », « Erreur : pluriel avec -aient. », « Erreur : présent. »]}, { question: « Nous (travailler) ensemble. », options: [« Nous travaillons », « Nous travaillait », « Nous travaillions », « Nous travaillions »], correctIndex: 2, explications: [« Erreur : présent. », « Erreur : terminaison fausse. », « Correct : nous travaillions. », « Correct aussi : forme identique. »]}, { question: « Vous (aimer) les histoires. », options: [« Vous aimiez », « Vous aimait », « Vous aimais », « Vous aiment »], correctIndex: 0, explications: [« Correct : terminaison -iez → vous aimiez. », « Erreur : -ait est pour ‘il/elle’. », « Erreur : -ais pour ‘je/tu’. », « Erreur : présent. »]}, { question: « Ils (danser) toute la soirée. », options: [« Ils dansait », « Ils dansaient », « Ils dansais », « Ils dansa »], correctIndex: 1, explications: [« Erreur : terminaison -ait pour singulier. », « Correct : -aient pour pluriel → ils dansaient. », « Erreur : -ais pour singulier. », « Erreur : passé simple. »]}, { question: « Elles (jouer) au ballon. », options: [« Elles jouaient », « Elles jouait », « Elles jouais », « Elles joue »], correctIndex: 0, explications: [« Correct : -aient pour pluriel. », « Erreur : -ait singulier. », « Erreur : -ais pour singulier. », « Erreur : présent. »]}, { question: « Je (penser) à mes vacances. », options: [« Je pensais », « Je pensait », « Je pensaient », « Je pense »], correctIndex: 0, explications: [« Correct : terminaison -ais. », « Erreur : -ait pour 3e pers. sing. », « Erreur : -aient pour pluriel. », « Erreur : présent. »]}, { question: « Tu (trouver) cela facile. », options: [« Tu trouvais », « Tu trouvait », « Tu trouvent », « Tu trouvaitent »], correctIndex: 0, explications: [« Correct : -ais pour tu. », « Erreur : -ait pour ‘il/elle’. », « Erreur : présent pluriel. », « Erreur : terminaison inventée. »]}, { question: « Il (aimer) beaucoup lire. », options: [« Il aimais », « Il aimait », « Il aiment », « Il aimé »], correctIndex: 1, explications: [« Erreur : -ais pour je/tu. », « Correct : -ait pour il/elle. », « Erreur : présent pluriel. », « Erreur : participe passé. »]}, { question: « Nous (fermer) la porte. », options: [« Nous fermions », « Nous fermaient », « Nous fermions », « Nous ferme »], correctIndex: 0, explications: [« Correct : nous fermions. », « Erreur : -aient est pour ils/elles. », « Correct aussi : même réponse. », « Erreur : présent. »]}, { question: « Vous (écouter) le professeur. », options: [« Vous écoutiez », « Vous écoutait », « Vous écoutez », « Vous écoutions »], correctIndex: 0, explications: [« Correct : -iez pour vous. », « Erreur : -ait pour singulier. », « Erreur : présent. », « Erreur : terminaison ‘nous’. »]}, { question: « Ils (marcher) dans le parc. », options: [« Ils marchaient », « Ils marchait », « Ils marchais », « Ils marche »], correctIndex: 0, explications: [« Correct : -aient pour ils. », « Erreur : -ait pour singulier. », « Erreur : -ais pour je/tu. », « Erreur : présent. »]}, { question: « Elles (chanter) très fort. », options: [« Elles chantait », « Elles chantaient », « Elles chantais », « Elles chante »], correctIndex: 1, explications: [« Erreur : singulier. », « Correct : pluriel → elles chantaient. », « Erreur : -ais pour je/tu. », « Erreur : présent. »]} ]; const elRoot=document.getElementById(« qcm-francais-imparfait1″); 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 – 1er 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]); opts.appendChild(fb); const next=h(« button »,{class: »qcmf-cta primary »}, »Suivant »); next.onclick=()=>{if(index{index=0;correct=0;render();} )); } render(); })();