<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Adjectives and Adverbs Drag & Drop Exercise</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: '#5D5CDE'
      }
    }
  }
}
</script>
<style>
.drop-zone {
  min-width: 120px;
  min-height: 32px;
  border: 2px dashed #cbd5e1;
  transition: all 0.2s ease;
}

.drop-zone.drag-over {
  border-color: #5D5CDE;
  background-color: #f1f5f9;
}

.dark .drop-zone.drag-over {
  background-color: #334155;
}

.draggable {
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.draggable:active {
  cursor: grabbing;
}

.draggable.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

.draggable.used {
  opacity: 0.3;
  pointer-events: none;
}

.correct-drop {
  background-color: #dcfce7 !important;
  border-color: #16a34a !important;
}

.incorrect-drop {
  background-color: #fecaca !important;
  border-color: #dc2626 !important;
}

.dark .correct-drop {
  background-color: #14532d !important;
}

.dark .incorrect-drop {
  background-color: #7f1d1d !important;
}
</style>
</head>
<body class="bg-white dark:bg-gray-900 transition-colors duration-200">

<div class="max-w-4xl mx-auto p-6">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">
    Adjectives and Adverbs Drag & Drop Exercise
  </h1>
  
  
  <div class="mb-8 p-6 bg-gray-50 dark:bg-gray-800 rounded-lg border-2 border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Word Bank</h2>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Drag the words below to fill in the blanks in the story:</p>
    <div id="wordBank" class="flex flex-wrap gap-3">
      
    </div>
  </div>

  
  <div class="prose prose-lg max-w-none text-gray-800 dark:text-gray-200">
    <h2 class="text-xl font-semibold mb-4">Fill in the blanks with the correct adjectives or adverbs:</h2>
    
    <div class="leading-relaxed space-y-4 text-base">
      <p>
        Once upon a time, a little rabbit lived in a 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank1"></span> 
        forest. The rabbit was very 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank2"></span> 
        and 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank3"></span>. 
        Every morning, it hopped 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank4"></span> 
        through the trees and smelled the 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank5"></span> 
        flowers. One day, the rabbit saw a 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank6"></span> 
        bird singing 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank7"></span> 
        on a branch. The bird had a 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank8"></span> 
        voice.
      </p>
      
      <p>
        The rabbit wanted to sing too, so it practiced 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank9"></span> 
        every day. Soon, the rabbit sang 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank10"></span> 
        and made all the animals 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank11"></span>. 
        They clapped their paws and wings 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank12"></span>.
      </p>
      
      <p>
        From that day on, the rabbit and the bird sang together 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank13"></span> 
        and 
        <span class="drop-zone inline-flex items-center justify-center rounded px-2 py-1 mx-1" data-blank="blank14"></span> 
        in the green forest.
      </p>
    </div>
  </div>

  
  <div class="flex flex-wrap gap-4 mt-8 justify-center">
    <button onclick="checkAnswers()" 
            class="bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">
      Check Answers
    </button>
    <button onclick="resetExercise()" 
            class="bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg transition-colors duration-200">
      Reset
    </button>
  </div>

  
  <div id="result" class="mt-6 text-center font-semibold text-lg"></div>
</div>

<script>
// Dark mode detection
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    if (event.matches) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
});

const answers = {
  blank1: 'green',
  blank2: 'quick',
  blank3: 'happy',
  blank4: 'quickly',
  blank5: 'sweet',
  blank6: 'small',
  blank7: 'loudly',
  blank8: 'beautiful',
  blank9: 'carefully',
  blank10: 'beautifully',
  blank11: 'happy',
  blank12: 'happily',
  blank13: 'loudly',
  blank14: 'joyfully'
};

let draggedWord = null;

function initializeWordBank() {
  const wordBank = document.getElementById('wordBank');
  const words = Object.values(answers);
  
  // Shuffle the words for randomization
  const shuffledWords = [...words].sort(() => Math.random() - 0.5);
  
  wordBank.innerHTML = '';
  shuffledWords.forEach((word, index) => {
    const wordElement = document.createElement('div');
    wordElement.className = 'draggable bg-white dark:bg-gray-700 border-2 border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 shadow-sm hover:shadow-md text-gray-800 dark:text-gray-200 font-medium';
    wordElement.textContent = word;
    wordElement.draggable = true;
    wordElement.id = `word-${index}`;
    
    // Add drag event listeners
    wordElement.addEventListener('dragstart', handleDragStart);
    wordElement.addEventListener('dragend', handleDragEnd);
    
    // Add touch support for mobile
    wordElement.addEventListener('touchstart', handleTouchStart);
    wordElement.addEventListener('touchmove', handleTouchMove);
    wordElement.addEventListener('touchend', handleTouchEnd);
    
    wordBank.appendChild(wordElement);
  });
}

function handleDragStart(e) {
  if (e.target.classList.contains('used')) return;
  draggedWord = e.target;
  e.target.classList.add('dragging');
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', e.target.outerHTML);
}

function handleDragEnd(e) {
  e.target.classList.remove('dragging');
  draggedWord = null;
}

// Touch support for mobile devices
let touchItem = null;
let touchOffset = { x: 0, y: 0 };

function handleTouchStart(e) {
  if (e.target.classList.contains('used')) return;
  touchItem = e.target;
  const touch = e.touches[0];
  const rect = touchItem.getBoundingClientRect();
  touchOffset.x = touch.clientX - rect.left;
  touchOffset.y = touch.clientY - rect.top;
  touchItem.style.position = 'fixed';
  touchItem.style.zIndex = '1000';
  touchItem.classList.add('dragging');
  e.preventDefault();
}

function handleTouchMove(e) {
  if (!touchItem) return;
  const touch = e.touches[0];
  touchItem.style.left = (touch.clientX - touchOffset.x) + 'px';
  touchItem.style.top = (touch.clientY - touchOffset.y) + 'px';
  e.preventDefault();
}

function handleTouchEnd(e) {
  if (!touchItem) return;
  const touch = e.changedTouches[0];
  const dropTarget = document.elementFromPoint(touch.clientX, touch.clientY);
  
  if (dropTarget && dropTarget.classList.contains('drop-zone') && !dropTarget.hasChildNodes()) {
    handleDrop({ target: dropTarget }, touchItem);
  }
  
  // Reset position
  touchItem.style.position = '';
  touchItem.style.zIndex = '';
  touchItem.style.left = '';
  touchItem.style.top = '';
  touchItem.classList.remove('dragging');
  touchItem = null;
}

// Initialize drop zones
function initializeDropZones() {
  const dropZones = document.querySelectorAll('.drop-zone');
  dropZones.forEach(zone => {
    zone.addEventListener('dragover', handleDragOver);
    zone.addEventListener('drop', handleDrop);
    zone.addEventListener('dragleave', handleDragLeave);
  });
}

function handleDragOver(e) {
  e.preventDefault();
  if (!e.target.hasChildNodes()) {
    e.target.classList.add('drag-over');
  }
}

function handleDragLeave(e) {
  e.target.classList.remove('drag-over');
}

function handleDrop(e, touchWord = null) {
  e.preventDefault();
  const dropZone = e.target;
  dropZone.classList.remove('drag-over');
  
  if (dropZone.hasChildNodes()) return; // Already filled
  
  const wordToMove = touchWord || draggedWord;
  if (!wordToMove) return;
  
  // Clone the word and add it to the drop zone
  const clonedWord = wordToMove.cloneNode(true);
  clonedWord.className = 'bg-blue-100 dark:bg-blue-900 border-2 border-blue-300 dark:border-blue-700 rounded px-2 py-1 text-gray-800 dark:text-gray-200 text-sm font-medium';
  clonedWord.draggable = false;
  clonedWord.id = '';
  
  // Add click to remove functionality
  clonedWord.addEventListener('click', function() {
    const originalWord = Array.from(document.querySelectorAll('#wordBank .draggable')).find(w => 
      w.textContent === clonedWord.textContent && w.classList.contains('used')
    );
    if (originalWord) {
      originalWord.classList.remove('used');
    }
    dropZone.innerHTML = '';
    dropZone.classList.remove('correct-drop', 'incorrect-drop');
  });
  
  dropZone.appendChild(clonedWord);
  
  // Mark original word as used
  wordToMove.classList.add('used');
}

function checkAnswers() {
  let correctCount = 0;
  const total = Object.keys(answers).length;
  
  Object.entries(answers).forEach(([blankId, correctAnswer]) => {
    const dropZone = document.querySelector(`[data-blank="${blankId}"]`);
    const placedWord = dropZone.querySelector('div');
    
    dropZone.classList.remove('correct-drop', 'incorrect-drop');
    
    if (placedWord && placedWord.textContent.trim().toLowerCase() === correctAnswer.toLowerCase()) {
      dropZone.classList.add('correct-drop');
      correctCount++;
    } else if (placedWord) {
      dropZone.classList.add('incorrect-drop');
    }
  });
  
  const resultDiv = document.getElementById('result');
  if (correctCount === total) {
    resultDiv.textContent = `🎉 Excellent! You got all ${total} correct! 🎉`;
    resultDiv.className = 'mt-6 text-center font-semibold text-lg text-green-600 dark:text-green-400';
  } else {
    resultDiv.textContent = `You got ${correctCount} out of ${total} correct. Keep trying!`;
    resultDiv.className = 'mt-6 text-center font-semibold text-lg text-red-600 dark:text-red-400';
  }
}

function resetExercise() {
  // Clear all drop zones
  document.querySelectorAll('.drop-zone').forEach(zone => {
    zone.innerHTML = '';
    zone.classList.remove('correct-drop', 'incorrect-drop');
  });
  
  // Reset word bank
  document.querySelectorAll('#wordBank .draggable').forEach(word => {
    word.classList.remove('used');
  });
  
  // Clear results
  document.getElementById('result').textContent = '';
  
  // Re-shuffle word bank
  initializeWordBank();
  initializeDropZones();
}

// Initialize the exercise
document.addEventListener('DOMContentLoaded', function() {
  initializeWordBank();
  initializeDropZones();
});
</script>

</body>
</html>