:root{
–bg:#f6f9fc; –card:#ffffff; –text:#0b1720; –muted:#556677;
–primary:#0ea5e9; –success:#16a34a; –danger:#ef4444;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
margin:0; padding:10px; background:var(–bg);
font-family:”Noto Sans Bengali”, Arial, sans-serif;
color:var(–text);
}
.container{
width:100%; max-width:100%; margin:0 auto;
background:var(–card); border-radius:12px;
padding:15px; box-shadow:0 4px 16px rgba(0,0,0,0.05);
}
header h1{font-size:20px;margin-bottom:6px}
header p{font-size:14px;color:var(–muted);margin-bottom:12px}
.controls{
display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px
}
.controls button,.controls select{
flex:1 1 auto; min-width:90px;
background:#fff; border:1px solid #ddd;
padding:6px 8px; border-radius:8px; cursor:pointer;
font-size:14px; text-align:center
}
.controls .primary{background:var(–primary);color:#fff;border:none}
.progress{height:8px;background:#eef6fb;border-radius:999px;overflow:hidden;margin:6px 0 14px}
.progress .bar{height:100%;width:0;background:var(–primary);transition:width .3s}
form .q{border:1px solid #eee;padding:10px;border-radius:10px;margin-bottom:10px;background:#fff}
.q h3{font-size:15px;margin-bottom:6px}
.opts label{
display:block;padding:6px 8px;margin:6px 0;border:1px solid #eee;
border-radius:8px;font-size:14px;cursor:pointer
}
.opts input{margin-right:6px}
.opts label:hover{background:#f9f9f9}
.correct{border-color:#16a34a;background:#e6f8ec}
.wrong{border-color:#ef4444;background:#fde8e8}
.answer-note{font-size:13px;color:var(–muted);margin-top:4px}
.scorebox{text-align:center;margin-top:10px;font-weight:bold}
.sticky{
position:sticky;bottom:0;background:#fff;padding:8px 0 4px;
border-top:1px solid #eee;margin-top:6px
}
.sticky .actions{
display:flex;flex-wrap:wrap;gap:6px;justify-content:center
}
.sticky button{
flex:1 1 auto;min-width:100px;padding:8px;border-radius:8px;font-size:14px;
border:1px solid #ddd;background:#f9f9f9;cursor:pointer
}
.sticky .primary{background:var(–primary);color:#fff;border:none}
.timer{
text-align:center;font-size:16px;margin:8px 0;font-weight:bold;color:var(–danger)
}
.chart{
width:120px;height:120px;margin:10px auto;position:relative
}
.chart svg{transform:rotate(-90deg)}
.chart circle{fill:none;stroke-width:10}
.chart .bg{stroke:#eee}
.chart .progress{stroke:var(–primary);stroke-linecap:round;transition:stroke-dashoffset 1s}
.chart .percent{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
font-size:18px;font-weight:bold;color:var(–primary)
}
@media(max-width:480px){
header h1{font-size:18px}
.q h3{font-size:14px}
.opts label{font-size:13px}
}

// Quiz Data
const quizData = [
{q:”“Potage” কোন ধরণের খাবার?”,o:[“স্যুপ”,”সালাদ”,”মিষ্টি”,”পানীয়”],a:0},
{q:”“Poisson” শব্দের অর্থ কী?”,o:[“মাংস”,”মাছ”,”রুটি”,”ফল”],a:1},
{q:”“Entrée” কোন ধরণের খাবার নির্দেশ করে?”,o:[“স্টার্টার”,”মূল খাবার”,”সালাদ”,”ডেজার্ট”],a:0},
{q:”“Relevé” সাধারণত কী বোঝায়?”,o:[“হালকা খাবার”,”ভারী খাবার (মাংস)”,”সালাদ”,”পানীয়”],a:1},
{q:”“Rôti” কোন ধরণের খাবার?”,o:[“গ্রিলড/রোস্ট মাংস”,”রুটি”,”মিষ্টি”,”স্যুপ”],a:0},
{q:”“Légumes” এর অর্থ কী?”,o:[“সবজি”,”মাছ”,”মাংস”,”ফল”],a:0},
{q:”“Sorbet” কী ধরনের আইটেম?”,o:[“ঠান্ডা রিফ্রেশিং আইটেম”,”সালাদ”,”স্যুপ”,”পেস্ট্রি”],a:0},
{q:”“Fromage” কী বোঝায়?”,o:[“মাংস”,”চিজ”,”মিষ্টি”,”পানীয়”],a:1},
{q:”“Entremets” সাধারণত কী পরিবেশন করা হয়?”,o:[“ডেজার্ট”,”স্যুপ”,”সালাদ”,”মাছ”],a:0},
{q:”“Dessert” কোন ধরণের খাবার?”,o:[“প্রধান খাবার”,”মিষ্টান্ন/ফল”,”স্যুপ”,”সালাদ”],a:1},
{q:”“Hors d’oeuvre” কী বোঝায়?”,o:[“স্টার্টার/অ্যাপেটাইজার”,”সালাদ”,”পানীয়”,”ডেজার্ট”],a:0},
{q:”“Bouillon” কোন মেনুর অন্তর্ভুক্ত?”,o:[“স্যুপ”,”সালাদ”,”রুটি”,”ফল”],a:0},
{q:”“Salade” শব্দের অর্থ কী?”,o:[“সালাদ”,”মিষ্টি”,”মাছ”,”মাংস”],a:0},
{q:”“Garde Manger” প্রধানত কোন কাজে ব্যবহৃত?”,o:[“ঠান্ডা খাবার প্রস্তুতি”,”গরম স্যুপ”,”বেকিং”,”ডেজার্ট সার্ভিং”],a:0},
{q:”“Grillade” কিভাবে রান্না করা হয়?”,o:[“গ্রিল করে”,”ভেজে”,”সেদ্ধ করে”,”মিশিয়ে”],a:0},
{q:”“Volaille” কী বোঝায়?”,o:[“পোল্ট্রি (পাখির মাংস)”,”মাছ”,”চিজ”,”ফল”],a:0},
{q:”“Digestif” কী ধরনের পানীয়?”,o:[“খাবারের পর হজম সহায়ক পানীয়”,”সালাদ ড্রেসিং”,”স্যুপ”,”ডেজার্ট”],a:0},
{q:”“Café” মেনুতে কী বোঝায়?”,o:[“কফি”,”মিষ্টি”,”সালাদ”,”স্যুপ”],a:0},
{q:”“Pâtisserie” বলতে কী বোঝায়?”,o:[“পেস্ট্রি ও বেকারি আইটেম”,”মাছ”,”সালাদ”,”মাংস”],a:0},
{q:”“Champagne” কোন ধরনের পানীয়?”,o:[“স্পার্কলিং ওয়াইন”,”কফি”,”জুস”,”ককটেল”],a:0}
];

const form=document.getElementById(“quizForm”),bar=document.getElementById(“bar”),scoreEl=document.getElementById(“score”);
const chart=document.querySelector(“.chart .progress”),percentEl=document.getElementById(“percent”),chartBox=document.getElementById(“chartBox”);
const radius=54,circ=2*Math.PI*radius; chart.style.strokeDasharray=circ; chart.style.strokeDashoffset=circ;

function render(){
form.innerHTML=””;
quizData.forEach((item,idx)=>{
const w=document.createElement(“div”);w.className=”q”;
w.innerHTML=`

${idx+1}. ${item.q}

`;
const o=document.createElement(“div”);o.className=”opts”;
item.o.forEach((opt,i)=>{const id=`q${idx}_o${i}`;
o.insertAdjacentHTML(“beforeend”,`${opt}`)
});
w.appendChild(o);
w.insertAdjacentHTML(“beforeend”,`

`);
form.appendChild(w)
});
updateProgress();scoreEl.textContent=””;chartBox.style.display=”none”;
}

function updateProgress(){
const t=quizData.length,a=form.querySelectorAll(‘input:checked’).length;
let p=Math.round(a/t*100);bar.style.width=p+”%”;
}
form.addEventListener(“change”,updateProgress);

function showAnswers(){
let s=0;
quizData.forEach((it,idx)=>{
const ch=form.querySelector(`input[name=”q${idx}”]:checked`);
form.querySelectorAll(`input[name=”q${idx}”]`).forEach(inp=>inp.closest(“label”).classList.remove(“correct”,”wrong”));
const cor=document.getElementById(`q${idx}_o${it.a}`);
if(cor)cor.closest(“label”).classList.add(“correct”);
if(ch){if(+ch.value===it.a){s++}else{ch.closest(“label”).classList.add(“wrong”)}}
document.getElementById(`note_${idx}`).innerHTML=”✔️ সঠিক উত্তর: “+it.o[it.a]+”“;
});
scoreEl.textContent=`Score: ${s} / ${quizData.length}`;
// Show chart
chartBox.style.display=”block”;
let pct=Math.round((s/quizData.length)*100);
percentEl.textContent=pct+”%”;
chart.style.strokeDashoffset=circ-(pct/100)*circ;
window.scrollTo({top:document.body.scrollHeight,behavior:”smooth”});
}

function clearAll(){
form.querySelectorAll(“input”).forEach(r=>r.checked=false);
form.querySelectorAll(“label”).forEach(l=>l.classList.remove(“correct”,”wrong”));
form.querySelectorAll(“.answer-note”).forEach(n=>n.textContent=””);
scoreEl.textContent=””;bar.style.width=”0%”;chartBox.style.display=”none”;
window.scrollTo({top:0,behavior:”smooth”});
}
function shuffle(){
for(let i=quizData.length-1;i>0;i–){
const j=Math.floor(Math.random()*(i+1));
[quizData[i],quizData[j]]=[quizData[j],quizData[i]]
}render();
}
document.getElementById(“submitBtn”).onclick=showAnswers;
document.getElementById(“showAnswersBtn”).onclick=showAnswers;
document.getElementById(“clearBtn”).onclick=clearAll;
document.getElementById(“shuffleBtn”).onclick=shuffle;
document.getElementById(“fontSel”).onchange=e=>{document.documentElement.style.fontSize=e.target.value+”px”};
render();

// Timer 15 minutes
let time=900; // seconds
const timerEl=document.getElementById(“timer”);
const timer=setInterval(()=>{
let min=Math.floor(time/60),sec=time%60;
timerEl.textContent=`Time ${min.toString().padStart(2,”0″)}:${sec.toString().padStart(2,”0″)}`;
if(time<=0){clearInterval(timer);showAnswers();timerEl.textContent=" সময় শেষ!";}
time–;
},1000);