.qcmf-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:840px;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.45;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:.85;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;flex-wrap:wrap}
.qcmf-cta{border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.qcmf-cta.primary{background:#4f46e5;color:#fff}
.qcmf-cta.secondary{background:#e5e7eb}
.qcmf-footer{margin-top:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.qcmf-meter{font-size:14px;color:#334155;background:#f1f5f9;padding:6px 10px;border-radius:8px}
.qcmf-encourage{font-size:14px;color:#1f2937}
.qcmf-note{font-size:clamp(20px,3vw,28px);font-weight:800}
@media (min-width:640px){.qcmf-options{grid-template-columns:1fr 1fr}}
(function(){
// ⚙️ Banque de questions
const QUESTIONS = [
// 1
{
question: « What is Tom’s role at school? »,
options: [
« He is the president of the Science Club. »,
« He is the football coach. »,
« He is the headmaster. »,
« He is the janitor. »
],
correctIndex: 0,
explications: [
« Correct: Tom is the president of the Science Club. »,
« Incorrect: He is a student, not a coach. »,
« Incorrect: He is not the headmaster. »,
« Incorrect: He is not the janitor. »
]
},
// 2
{
question: « Where does Tom usually stay at lunchtime? »,
options: [« At the cafeteria », « At the library », « At home », « In the gym »],
correctIndex: 1,
explications: [
« Incorrect: He never eats at the cafeteria. »,
« Correct: He often stays in the library. »,
« Incorrect: He is at school at lunchtime. »,
« Incorrect: The gym isn’t mentioned for lunch. »
]
},
// 3
{
question: « Why doesn’t Tom eat at the cafeteria? »,
options: [
« Because he doesn’t like it. »,
« Because it is too far. »,
« Because it is closed. »,
« Because he is allergic to bread. »
],
correctIndex: 0,
explications: [
« Correct: He never eats there because he doesn’t like it. »,
« Incorrect: Distance is not mentioned. »,
« Incorrect: The cafeteria is not closed. »,
« Incorrect: Allergies are not mentioned. »
]
},
// 4
{
question: « What does Tom usually eat for lunch? »,
options: [« Pizza », « Sandwiches », « Pasta », « Salad »],
correctIndex: 1,
explications: [
« Incorrect: Pizza isn’t mentioned. »,
« Correct: He always eats sandwiches. »,
« Incorrect: Pasta isn’t mentioned. »,
« Incorrect: Salad isn’t mentioned. »
]
},
// 5
{
question: « Which subjects does Tom have this morning? »,
options: [
« Technology and Social Studies »,
« Math and English »,
« Science and History »,
« Art and Music »
],
correctIndex: 0,
explications: [
« Correct: Technology and Social Studies are in the morning. »,
« Incorrect: Not in today’s plan. »,
« Incorrect: Not in today’s plan. »,
« Incorrect: Art is later; Music isn’t mentioned. »
]
},
// 6
{
question: « When does Tom have Art? »,
options: [« In the morning », « At lunchtime », « In the afternoon », « On Sunday »],
correctIndex: 2,
explications: [
« Incorrect: Morning is for Technology and Social Studies. »,
« Incorrect: There is no class at lunchtime. »,
« Correct: He has Art in the afternoon. »,
« Incorrect: Sunday school isn’t mentioned. »
]
},
// 7
{
question: « How often does Tom go swimming? »,
options: [« Once a week », « Twice a week », « Every day », « Only on holidays »],
correctIndex: 1,
explications: [
« Incorrect: It’s more than once. »,
« Correct: He goes swimming twice a week. »,
« Incorrect: Not every day. »,
« Incorrect: Holidays are not mentioned. »
]
},
// 8
{
question: « On which day is it mentioned that Tom goes swimming? »,
options: [« Monday », « Wednesday », « Friday », « Saturday »],
correctIndex: 1,
explications: [
« Incorrect: Monday isn’t mentioned. »,
« Correct: He goes swimming on Wednesdays. »,
« Incorrect: Friday isn’t mentioned. »,
« Incorrect: Saturday isn’t mentioned. »
]
},
// 9
{
question: « Which sentence best describes Tom’s personality? »,
options: [
« He is very talkative and lazy. »,
« He is athletic but not very talkative. »,
« He is shy and hates sports. »,
« He is loud and clumsy. »
],
correctIndex: 1,
explications: [
« Incorrect: He is not very talkative and he is athletic. »,
« Correct: Athletic + not very talkative. »,
« Incorrect: He is athletic, not a sport hater. »,
« Incorrect: This isn’t in the text. »
]
},
// 10
{
question: « Which grade is Tom in? »,
options: [« 6th grade », « 7th grade », « 8th grade », « 9th grade »],
correctIndex: 2,
explications: [
« Incorrect: Not 6th grade. »,
« Incorrect: Not 7th grade. »,
« Correct: He is in 8th grade. »,
« Incorrect: Not 9th grade. »
]
},
// 11
{
question: « Choose the grammatically correct sentence about his lunch. »,
options: [
« He always eat sandwiches. »,
« He always eats sandwiches. »,
« He always eating sandwiches. »,
« He always eaten sandwiches. »
],
correctIndex: 1,
explications: [
« Incorrect: In the 3rd person singular, add -s → “eats”. »,
« Correct: “He always eats sandwiches.” is correct. »,
« Incorrect: Wrong verb form (present continuous). »,
« Incorrect: Wrong tense (past participle). »
]
},
// 12
{
question: « What does Tom NEVER do at school lunchtime? »,
options: [
« Eat at the cafeteria »,
« Stay in the library »,
« Bring sandwiches »,
« Read books »
],
correctIndex: 0,
explications: [
« Correct: He never eats at the cafeteria. »,
« Incorrect: He often stays in the library. »,
« Incorrect: He always brings/eats sandwiches. »,
« Incorrect: Reading fits with staying in the library. »
]
},
// 13
{
question: « If you want to meet Tom at 12:30, where should you look first? »,
options: [« The library », « The art room », « The swimming pool », « The cafeteria »],
correctIndex: 0,
explications: [
« Correct: At lunchtime he often stays in the library. »,
« Incorrect: Art is in the afternoon, not during lunch. »,
« Incorrect: Swimming is on specific days, not at lunch. »,
« Incorrect: He avoids the cafeteria. »
]
},
// 14
{
question: « Which combination correctly matches TODAY’s schedule? »,
options: [
« Morning: Technology & Social Studies / Afternoon: Art »,
« Morning: Art / Afternoon: Technology & Social Studies »,
« Morning: English / Afternoon: PE »,
« Morning: History / Afternoon: Music »
],
correctIndex: 0,
explications: [
« Correct: That is exactly today’s schedule. »,
« Incorrect: It’s the other way round. »,
« Incorrect: Not mentioned in the text. »,
« Incorrect: Not mentioned in the text. »
]
},
// 15
{
question: « Which statement is TRUE about Tom? »,
options: [
« He likes the cafeteria food. »,
« He swims only once a month. »,
« He is the Science Club president. »,
« He studies Math and English today. »
],
correctIndex: 2,
explications: [
« Incorrect: He doesn’t like the cafeteria. »,
« Incorrect: He swims twice a week. »,
« Correct: He is the president of the Science Club. »,
« Incorrect: Today it’s Technology, Social Studies and Art. »
]
}
];
// 🔧 Moteur d’affichage
const elRoot = document.getElementById(« qcm-tom-lesson »);
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 »}, »Reading Quiz – Tom Spencer »),
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 = ()=>{
// lock buttons
[…opts.children].forEach(b=>{ if(b.tagName=== »BUTTON ») b.disabled=true; });
// feedback
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]);
const next = h(« button »,{class: »qcmf-cta primary »}, »Next »);
next.onclick = ()=>{ if(index=18 ? « Génial ! Tu maîtrises parfaitement 😎 » :
note>=14 ? « Bravo ! Tu es sur la bonne voie 💪 » :
note>=10 ? « Pas mal ! Encore un petit effort 🔁 » :
« Courage, tu peux y arriver ! Revois le texte et réessaie 🌟 »;
const card = h(« div »,{class: »qcmf-card »},
h(« h2″,{class: »qcmf-title »}, »Result »),
h(« p »,{class: »qcmf-note »},`Score: ${note.toFixed(1)}/20`),
h(« p »,{},`Correct answers: ${correct}/${QUESTIONS.length}`),
h(« p »,{class: »qcmf-encourage »},msg)
);
const again = h(« button »,{class: »qcmf-cta primary »}, »Restart »);
again.onclick = ()=>{ index = 0; correct = 0; render(); };
card.appendChild(again);
elRoot.appendChild(card);
}
render();
})();