`; pictureContainer.appendChild(pictureCard); });// Create word cards (shuffled) const shuffledPairs = [...data.pairs].sort(() => Math.random() - 0.5); shuffledPairs.forEach((pair, index) => { const wordCard = document.createElement('div'); const colorClass = cardColors[index % cardColors.length]; wordCard.className = `word-card ${colorClass} text-gray-800 px-6 py-4 rounded-xl text-xl font-bold text-center shadow-lg`; wordCard.draggable = true; wordCard.dataset.word = pair.word; wordCard.textContent = pair.word.toUpperCase(); wordContainer.appendChild(wordCard); });// Add event listeners addEventListeners(); resetGame(); }function addEventListeners() { // Add drag event listeners to word cards document.querySelectorAll('.word-card').forEach(card => { card.addEventListener('dragstart', handleDragStart); card.addEventListener('dragend', handleDragEnd); });// Add drop event listeners to drop zones document.querySelectorAll('.drop-zone').forEach(zone => { zone.addEventListener('dragover', handleDragOver); zone.addEventListener('dragenter', handleDragEnter); zone.addEventListener('dragleave', handleDragLeave); zone.addEventListener('drop', handleDrop); }); }function handleDragStart(e) { e.dataTransfer.setData('text/plain', e.target.dataset.word); e.target.classList.add('dragging'); }function handleDragEnd(e) { e.target.classList.remove('dragging'); }function handleDragOver(e) { e.preventDefault(); }function handleDragEnter(e) { e.preventDefault(); e.target.closest('.drop-zone').classList.add('drag-over'); }function handleDragLeave(e) { if (!e.target.closest('.drop-zone').contains(e.relatedTarget)) { e.target.closest('.drop-zone').classList.remove('drag-over'); } }function handleDrop(e) { e.preventDefault(); const dropZone = e.target.closest('.drop-zone'); const draggedWord = e.dataTransfer.getData('text/plain'); const targetWord = dropZone.dataset.word; dropZone.classList.remove('drag-over');if (draggedWord === targetWord && !dropZone.classList.contains('matched')) { // Correct match! dropZone.classList.add('matched'); dropZone.querySelector('.matched-word').textContent = draggedWord.toUpperCase(); dropZone.querySelector('.matched-word').classList.remove('hidden'); dropZone.querySelector('.text-gray-400').classList.add('hidden'); // Remove the word card const wordCard = document.querySelector(`.word-card[data-word="${draggedWord}"]`); wordCard.style.opacity = '0'; wordCard.style.transform = 'scale(0)'; setTimeout(() => { wordCard.remove(); }, 300); // Update score score++; matchedPairs++; scoreElement.textContent = score; // Check if game is complete if (matchedPairs === totalPairs) { setTimeout(() => { successMessage.classList.remove('hidden'); }, 500); } } }function resetGame() { score = 0; matchedPairs = 0; scoreElement.textContent = score; }// Play again functionality playAgainBtn.addEventListener('click', () => { successMessage.classList.add('hidden'); loadLevel(currentLevel); });