Interactive Flash Cards


    
        搅拌
        Mix
    
    Flip
    Next

    
        let currentIndex = 0;
        const words = [
            { chinese: '搅拌', english: 'Mix' },
            { chinese: '量', english: 'Measure' },
            { chinese: '记录', english: 'Record' },
            { chinese: '倒', english: 'Pour' },
            { chinese: '分开', english: 'Separate' },
            { chinese: '冲洗', english: 'Rinse' },
            { chinese: '切', english: 'Cut' },
            { chinese: '称', english: 'Weigh' },
            { chinese: '观察', english: 'Observe' },
            { chinese: '调查', english: 'Investigate' },
            { chinese: '包含', english: 'Contain' },
            { chinese: '发生', english: 'Occur' },
            { chinese: '标签', english: 'Label' }
        ];

        const flashCard = document.getElementById('flash-card');
        const cardFront = document.getElementById('card-front');
        const cardBack = document.getElementById('card-back');
        const flipBtn = document.getElementById('flip-btn');
        const nextBtn = document.getElementById('next-btn');

        const updateCard = () => {
            cardFront.textContent = words[currentIndex].chinese;
            cardBack.textContent = words[currentIndex].english;
        };

        const flipCard = () => {
            flashCard.classList.toggle('flip');
        };

        const nextCard = () => {
            currentIndex = (currentIndex + 1) % words.length;
            flashCard.classList.remove('flip'); // Ensure card is always front when we change the card
            setTimeout(updateCard, 600); // Wait till the flip animation ends before updating the card
        };

        flipBtn.addEventListener('click', flipCard);
        nextBtn.addEventListener('click', nextCard);

        updateCard();