.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: « Ni Paul ni ses amis (venir) ce soir. »,
options: [« vient », « viennent », « venait », « venons »],
correctIndex: 1,
explications: [
« Erreur : singulier, mais le sujet est pluriel (‘ni Paul ni ses amis’). »,
« Correct : accord au pluriel → viennent. »,
« Erreur : imparfait au lieu de présent. »,
« Erreur : terminaison ‘nous’. »
]
},
{
question: « Le groupe d’élèves (chanter) en chœur. »,
options: [« chantait », « chantaient », « chante », « chantes »],
correctIndex: 0,
explications: [
« Correct : ‘le groupe’ est singulier → chantait. »,
« Erreur : on n’accorde pas avec ‘élèves’, mais avec ‘groupe’. »,
« Erreur : temps incorrect. »,
« Erreur : orthographe fausse. »
]
},
{
question: « Les garçons comme les filles (participer) au voyage. »,
options: [« participait », « participaient », « participa », « participons »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : pluriel, car les deux groupes participent. »,
« Erreur : passé simple. »,
« Erreur : terminaison ‘nous’. »
]
},
{
question: « Chacun des élèves (apporter) son matériel. »,
options: [« apporte », « apportent », « apportait », « apportaient »],
correctIndex: 0,
explications: [
« Correct : ‘chacun’ est singulier → apporte. »,
« Erreur : accord avec élèves, mais on accorde avec ‘chacun’. »,
« Possible aussi si l’on met à l’imparfait. »,
« Erreur : pluriel incorrect. »
]
},
{
question: « Beaucoup d’enfants (jouer) dans la cour. »,
options: [« jouait », « jouaient », « joua », « jouons »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : pluriel → jouaient. »,
« Erreur : passé simple. »,
« Erreur : terminaison ‘nous’. »
]
},
{
question: « Un grand nombre de spectateurs (être) présents. »,
options: [« était », « étaient », « est », « sont »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : on accorde avec ‘spectateurs’ au pluriel → étaient. »,
« Erreur : présent singulier. »,
« Erreur : présent pluriel, mais phrase à l’imparfait. »
]
},
{
question: « L’un et l’autre (pouvoir) réussir. »,
options: [« pouvait », « pouvaient », « peut », « peuvent »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : pluriel (deux personnes). »,
« Erreur : présent singulier. »,
« Erreur : présent pluriel. »
]
},
{
question: « Le temps que tu (arriver), il faisait nuit. »,
options: [« arrivais », « arrivait », « arriva », « arrivons »],
correctIndex: 1,
explications: [
« Erreur : pronom sujet tu → mais la proposition est au subjonctif. »,
« Correct : il faut un subjonctif → que tu arrivât / arrivasses. (forme scolaire : ‘arrives’). »,
« Erreur : passé simple. »,
« Erreur : terminaison ‘nous’. »
]
},
{
question: « Ce sont Marie et ses frères qui (chanter). »,
options: [« chante », « chantent », « chantait », « chantons »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : accord avec ‘Marie et ses frères’ → pluriel. »,
« Erreur : imparfait. »,
« Erreur : terminaison ‘nous’. »
]
},
{
question: « Beaucoup d’entre elles (être) absentes. »,
options: [« étais », « était », « étaient », « êtes »],
correctIndex: 2,
explications: [
« Erreur : je/tu. »,
« Erreur : singulier. »,
« Correct : pluriel féminin → elles étaient. »,
« Erreur : présent pluriel. »
]
},
{
question: « Peu d’élèves (avoir) compris. »,
options: [« a », « ont », « avais », « avaient »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : pluriel → ont compris. »,
« Erreur : imparfait. »,
« Erreur : autre temps mais pas ici. »
]
},
{
question: « Ce ne sont pas moi qui (faire) l’erreur. »,
options: [« ai fait », « as fait », « a fait », « avons fait »],
correctIndex: 0,
explications: [
« Correct : c’est ‘moi’, donc accord avec je → ai fait. »,
« Erreur : accord avec tu, pas logique. »,
« Erreur : accord avec il/elle, faux. »,
« Erreur : accord avec nous, faux. »
]
},
{
question: « La plupart (penser) comme toi. »,
options: [« pense », « pensent », « pensait », « pensaient »],
correctIndex: 1,
explications: [
« Erreur : singulier. »,
« Correct : pluriel → pensent. »,
« Erreur : imparfait singulier. »,
« Erreur : imparfait pluriel (autre temps). »
]
},
{
question: « Plus d’un élève (répondre) correctement. »,
options: [« répond », « réponds », « répondent », « répondait »],
correctIndex: 0,
explications: [
« Correct : ‘plus d’un’ = singulier → répond. »,
« Erreur : terminaison tu. »,
« Erreur : pluriel, mais ici singulier. »,
« Erreur : imparfait. »
]
},
{
question: « Ce sont toi et moi qui (partir) demain. »,
options: [« pars », « part », « partons », « partent »],
correctIndex: 2,
explications: [
« Erreur : accord avec je, pas correct. »,
« Erreur : singulier. »,
« Correct : accord avec ‘toi et moi’ = nous → partons. »,
« Erreur : pluriel 3e pers., pas ici. »
]
}
];
const elRoot=document.getElementById(« qcm-francais-accords »);
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 »}, »Accords complexes Sujet / Verbe »),
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=15 ? « Bravo, tu maîtrises les accords complexes 🎯 » :
note>=10 ? « Bon travail, encore un effort et c’est parfait 👍 » :
« Courage, relis bien la règle et recommence 💡 »),
(()=>{
const btn=h(« button »,{class: »qcmf-cta primary »}, »Recommencer »);
btn.onclick=()=>{index=0;correct=0;render();};
return btn;
})()
));
}
render();
})();
.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(){
// 15 questions (progressives) : 1-5 sujet inversé ; 6-10 sujet éloigné ; 11-15 sujet séparé par pronom complément
const QUESTIONS = [
// Sujet inversé
{ question: « Au bout du chemin (apparaître) les maisons. »,
options: [« apparaît », « apparaissent », « apparurent », « apparaissait »],
correctIndex: 1,
explications: [
« Erreur : singulier, or le sujet ‘les maisons’ est pluriel. »,
« Correct : sujet inversé au pluriel → ‘les maisons’ → apparaissent. »,
« Erreur : passé simple, on reste au présent ici. »,
« Erreur : imparfait, pas le bon temps. »
]},
{ question: « Sur la table (se trouver) un livre et deux cahiers. »,
options: [« se trouve », « se trouvent », « s’est trouvé », « se trouvait »],
correctIndex: 1,
explications: [
« Erreur : le sujet réel est ‘un livre et deux cahiers’ (pluriel). »,
« Correct : pluriel → se trouvent. »,
« Erreur : passé composé. »,
« Erreur : imparfait. »
]},
{ question: « Dans le jardin (fleurir) les rosiers. »,
options: [« fleurit », « fleurissaient », « fleuriront », « fleurissent »],
correctIndex: 3,
explications: [
« Erreur : singulier ; le sujet ‘les rosiers’ est pluriel. »,
« Erreur : temps à l’imparfait. »,
« Erreur : futur ; on veut le présent. »,
« Correct : pluriel au présent → fleurissent. »
]},
{ question: « Au-dessus du village (passer) des nuages sombres. »,
options: [« passe », « passent », « passaient », « passera »],
correctIndex: 1,
explications: [
« Erreur : singulier ; sujet ‘des nuages’ = pluriel. »,
« Correct : accord au pluriel avec ‘des nuages’. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
{ question: « De la salle voisine (venir) des rires. »,
options: [« vient », « viennent », « venait », « viendra »],
correctIndex: 1,
explications: [
« Erreur : singulier ; ‘des rires’ = pluriel. »,
« Correct : sujet inversé pluriel → viennent. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
// Sujet éloigné
{ question: « Ces montagnes, aux sommets abrupts, (former) une barrière. »,
options: [« forme », « forment », « formaient », « formera »],
correctIndex: 1,
explications: [
« Erreur : singulier ; ‘Ces montagnes’ = pluriel. »,
« Correct : accord avec le sujet pluriel → forment. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
{ question: « Le bruit des voitures, tard dans la nuit, (empêcher) le sommeil. »,
options: [« empêchent », « empêche », « empêchait », « empêcheront »],
correctIndex: 1,
explications: [
« Erreur : on n’accorde pas avec ‘voitures’ mais avec ‘le bruit’ (singulier). »,
« Correct : sujet singulier ‘le bruit’ → empêche. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
{ question: « Les élèves, malgré la fatigue, (terminer) l’évaluation. »,
options: [« termine », « terminent », « terminaient », « termineront »],
correctIndex: 1,
explications: [
« Erreur : singulier ; ‘Les élèves’ = pluriel. »,
« Correct : pluriel → terminent. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
{ question: « La plupart des oiseaux du parc, effrayés par le vent, (se cacher) dans les arbres. »,
options: [« se cache », « se cachent », « s’est caché », « se cachera »],
correctIndex: 1,
explications: [
« Erreur : ‘la plupart des oiseaux’ appelle le pluriel. »,
« Correct : accord au pluriel → se cachent. »,
« Erreur : passé composé. »,
« Erreur : futur. »
]},
{ question: « Le directeur, ainsi que ses adjoints, (valider) le projet. »,
options: [« valident », « valide », « validaient », « validera »],
correctIndex: 1,
explications: [
« Erreur : avec ‘ainsi que’, on accorde avec le premier terme : ‘Le directeur’ (sing.). »,
« Correct : singulier → valide. »,
« Erreur : imparfait. »,
« Erreur : futur. »
]},
// Sujet séparé par un pronom complément
{ question: « Ils ne (le connaître) pas. »,
options: [« le connaît », « le connaissent », « l’ont connu », « le connaissaient »],
correctIndex: 1,
explications: [
« Erreur : 3e pers. sing. ; sujet = ‘Ils’. »,
« Correct : accord avec ‘Ils’ → connaissent (le pronom n’influence pas l’accord). »,
« Erreur : passé composé. »,
« Erreur : imparfait. »
]},
{ question: « Elle (les voir) souvent. »,
options: [« les voit », « les voient », « les a vus », « les voyait »],
correctIndex: 0,
explications: [
« Correct : accord avec ‘Elle’ (3e pers. sing.) → voit. »,
« Erreur : pluriel ; le sujet est singulier. »,
« Erreur : passé composé. »,
« Erreur : imparfait. »
]},
{ question: « Nous (l’entendre) à peine. »,
options: [« l’entend », « l’entendons », « l’entendent », « l’entendrait »],
correctIndex: 1,
explications: [
« Erreur : singulier ; sujet ‘Nous’. »,
« Correct : accord avec ‘Nous’ → entendons. »,
« Erreur : 3e pers. pluriel. »,
« Erreur : conditionnel, pas le bon mode. »
]},
{ question: « Vous ne (leur répondre) jamais. »,
options: [« leur répond », « leur répondez », « leur répondent », « leur répondiez »],
correctIndex: 1,
explications: [
« Erreur : singulier ; sujet ‘Vous’. »,
« Correct : présent, 2e pers. pl. → répondez (le pronom complément n’influence pas l’accord). »,
« Erreur : 3e pers. pluriel. »,
« Erreur : imparfait. »
]},
{ question: « Je (les accompagner) jusqu’à l’arrêt. »,
options: [« les accompagne », « les accompagnes », « les accompagnent », « les ai accompagnés »],
correctIndex: 0,
explications: [
« Correct : 1re pers. sing. → accompagne. »,
« Erreur : terminaison de ‘tu’. »,
« Erreur : terminaison de ‘ils’. »,
« Erreur : passé composé ; on reste au présent. »
]}
];
const elRoot = document.getElementById(« qcm-francais-accords-complexes »);
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 »}, »Accords complexes Sujet / Verbe »),
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 ? » ✅ » : » Astuce : identifie d’abord le vrai sujet ! 💡 »)
);
opts.appendChild(fb);
const next = h(« button »,{class: »qcmf-cta primary »}, »Suivant »);
next.onclick = ()=>{ if(index=15 ? « Excellent, tu maîtrises les accords complexes 🎯 » :
note>=10 ? « Bien joué ! Encore un petit effort 💪 » :
« Courage ! Repère le sujet avant le verbe 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();
})();