<!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;
padding:25px;
background-color:#eaf6ff;
background-image:
linear-gradient(rgba(112,85,200,.12) 1px,transparent 1px),
linear-gradient(90deg,rgba(112,85,200,.12) 1px,transparent 1px);
background-size:35px 35px;
}
.g{
max-width:700px;
margin:auto;
background:white;
padding:28px;
border-radius:22px;
box-shadow:0 4px 15px #b8cde0;
}
h1{
color:#7055c8;
font-size:30px;
}
.info{
font-size:18px;
margin:15px;
}
.q{
font-size:28px;
font-weight:bold;
margin:35px 5px;
direction:ltr;
overflow-x:auto;
padding:15px;
min-height:55px;
}
.f{
display:inline-flex;
flex-direction:column;
vertical-align:middle;
text-align:center;
line-height:1;
margin:0 5px;
direction:ltr;
}
.f .top{
border-bottom:2px solid black;
padding:4px 9px;
}
.f .bottom{
padding:4px 9px;
}
.math{
display:inline-flex;
align-items:center;
direction:ltr;
white-space:nowrap;
}
.sign{
font-size:29px;
margin-right:4px;
}
/* محور اعداد */
.numberline{
width:92%;
max-width:620px;
height:115px;
margin:20px auto 30px;
position:relative;
direction:ltr;
}
.axis{
position:absolute;
left:4%;
right:4%;
top:52%;
height:3px;
background:#333;
}
.arrow-right{
position:absolute;
right:0;
top:calc(52% - 12px);
font-size:28px;
font-weight:bold;
}
.arrow-left{
position:absolute;
left:0;
top:calc(52% - 12px);
font-size:28px;
font-weight:bold;
}
.tick{
position:absolute;
top:calc(52% - 10px);
width:2px;
height:20px;
background:#333;
}
.label{
position:absolute;
top:calc(52% + 14px);
transform:translateX(-50%);
font-size:15px;
}
.point{
position:absolute;
top:calc(52% - 9px);
width:18px;
height:18px;
border-radius:50%;
background:#7055c8;
transform:translateX(-50%);
z-index:2;
}
.pointText{
position:absolute;
top:calc(52% - 42px);
transform:translateX(-50%);
font-weight:bold;
color:#7055c8;
font-size:18px;
}
.options{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-top:20px;
}
.option{
min-height:70px;
font-size:22px;
padding:12px;
border:2px solid #7055c8;
border-radius:14px;
background:#f7f3ff;
cursor:pointer;
}
.option:hover{
background:#e7ddff;
}
#r{
font-size:21px;
font-weight:bold;
min-height:30px;
margin-top:22px;
}
.restart{
font-size:18px;
padding:11px 20px;
margin-top:15px;
border:0;
border-radius:12px;
background:#7055c8;
color:white;
}
</style>
</head>
<body>
<div class="g">
<h1>🎮 بازی اعداد گویا هشتم</h1>
<div class="info">
⭐ امتیاز: <b id="s">0</b>
|
📝 سؤال: <b id="n">1</b>/10
</div>
<div class="q" id="q"></div>
<div id="line"></div>
<div class="options" id="options"></div>
<p id="r"></p>
<button class="restart" onclick="location.reload()">
🔄 شروع دوباره
</button>
</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>`;
}
function makeLine(point){
let html=`
<div class="numberline">
<div class="axis"></div>
<div class="arrow-left">‹</div>
<div class="arrow-right">›</div>
`;
for(let i=0;i<=8;i++){
let x=4+(i*92/8);
let value=i-4;
html+=`
<div class="tick" style="left:${x}%"></div>
<div class="label" style="left:${x}%">${value}</div>
`;
}
if(point !== null){
let x=4+((point+4)*92/8);
html+=`
<div class="point" style="left:${x}%"></div>
<div class="pointText" style="left:${x}%">●</div>
`;
}
html+=`</div>`;
return html;
}
const Q=[
{
q:`${NEG(13,18)} + ${F(5,18)} = ؟`,
o:[
`−${F(4,9)}`,
`${F(4,9)}`,
`−${F(8,9)}`,
`${F(8,9)}`
],
a:0,
line:null
},
{
q:`${F(7,12)} − ${F(5,18)} = ؟`,
o:[
`${F(11,36)}`,
`${F(13,36)}`,
`${F(17,36)}`,
`${F(1,3)}`
],
a:0,
line:null
},
{
q:`${NEG(7,8)} + ${F(5,12)} = ؟`,
o:[
`−${F(11,24)}`,
`−${F(1,3)}`,
`${F(11,24)}`,
`−${F(13,24)}`
],
a:0,
line:null
},
{
q:`نقطهٔ ● روی محور اعداد کدام عدد را نشان می‌دهد؟`,
o:[
`−2`,
`−1`,
`1`,
`2`
],
a:0,
line:-2
},
{
q:`کدام عدد در سمت راستِ ${NEG(3,5)} روی محور اعداد قرار دارد؟`,
o:[
`−${F(4,5)}`,
`−${F(7,10)}`,
`−${F(1,2)}`,
`−${F(5,6)}`
],
a:2,
line:null
},
{
q:`${NEG(5,6)} + ${F(7,9)} = ؟`,
o:[
`−${F(1,18)}`,
`${F(1,18)}`,
`−${F(1,9)}`,
`${F(1,9)}`
],
a:1,
line:null
},
{
q:`نقطهٔ ● روی محور اعداد کدام عدد را نشان می‌دهد؟`,
o:[
`−3`,
`−2`,
`2`,
`3`
],
a:2,
line:2
},
{
q:`${F(11,15)} − ${F(7,10)} = ؟`,
o:[
`${F(1,30)}`,
`${F(2,30)}`,
`${F(3,30)}`,
`${F(4,30)}`
],
a:0,
line:null
},
{
q:`کدام کسر بین ${F(3,8)} و ${F(5,8)} قرار دارد؟`,
o:[
`${F(1,4)}`,
`${F(1,2)}`,
`${F(3,4)}`,
`${F(7,8)}`
],
a:1,
line:null
},
{
q:`${NEG(11,12)} + ${F(5,8)} = ؟`,
o:[
`−${F(7,24)}`,
`−${F(17,24)}`,
`${F(7,24)}`,
`−${F(5,24)}`
],
a:0,
line:null
}
];
let i=0;
let s=0;
let locked=false;
function show(){
locked=false;
document.getElementById("q").innerHTML=Q[i].q;
document.getElementById("n").innerText=i+1;
document.getElementById("r").innerText="";
if(Q[i].line !== null){
document.getElementById("line").innerHTML=
makeLine(Q[i].line);
}else{
document.getElementById("line").innerHTML="";
}
const box=document.getElementById("options");
box.innerHTML="";
Q[i].o.forEach((x,index)=>{
const b=document.createElement("button");
b.className="option";
b.innerHTML=x;
b.onclick=()=>{
answer(index);
};
box.appendChild(b);
});
}
function answer(index){
if(locked)return;
locked=true;
if(index===Q[i].a){
s++;
document.getElementById("r").innerText=
"✅ آفرین! پاسخ درست است.";
}else{
document.getElementById("r").innerText=
"❌ اشتباه!";
}
document.getElementById("s").innerText=s;
setTimeout(()=>{
i++;
if(i<Q.length){
show();
}else{
document.getElementById("q").innerHTML=
"🏆 بازی تمام شد!";
document.getElementById("line").innerHTML="";
document.getElementById("options").innerHTML="";
document.getElementById("r").innerText=
`امتیاز نهایی شما: ${s} از 10 ⭐`;
}
},1100);
}
show();
</script>
</body>
</html>