<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Picture Vocabulary Game</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #e0f7fa;
    padding: 20px;
    max-width: 620px;
    margin: auto;
    text-align: center;
  }

  h1 {
    margin-bottom: 10px;
  }

  #imageContainer {
    margin: 20px 0;
  }

  #imageContainer img {
    max-width: 170px;
    width: 100%;
    height: auto;
    border: 4px solid #00796b;
    border-radius: 8px;
  }

  #guessInput {
    font-size: 1.5em;
    padding: 8px;
    width: 200px;
  }

  #submitBtn {
    padding: 8px 16px;
    font-size: 1em;
    margin-left: 10px;
    cursor: pointer;
  }

  #message {
    margin-top: 20px;
    font-size: 1.3em;
  }

  #nextBtn {
    display: none;
    margin-top: 20px;
    padding: 8px 16px;
    font-size: 1em;
    cursor: pointer;
  }

  #score {
    margin-top: 15px;
    font-size: 1.2em;
  }
</style>
</head>
<body>

<h1>🖼️ Picture Vocabulary 🎯</h1>
<div id="imageContainer">
  <img id="currentImage" src="" alt="Guess the word" />
</div>

<div>
  <input type="text" id="guessInput" placeholder="Type your guess" />
  <button id="submitBtn" onclick="checkGuess()">Guess</button>
</div>

<div id="message"></div>
<button id="nextBtn" onclick="nextImage()">Next</button>
<div id="score"></div>

<script>
  // Corrected spelling of "watermelon"
  const words = ['apple', 'banana', 'cherry', 'grapes', 'lemon', 'orange', 'pineapple', 'plum', 'strawberry', 'watermelon'];
  let shuffledWords = [];
  let currentWord = '';
  let scoreCount = 0;
  let totalWords = words.length;

  const imageElement = document.getElementById('currentImage');
  const guessInput = document.getElementById('guessInput');
  const messageDiv = document.getElementById('message');
  const nextBtn = document.getElementById('nextBtn');
  const scoreDiv = document.getElementById('score');

  function shuffle(array) {
    // Fisher-Yates shuffle
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  function loadWords() {
    // Shuffle the words at the start
    shuffledWords = shuffle([...words]);
  }

  function loadNextWord() {
    if (shuffledWords.length === 0) {
      // All words have been shown
      messageDiv.innerText = `Game Over! Your final score: ${scoreCount} out of ${totalWords}`;
      document.getElementById('submitBtn').disabled = true;
      nextBtn.style.display = 'none';
      return;
    }

    currentWord = shuffledWords.pop();
    imageElement.src = `images/${currentWord}.jpg`;
    guessInput.value = '';
    messageDiv.innerText = '';
    nextBtn.style.display = 'none';
    document.getElementById('submitBtn').disabled = false;
  }

  function checkGuess() {
    const userGuess = guessInput.value.trim().toLowerCase();
    if (userGuess === '') {
      alert('Please enter a guess!');
      return;
    }
    if (userGuess === currentWord.toLowerCase()) {
      messageDiv.innerText = '🎉 Correct!';
      scoreCount++;
      scoreDiv.innerText = `Score: ${scoreCount} / ${totalWords}`;
      document.getElementById('submitBtn').disabled = true;
      nextBtn.style.display = 'inline-block';
    } else {
      messageDiv.innerText = '❌ Try again!';
    }
  }

  function nextImage() {
    loadNextWord();
  }

  // Initialize game
  window.onload = () => {
    loadWords();
    scoreDiv.innerText = `Score: ${scoreCount} / ${totalWords}`;
    loadNextWord();
  };
</script>

</body>
</html>