:root{
–bg:#f5f7fb; –card:#ffffff; –text:#1f2d3d; –muted:#64748b;
–primary:#2563eb; –primary-dark:#1e40af; –ok:#16a34a; –bad:#dc2626;
–ring: rgba(37,99,235,.2);
}
*{box-sizing:border-box}
body{
margin:0; padding:24px; background:var(–bg);
font-family:”Noto Sans Bengali”, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(–text);
}
.wrap{
max-width:900px; margin:auto; background:var(–card); padding:24px;
border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.06);
}
h1{margin:0 0 6px; font-size:28px}
.sub{color:var(–muted); margin-bottom:18px}
.controls{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.controls button,.controls select{
border:1px solid #e5e7eb; background:#fff; padding:10px 12px; border-radius:10px; cursor:pointer;
font-size:14px;
}
.controls button.primary{background:var(–primary); color:#fff; border-color:var(–primary)}
.controls button.primary:hover{background:var(–primary-dark)}
.progress{
width:100%; height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; margin:10px 0 20px;
}
.bar{height:100%; width:0%; background:var(–primary); transition:width .4s}
.q{
border:1px solid #eef2f7; border-radius:12px; padding:16px; margin:14px 0; background:#fff;
}
.q h3{margin:0 0 10px; font-size:18px}
.opt label{
display:block; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; margin:8px 0;
cursor:pointer; transition:background .2s, border-color .2s, box-shadow .2s;
}
.opt input{margin-right:8px}
.opt label:hover{background:#f8fafc}
.correct{border-color:#22c55e;background:#f0fdf4}
.wrong{border-color:#ef4444;background:#fef2f2}
.ans{
margin-top:8px; font-size:14px; color:var(–muted)
}
.score{
text-align:center; font-weight:700; font-size:18px; margin-top:18px
}
.pill{
display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; background:#f1f5f9; color:#0f172a;
margin-left:8px;
}
.note{font-size:13px; color:var(–muted)}
.sticky-submit{
position:sticky; bottom:0; background:var(–card); padding-top:10px;
}

const quizData = [
{q:”“Room Service” বলতে কী বোঝায়?”, o:[“অতিথির লাগেজ বহন”,”কক্ষে খাবার পরিবেশন”,”রিসেপশন সেবা”,”রুম বুকিং”], a:1},
{q:”“Buffet Service” কাকে বলে?”, o:[“অতিথি নিজেরা খাবার নেয়”,”ওয়েটার খাবার পরিবেশন করে”,”কক্ষে খাবার পাঠানো”,”শুধুমাত্র পানীয় সরবরাহ”], a:0},
{q:”“Silver Service” কী ধরনের সার্ভিস?”, o:[“সার্ভার অতিথির প্লেটে খাবার পরিবেশন করে”,”অতিথি নিজেরাই খাবার নেয়”,”শুধুমাত্র পানীয় সরবরাহ”,”প্যাকেট খাবার দেওয়া”], a:0},
{q:”“Menu Card” মূলত কোন বিভাগ ব্যবহার করে?”, o:[“হাউসকিপিং”,”ফ্রন্ট অফিস”,”ফুড অ্যান্ড বেভারেজ”,”অ্যাকাউন্টস”], a:2},
{q:”“À la carte” মেনুর অর্থ কী?”, o:[“নির্দিষ্ট মূল্যে সব খাবার”,”পছন্দমতো আলাদা আলাদা খাবার”,”বিনামূল্যে খাবার”,”কেবল পানীয়”], a:1},
{q:”“Table d’hôte” মেনুর বৈশিষ্ট্য কী?”, o:[“নির্দিষ্ট দামে নির্দিষ্ট কোর্স”,”ফ্রি খাবার”,”নিজের খাবার আনা”,”শুধু পানীয়”], a:0},
{q:”কোন সার্ভিসকে “Gueridon Service” বলা হয়?”, o:[“ট্রলির পাশে রান্না ও পরিবেশন”,”বুফে সার্ভিস”,”রুম সার্ভিস”,”ফাস্ট ফুড সার্ভিস”], a:0},
{q:”“Sommelier” কাকে বলে?”, o:[“কফি সার্ভার”,”ওয়াইন/পানীয় বিশেষজ্ঞ”,”হাউসকিপার”,”রিসেপশনিস্ট”], a:1},
{q:”“Cocktail” কী?”, o:[“দুধজাত খাবার”,”মিশ্র পানীয়”,”স্যুপ”,”সালাদ”], a:1},
{q:”“Mocktail” কী?”, o:[“অ্যালকোহলমুক্ত পানীয়”,”চা জাতীয় পানীয়”,”ফাস্ট ফুড”,”কফি”], a:0},
{q:”F&B সার্ভিসে “Sideboard” কী কাজে লাগে?”, o:[“রুম বুকিং”,”খাবার/উপকরণ রাখার সহায়ক আসবাব”,”মেনু তৈরি”,”কফি পরিবেশন”], a:1},
{q:”“Cover” বলতে কী বোঝায়?”, o:[“একজন অতিথির জন্য টেবিল সেটআপ”,”টেবিলের কাপড়”,”বিলের কভার”,”মেনুর কভার”], a:0},
{q:”“Banquet Service” কিসের জন্য ব্যবহৃত হয়?”, o:[“বড় ভোজসভা/অনুষ্ঠান”,”একক কক্ষ পরিষেবা”,”কেবল পানীয়”,”কর্মচারী ক্যান্টিন”], a:0},
{q:”“Waiter” এর প্রধান দায়িত্ব কী?”, o:[“টেবিলে খাবার পরিবেশন”,”রুম পরিষ্কার”,”লাগেজ বহন”,”রুম বুকিং”], a:0},
{q:”“Finger Bowl” সাধারণত কখন দেওয়া হয়?”, o:[“খাবারের শুরুতে”,”খাবারের শেষে”,”পানীয়র সাথে”,”ব্রেকফাস্টে”], a:1},
{q:”“Cutlery” বলতে কী বোঝায়?”, o:[“টেবিলের কাপড়”,”ছুরি–কাঁটা–চামচ”,”গ্লাস”,”প্লেট”], a:1},
{q:”“Napkin” এর ব্যবহার কী?”, o:[“টেবিল সাজানো”,”মুখ-মুছা ও পরিচ্ছন্নতা”,”গ্লাস পরিষ্কার”,”খাবার ঢেকে রাখা”], a:1},
{q:”“Coffee Shop Service” কেমন সার্ভিস?”, o:[“দ্রুত খাবার ও পানীয় পরিবেশন”,”বুফে সার্ভিস”,”ফাইন ডাইনিং”,”রুম সার্ভিস”], a:0},
{q:”“Fine Dining Restaurant” এর বৈশিষ্ট্য কী?”, o:[“বিলাসবহুল পরিবেশ ও উচ্চমানের খাবার”,”শুধু চা-কফি”,”রাস্তার খাবার”,”ফাস্ট ফুড”], a:0},
{q:”“Guest Satisfaction” কোন ক্ষেত্রে সবচেয়ে জরুরি?”, o:[“শুধু খাবার”,”শুধু পানীয়”,”শুধু রুম সার্ভিস”,”সব ক্ষেত্রে”], a:3},
];

const form = document.getElementById(“quizForm”);
const bar = document.getElementById(“bar”);
const scoreBox = document.getElementById(“scoreBox”);
const submitBtn = document.getElementById(“submitBtn”);

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

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

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

${t}

`);
});
const ans = document.createElement(“div”);
ans.className = “ans”; ans.id = `ans_${idx}`;
q.append(opt); q.append(ans);
form.append(q);
});
updateProgress();
scoreBox.textContent = “”;
}

function updateProgress(){
const total = quizData.length;
const answered = […form.querySelectorAll(‘input[type=”radio”]:checked’)].length;
const pct = Math.round((answered/total)*100);
bar.style.width = pct + “%”;
}

form.addEventListener(“change”, updateProgress);

function checkAnswers(){
let score = 0;
quizData.forEach((it, idx)=>{
const chosen = form.querySelector(`input[name=”q${idx}”]:checked`);
const labels = form.querySelectorAll(`input[name=”q${idx}”]`).length ?
form.querySelectorAll(`input[name=”q${idx}”]`) : [];
// reset styles
labels.forEach(inp => inp.closest(“label”).classList.remove(“correct”,”wrong”));

if(chosen){
const val = parseInt(chosen.value,10);
if(val === it.a){ score++; chosen.closest(“label”).classList.add(“correct”); }
else {
chosen.closest(“label”).classList.add(“wrong”);
const right = form.querySelector(`#q${idx}_o${it.a}`);
if(right) right.closest(“label”).classList.add(“correct”);
}
} else {
const right = form.querySelector(`#q${idx}_o${it.a}`);
if(right) right.closest(“label”).classList.add(“correct”);
}
const ansBox = document.getElementById(`ans_${idx}`);
ansBox.innerHTML = `✔️ সঠিক উত্তর: ${it.o[it.a]}`;
});
scoreBox.textContent = `Result: ${score} / ${quizData.length}`;
window.scrollTo({top:document.body.scrollHeight, 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(quizData);
}

function clearAll(){
form.querySelectorAll(‘input[type=”radio”]’).forEach(r=>r.checked=false);
form.querySelectorAll(“label”).forEach(l=>l.classList.remove(“correct”,”wrong”));
form.querySelectorAll(“.ans”).forEach(a=>a.textContent=””);
scoreBox.textContent = “”;
updateProgress();
window.scrollTo({top:0, behavior:”smooth”});
}

document.getElementById(“shuffleBtn”).addEventListener(“click”, shuffle);
document.getElementById(“clearBtn”).addEventListener(“click”, clearAll);
document.getElementById(“fontSel”).addEventListener(“change”, (e)=>{
document.documentElement.style.fontSize = e.target.value + “px”;
});
submitBtn.addEventListener(“click”, checkAnswers);

// initial render
render(quizData);