مغامرة الغابة: مضاعفات العدد ٢

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#17633d">
<title>مغامرة الغابة: مضاعفات العدد ٢</title>
<style>
:root{--green:#17633d;--light:#e9f7dc;--gold:#ffd45c;--cream:#fff9e9;--ink:#183a2b;--red:#c84c45}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#9ee4f1,#e5f7d8 40%,#b7e39b);min-height:100vh}
header{padding:18px 14px;text-align:center;background:linear-gradient(135deg,#145b38,#27834e);color:white;border-bottom:5px solid #ffd45c}
h1{margin:0;font-size:clamp(1.45rem,4vw,2.4rem)} header p{margin:8px 0 0}
.wrap{max-width:1050px;margin:auto;padding:16px}
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.pill{background:#fff9e9;border:2px solid #f1c64b;border-radius:999px;padding:10px 16px;font-weight:bold}
.layout{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.panel{background:rgba(255,249,233,.97);border:3px solid #f3c64b;border-radius:22px;padding:18px;box-shadow:0 5px 0 #b9d39b}
.jungle{position:relative;overflow:hidden;background:linear-gradient(#6bd0e7 0%,#c9f1b1 55%,#66b65b 56%,#34874a);min-height:310px}
.sun{position:absolute;top:18px;left:24px;width:55px;height:55px;border-radius:50%;background:#ffe77a;box-shadow:0 0 0 12px #ffe77a55}
.mountains{position:absolute;inset:65px 0 auto;height:100px;background:#83c99a;clip-path:polygon(0 100%,18% 5%,33% 78%,52% 0,70% 75%,87% 15%,100% 100%)}
.path{position:absolute;left:-5%;right:-5%;bottom:15px;height:105px;background:#edc77c;border:6px solid #d7a75a;border-radius:50%;transform:rotate(-4deg)}
.explorer{position:absolute;z-index:2;bottom:65px;left:18px;font-size:64px;filter:drop-shadow(2px 3px 1px #0002)}
.treasure{position:absolute;z-index:2;right:22px;top:86px;font-size:62px}
.stones{position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin-top:150px;padding:0 5px 18px}
.stone{display:grid;place-items:center;min-width:55px;height:52px;padding:0 10px;border-radius:45% 45% 38% 38%;background:#e0f7c8;border:3px solid #77bb64;font-weight:bold;font-size:1.2rem;box-shadow:0 4px #55994f;transition:.2s}
.stone.done{background:#ffdf76;border-color:#d69b24}
.stone.wrong{background:#ffd0c7;border-color:#d76b5d}
h2{margin:0 0 12px;font-size:1.35rem}
.reminder{line-height:1.9}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:10px 0}
.number{background:#dff3d5;border-radius:10px;padding:8px;text-align:center;font-weight:bold;color:#205c36}
.question-panel{margin-top:14px}
.progress{height:10px;border-radius:20px;background:#e2e6d8;overflow:hidden;margin:10px 0 16px}
.progress span{display:block;height:100%;width:0;background:#2b9653;transition:width .25s}
.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
button{font:inherit;cursor:pointer;border:0;border-radius:14px;padding:14px 10px;font-weight:bold;transition:transform .12s,filter .12s}
button:active{transform:scale(.98)}
.answer{font-size:1.4rem;color:white;background:#2587d9;box-shadow:0 4px #1760a4}
.answer:nth-child(2){background:#4eaa54;box-shadow:0 4px #327a37}
.answer:nth-child(3){background:#8960cf;box-shadow:0 4px #6040a0}
.answer:disabled{opacity:.8;cursor:default}
.feedback{min-height:32px;font-weight:bold;margin:14px 0 4px}
.primary{background:#17633d;color:white;box-shadow:0 4px #0e4529}
.secondary{background:#ffe08a;color:#533d00}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.controls button{flex:1}
footer{text-align:center;padding:20px;font-weight:bold;color:#145b38}
.small{font-size:.9rem;color:#4c6957}
@media(max-width:700px){.layout{grid-template-columns:1fr}.jungle{min-height:275px}.stones{margin-top:125px}.stone{min-width:48px;height:46px}.answers{grid-template-columns:1fr}.answer{padding:12px}.wrap{padding:10px}.panel{padding:14px}}
</style>
</head>
<body>
<header>
  <h1>🌴 مغامرة الغابة: مضاعفات العدد ٢ 🐒</h1>
  <p>اجمع الأعداد الزوجية، وتجاوز العقبات حتى تصل إلى الكنز!</p>
</header>
<main class="wrap">
  <div class="stats">
    <div class="pill">⭐ النقاط: <span id="score">0</span></div>
    <div class="pill">🚩 المرحلة: <span id="stage">1</span> من 5</div>
    <div class="pill">🔥 الإجابات الصحيحة: <span id="streak">0</span></div>
  </div>
  <div class="layout">
    <section class="panel jungle" aria-label="مسار المغامرة">
      <div class="sun"></div><div class="mountains"></div>
      <div class="explorer" id="explorer">🧒🏻</div><div class="treasure" id="treasure">🪙</div>
      <div class="path"></div>
      <div class="stones" id="stones">
        <div class="stone">٢</div><div class="stone">٥</div><div class="stone">٤</div><div class="stone">٧</div><div class="stone">٨</div>
      </div>
    </section>
    <aside class="panel reminder">
      <h2>💡 تذكّر</h2>
      <p>مضاعفات العدد ٢ هي الأعداد الناتجة عن العدّ بمقدار ٢ في كل مرة.</p>
      <div class="numbers">
        <div class="number">٢</div><div class="number">٤</div><div class="number">٦</div><div class="number">٨</div>
        <div class="number">١٠</div><div class="number">١٢</div><div class="number">١٤</div><div class="number">١٦</div>
        <div class="number">١٨</div><div class="number">٢٠</div><div class="number">٢٢</div><div class="number">٢٤</div>
      </div>
      <p class="small">حيلة ذكية: رقم الآحاد في مضاعفات العدد ٢ هو ٠ أو ٢ أو ٤ أو ٦ أو ٨.</p>
    </aside>
  </div>
  <section class="panel question-panel">
    <div class="small" id="questionCount">السؤال 1 من 10</div>
    <div class="progress"><span id="progress"></span></div>
    <h2 id="question">أي عدد هو من مضاعفات العدد ٢؟</h2>
    <div class="answers" id="answers"></div>
    <div class="feedback" id="feedback" aria-live="polite">اختر الإجابة الصحيحة لتتقدّم في الغابة!</div>
    <div class="controls">
      <button class="primary" id="next" hidden>السؤال التالي ←</button>
      <button class="secondary" id="restart">🔄 ابدأ من جديد</button>
      <button class="secondary" id="sound">🔊 تشغيل الصوت</button>
    </div>
  </section>
</main>
<footer>✨ من أعداد رية الصبحية ✨</footer>
<script>
const questions = [
 {q:"أي عدد هو من مضاعفات العدد ٢؟",opts:[5,8,11],a:8,why:"٨ عدد زوجي، ويمكن تكوينه من ٢ + ٢ + ٢ + ٢."},
 {q:"ما العدد التالي؟ ٢، ٤، ٦، ٨، ...",opts:[9,10,12],a:10,why:"نضيف ٢ إلى ٨ فنحصل على ١٠."},
 {q:"أي عدد ليس من مضاعفات العدد ٢؟",opts:[14,17,20],a:17,why:"١٧ ينتهي بالرقم ٧، لذلك ليس من مضاعفات العدد ٢."},
 {q:"ما ناتج ٢ × ٧؟",opts:[12,14,16],a:14,why:"٢ × ٧ = ١٤."},
 {q:"أكمل: ١٢، ١٤، ...، ١٨",opts:[15,16,17],a:16,why:"نعدّ بمقدار ٢: ١٢، ١٤، ١٦، ١٨."},
 {q:"أي مجموعة تتكوّن كلها من مضاعفات العدد ٢؟",opts:["٣، ٦، ٩","٤، ٨، ١٢","٥، ١٠، ١٥"],a:"٤، ٨، ١٢",why:"٤ و٨ و١٢ جميعها من مضاعفات العدد ٢."},
 {q:"لدى القرد ٦ موزات، ثم وجد ٢. كم موزة لديه؟",opts:[7,8,9],a:8,why:"٦ + ٢ = ٨، و٨ من مضاعفات العدد ٢."},
 {q:"أي عدد يأتي قبل ٢٠ عند العدّ بمقدار ٢؟",opts:[16,18,19],a:18,why:"١٨ + ٢ = ٢٠."},
 {q:"ما ناتج ٢ × ٩؟",opts:[16,18,20],a:18,why:"٢ × ٩ = ١٨."},
 {q:"اختر العدد الزوجي الأكبر.",opts:[21,24,27],a:24,why:"٢٤ عدد زوجي، وهو أكبر من ٢١ وأصغر من ٢٧."}
];
let index=0,score=0,streak=0,answered=false,soundOn=false,audioCtx=null;
const $=id=>document.getElementById(id);
function saySound(ok){
 if(!soundOn)return;
 try{
  audioCtx=audioCtx||new (window.AudioContext||window.webkitAudioContext)();
  const osc=audioCtx.createOscillator(),gain=audioCtx.createGain();
  osc.connect(gain);gain.connect(audioCtx.destination);
  osc.frequency.value=ok?740:240;osc.type="sine";
  gain.gain.setValueAtTime(.12,audioCtx.currentTime);
  gain.gain.exponentialRampToValueAtTime(.001,audioCtx.currentTime+.22);
  osc.start();osc.stop(audioCtx.currentTime+.22);
 }catch(e){}
}
function render(){
 answered=false;
 const q=questions[index];
 $("stage").textContent=Math.min(5,Math.floor(index/2)+1);
 $("questionCount").textContent=`السؤال ${index+1} من ${questions.length}`;
 $("progress").style.width=(index/questions.length*100)+"%";
 $("question").textContent=q.q;
 $("feedback").textContent="اختر الإجابة الصحيحة لتتقدّم في الغابة!";
 $("next").hidden=true;
 $("answers").innerHTML="";
 q.opts.forEach(opt=>{
  const b=document.createElement("button");b.className="answer";b.textContent=opt;b.onclick=()=>choose(opt,b);$("answers").appendChild(b);
 });
 $("treasure").textContent=index>=8?"🏆":"🪙";
 $("stones").innerHTML=[q.opts[0],q.opts[1],q.opts[2],q.a].map((n,i)=>`<div class="stone">${n}</div>`).join("");
}
function choose(opt,button){
 if(answered)return;answered=true;
 const q=questions[index],correct=String(opt)===String(q.a);
 [...$("answers").children].forEach(b=>{b.disabled=true;if(String(b.textContent)===String(q.a))b.style.outline="4px solid #ffcf42";});
 if(correct){score+=10;streak++;$("feedback").textContent="🎉 أحسنت! "+q.why;saySound(true);}
 else{streak=0;$("feedback").textContent="💪 لا بأس! الإجابة الصحيحة: "+q.a+". "+q.why;saySound(false);}
 $("score").textContent=score;$("streak").textContent=streak;
 $("progress").style.width=((index+1)/questions.length*100)+"%";
 $("next").hidden=false;$("next").textContent=index===questions.length-1?"عرض النتيجة 🏆":"السؤال التالي ←";
}
$("next").onclick=()=>{
 if(index<questions.length-1){index++;render();}
 else{
  $("questionCount").textContent="انتهت المغامرة";
  $("question").textContent=`🏆 حصلت على ${score} من ${questions.length*10} نقطة!`;
  $("answers").innerHTML="";
  $("feedback").textContent=score>=80?"رائع! أنت بطل مضاعفات العدد ٢!":score>=50?"عمل جميل! أعد اللعب لتجمع نقاطًا أكثر.":"واصل التدريب؛ تذكّر أن تعدّ ٢، ٤، ٦، ٨، ١٠...";
  $("progress").style.width="100%";$("next").hidden=true;$("treasure").textContent="🏆";$("explorer").textContent="🧒🏻🎉";
 }
};
$("restart").onclick=()=>{index=0;score=0;streak=0;$("score").textContent=0;$("streak").textContent=0;$("explorer").textContent="🧒🏻";render();};
$("sound").onclick=()=>{soundOn=!soundOn;$("sound").textContent=soundOn?"🔇 إيقاف الصوت":"🔊 تشغيل الصوت";if(soundOn)saySound(true);};
render();
</script>
</body>
</html>