Game code

Score

Each click adds one point. This is the smallest game: one number is kept, and one event changes it.

<p>Xal: <b id="score">0</b></p>
<button type="button" id="hit">Vur</button>
<script>
  let score = 0;
  const scoreNode = document.getElementById("score");
  document.getElementById("hit").addEventListener("click", () => {
    score += 1;
    scoreNode.textContent = String(score);
  });
</script>

Guess

The hidden number is 2. One of the three buttons writes the right answer. The others say to try again. This is where a condition starts.

<p>1, 2 və ya 3 seç.</p>
<button type="button" data-n="1">1</button>
<button type="button" data-n="2">2</button>
<button type="button" data-n="3">3</button>
<p id="out"></p>
<script>
  const secret = 2;
  const out = document.getElementById("out");
  document.querySelectorAll("button").forEach((button) => {
    button.addEventListener("click", () => {
      const pick = Number(button.getAttribute("data-n"));
      out.textContent = pick === secret ? "Düzdür" : "Yenə cəhd et";
    });
  });
</script>

Timer

Start counts down from 10 and stops at zero. The same button does not start twice, because it is disabled while the count is running.

<p>Vaxt: <b id="time">10</b></p>
<button type="button" id="start">Başla</button>
<script>
  const start = document.getElementById("start");
  const time = document.getElementById("time");
  start.addEventListener("click", () => {
    let left = 10;
    start.disabled = true;
    const timer = setInterval(() => {
      left -= 1;
      time.textContent = String(left);
      if (left === 0) clearInterval(timer);
    }, 1000);
  });
</script>

A large game

Five questions, a score, and a restart. A right answer brings 10 points. When the questions end, the buttons close. The whole page is one file. Save it as .html and open it.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Quiz</title>
  <style>
    body { font-family: sans-serif; background: #0f172a; color: #e2e8f0; margin: 0; }
    main { max-width: 560px; margin: 32px auto; padding: 0 16px; }
    button { margin: 6px 6px 0 0; padding: 10px 14px; border: 0; border-radius: 8px; background: #0284c7; color: #fff; }
  </style>
</head>
<body>
<main>
  <p>Xal: <b id="score">0</b></p>
  <h1 id="ask"></h1>
  <div id="choices"></div>
  <p id="out"></p>
  <button type="button" id="again">Yenidən</button>
</main>
<script>
  const quiz = [
    { q: "Python nədir?", options: ["Brauzer", "Proqramlaşdırma dili", "Şəkil formatı"], answer: 1 },
    { q: "HTML nə üçündür?", options: ["Səhifənin quruluşu", "Cədvəlin parolu", "Telefonun batareyası"], answer: 0 },
    { q: "SQL nəyə sual verir?", options: ["Ekranın rənginə", "Klaviaturaya", "Verilənlərə"], answer: 2 },
    { q: "Bash nədir?", options: ["Şəkil redaktoru", "Əmr dili", "Cədvəl proqramı"], answer: 1 },
    { q: "CSS nəyi deyir?", options: ["Faylın parolunu", "Telefonun nömrəsini", "Səhifənin görünüşünü"], answer: 2 },
  ];
  let index = 0;
  let score = 0;
  const ask = document.getElementById("ask");
  const choices = document.getElementById("choices");
  const out = document.getElementById("out");
  const scoreNode = document.getElementById("score");

  function show() {
    choices.innerHTML = "";
    out.textContent = "";
    if (index >= quiz.length) {
      ask.textContent = "Bitdi";
      out.textContent = "Xal: " + score + " / " + (quiz.length * 10);
      return;
    }
    const item = quiz[index];
    ask.textContent = item.q;
    item.options.forEach((option, optionIndex) => {
      const button = document.createElement("button");
      button.type = "button";
      button.textContent = option;
      button.addEventListener("click", () => pick(optionIndex));
      choices.append(button);
    });
  }

  function pick(optionIndex) {
    const item = quiz[index];
    if (!item) return;
    if (optionIndex === item.answer) {
      score += 10;
      out.textContent = "Düzdür";
    } else {
      out.textContent = "Səhv";
    }
    scoreNode.textContent = String(score);
    choices.querySelectorAll("button").forEach((button) => { button.disabled = true; });
    index += 1;
    setTimeout(show, 600);
  }

  document.getElementById("again").addEventListener("click", () => {
    index = 0;
    score = 0;
    scoreNode.textContent = "0";
    show();
  });

  show();
</script>
</body>
</html>