.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; }
.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: « Passe du présent à l’imparfait : « Je chante tous les jours. » »,
options: [« Je chantais tous les jours. », « Je chantait tous les jours. », « Je chanta tous les jours. », « Je chanterai tous les jours. »],
correctIndex: 0,
explications: [
« Correct : imparfait → radical ‘chant-’ + -ais : je chantais. »,
« Erreur : -ait = 3e personne singulier, pas ‘je’. »,
« Erreur : passé simple, pas imparfait. »,
« Erreur : futur simple, pas imparfait. »
]
},
{
question: « « Tu regardes la télé. » → à l’imparfait : »,
options: [« Tu regardais la télé. », « Tu regardait la télé. », « Tu regardes la télé. », « Tu regarderais la télé. »],
correctIndex: 0,
explications: [
« Correct : terminaison -ais pour ‘tu’. »,
« Erreur : -ait = il/elle. »,
« Erreur : c’est le présent, on veut l’imparfait. »,
« Erreur : conditionnel, pas imparfait. »
]
},
{
question: « « Il mange une pomme. » → à l’imparfait : »,
options: [« Il mangeait une pomme. », « Il mangeaits une pomme. », « Il mangea une pomme. », « Il mangerait une pomme. »],
correctIndex: 0,
explications: [
« Correct : verbe en -ger → ‘mangeait’. »,
« Erreur : terminaison inventée. »,
« Erreur : passé simple. »,
« Erreur : conditionnel. »
]
},
{
question: « « Elle commence ses devoirs. » → à l’imparfait : »,
options: [« Elle commençait ses devoirs. », « Elle commencait ses devoirs. », « Elle commença ses devoirs. », « Elle commence ses devoirs. »],
correctIndex: 0,
explications: [
« Correct : devant ‘a’, on met la cédille : commençait. »,
« Erreur : il manque la cédille (ç). »,
« Erreur : passé simple. »,
« Erreur : c’est le présent. »
]
},
{
question: « « Nous jouons au foot. » → à l’imparfait : »,
options: [« Nous jouions au foot. », « Nous jouons au foot. », « Nous jouaient au foot. », « Nous jouaions au foot. »],
correctIndex: 0,
explications: [
« Correct : nous jouions (terminaison -ions). »,
« Erreur : présent. »,
« Erreur : terminaison de ‘ils’. »,
« Erreur : orthographe (pas de double voyelle ici). »
]
},
{
question: « « Vous regardez la mer. » → à l’imparfait : »,
options: [« Vous regardiez la mer. », « Vous regardait la mer. », « Vous regardez la mer. », « Vous regarderiez la mer. »],
correctIndex: 0,
explications: [
« Correct : terminaison -iez pour ‘vous’. »,
« Erreur : -ait = 3e pers. sing. »,
« Erreur : présent. »,
« Erreur : conditionnel. »
]
},
{
question: « « Ils finissent leurs exercices. » → à l’imparfait : »,
options: [« Ils finissaient leurs exercices. », « Ils finissaientt leurs exercices. », « Ils finit leurs exercices. », « Ils finissent leurs exercices. »],
correctIndex: 0,
explications: [
« Correct : verbe du 2e groupe → -issaient. »,
« Erreur : double ‘t’ inutile. »,
« Erreur : accord/terminaison incorrects. »,
« Erreur : présent. »
]
},
{
question: « « Elles choisissent un film. » → à l’imparfait : »,
options: [« Elles choisissaient un film. », « Elles choisissait un film. », « Elles choisisaient un film. », « Elles choisirent un film. »],
correctIndex: 0,
explications: [
« Correct : imparfait pluriel → -aient. »,
« Erreur : -ait = singulier. »,
« Erreur : orthographe du radical (*choisiss-*). »,
« Erreur : passé simple. »
]
},
{
question: « « Je suis fatigué. » → à l’imparfait : »,
options: [« J’étais fatigué. », « Je étais fatigué. », « Je suis fatigué. », « Je fus fatigué. »],
correctIndex: 0,
explications: [
« Correct : seul irrégulier → radical ‘ét-’ : j’étais. »,
« Erreur : élision obligatoire → j’étais. »,
« Erreur : présent. »,
« Erreur : passé simple. »
]
},
{
question: « « Tu as faim. » → à l’imparfait : »,
options: [« Tu avais faim. », « Tu avait faim. », « Tu as eu faim. », « Tu aurais faim. »],
correctIndex: 0,
explications: [
« Correct : tu avais. »,
« Erreur : -ait = il/elle. »,
« Erreur : passé composé. »,
« Erreur : conditionnel. »
]
},
{
question: « « Nous voyageons souvent. » → à l’imparfait : »,
options: [« Nous voyagions souvent. », « Nous voyageions souvent. », « Nous voyageons souvent. », « Nous voyageâmes souvent. »],
correctIndex: 0,
explications: [
« Correct : verbe en -ger → on garde le ‘e’ : voyagions. »,
« Erreur : *-eions* n’existe pas à l’imparfait. »,
« Erreur : présent. »,
« Erreur : passé simple. »
]
},
{
question: « « Vous commencez tôt. » → à l’imparfait : »,
options: [« Vous commenciez tôt. », « Vous commençiez tôt. », « Vous commencez tôt. », « Vous commencaiez tôt. »],
correctIndex: 0,
explications: [
« Correct : pas de cédille devant ‘i’ → commenciez. »,
« Erreur : on ne met pas de cédille avec ‘i’. »,
« Erreur : présent. »,
« Erreur : orthographe fautive. »
]
},
{
question: « « Il voit la solution. » → à l’imparfait : »,
options: [« Il voyait la solution. », « Il voyaient la solution. », « Il voit la solution. », « Il voyaitt la solution. »],
correctIndex: 0,
explications: [
« Correct : il voyait. »,
« Erreur : pluriel pour ‘ils’. »,
« Erreur : présent. »,
« Erreur : double ‘t’ inutile. »
]
},
{
question: « « Nous nous écrivons chaque semaine. » → à l’imparfait : »,
options: [« Nous nous écrivions chaque semaine. », « Nous nous écrivait chaque semaine. », « Nous nous écrivons chaque semaine. », « Nous nous écririons chaque semaine. »],
correctIndex: 0,
explications: [
« Correct : verbe pronominal → nous nous écrivions. »,
« Erreur : -ait = 3e pers. sing. »,
« Erreur : présent. »,
« Erreur : conditionnel. »
]
},
{
question: « « Elles prennent le bus. » → à l’imparfait : »,
options: [« Elles prenaient le bus. », « Elles prenait le bus. », « Elles prirent le bus. », « Elles prennent le bus. »],
correctIndex: 0,
explications: [
« Correct : radical ‘pren-’ + -aient : elles prenaient. »,
« Erreur : -ait = singulier. »,
« Erreur : passé simple. »,
« Erreur : présent. »
]
}
];
const elRoot = document.getElementById(« qcm-francais-present-imparfait »);
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 »}, »Passage du présent à l’imparfait (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, relis la terminaison ! 💡 »)
);
opts.appendChild(fb);
const next = h(« button »,{class: »qcmf-cta primary »}, »Suivant »);
next.onclick = ()=>{ if(index=15 ? « Excellent ! Tu gères l’imparfait 🔥 » :
note>=10 ? « Bien joué ! Encore un petit effort 👍 » :
« Pas grave ! Revois les terminaisons et réessaie 😉 »),
(()=>{
const btn = h(« button »,{class: »qcmf-cta primary »}, »Recommencer »);
btn.onclick = ()=>{ index=0; correct=0; render(); };
return btn;
})()
);
elRoot.appendChild(card);
}
render();
})();