Untitled drop

Published Oct 24, 2026
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>بازی اعداد گویا هشتم</title>

<style>
body{
  font-family:tahoma;
  text-align:center;
  background:#eaf6ff;
  padding:25px;
}

.g{
  max-width:650px;
  margin:auto;
  background:white;
  padding:25px;
  border-radius:20px;
}

.q{
  font-size:28px;
  font-weight:bold;
  margin:30px;
  direction:ltr;
  white-space:nowrap;
}

.f{
  display:inline-flex;
  flex-direction:column;
  vertical-align:middle;
  text-align:center;
  line-height:1;
  margin:0 5px;
}

.f .top{
  border-bottom:2px solid black;
  padding:3px 8px;
}

.f .bottom{
  padding:3px 8px;
}

.math{
  display:inline-flex;
  align-items:center;
  direction:ltr;
  white-space:nowrap;
}

.sign{
  font-size:28px;
  margin-right:3px;
}

input,button{
  font-size:18px;
  padding:10px;
  margin:6px;
  border-radius:10px;
}

button{
  background:#7055c8;
  color:white;
  border:0;
}
</style>
</head>

<body>

<div class="g">

<h1>🎮 بازی اعداد گویا هشتم</h1>

<div>
امتیاز: <b id="s">0</b>
|
سؤال: <b id="n">1</b>/10
</div>

<div class="q" id="q"></div>

<input id="a" placeholder="مثلاً 1/2">

<button onclick="check()">بررسی</button>
<button onclick="location.reload()">دوباره</button>

<p id="r"></p>

</div>

<script>

function F(a,b){
  return `
  <span class="f">
    <span class="top">${a}</span>
    <span class="bottom">${b}</span>
  </span>`;
}

function NEG(a,b){
  return `
  <span class="math">
    <span class="sign">−</span>
    ${F(a,b)}
  </span>`;
}

const Q=[

[
`${NEG(7,10)} + ${F(3,10)} = ؟`,
"−2/5"
],

[
`${F(5,6)} − ${F(1,3)} = ؟`,
"1/2"
],

[
`${NEG(4,7)} + ${F(2,7)} = ؟`,
"−2/7"
],

[
`${F(3,5)} − ${F(7,10)} = ؟`,
"−1/10"
],

[
`${NEG(5,8)} + ${F(1,4)} = ؟`,
"−3/8"
],

[
`کدام بزرگ‌تر است؟ ${F(4,9)} یا ${F(1,2)}`,
"1/2"
],

[
`بین ${F(2,5)} و ${F(3,5)} یک کسر بنویس`,
"1/2"
],

[
`بین ${F(1,6)} و ${F(1,3)} یک کسر بنویس`,
"1/4"
],

[
`${NEG(3,4)} + ${F(5,4)} = ؟`,
"1/2"
],

[
`${F(7,8)} − ${F(3,8)} = ؟`,
"1/2"
]

];

let i=0;
let s=0;

function show(){
  document.getElementById("q").innerHTML=Q[i][0];
  document.getElementById("n").innerText=i+1;
  document.getElementById("a").value="";
  document.getElementById("r").innerText="";
}

function check(){

  let x=document.getElementById("a").value
    .replaceAll(" ","")
    .replace("-", "−");

  if(x===Q[i][1]){
    s++;
    document.getElementById("r").innerText="✅ درست!";
  }else{
    document.getElementById("r").innerText=
      "❌ پاسخ: "+Q[i][1];
  }

  document.getElementById("s").innerText=s;

  setTimeout(()=>{
    i++;

    if(i<Q.length){
      show();
    }else{
      document.getElementById("q").innerText="🏆 تمام شد!";
      document.getElementById("r").innerText=
        `امتیاز: ${s} از 10`;
      document.getElementById("a").style.display="none";
    }
  },900);
}

show();

</script>

</body>
</html>
Explore more drops →