<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal pronouns</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f3f3f3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .game-container {
      width: 100%;
      max-width: 620px;
      background: white;
      border: 2px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    h1 {
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-size: 24px;
    }
    h1 span {
      font-size: 1.5rem;
    }
    .track {
      position: relative;
      height: 50px;
      background: #ddd;
      border-radius: 25px;
      margin: 20px auto;
      overflow: hidden;
    }
    .track .point {
      position: absolute;
      top: 50%; /* Align circles vertically */
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: #4CAF50;
      border-radius: 50%;
      z-index: 1;
    }
    .track .player {
      position: absolute;
      top: 50%; /* Align star vertically */
      transform: translate(-90%, -60%); /* Center horizontally and vertically */
      font-size: 48px; /* Larger star for visibility */
      transition: left 0.5s ease;
      z-index: 2;
      color: red; /* Star color */
    }
    .question-container {
      margin: 20px 0;
      padding: 20px;
      background: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 10px;
    }
    .answers button {
      display: block;
      width: 400px;
      margin: 10px auto;
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #4CAF50;
      color: white;
    }
    .answers button:hover {
      background-color: #45a049;
    }
    #game-over {
      font-size: 24px;
      font-weight: bold;
      margin-top: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>Personal pronouns<span>🚩</span></h1>
    <div class="track" id="track">
      <div class="player" id="player" style="left: 0;">⭐</div>
      <!-- Points -->
      <div class="point" style="left: 5%;"></div>
      <div class="point" style="left: 15%;"></div>
      <div class="point" style="left: 25%;"></div>
      <div class="point" style="left: 35%;"></div>
      <div class="point" style="left: 45%;"></div>
      <div class="point" style="left: 55%;"></div>
      <div class="point" style="left: 65%;"></div>
      <div class="point" style="left: 75%;"></div>
      <div class="point" style="left: 85%;"></div>
      <div class="point" style="left: 95%;"></div>
    </div>
    <div class="progress">
      Steps: <span id="steps">0</span> / 10 | Points: <span id="points">0</span>
    </div>
    <div class="question-container" id="question-container">
      <p id="question">Press start to begin the quiz!</p>
      <div class="answers">
        <button id="answer1" onclick="checkAnswer(0)">Answer 1</button>
        <button id="answer2" onclick="checkAnswer(1)">Answer 2</button>
        <button id="answer3" onclick="checkAnswer(2)">Answer 3</button>
      </div>
    </div>
    <div id="game-over" style="display: none;">Finished! Final Score: <span id="final-score"></span></div>
  </div>

  <script>
    const questions = [
      { question: "Sarah and Helen are my classmates. ___ are very sporty girls.", answers: ["Them", "Their", "They"], correct: 2 },
      { question: "My mother hasn't come yet. I am waiting for ___.", answers: ["her", "she", "him"], correct: 0 },
      { question: "Give ___ your phone number. I'll call you.", answers: ["them", "me", "her"], correct: 1 },
      { question: "This is my brother. ___ is ten years old.", answers: ["She", "He", "I"], correct: 1 },
      { question: "Where are my keys? I can’t find ___.", answers: ["it", "him", "them"], correct: 2 },
      { question: "___ am going to the cinema tonight. ", answers: ["He", "Me", "I"], correct: 2 },
      { question: "We can't do this exercise. Help ___. ", answers: ["us", "her", "me"], correct: 0 },
      { question: "Sam is my best friend. I have known ___ since my childhood.", answers: ["he", "him", "his"], correct: 1 },
      { question: "Anna is very clever. ___ is the best student in my class.", answers: ["She", "He", "Her"], correct: 0 },
      { question: "Look at that cat! ___ is so funny.", answers: ["She", "It", "He"], correct: 1 },
    ];
    let currentQuestion = 0;
    let points = 0;
    let steps = 0;

    function loadQuestion() {
      if (currentQuestion < questions.length) {
        const q = questions[currentQuestion];
        document.getElementById('question').textContent = q.question;
        document.getElementById('answer1').textContent = q.answers[0];
        document.getElementById('answer2').textContent = q.answers[1];
        document.getElementById('answer3').textContent = q.answers[2];
      } else {
        document.getElementById('question-container').style.display = 'none';
        document.getElementById('game-over').style.display = 'block';
        document.getElementById('final-score').textContent = points;
      }
    }

    function checkAnswer(answerIndex) {
      const q = questions[currentQuestion];
      if (answerIndex === q.correct) {
        points += 1;
        steps++;
        document.getElementById('player').style.left = `${steps * 10}%`;
      }
      currentQuestion++;
      updateProgress();
      loadQuestion();
    }

    function updateProgress() {
      document.getElementById('steps').textContent = steps;
      document.getElementById('points').textContent = points;
    }

    // Initialize game
    loadQuestion();
  </script>
</body>
</html>