مغامرة كنز العدد ١٠٠ — إعداد رية الصبحية

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>مغامرة كنز العدد ١٠٠ — إعداد رية الصبحية</title>
<style>
:root{--ink:#26324b;--purple:#7254c8;--mint:#dcfce7;--blue:#dbeafe;--pink:#f3e8ff;--gold:#facc15}
*{box-sizing:border-box}
body{margin:0;font-family:Tahoma,Arial,sans-serif;background:linear-gradient(135deg,#eff6ff,#fdf2f8);color:var(--ink);padding:16px}
main{max-width:760px;margin:auto;background:white;border-radius:24px;padding:clamp(16px,4vw,30px);box-shadow:0 12px 35px #26324b18}
header{text-align:center;background:#e0f2fe;padding:20px;border-radius:18px}
h1{margin:4px 0 8px;color:#075985;font-size:clamp(1.5rem,5vw,2.2rem)}
header p{margin:6px 0}
.byline{font-weight:bold;color:#6d28d9}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stat{background:#f8fafc;border-radius:14px;text-align:center;padding:12px}
.stat strong{display:block;font-size:1.6rem;color:#6d28d9}
.instructions{text-align:center;font-weight:bold;margin:18px 0}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{min-height:88px;border:2px solid #ddd6fe;border-radius:16px;background:var(--pink);color:#6d28d9;font-size:1.8rem;font-weight:bold;cursor:pointer;transition:transform .15s,background .15s}
.card:hover{transform:translateY(-2px)}
.card small{display:block;font-size:.7rem;font-weight:normal;margin-top:5px}
.card.selected{background:var(--blue);border-color:#2563eb;color:#1d4ed8}
.card.matched{background:var(--mint);border-color:#16a34a;color:#166534;cursor:default}
.message{background:#f8fafc;padding:15px;border-radius:14px;margin:16px 0;line-height:1.8}
button.action{width:100%;border:0;border-radius:14px;padding:13px;font-size:1rem;font-weight:bold;background:#7254c8;color:white;cursor:pointer}
button.action:hover{background:#5b3db1}
.extra{border:1px solid #e2e8f0;border-radius:16px;padding:16px;margin-top:22px}
.extra h2{font-size:1.2rem}
.answers{display:grid;gap:9px;margin:12px 0}
.answers label{padding:10px;background:#f8fafc;border-radius:10px;cursor:pointer}
footer{text-align:center;color:#64748b;font-size:.9rem;margin-top:20px}
@media(min-width:520px){.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{min-height:110px}}
</style>
</head>
<body>
<main>
<header>
<div style="font-size:2.2rem">🗝️ 💎 🏆</div>
<h1>مغامرة كنز العدد ١٠٠</h1>
<p>لعبة تفاعلية في الجمع والطرح — الصف الثالث</p>
<p class="byline">من إعداد رية الصبحية</p>
</header>
<section class="stats" aria-label="نتيجة اللعبة">
<div class="stat">⭐ النقاط<strong id="score">٠</strong></div>
<div class="stat">🧩 الأزواج<strong id="pairs">٠ / ٤</strong></div>
<div class="stat">✏️ المحاولات<strong id="tries">٠</strong></div>
</section>
<p class="instructions">اختاري بطاقتين يكون مجموعهما ١٠٠!</p>
<section class="cards" id="cards" aria-label="بطاقات الأعداد"></section>
<div class="message" id="message" aria-live="polite">اختاري بطاقتين، واجعلي مجموعهما العدد ١٠٠!</div>
<button class="action" id="reset">🔄 إعادة اللعب</button>
<section class="extra">
<h2>🧠 تحدّي إضافي</h2>
<p>مع سارة ٦٠ ملصقًا. كم ملصقًا تحتاج لتصبح لديها ١٠٠ ملصق؟</p>
<div class="answers">
<label><input type="radio" name="extra" value="20"> ٢٠ ملصقًا</label>
<label><input type="radio" name="extra" value="40"> ٤٠ ملصقًا</label>
<label><input type="radio" name="extra" value="50"> ٥٠ ملصقًا</label>
</div>
<button class="action" id="checkExtra">تحققي من الإجابة</button>
<div id="extraMessage" class="message" hidden></div>
</section>
<footer>تعلمي، فكّري، واجمعي النقاط! 🌟</footer>
</main>
<script>
const initial=[20,80,35,65,45,55,10,90];
let nums=[],matched=new Set(),selected=[],score=0,tries=0,locked=false;
const ar=n=>String(n).replace(/\d/g,d=>'٠١٢٣٤٥٦٧٨٩'[d]);
const cardsEl=document.getElementById('cards');
const message=document.getElementById('message');
function render(){
 cardsEl.innerHTML='';
 nums.forEach((n,i)=>{
  const b=document.createElement('button'); b.className='card';
  if(matched.has(i)){b.classList.add('matched');b.innerHTML='✓ '+ar(n)+'<small>تم العثور على الزوج</small>'}
  else {b.innerHTML=ar(n)+'<small>'+(selected.includes(i)?'تم الاختيار':'اضغطي للاختيار')+'</small>'}
  if(selected.includes(i))b.classList.add('selected');
  b.disabled=matched.has(i)||locked;
  b.addEventListener('click',()=>choose(i));cardsEl.appendChild(b);
 });
 document.getElementById('score').textContent=ar(score);
 document.getElementById('pairs').textContent=ar(matched.size/2)+' / ٤';
 document.getElementById('tries').textContent=ar(tries);
}
function choose(i){
 if(locked||matched.has(i)||selected.includes(i))return;
 if(selected.length===0){selected=[i];message.textContent='أحسنتِ! اختاري البطاقة الثانية التي تُكمل العدد ١٠٠.';render();return}
 const first=selected[0];tries++;
 if(nums[first]+nums[i]===100){
  matched.add(first);matched.add(i);score+=10;selected=[];
  if(matched.size===nums.length)message.textContent='🎉 رائع! وجدتِ جميع الأزواج وفتحتِ الكنز! حصلتِ على '+ar(score)+' نقطة.';
  else message.textContent='🌟 إجابة صحيحة! '+ar(nums[first])+' + '+ar(nums[i])+' = ١٠٠. حصلتِ على ١٠ نقاط!';
 }else{
  message.textContent='حاولي مرة أخرى! '+ar(nums[first])+' + '+ar(nums[i])+' = '+ar(nums[first]+nums[i])+'. فكّري: كم ينقص ليصبح المجموع ١٠٠؟';
  selected=[];locked=true;render();setTimeout(()=>{locked=false;render()},700);return;
 }
 render();
}
function reset(){
 nums=[...initial].sort(()=>Math.random()-.5);matched=new Set();selected=[];score=0;tries=0;locked=false;
 message.textContent='اختاري بطاقتين، واجعلي مجموعهما العدد ١٠٠!';
 document.querySelectorAll('input[name="extra"]').forEach(x=>x.checked=false);
 document.getElementById('extraMessage').hidden=true;render();
}
document.getElementById('reset').addEventListener('click',reset);
document.getElementById('checkExtra').addEventListener('click',()=>{
 const chosen=document.querySelector('input[name="extra"]:checked'),out=document.getElementById('extraMessage');
 out.hidden=false;
 if(!chosen){out.textContent='اختاري إجابة أولًا.';return}
 out.textContent=chosen.value==='40'?'🌟 أحسنتِ! ١٠٠ − ٦٠ = ٤٠، إذن ٦٠ + ٤٠ = ١٠٠.':'حاولي مرة أخرى: احسبي ١٠٠ − ٦٠. ما العدد المتبقي؟';
 out.style.color=chosen.value==='40'?'#166534':'#b91c1c';
});
reset();
</script>
</body>
</html>