Food Detective: Misi Sihat

<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Food Detective: Misi Sihat</title>
<style>
*{box-sizing:border-box}
:root{--green:#247653;--lime:#d9f99d;--cream:#fffaf0;--dark:#183b30}
body{margin:0;background:var(--cream);color:var(--dark);
font-family:Arial,sans-serif;min-height:100vh}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.top{background:var(--green);color:white;padding:17px 20px;
display:flex;justify-content:space-between;align-items:center;gap:10px}
.logo{font-weight:900;font-size:17px}
.score{background:#ffffff24;padding:9px 13px;border-radius:20px;font-weight:bold}
main{max-width:760px;margin:auto;padding:24px 16px 50px}
.hero{text-align:center;padding:18px 10px 22px}
.badge{display:inline-block;background:#e4f5ce;color:#286344;
border-radius:20px;padding:7px 13px;font-size:12px;font-weight:bold}
h1{font-size:clamp(30px,7vw,47px);margin:15px 0 10px;line-height:1.1}
h1 span{color:#e68b2e}
.subtitle{line-height:1.7;color:#61756b;max-width:510px;margin:0 auto}
.mascot{font-size:78px;margin:12px}
.panel{background:white;border:1px solid #e5e8dc;border-radius:22px;
padding:22px;box-shadow:0 8px 25px #183b3010;margin-bottom:16px}
.section-title{font-size:20px;font-weight:900;margin:0 0 15px}
.missions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mission{border:1px solid #e2e9dc;border-radius:15px;padding:13px;
background:#fbfcf7}
.mission .emoji{font-size:27px}
.mission strong{display:block;font-size:14px;margin:7px 0}
.mission small{color:#748277;line-height:1.5}
.primary,.secondary{border:0;border-radius:13px;padding:15px 18px;
font-weight:800;transition:transform .15s}
.primary{background:var(--green);color:white;width:100%;margin-top:17px}
.primary:hover,.secondary:hover{transform:translateY(-2px)}
.secondary{background:#e9f4df;color:var(--dark)}
.note{font-size:12px;line-height:1.6;color:#728077;margin-top:15px}
.hidden{display:none!important}
.progress-row{display:flex;justify-content:space-between;align-items:center;
font-size:13px;font-weight:bold;gap:10px;margin-bottom:10px}
.progress{height:9px;background:#e7eadf;border-radius:20px;overflow:hidden}
.bar{height:100%;background:#8acb63;width:0;transition:width .3s}
.level-label{color:#52815b;font-weight:bold;font-size:12px;letter-spacing:1px}
.question{font-size:24px;line-height:1.35;margin:12px 0 18px}
.story{background:#f3f8e9;border-radius:13px;padding:14px;
font-size:14px;line-height:1.65;margin:15px 0}
.options{display:grid;gap:10px}
.option{display:flex;text-align:left;align-items:center;gap:12px;
width:100%;padding:14px;border:2px solid #e5e9df;border-radius:14px;
background:white;color:var(--dark);font-weight:600;line-height:1.45}
.option:hover:not(:disabled){border-color:#74ad66;background:#f7fbf1}
.letter{flex-shrink:0;width:32px;height:32px;display:grid;
place-items:center;border-radius:10px;background:#edf2e7;font-weight:900}
.option.correct{border-color:#3c9a63;background:#effbf2}
.option.wrong{border-color:#df826c;background:#fff2ed}
.feedback{margin-top:16px;padding:16px;border-radius:14px;
background:#f0f6e9;line-height:1.65;font-size:14px}
.feedback h3{margin:0 0 6px;font-size:17px}
.feedback p{margin:0}
.next{margin-top:15px}
.result-icon{font-size:70px;text-align:center}
.result-title{text-align:center;font-size:30px;font-weight:900}
.result-text{text-align:center;line-height:1.7;color:#65766b}
.final-score{text-align:center;background:#f1f7e9;border-radius:16px;padding:20px}
.final-score strong{display:block;font-size:42px;color:var(--green)}
.tips{line-height:1.9;padding-left:22px}
footer{text-align:center;font-size:12px;color:#819086;padding:18px}
@media(max-width:420px){
 main{padding:17px 12px 35px}
 .panel{padding:17px}
 .missions{gap:8px}
 .mission{padding:10px}
 .question{font-size:21px}
}
</style>
</head>
<body>
<header class="top">
  <div class="logo">🕵️ FOOD DETECTIVE</div>
  <div class="score">⭐ Mata: <span id="scoreTop">0</span></div>
</header>

<main>
<section id="home">
  <div class="hero">
    <div class="badge">MISI KESIHATAN · 2026</div>
    <div class="mascot">🕵️‍♀️🍎</div>
    <h1>Food Detective:<br><span>Misi Sihat!</span></h1>
    <p class="subtitle">Satu kes misteri telah berlaku! Bantu kami menyiasat makanan, membongkar tabiat tidak sihat dan menjadi Detektif Kesihatan.</p>
  </div>

  <div class="panel">
    <h2 class="section-title">📂 Fail Kes Anda</h2>
    <div class="missions">
      <div class="mission"><div class="emoji">🔎</div><strong>Kes 1: Nutrien</strong><small>Kenali fungsi makanan.</small></div>
      <div class="mission"><div class="emoji">🥗</div><strong>Kes 2: Diet Seimbang</strong><small>Bina hidangan sihat.</small></div>
      <div class="mission"><div class="emoji">🍟</div><strong>Kes 3: Tabiat Makan</strong><small>Cari tabiat tidak sihat.</small></div>
      <div class="mission"><div class="emoji">🏷️</div><strong>Kes 4: Label Misteri</strong><small>Bandingkan maklumat nutrisi.</small></div>
      <div class="mission"><div class="emoji">🍱</div><strong>Kes 5: Misi Terakhir</strong><small>Rancang menu harian.</small></div>
    </div>
    <button class="primary" onclick="startGame()">MULA MISI ▶</button>
    <p class="note">Arahan: Baca situasi, pilih jawapan yang paling tepat dan kumpulkan mata. Setiap jawapan disertakan penerangan supaya anda dapat belajar sambil bermain.</p>
  </div>
</section>

<section id="game" class="hidden">
  <div class="progress-row">
    <span id="caseLabel">KES 1 DARIPADA 5</span>
    <span id="questionLabel">SOALAN 1/2</span>
  </div>
  <div class="progress"><div id="bar" class="bar"></div></div>
  <div class="panel" style="margin-top:18px">
    <div id="levelEmoji" style="font-size:45px">🔎</div>
    <div id="levelTitle" class="level-label">KES 1: NUTRIEN</div>
    <h2 id="question" class="question"></h2>
    <div id="story" class="story"></div>
    <div id="options" class="options"></div>
    <div id="feedback" class="feedback hidden" aria-live="polite"></div>
    <button id="next" class="primary next hidden" onclick="nextQuestion()">SOALAN SETERUSNYA →</button>
  </div>
  <button class="secondary" onclick="goHome()">⌂ Kembali ke halaman utama</button>
</section>

<section id="result" class="hidden">
  <div class="panel">
    <div class="result-icon" id="resultIcon">🏆</div>
    <div class="result-title" id="resultTitle">Misi Selesai!</div>
    <p class="result-text" id="resultText"></p>
    <div class="final-score">
      <div>JUMLAH MATA</div>
      <strong id="finalScore">0/100</strong>
      <div id="rank">Detektif Junior</div>
    </div>
    <h3>📝 Rumusan Siasatan</h3>
    <ul class="tips">
      <li>Pilih pelbagai jenis makanan yang berkhasiat.</li>
      <li>Amalkan konsep Pinggan Sihat Malaysia: suku karbohidrat, suku protein dan separuh sayur-sayuran serta buah-buahan.</li>
      <li>Hadkan makanan tinggi gula, garam dan lemak.</li>
      <li>Baca label pemakanan sebelum membuat pilihan.</li>
      <li>Rancang hidangan yang seimbang dan minum air kosong.</li>
    </ul>
    <button class="primary" onclick="startGame()">🔄 MAIN SEMULA</button>
    <button class="secondary" style="width:100%;margin-top:10px" onclick="goHome()">Kembali ke halaman utama</button>
  </div>
  <p class="note">Maklumat pendidikan umum. Keperluan pemakanan individu mungkin berbeza.</p>
</section>
</main>

<footer>FOOD DETECTIVE · BELAJAR, SIASAT, AMALKAN! 🥦</footer>

<script>
const questions = [
{
level:"KES 1: NUTRIEN",emoji:"🔎",title:"Fungsi Makanan",
story:"Petunjuk: Amir berasa letih selepas bermain. Dia perlu makan makanan yang membekalkan tenaga kepada tubuh.",
q:"Nutrien manakah merupakan sumber tenaga utama tubuh?",
opts:["Karbohidrat","Vitamin C","Air","Serat sahaja"],
correct:0,
why:"Karbohidrat ialah sumber tenaga utama tubuh. Contohnya nasi, roti, oat dan ubi."
},
{
level:"KES 1: NUTRIEN",emoji:"🔬",title:"Fungsi Protein",
story:"Petunjuk: Sara sedang membesar dan tubuhnya memerlukan nutrien untuk pertumbuhan serta pembaikan tisu.",
q:"Makanan manakah merupakan sumber protein yang baik?",
opts:["Gula-gula","Telur dan ikan","Air kosong sahaja","Minuman bergas"],
correct:1,
why:"Telur dan ikan membekalkan protein yang membantu pertumbuhan dan pembaikan tisu tubuh."
},
{
level:"KES 2: DIET SEIMBANG",emoji:"🥗",title:"Pinggan Sihat",
story:"Petunjuk: Anda perlu menyediakan hidangan tengah hari yang seimbang berdasarkan konsep Pinggan Sihat Malaysia.",
q:"Apakah pembahagian Pinggan Sihat Malaysia yang disarankan?",
opts:["Separuh nasi, separuh daging","Suku karbohidrat, suku protein, separuh sayur dan buah","Semua bahagian diisi makanan bergoreng","Hanya buah-buahan"],
correct:1,
why:"Konsep Suku-Suku-Separuh ialah suku karbohidrat, suku sumber protein dan separuh sayur-sayuran serta buah-buahan."
},
{
level:"KES 2: DIET SEIMBANG",emoji:"🍽️",title:"Pilihan Hidangan",
story:"Petunjuk: Dua menu tersedia di kantin. Anda perlu memilih hidangan yang lebih seimbang.",
q:"Menu manakah pilihan yang lebih baik?",
opts:["Kentang goreng dan minuman manis sahaja","Nasi, ikan, sayur dan air kosong","Gula-gula dan minuman berkarbonat","Mi segera sahaja setiap hari"],
correct:1,
why:"Menu yang menggabungkan sumber karbohidrat, protein, sayur-sayuran dan air kosong membantu memenuhi keperluan pemakanan yang pelbagai."
},
{
level:"KES 3: TABIAT MAKAN",emoji:"🍟",title:"Tabiat Mencurigakan",
story:"Petunjuk: Farid mengambil minuman tinggi gula beberapa kali sehari dan jarang minum air kosong.",
q:"Apakah perubahan yang lebih sihat untuk Farid?",
opts:["Terus minum minuman manis dengan lebih kerap","Menggantikan semua makanan dengan jus","Memilih air kosong dengan lebih kerap dan mengehadkan minuman manis","Tidak perlu minum langsung"],
correct:2,
why:"Memilih air kosong dengan lebih kerap membantu mengurangkan pengambilan gula tambahan daripada minuman."
},
{
level:"KES 3: TABIAT MAKAN",emoji:"🍳",title:"Sarapan Pagi",
story:"Petunjuk: Mei selalu tidak bersarapan kerana mahu cepat ke sekolah. Dia sering berasa lapar sebelum waktu rehat.",
q:"Apakah tindakan yang lebih baik?",
opts:["Menyediakan sarapan yang berkhasiat dan mengikut keperluan tubuh","Makan gula-gula sahaja","Tidak makan sepanjang hari","Menggantikan sarapan dengan minuman bergas"],
correct:0,
why:"Sarapan yang berkhasiat boleh membantu membekalkan tenaga dan nutrien pada awal hari. Pilih makanan yang sesuai dengan keperluan diri."
},
{
level:"KES 4: LABEL MISTERI",emoji:"🏷️",title:"Membaca Label",
story:"Petunjuk: Dua minuman mempunyai saiz hidangan yang sama. Label A menunjukkan 5 g gula bagi setiap hidangan. Label B menunjukkan 20 g gula bagi setiap hidangan.",
q:"Jika anda mahu mengurangkan pengambilan gula, apakah kesimpulan yang tepat?",
opts:["Label B mengandungi kurang gula","Kedua-duanya pasti tiada gula","Label A mempunyai kurang gula bagi setiap hidangan","Label tidak berguna"],
correct:2,
why:"Berdasarkan maklumat yang diberikan, Label A mengandungi kurang gula bagi setiap hidangan. Semak juga saiz hidangan dan maklumat nutrisi lain."
},
{
level:"KES 4: LABEL MISTERI",emoji:"🕵️",title:"Siasatan Produk",
story:"Petunjuk: Anda mahu membandingkan dua bungkusan makanan. Kandungan natrium pada label berbeza.",
q:"Apakah cara yang lebih sesuai untuk membandingkan kandungan natrium?",
opts:["Memilih bungkusan paling cantik","Membandingkan kandungan natrium bagi saiz hidangan yang setara","Memilih produk paling mahal","Mengabaikan semua label"],
correct:1,
why:"Bandingkan kandungan natrium dengan mengambil kira saiz hidangan yang setara. Ini membantu anda membuat pilihan yang lebih bermaklumat."
},
{
level:"KES 5: MISI TERAKHIR",emoji:"🍱",title:"Menu Harian",
story:"Petunjuk: Anda membantu seorang pelajar merancang makan tengah hari sebelum aktiviti kokurikulum.",
q:"Menu manakah paling sesuai sebagai hidangan yang seimbang?",
opts:["Nasi, ayam, sayur-sayuran, buah dan air kosong","Gula-gula dan minuman manis sahaja","Kentang goreng sahaja","Tidak makan supaya lebih ringan"],
correct:0,
why:"Menu yang mengandungi karbohidrat, protein, sayur-sayuran, buah-buahan dan air kosong menyediakan pilihan makanan yang lebih pelbagai."
},
{
level:"KES 5: MISI TERAKHIR",emoji:"🏆",title:"Keputusan Detektif",
story:"Petunjuk terakhir: Anda perlu menasihati rakan yang mahu mengamalkan gaya pemakanan sihat dalam jangka panjang.",
q:"Apakah amalan yang paling sesuai?",
opts:["Mengikuti diet ekstrem tanpa nasihat profesional","Makan makanan yang sama sahaja setiap hari","Mengamalkan pemakanan seimbang, pelbagai dan sederhana secara konsisten","Mengelakkan semua karbohidrat"],
correct:2,
why:"Pemakanan sihat menekankan keseimbangan, kepelbagaian dan kesederhanaan. Elakkan diet ekstrem dan dapatkan nasihat profesional jika mempunyai keperluan kesihatan khusus."
}
];

let index=0,score=0,answered=false,correctCount=0;

function show(id){
 document.getElementById("home").classList.add("hidden");
 document.getElementById("game").classList.add("hidden");
 document.getElementById("result").classList.add("hidden");
 document.getElementById(id).classList.remove("hidden");
 window.scrollTo({top:0,behavior:"smooth"});
}
function startGame(){
 index=0;score=0;correctCount=0;answered=false;
 document.getElementById("scoreTop").textContent=score;
 show("game");renderQuestion();
}
function renderQuestion(){
 answered=false;
 const q=questions[index];
 document.getElementById("caseLabel").textContent="KES "+(Math.floor(index/2)+1)+" DARIPADA 5";
 document.getElementById("questionLabel").textContent="SOALAN "+(index+1)+"/"+questions.length;
 document.getElementById("bar").style.width=(index/questions.length*100)+"%";
 document.getElementById("levelEmoji").textContent=q.emoji;
 document.getElementById("levelTitle").textContent=q.level;
 document.getElementById("question").textContent=q.q;
 document.getElementById("story").textContent=q.story;
 document.getElementById("feedback").classList.add("hidden");
 document.getElementById("next").classList.add("hidden");
 const options=document.getElementById("options");
 options.innerHTML="";
 q.opts.forEach((option,i)=>{
  const button=document.createElement("button");
  button.className="option";
  const letter=document.createElement("span");
  letter.className="letter";
  letter.textContent=String.fromCharCode(65+i);
  const label=document.createElement("span");
  label.textContent=option;
  button.append(letter,label);
  button.onclick=()=>chooseAnswer(i,button);
  options.appendChild(button);
 });
}
function chooseAnswer(choice,button){
 if(answered)return;
 answered=true;
 const q=questions[index];
 const buttons=[...document.querySelectorAll(".option")];
 buttons.forEach(b=>b.disabled=true);
 const good=choice===q.correct;
 if(good){score+=10;correctCount++;button.classList.add("correct")}
 else{
  button.classList.add("wrong");
  buttons[q.correct].classList.add("correct");
 }
 document.getElementById("scoreTop").textContent=score;
 const feedback=document.getElementById("feedback");
 feedback.classList.remove("hidden");
 feedback.innerHTML="";
 const heading=document.createElement("h3");
 heading.textContent=good?"✅ Syabas! Jawapan Betul!":"🔍 Cuba Fahami Petunjuk!";
 const explanation=document.createElement("p");
 explanation.textContent=q.why;
 feedback.append(heading,explanation);
 document.getElementById("next").textContent=
  index===questions.length-1?"LIHAT KEPUTUSAN 🏆":"TERUSKAN SIASATAN →";
 document.getElementById("next").classList.remove("hidden");
 document.getElementById("bar").style.width=((index+1)/questions.length*100)+"%";
}
function nextQuestion(){
 if(!answered)return;
 index++;
 if(index<questions.length)renderQuestion();
 else finishGame();
}
function finishGame(){
 show("result");
 document.getElementById("finalScore").textContent=score+"/100";
 document.getElementById("resultIcon").textContent=
  score>=80?"🏆":score>=50?"🕵️":"🌱";
 document.getElementById("resultTitle").textContent=
  score>=80?"Detektif Master!":score>=50?"Detektif Hebat!":"Detektif Junior!";
 document.getElementById("rank").textContent=
  correctCount+" daripada "+questions.length+" jawapan betul";
 document.getElementById("resultText").textContent=
  score>=80?"Hebat! Anda berjaya menyelesaikan kes dan memahami banyak konsep pemakanan sihat.":
  score>=50?"Bagus! Anda semakin mahir. Teruskan belajar dan cuba lagi untuk mendapatkan markah penuh.":
  "Setiap detektif bermula dengan belajar. Baca penerangan jawapan dan cuba sekali lagi!";
}
function goHome(){show("home")}
</script>
</body>
</html>