const flashcards = {
    JavaScript: [
        { term: "Variable", definition: "A container for storing data values." },
        { term: "Function", definition: "A block of code designed to perform a task." }
    ],
    Python: [
        { term: "List", definition: "A collection which is ordered and changeable." },
        { term: "Indentation", definition: "Whitespace used to define code blocks." }
    ],
    HTML: [
        { term: "Element", definition: "A part of a web page defined by tags." },
        { term: "Attribute", definition: "Provides additional information about elements." }
    ]
};

let currentCategory = "JavaScript";
let currentIndex = 0;
let flipped = false;

const categorySelect = document.getElementById('categorySelect');
const flashcard = document.getElementById('flashcard');
const front = flashcard.querySelector('.front');
const back = flashcard.querySelector('.back');
const flipBtn = document.getElementById('flipBtn');
const nextBtn = document.getElementById('nextBtn');
const quizBtn = document.getElementById('quizBtn');
const quizSection = document.getElementById('quizSection');
const quizQuestion = document.getElementById('quizQuestion');
const quizAnswer = document.getElementById('quizAnswer');
const submitQuiz = document.getElementById('submitQuiz');
const quizResult = document.getElementById('quizResult');

function loadCard() {
    const card = flashcards[currentCategory][currentIndex];
    front.textContent = card.term;
    back.textContent = card.definition;
    flashcard.classList.remove('flipped');
    flipped = false;
}

categorySelect.addEventListener('change', () => {
    currentCategory = categorySelect.value;
    currentIndex = 0;
    loadCard();
});

flipBtn.addEventListener('click', () => {
    flashcard.classList.toggle('flipped');
    flipped = !flipped;
});

nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % flashcards[currentCategory].length;
    loadCard();
});

quizBtn.addEventListener('click', () => {
    quizSection.style.display = 'block';
    startQuiz();
});

function startQuiz() {
    const card = flashcards[currentCategory][Math.floor(Math.random() * flashcards[currentCategory].length)];
    quizQuestion.textContent = `Define: ${card.term}`;
    quizAnswer.value = '';
    quizResult.textContent = '';
    submitQuiz.onclick = () => {
        if (quizAnswer.value.trim().toLowerCase() === card.definition.toLowerCase()) {
            quizResult.textContent = "Correct!";
        } else {
            quizResult.textContent = `Incorrect. Answer: ${card.definition}`;
        }
    };
}

loadCard();