DIABETES QUEST

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DIABETES QUEST</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial;background:linear-gradient(145deg,#101b46,#155c78);color:white;text-align:center;min-height:100vh;padding:20px}
main{max-width:650px;margin:20px auto;background:#17264e;border:3px solid #47d5c2;border-radius:22px;padding:24px;box-shadow:0 0 25px #0006}
h1{color:#62edda;font-size:30px}
h2{color:#ffdb70}
p{line-height:1.9}
#progress{height:12px;background:#39466c;border-radius:20px;overflow:hidden;margin:20px 0}
#bar{height:100%;width:0;background:#50dfbd;transition:.3s}
button{border:0;border-radius:12px;padding:14px 18px;margin:7px;font-size:16px;font-weight:bold;cursor:pointer}
.start,.next{background:#50dfbd;color:#10213d}
.option{display:block;width:100%;background:#293c68;color:white;border:2px solid #536b9e;text-align:right}
.option:disabled{opacity:1}
.option.correct{background:#176e55;border-color:#50dfbd}
.option.wrong{background:#813d50;border-color:#ff8b9b}
#feedback{min-height:55px;line-height:1.8;margin:15px}
.hidden{display:none}
.small{color:#c6d5ee;font-size:14px}
</style>
</head>
<body>
<main>
<div style="font-size:45px">🧬 🩺 🔐</div>
<h1>DIABETES QUEST</h1>
<h2>مهمة إنقاذ المعرفة</h2>
<p>أهلًا بكِ أيتها المستكشفة! أمامكِ خمس غرف مليئة بالألغاز. اجتازيها لتصبحي بطلة الوعي بالسكري!</p>
<div id="progress"><div id="bar"></div></div>
<div id="game">
<h2>مستعدة للمغامرة؟</h2>
<p>اختبري معلوماتكِ، اجمعي النقاط، وافتحي الغرف السرية.</p>
<button class="start" onclick="startGame()">ابدئي المغامرة 🚀</button>
</div>
<div id="score" class="small">⭐ النقاط: 0</div>
</main>
<script>
const rooms=[
{title:"الغرفة الأولى: سر البنكرياس 🧪",intro:"اكتشفي كيف ينظم الجسم مستوى السكر في الدم.",q:"ما وظيفة هرمون الإنسولين؟",a:["يساعد الخلايا على استخدام الجلوكوز","يرفع حرارة الجسم","يهضم البروتين فقط"],c:0,why:"الإنسولين يساعد الجلوكوز على الدخول إلى خلايا الجسم لاستخدامه مصدرًا للطاقة."},
{title:"الغرفة الثانية: العلامات الغامضة 🔎",intro:"هناك إشارات يرسلها الجسم عندما يرتفع السكر.",q:"أي مما يلي قد يكون من أعراض السكري؟",a:["العطش وكثرة التبول","تحسن السمع","زيادة طول الشعر"],c:0,why:"من الأعراض المحتملة العطش الشديد وكثرة التبول والتعب وتشوش الرؤية."},
{title:"الغرفة الثالثة: أنواع السكري 🧬",intro:"لكل نوع من السكري طريقة مختلفة في حدوثه.",q:"ما الذي يميز السكري من النوع الأول غالبًا؟",a:["مهاجمة المناعة لخلايا إنتاج الإنسولين","تناول الحلويات فقط","قلة شرب الماء"],c:0,why:"في النوع الأول يهاجم الجهاز المناعي خلايا البنكرياس المنتجة للإنسولين."},
{title:"الغرفة الرابعة: حقيقة أم خرافة 💡",intro:"حان وقت كشف المعلومات المغلوطة!",q:"هل تناول السكر وحده هو السبب المباشر لكل أنواع السكري؟",a:["نعم، دائمًا","لا، تختلف الأسباب حسب النوع","السكري مرض معدٍ"],c:1,why:"السكري ليس له سبب واحد؛ النوع الأول مناعي، والنوع الثاني يرتبط بعوامل متعددة."},
{title:"الغرفة الخامسة: الاختبار النهائي 🏆",intro:"اقتربتِ من فتح الباب الأخير!",q:"أي خطوة قد تساعد في تقليل خطر الإصابة بالنوع الثاني؟",a:["النشاط البدني المنتظم","تجاهل الفحوصات","الامتناع عن شرب الماء"],c:0,why:"النشاط البدني والعادات الصحية المتوازنة قد تساعد في تقليل خطر النوع الثاني."}
];
let n=0,points=0,answered=false;
function startGame(){n=0;points=0;document.getElementById("score").textContent="⭐ النقاط: 0";showRoom()}
function showRoom(){
answered=false;
let r=rooms[n];
document.getElementById("bar").style.width=(n/rooms.length*100)+"%";
document.getElementById("game").innerHTML=`
<h2>${r.title}</h2><p>${r.intro}</p>
<h3>${r.q}</h3>
${r.a.map((x,i)=>`<button class="option" onclick="choose(${i},this)">${x}</button>`).join("")}
<div id="feedback"></div>
<button id="next" class="next hidden" onclick="nextRoom()">${n===4?"استلام الشهادة 🏆":"الغرفة التالية ➜"}</button>
`;
}
function choose(i,el){
if(answered)return;
let r=rooms[n],opts=document.querySelectorAll(".option");
if(i===r.c){
answered=true;points+=20;el.classList.add("correct");
opts.forEach(b=>b.disabled=true);
document.getElementById("feedback").innerHTML="🎉 إجابة صحيحة!<br>"+r.why;
document.getElementById("next").classList.remove("hidden");
document.getElementById("score").textContent="⭐ النقاط: "+points;
}else{
el.classList.add("wrong");el.disabled=true;
document.getElementById("feedback").textContent="حاولي مرة أخرى! فكري جيدًا 🔍";
}
}
function nextRoom(){
n++;
if(n<rooms.length)showRoom();
else finish();
}
function finish(){
document.getElementById("bar").style.width="100%";
document.getElementById("game").innerHTML=`
<div style="font-size:65px">🏆</div>
<h1>مبروك يا بطلة!</h1>
<h2>لقد أنهيتِ DIABETES QUEST</h2>
<p>نتيجتكِ: ${points} من 100</p>
<p>أصبحتِ الآن سفيرة للوعي بمرض السكري 💚</p>
<p class="small">تذكري: التشخيص يكون بالفحوصات الطبية، وهذه اللعبة للتوعية فقط وليست بديلًا عن الطبيب.</p>
<button class="start" onclick="startGame()">إعادة المغامرة 🔄</button>
<button class="next" onclick="window.print()">طباعة النتيجة 🖨️</button>
`;
}
</script>
</body>
</html>