script.js

document.addEventListener('DOMContentLoaded', () => {
    // NEW: Pre-load audio files
    const correctSound = new Audio('audio/correct.mp3');
    const incorrectSound = new Audio('audio/incorrect.mp3');

    const bankList = document.getElementById('bank-list');
    const dropZoneContainer = document.getElementById('drop-zone-container');
    const incorrectCounterSpan = document.getElementById('incorrect-counter');
    const resetBtn = document.getElementById('reset-btn');

    let allTerms = [];
    let incorrectCount = 0;

    async function init() {
        const response = await fetch('data.json');
        allTerms = await response.json();
        
        resetGame(); // Initial setup
        resetBtn.addEventListener('click', resetGame);
    }
    
    function resetGame() {
        incorrectCount = 0;
        incorrectCounterSpan.textContent = incorrectCount;
        
        populateBank(allTerms);
        createDropZones(allTerms);
    }

    function populateBank(terms) {
        const shuffledTerms = [...terms].sort(() => Math.random() - 0.5);
        
        bankList.innerHTML = '';
        shuffledTerms.forEach(item => {
            const termEl = document.createElement('div');
            termEl.classList.add('term-item');
            termEl.id = item.id;
            termEl.textContent = item.term;
            termEl.draggable = true;
            termEl.addEventListener('dragstart', handleDragStart);
            termEl.addEventListener('dragend', handleDragEnd);
            bankList.appendChild(termEl);
        });
    }

    function createDropZones(terms) {
        dropZoneContainer.innerHTML = '';
        terms.forEach(item => {
            const zone = document.createElement('div');
            zone.classList.add('drop-zone');
            zone.dataset.correctId = item.id;

            const definition = document.createElement('div');
            definition.classList.add('definition');
            definition.textContent = item.definition;
            zone.appendChild(definition);

            if (item.mnemonic) {
                const mnemonic = document.createElement('div');
                mnemonic.classList.add('mnemonic');
                mnemonic.textContent = item.mnemonic;
                zone.appendChild(mnemonic);
            }

            addDropListeners(zone);
            dropZoneContainer.appendChild(zone);
        });
    }

    function addDropListeners(element) {
        element.addEventListener('dragover', handleDragOver);
        element.addEventListener('dragleave', handleDragLeave);
        element.addEventListener('drop', handleDrop);
    }

    // --- Event Handlers ---
    function handleDragStart(e) {
        e.dataTransfer.setData('text/plain', e.target.id);
        e.target.classList.add('dragging');
    }

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

    function handleDragOver(e) {
        e.preventDefault();
        const dropZone = e.target.closest('.drop-zone');
        if (dropZone) {
            dropZone.classList.add('drag-over');
        }
    }

    function handleDragLeave(e) {
        const dropZone = e.target.closest('.drop-zone');
        if (dropZone) {
            dropZone.classList.remove('drag-over');
        }
    }

    // UPDATED: This function is rewritten to handle sound and preserve text
    function handleDrop(e) {
        e.preventDefault();
        const dropZone = e.target.closest('.drop-zone');
        if (!dropZone) return;

        dropZone.classList.remove('drag-over');
        
        const termId = e.dataTransfer.getData('text/plain');
        const draggedElement = document.getElementById(termId);

        // UPDATED: This logic now correctly preserves the definition text.
        // It checks if a term is already in the slot and moves it back to the bank.
        const existingTerm = dropZone.querySelector('.term-item');
        if (existingTerm) {
            existingTerm.classList.remove('correct', 'incorrect');
            bankList.appendChild(existingTerm);
        }

        const isCorrect = draggedElement.id === dropZone.dataset.correctId;
        
        draggedElement.classList.remove('correct', 'incorrect');

        // Check correctness and play the corresponding sound
        if (isCorrect) {
            draggedElement.classList.add('correct');
            correctSound.play(); // Play correct sound
        } else {
            draggedElement.classList.add('incorrect');
            incorrectCount++;
            incorrectCounterSpan.textContent = incorrectCount;
            incorrectSound.play(); // Play incorrect sound
        }
        
        dropZone.appendChild(draggedElement);
    }

    init();
});