Javascript Trivia Game

const allQuestions = [
    { question: "What is the capital of France?", options: ["Paris", "London", "Rome"], answer: "Paris", explanation: "Paris is the capital of France, known for its art, fashion, and culture." },
    { question: "Who wrote 'Hamlet'?", options: ["Shakespeare", "Hemingway", "Poe"], answer: "Shakespeare", explanation: "'Hamlet' is one of Shakespeare's most famous plays, known for its themes of revenge and existential struggle." },
    { question: "What is 5 + 3?", options: ["5", "8", "10"], answer: "8", explanation: "5 plus 3 equals 8. A simple math calculation using addition." },
    { question: "Which planet is known as the Red Planet?", options: ["Earth", "Mars", "Jupiter"], answer: "Mars", explanation: "Mars is called the 'Red Planet' due to its iron oxide-rich surface." },
    { question: "How many continents are there?", options: ["5", "6", "7"], answer: "7", explanation: "Earth has seven continents: Africa, Antarctica, Asia, Europe, North America, South America, and Australia." },
    { question: "What is the largest ocean on Earth?", options: ["Atlantic", "Pacific", "Indian"], answer: "Pacific", explanation: "The Pacific Ocean is the largest and deepest ocean on Earth." },
    { question: "Which gas do plants use for photosynthesis?", options: ["Oxygen", "Nitrogen", "Carbon Dioxide"], answer: "Carbon Dioxide", explanation: "Plants use carbon dioxide (CO₂) during photosynthesis to produce oxygen." },
    { question: "Who discovered gravity?", options: ["Newton", "Einstein", "Galileo"], answer: "Newton", explanation: "Sir Isaac Newton formulated the theory of gravity when he observed an apple falling from a tree." },
    { question: "What is the square root of 64?", options: ["6", "8", "10"], answer: "8", explanation: "The square root of 64 is 8, because 8 × 8 = 64." },
    { question: "What is the chemical symbol for gold?", options: ["Ag", "Au", "Pb"], answer: "Au", explanation: "Gold's chemical symbol is 'Au', derived from the Latin word 'Aurum'." },
    { question: "What is the fastest land animal?", options: ["Cheetah", "Horse", "Kangaroo"], answer: "Cheetah", explanation: "The cheetah is the fastest land animal, capable of speeds up to 75 mph." },
    { question: "What is the freezing point of water in Celsius?", options: ["0", "32", "100"], answer: "0", explanation: "Water freezes at 0°C, which is equivalent to 32°F." },
    { question: "How many bones are in the human body?", options: ["206", "150", "300"], answer: "206", explanation: "Adults have 206 bones, while babies are born with around 300, which fuse together over time." },
    { question: "Who painted the Mona Lisa?", options: ["Van Gogh", "Da Vinci", "Picasso"], answer: "Da Vinci", explanation: "Leonardo da Vinci painted the Mona Lisa, one of the most famous artworks in history." },
    { question: "What does DNA stand for?", options: ["Deoxyribonucleic Acid", "Dynamic Nucleotide Array", "Double Nuclear Atom"], answer: "Deoxyribonucleic Acid", explanation: "DNA stands for Deoxyribonucleic Acid and carries genetic information." },
];

// **Select 10 Random Questions**
let questions = [];
while (questions.length < 10) {
    let randomIndex = Math.floor(Math.random() * allQuestions.length);
    if (!questions.some(q => q.question === allQuestions[randomIndex].question)) {
        questions.push(allQuestions[randomIndex]);
    }
}

const quizContainer = document.getElementById("quiz-container");
const clickSound = new Audio("click.mp3");

questions.forEach((q, index) => {
    let questionElement = document.createElement("div");
    questionElement.innerHTML = `<p>${index + 1}. ${q.question}</p>`;

    q.options.forEach(option => {
        let button = document.createElement("button");
        button.className = "answer-button";
        button.innerText = option;
        button.onclick = () => {
            clickSound.play();
            document.querySelectorAll(`[data-question="${index}"]`).forEach(btn => btn.classList.remove("selected"));
            button.classList.add("selected");
        };
        button.setAttribute("data-question", index);
        questionElement.appendChild(button);
    });

    quizContainer.appendChild(questionElement);
});

function submitQuiz() {
    let score = 0;
    let feedbackContent = "";

    questions.forEach((q, index) => {
        let selectedOption = document.querySelector(`.answer-button.selected[data-question="${index}"]`);
        let resultText = selectedOption && selectedOption.innerText === q.answer ? "✅ Correct" : "❌ Incorrect";

        feedbackContent += `<p>${index + 1}. ${q.question} - <strong>${resultText}</strong></p>`;
        feedbackContent += `<button onclick="showExplanation(${index})">Explain It to Me</button><br><br>`;

        if (selectedOption && selectedOption.innerText === q.answer) {
            score++;
        }
    });

    document.getElementById("feedback-content").innerHTML = feedbackContent;
    document.getElementById("feedback-frame").classList.add("show");
    document.getElementById("feedback-frame").style.display = "block";

    // 🎉 Trigger Confetti if score is 10/10
    if (score === 10) {
        startConfetti();
    }
}

// 🎊 Confetti Effect
function startConfetti() {
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.style.position = "fixed";
    canvas.style.top = "0";
    canvas.style.left = "0";
    canvas.style.width = "100%";
    canvas.style.height = "100%";
    canvas.style.pointerEvents = "none";

    const ctx = canvas.getContext("2d");
    const particles = [];

    for (let i = 0; i < 100; i++) {
        particles.push({
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            r: Math.random() * 6 + 4,
            color: `hsl(${Math.random() * 360}, 100%, 70%)`,
            speed: Math.random() * 4 + 1
        });
    }

    function render() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(p => {
            ctx.fillStyle = p.color;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
            ctx.fill();
            p.y += p.speed;
        });
        requestAnimationFrame(render);
    }

    render();

    setTimeout(() => {
        document.body.removeChild(canvas);
    }, 3000); // Confetti lasts for 3 seconds
}

function showExplanation(index) {
    document.getElementById("explanation-text").innerText = questions[index].explanation;

    let popup = document.getElementById("explanation-popup");
    popup.classList.add("show");
    popup.style.display = "block";

    popup.querySelector(".popup-content").scrollTop = 0; /* Reset scroll position */
}

function closeFeedback() {
    document.getElementById("feedback-frame").classList.remove("show");
    setTimeout(() => { document.getElementById("feedback-frame").style.display = "none"; }, 300);
}

function closeExplanation() {
    document.getElementById("explanation-popup").classList.remove("show");
    setTimeout(() => { document.getElementById("explanation-popup").style.display = "none"; }, 300);
}