script.js

/* =================================
   CODEQUEST - QUIZ SYSTEM
   ================================= */

// HTML elements
const startBtn = document.getElementById("startBtn");
const restartBtn = document.getElementById("restartBtn");

const welcomeScreen = document.getElementById("welcomeScreen");
const quizScreen = document.getElementById("quizScreen");
const resultScreen = document.getElementById("resultScreen");

const studentName = document.getElementById("studentName");
const subjectSelect = document.getElementById("subject");
const difficultySelect = document.getElementById("difficulty");

const questionTitle = document.getElementById("questionTitle");
const questionContainer = document.getElementById("questionContainer");
const resultText = document.getElementById("resultText");

// Quiz variables
let student = "";
let selectedSubject = "";
let selectedDifficulty = "";
let currentQuestion = 0;
let score = 0;
let quizQuestions = [];
let answered = false;


// Start quiz
startBtn.addEventListener("click", function () {

    student = studentName.value.trim();
    selectedSubject = subjectSelect.value;
    selectedDifficulty = difficultySelect.value;

    if (student === "") {
        alert("Please enter your name!");
        studentName.focus();
        return;
    }

    if (selectedSubject === "") {
        alert("Please select a subject!");
        subjectSelect.focus();
        return;
    }

    // Get questions from questions.js
    if (
        typeof questionBank === "undefined" ||
        !questionBank[selectedSubject] ||
        !questionBank[selectedSubject][selectedDifficulty]
    ) {
        alert("Questions are not available yet for this selection.");
        return;
    }

    quizQuestions = questionBank[selectedSubject][selectedDifficulty];

    if (quizQuestions.length === 0) {
        alert("No questions available yet!");
        return;
    }

    currentQuestion = 0;
    score = 0;

    welcomeScreen.classList.add("hidden");
    resultScreen.classList.add("hidden");
    quizScreen.classList.remove("hidden");

    showQuestion();
});


// Show current question
function showQuestion() {

    answered = false;

    const question = quizQuestions[currentQuestion];

    questionTitle.textContent =
        "Hello, " + student +
        "! Question " + (currentQuestion + 1) +
        " of " + quizQuestions.length;

    questionContainer.innerHTML = "";

    const card = document.createElement("div");
    card.className = "quiz-card";

    const heading = document.createElement("h3");
    heading.textContent = question.question;
    card.appendChild(heading);

    const progress = document.createElement("p");
    progress.className = "message";
    progress.textContent =
        selectedSubject + " • " +
        selectedDifficulty.toUpperCase();
    card.appendChild(progress);

    // Create answer buttons
    question.options.forEach(function (option, index) {

        const button = document.createElement("button");
        button.className = "option-button";
        button.textContent =
            String.fromCharCode(65 + index) + ". " + option;

        button.addEventListener("click", function () {
            checkAnswer(index, button);
        });

        card.appendChild(button);
    });

    const feedback = document.createElement("p");
    feedback.className = "message";
    feedback.id = "answerFeedback";
    card.appendChild(feedback);

    const nextBtn = document.createElement("button");
    nextBtn.id = "nextBtn";
    nextBtn.textContent =
        currentQuestion === quizQuestions.length - 1
            ? "Finish Quiz"
            : "Next Question →";

    nextBtn.disabled = true;

    nextBtn.addEventListener("click", function () {

        currentQuestion++;

        if (currentQuestion < quizQuestions.length) {
            showQuestion();
        } else {
            showResult();
        }
    });

    card.appendChild(nextBtn);
    questionContainer.appendChild(card);
}


// Check answer
function checkAnswer(selectedIndex, selectedButton) {

    if (answered) {
        return;
    }

    answered = true;

    const question = quizQuestions[currentQuestion];

    const optionButtons =
        questionContainer.querySelectorAll(".option-button");

    const feedback = document.getElementById("answerFeedback");
    const nextBtn = document.getElementById("nextBtn");

    if (selectedIndex === question.answer) {

        score++;

        feedback.textContent = "Correct answer! 🎉";
        feedback.style.color = "#34D399";

        selectedButton.classList.add("correct");

    } else {

        feedback.textContent =
            "Correct answer: " + question.options[question.answer];

        feedback.style.color = "#FB7185";

        selectedButton.classList.add("incorrect");
        optionButtons[question.answer].classList.add("correct");
    }

    optionButtons.forEach(function (button) {
        button.disabled = true;
    });

    nextBtn.disabled = false;
}


// Show final result
function showResult() {

    quizScreen.classList.add("hidden");
    resultScreen.classList.remove("hidden");

    const percentage = Math.round(
        (score / quizQuestions.length) * 100
    );

    let message = "Keep practising! You can improve! 💪";

    if (percentage >= 80) {
        message = "Excellent work! 🌟";
    } else if (percentage >= 50) {
        message = "Good effort! Keep learning! 👏";
    }

    resultText.textContent =
        student + ", your score is " +
        score + " out of " + quizQuestions.length +
        " (" + percentage + "%). " + message;

    resultText.className = "score";
}


// Restart quiz
restartBtn.addEventListener("click", function () {

    resultScreen.classList.add("hidden");
    quizScreen.classList.add("hidden");
    welcomeScreen.classList.remove("hidden");

    studentName.value = student;
    subjectSelect.value = selectedSubject;
    difficultySelect.value = selectedDifficulty;

    questionContainer.innerHTML = "";
});