<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animal Drag-and-Drop Game</title>
<style>
  body {
    width: 620px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    margin: 20px auto;
  }

  h2 {
    font-size: 20px;
  }

  .draggable-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }

  .drag-word {
    padding: 4px 4px;
    margin:0 8px;
    background-color: #87cefa;
    border: 1px solid #333;
    border-radius: 2px;
    cursor: grab;
    user-select: none;
  }

  .lines-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px;
    border: 2px dashed #ccc;
    min-height: 30px;
    position: relative;
  }

  .description {
    width: 80%;
  }

  .drop-zone {
    width: 15%;
    min-height: 30px;
    border: 2px dashed #888;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: #f0f0f0;
  }

  .drop-zone.hovered {
    background-color: #d0f0d0;
  }

  #score {
    margin-top: 20px;
    font-weight: bold;
  }

  button {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 16px;
  }
</style>
</head>
<body>

<div class="draggable-container" id="draggableWords">
  <div class="drag-word" draggable="true" id="lion">lion</div>
  <div class="drag-word" draggable="true" id="bee">bee</div>
  <div class="drag-word" draggable="true" id="mouse">mouse</div>
  <div class="drag-word" draggable="true" id="turtle">turtle</div>
  <div class="drag-word" draggable="true" id="giraffe">giraffe</div>
  <div class="drag-word" draggable="true" id="elephant">elephant</div>
  <div class="drag-word" draggable="true" id="bird">bird</div>
  <div class="drag-word" draggable="true" id="shark">shark</div>
</div>

<div class="lines-container" id="lines">
  <div class="line" data-answer="mouse">
    <div class="description">a small animal with fur and a long tail that likes to eat cheese:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="elephant">
    <div class="description">a large animal with a trunk and big ears that lives in the jungle:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="bee">
    <div class="description">a small insect with wings that can fly and makes a buzzing sound:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="shark">
    <div class="description">a big sea creature with a fin on its back that likes to eat fish:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="bird">
    <div class="description">a small animal with feathers that can fly and sings beautiful songs:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="lion">
    <div class="description">a big animal with a mane and a roar that lives in the savannah:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="giraffe">
    <div class="description">a small animal with a long neck and spots that lives in Africa:</div>
    <div class="drop-zone"></div>
  </div>
  <div class="line" data-answer="turtle">
    <div class="description">a small animal with a shell that lives in the ocean and walks slowly:</div>
    <div class="drop-zone"></div>
  </div>
</div>

<button id="checkBtn">Check Answers</button>
<div id="score"></div>

<script>
  const draggables = document.querySelectorAll('.drag-word');
  const dropZones = document.querySelectorAll('.drop-zone');
  const draggableContainer = document.getElementById('draggableWords');
  const scoreDiv = document.getElementById('score');

  // Make draggable words draggable
  draggables.forEach(d => {
    d.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', e.target.id);
      // Store the element being dragged
      e.dataTransfer.effectAllowed = 'move';
    });
  });

  // Handle drop zones
  dropZones.forEach(zone => {
    zone.addEventListener('dragover', (e) => {
      e.preventDefault();
      zone.classList.add('hovered');
    });
    zone.addEventListener('dragleave', () => {
      zone.classList.remove('hovered');
    });
    zone.addEventListener('drop', (e) => {
      e.preventDefault();
      zone.classList.remove('hovered');
      const wordId = e.dataTransfer.getData('text/plain');
      const draggedWord = document.getElementById(wordId);

      // If zone already has a word, move it back
      if (zone.firstChild && zone.firstChild.classList && zone.firstChild.classList.contains('drag-word')) {
        const prevWord = zone.firstChild;
        // Move previous word back to draggable pool
        draggableContainer.appendChild(prevWord);
      }

      // Move the dragged word to this drop zone
      zone.innerHTML = '';
      zone.appendChild(draggedWord);
    });
  });

  // Make draggable words return to pool when double-clicked
  draggables.forEach(word => {
    word.addEventListener('dblclick', () => {
      // Move back to draggable container
      if (word.parentElement.classList.contains('drop-zone')) {
        word.parentElement.innerHTML = '';
        draggableContainer.appendChild(word);
      }
    });
  });

  // Button to check answers
  document.getElementById('checkBtn').addEventListener('click', () => {
    let score = 0;
    dropZones.forEach(zone => {
      const answer = zone.parentElement.getAttribute('data-answer');
      const placedWord = zone.firstChild ? zone.firstChild.id : null;
      if (placedWord === answer) {
        score++;
        zone.style.borderColor = 'green';
      } else {
        zone.style.borderColor = 'red';
      }
    });
    scoreDiv.innerHTML = `Your score: ${score} / ${dropZones.length}`;
  });
</script>

</body>
</html>