const emojiQuizData = [
    { description: "A boomerang, a curved throwing tool that, when thrown correctly, returns to the thrower. Boomerangs are historically significant in Indigenous Australian culture, where they have been used for hunting and sport for thousands of years.", answer: "🫦", name: "Biting Lip" },
    { description: "Safety equipment worn by climbers to protect their head from potential impacts or falling debris while climbing. This emoji symbolizes outdoor adventure.", answer: "🫙", name: "Jar" },
    { description: "A low-heeled shoe, often known as a flat shoe or a slip-on shoe.", answer: "🫲", name: "Leftwards Hand" },
    { description: "A basket, typically woven from materials like straw, wicker, or bamboo, used for carrying or storing items.", answer: "🪺", name: "Nest with Eggs" },
    { description: "A mirrorball or disco ball, typically associated with dance parties and nightlife.", answer: "🫎", name: "Moose" },
    { description: "A face with a party horn and party hat", answer: "🥳", name: "Partying Face" },
    { description: "A ghost", answer: "👻", name: "Ghost" },
    { description: "A face with sunglasses", answer: "😎", name: "Smiling Face with Sunglasses" },
    { description: "A crutch, a medical device used to assist individuals with walking, especially those who have injuries or mobility impairments.", answer: "🫧", name: "Bubbles" },
    { description: "A DNA double helix, the iconic structure of genetic material found in the cells of all living organisms. The double helix consists of two long strands twisted around each other, forming a spiral staircase-like shape.", answer: "🪬", name: "Hamsa" },
    { description: "A melting face, with features appearing to droop or liquefy.", answer: "🫅", name: "Person with Crown" },
    { description: "A low-carb tortilla.", answer: "🫨", name: "Shaking Face" },
    { description: "A bar of soap.", answer: "🪼", name: "Jellyfish" }
];


let selectedQuestions = [];
let currentQuestion = 0;
let score = 0;
let usedEmojis = [];

const quizContainer = document.getElementById('quiz');
const feedbackContainer = document.getElementById('feedback');
const resultContainer = document.getElementById('result');
const rainfallContainer = document.getElementById('rainfall');

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

function loadQuestion() {
    if (currentQuestion < selectedQuestions.length) {
        const quizItem = document.createElement('div');
        quizItem.className = 'quiz-item';
        
        const questionDescription = document.createElement('p');
        questionDescription.textContent = selectedQuestions[currentQuestion].description;
        
        const inputLabel = document.createElement('label');
        inputLabel.textContent = `Input the emoji you think is being described above: `;
        
        const inputField = document.createElement('input');
        inputField.setAttribute('type', 'text');
        inputField.setAttribute('id', 'emoji-input');
        inputField.setAttribute('placeholder', `Your answer here, e.g.,🤔 `);
        
        const submitButton = document.createElement('button');
        submitButton.textContent = 'Submit';
        submitButton.onclick = checkAnswer;
        
        quizItem.appendChild(questionDescription);
        quizItem.appendChild(inputLabel);
        quizItem.appendChild(inputField);
        quizItem.appendChild(submitButton);
        
        quizContainer.innerHTML = '';
        quizContainer.appendChild(quizItem);
    } else {
        showResult();
    }
}

function checkAnswer() {
    const userInput = document.getElementById('emoji-input').value;
    const correctAnswer = selectedQuestions[currentQuestion].answer;
    const correctName = selectedQuestions[currentQuestion].name;

    usedEmojis.push(correctAnswer);
    
    feedbackContainer.textContent = `You said: ${userInput}, GPT was describing: ${correctAnswer} (${correctName})`;
    
    if (userInput === correctAnswer || userInput.toLowerCase() === correctName.toLowerCase()) {
        score++;
    }

    createRainfall(userInput, correctAnswer);
    
    currentQuestion++;
    setTimeout(() => {
        feedbackContainer.textContent = '';
        loadQuestion();
    }, 3000);
}

function showResult() {
    quizContainer.innerHTML = '';
    resultContainer.textContent = `You scored ${score} out of ${selectedQuestions.length}!`;
    createFinalRainfall();
}

function createRainfall(userEmoji, correctEmoji) {
    rainfallContainer.innerHTML = ''; // Clear previous rainfall
    for (let i = 0; i < 30; i++) {
        const span = document.createElement('span');
        span.textContent = Math.random() < 0.5 ? correctEmoji : userEmoji;
        span.style.left = Math.random() * 100 + 'vw';
        span.style.animationDuration = Math.random() * 3 + 2 + 's';
        span.style.fontSize = Math.random() * 2 + 1 + 'em';
        rainfallContainer.appendChild(span);
    }
}

function createFinalRainfall() {
    rainfallContainer.innerHTML = ''; // Clear previous rainfall
    for (let i = 0; i < 100; i++) {
        const span = document.createElement('span');
        span.textContent = usedEmojis[Math.floor(Math.random() * usedEmojis.length)];
        span.style.left = Math.random() * 100 + 'vw';
        span.style.animationDuration = Math.random() * 3 + 2 + 's';
        span.style.fontSize = Math.random() * 2 + 1 + 'em';
        rainfallContainer.appendChild(span);
    }
}

function initializeQuiz() {
    selectedQuestions = shuffleArray([...emojiQuizData]).slice(0, 4);
    loadQuestion();
}

initializeQuiz();