Challenge Hosh

<!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>
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Tahoma, Arial, sans-serif;
  background: linear-gradient(135deg, #17152f, #34235f, #633c91);
  color: white;
  min-height: 100vh;
  padding: 20px 12px;
}
.app {
  max-width: 520px;
  margin: 20px auto;
  background: #ffffff;
  color: #25213b;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 15px 45px #0005;
}
header { text-align: center; }
.logo { font-size: 52px; }
h1 { margin: 8px 0; color: #633c91; }
.subtitle { color: #777; font-size: 14px; line-height: 2; }
input {
  width: 100%;
  padding: 14px;
  border: 2px solid #e5ddf5;
  border-radius: 12px;
  font: inherit;
  margin: 12px 0;
}
button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 14px;
}
.primary {
  width: 100%;
  background: #7048bd;
  color: white;
  font-weight: bold;
  margin-top: 10px;
}
.primary:disabled { opacity: .45; cursor: default; }
.info {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  margin: 18px 0 10px;
}
.track {
  height: 8px;
  background: #eee8f7;
  border-radius: 10px;
  overflow: hidden;
}
#progress {
  height: 100%;
  width: 0;
  background: #8d62d8;
  transition: width .2s;
}
#question {
  font-size: 19px;
  line-height: 2;
  margin: 20px 0;
}
.option {
  display: block;
  width: 100%;
  background: #f6f3fc;
  color: #29213b;
  border: 2px solid #eee7f9;
  text-align: right;
  margin: 9px 0;
  line-height: 1.8;
}
.option:focus-visible { outline: 3px solid #ad8be8; }
.option.selected {
  border-color: #7048bd;
  background: #eee5ff;
}
.option.correct {
  background: #d9f7e6;
  border-color: #25a563;
}
.option.wrong {
  background: #ffe4e4;
  border-color: #d84d4d;
}
#feedback {
  min-height: 30px;
  line-height: 1.8;
  font-size: 14px;
  margin-top: 12px;
}
.hidden { display: none !important; }
.result { text-align: center; line-height: 2.2; }
.big-score { font-size: 38px; color: #7048bd; font-weight: bold; }
footer {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 20px;
}
</style>
</head>
<body>
<main class="app">
  <section id="start">
    <header>
      <div class="logo">🧠</div>
      <h1>چالش هوش</h1>
      <p class="subtitle">
        آماده‌ای ذهنت رو به چالش بکشی؟<br>
        ۳ مرحله، ۶ سؤال و یک امتیاز نهایی!
      </p>
    </header>
    <label for="player">اسم بازیکن:</label>
    <input id="player" placeholder="مثلاً پاتریک" maxlength="30">
    <button class="primary" id="startBtn">🚀 شروع آزمون</button>
  </section>

  <section id="game" class="hidden">
    <div class="info">
      <span id="level"></span>
      <span id="count"></span>
    </div>
    <div class="track"><div id="progress"></div></div>
    <h2 id="question"></h2>
    <div id="options"></div>
    <div id="feedback" aria-live="polite"></div>
    <button class="primary" id="nextBtn" disabled>بررسی پاسخ</button>
  </section>

  <section id="result" class="hidden result">
    <div class="logo">🏆</div>
    <h1>آزمون تموم شد!</h1>
    <p id="greeting"></p>
    <div class="big-score" id="score"></div>
    <p id="message"></p>
    <button class="primary" id="restartBtn">🔄 بازی دوباره</button>
  </section>
  <footer>چالش هوش | ساخته‌شده با HTML و JavaScript</footer>
</main>

<script>
const questions = [
  {
    level: "مرحلهٔ ۱ · آسان",
    q: "۲، ۴، ۶، ۸، عدد بعدی چیست؟",
    options: ["۹", "۱۰", "۱۲", "۱۴"],
    answer: 1,
    explain: "هر بار ۲ تا اضافه می‌شود."
  },
  {
    level: "مرحلهٔ ۱ · آسان",
    q: "کدام عدد بزرگ‌تر است؟",
    options: ["۹", "۱۵", "هر دو برابرند", "هیچ‌کدام"],
    answer: 1,
    explain: "۱۵ از ۹ بزرگ‌تر است."
  },
  {
    level: "مرحلهٔ ۲ · متوسط",
    q: "۱، ۴، ۹، ۱۶، عدد بعدی چیست؟",
    options: ["۲۰", "۲۴", "۲۵", "۳۶"],
    answer: 2,
    explain: "این‌ها مربع اعداد ۱ تا ۵ هستند."
  },
  {
    level: "مرحلهٔ ۲ · متوسط",
    q: "اگر ۳ کتاب ۶۰ تومان باشند، یک کتاب چند تومان است؟",
    options: ["۱۰", "۱۵", "۲۰", "۳۰"],
    answer: 2,
    explain: "۶۰ تقسیم بر ۳ برابر ۲۰ است."
  },
  {
    level: "مرحلهٔ ۳ · سخت",
    q: "۲، ۶، ۱۲، ۲۰، ۳۰، عدد بعدی چیست؟",
    options: ["۳۶", "۴۰", "۴۲", "۴۴"],
    answer: 2,
    explain: "اختلاف‌ها ۴، ۶، ۸، ۱۰ و سپس ۱۲ هستند."
  },
  {
    level: "مرحلهٔ ۳ · سخت",
    q: "پدر ۴۰ ساله و پسر ۱۰ ساله است. چند سال دیگر سن پدر دو برابر سن پسر می‌شود؟",
    options: ["۱۰ سال", "۱۵ سال", "۲۰ سال", "۳۰ سال"],
    answer: 2,
    explain: "۲۰ سال بعد، پدر ۶۰ و پسر ۳۰ ساله می‌شوند."
  }
];

let current = 0;
let score = 0;
let player = "";
let chosen = null;
let checked = false;

const $ = id => document.getElementById(id);

$("startBtn").addEventListener("click", () => {
  player = $("player").value.trim() || "بازیکن";
  current = 0;
  score = 0;
  $("start").classList.add("hidden");
  $("result").classList.add("hidden");
  $("game").classList.remove("hidden");
  showQuestion();
});

function showQuestion() {
  chosen = null;
  checked = false;
  const item = questions[current];

  $("level").textContent = item.level;
  $("count").textContent =
    "سؤال " + (current + 1) + " از " + questions.length;
  $("progress").style.width =
    (current / questions.length * 100) + "%";
  $("question").textContent = item.q;
  $("feedback").textContent = "";
  $("nextBtn").disabled = true;
  $("nextBtn").textContent = "بررسی پاسخ";

  const area = $("options");
  area.replaceChildren();

  item.options.forEach((option, index) => {
    const button = document.createElement("button");
    button.className = "option";
    button.textContent = option;
    button.addEventListener("click", () => {
      if (checked) return;
      chosen = index;
      area.querySelectorAll("button").forEach(b =>
        b.classList.remove("selected")
      );
      button.classList.add("selected");
      $("nextBtn").disabled = false;
    });
    area.appendChild(button);
  });
}

$("nextBtn").addEventListener("click", () => {
  if (chosen === null) return;

  const item = questions[current];

  if (!checked) {
    checked = true;
    const buttons = $("options").querySelectorAll("button");
    buttons[item.answer].classList.add("correct");

    if (chosen === item.answer) {
      score += 10;
      $("feedback").textContent = "✅ آفرین! پاسخ درست است. " + item.explain;
    } else {
      buttons[chosen].classList.add("wrong");
      $("feedback").textContent =
        "❌ پاسخ درست: " + item.options[item.answer] +
        " — " + item.explain;
    }

    $("progress").style.width =
      ((current + 1) / questions.length * 100) + "%";
    $("nextBtn").textContent =
      current === questions.length - 1 ? "دیدن نتیجه 🏆" : "سؤال بعدی ←";
  } else {
    current++;
    if (current >= questions.length) {
      showResult();
    } else {
      showQuestion();
    }
  }
});

function showResult() {
  $("game").classList.add("hidden");
  $("result").classList.remove("hidden");
  $("greeting").textContent = "خسته نباشی، " + player + "!";
  $("score").textContent = score + " از ۶۰";
  $("message").textContent =
    score === 60 ? "عالی بود! قهرمان چالش هوش شدی! 🌟" :
    score >= 40 ? "آفرین! نتیجه‌ات خیلی خوبه! 🎉" :
    score >= 20 ? "خوب بود! با تمرین بهتر هم می‌شی! 💪" :
    "تسلیم نشو؛ دوباره امتحان کن! 🌱";
}

$("restartBtn").addEventListener("click", () => {
  $("result").classList.add("hidden");
  $("start").classList.remove("hidden");
  $("player").value = "";
});
</script>
</body>
</html>