.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:12px; } .qcmf-cta.primary { background:#4f46e5; color:#fff; } .qcmf-note { font-size: clamp(20px, 3vw, 28px); font-weight:800; } @media (min-width: 640px) { .qcmf-options { grid-template-columns: 1fr 1fr; } } (function(){ const QUESTIONS = [ { question: « What can you say to introduce yourself? », options: [« My name is Sarah. », « He name is Sarah. », « She name Sarah. », « I am called by Sarah. »], correctIndex: 0, explications: [ « Correct: ‘My name is Sarah.’ is the right way to introduce yourself. », « Error: ‘He’ is for a boy, wrong pronoun. », « Error: ‘She name Sarah’ is incorrect grammar. », « Error: ‘I am called by Sarah’ is not natural here. » ] }, { question: « Choose the correct sentence in Present Simple. », options: [« She play football. », « She plays football. », « She playing football. », « She played football. »], correctIndex: 1, explications: [ « Error: third person singular needs -s. », « Correct: ‘She plays football.’ is Present Simple. », « Error: ‘She playing’ → missing auxiliary. », « Error: ‘played’ is past tense. » ] }, { question: « What can you imagine about the boy? », options: [« He is 14 years old. », « He are 14 years old. », « He 14 years. », « He am 14. »], correctIndex: 0, explications: [ « Correct: ‘He is 14 years old.' », « Error: ‘He are’ → wrong verb. », « Error: missing verb ‘is’. », « Error: ‘He am’ → wrong verb. » ] }, { question: « Which is correct? », options: [« She come from Spain. », « She comes from Spain. », « She coming from Spain. », « She come Spain. »], correctIndex: 1, explications: [ « Error: needs -s for she. », « Correct: ‘She comes from Spain.' », « Error: ‘She coming’ needs auxiliary. », « Error: sentence incomplete. » ] }, { question: « Complete: I ____ in 8th grade. », options: [« am », « is », « are », « be »], correctIndex: 0, explications: [ « Correct: ‘I am’. », « Error: ‘I is’ is wrong. », « Error: ‘I are’ is wrong. », « Error: ‘I be’ is wrong. » ] }, { question: « Which sentence is correct? », options: [« They wants to be candidates. », « They want to be candidates. », « They wanting candidates. », « They wanted candidates. »], correctIndex: 1, explications: [ « Error: ‘They’ → no -s. », « Correct: ‘They want to be candidates.' », « Error: wrong form. », « Error: past tense. » ] }, { question: « Choose the correct justification. », options: [« I want to be representative because I am responsible. », « I want to be representative because I responsible. », « I want be representative because I am responsible. », « I wants to be representative because I am responsible. »], correctIndex: 0, explications: [ « Correct: full sentence, correct grammar. », « Error: missing ‘am’. », « Error: missing ‘to’. », « Error: wrong conjugation. » ] }, { question: « Which opinion is correct? », options: [« I think she is friendly. », « I thinks she is friendly. », « I think she friendly. », « I am think she is friendly. »], correctIndex: 0, explications: [ « Correct: ‘I think she is friendly.' », « Error: ‘I thinks’ → wrong verb form. », « Error: missing verb ‘is’. », « Error: ‘I am think’ → incorrect. » ] }, { question: « Find the correct question. », options: [« Where he live? », « Where does he live? », « Where he lives? », « Where do he live? »], correctIndex: 1, explications: [ « Error: needs auxiliary ‘does’. », « Correct: ‘Where does he live?' », « Error: wrong word order. », « Error: ‘do’ with ‘he’ is wrong. » ] }, { question: « Choose the correct plural form. », options: [« The students is voting. », « The student are voting. », « The students are voting. », « Students voting are. »], correctIndex: 2, explications: [ « Error: ‘students is’ wrong. », « Error: ‘student are’ mismatch. », « Correct: ‘The students are voting.' », « Error: word order incorrect. » ] }, { question: « What is wrong? ‘He don’t like sports.' », options: [« Correct sentence. », « It should be: He doesn’t like sports. », « It should be: He don’t likes sports. », « It should be: He isn’t like sports. »], correctIndex: 1, explications: [ « Error: it’s incorrect. », « Correct: ‘He doesn’t like sports.' », « Error: ‘don’t likes’ → double mistake. », « Error: ‘isn’t like’ → wrong verb. » ] }, { question: « Choose the correct ambition. », options: [« She wants to help the students. », « She want help the students. », « She wants helping students. », « She wanting to help students. »], correctIndex: 0, explications: [ « Correct: ‘She wants to help the students.' », « Error: missing ‘to’. », « Error: wrong form. », « Error: wrong form. » ] }, { question: « Which opinion is correct? », options: [« I don’t think elections is important. », « I don’t think elections are important. », « I no think elections are important. », « I not think elections are important. »], correctIndex: 1, explications: [ « Error: ‘elections is’ → plural needed. », « Correct: ‘elections are important.' », « Error: ‘I no think’ wrong. », « Error: ‘I not think’ wrong. » ] }, { question: « Which campaign promise is correct? », options: [« If I am elected, I organize parties. », « If I am elected, I will organize parties. », « If I elected, I will organize parties. », « If I am elect, I will organize parties. »], correctIndex: 1, explications: [ « Error: missing ‘will’. », « Correct: ‘If I am elected, I will organize parties.' », « Error: missing verb ‘am’. », « Error: wrong form of ‘elect’. » ] }, { question: « What do you say at the end of your speech? », options: [« Thank you for your attention. », « Thanks you for attention. », « Thank you for your attentions. », « Thank you your attention. »], correctIndex: 0, explications: [ « Correct: ‘Thank you for your attention.' », « Error: ‘Thanks you’ wrong form. », « Error: ‘attentions’ not plural here. », « Error: missing ‘for’. » ] } ]; const elRoot = document.getElementById(« qcm-english-election »); 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 »}, »Student Council Elections – English QCM »), 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 »}, »Next »); next.onclick=()=>{if(index{index=0;correct=0;render();};return btn;})() )); } render(); })();