function gradeQuiz() {
    let score = 0;
    let total = 5;
    let output = "";

    // Q1
    let q1 = document.getElementById("q1").value.trim().toLowerCase();
    if (q1 === "hypertext") {
        score++;
        output += "<p style='color:green'>Q1 Correct</p>";
    } else {
        output += "<p style='color:red'>Q1 Incorrect (Answer: HyperText)</p>";
    }

    // Q2
    let q2 = document.querySelector('input[name="q2"]:checked');
    if (q2 && q2.value === "css") {
        score++;
        output += "<p style='color:green'>Q2 Correct</p>";
    } else {
        output += "<p style='color:red'>Q2 Incorrect (Answer: CSS)</p>";
    }

    // Q3
    let q3 = document.querySelector('input[name="q3"]:checked');
    if (q3 && q3.value === "interaction") {
        score++;
        output += "<p style='color:green'>Q3 Correct</p>";
    } else {
        output += "<p style='color:red'>Q3 Incorrect (Answer: Interactivity)</p>";
    }

    // Q4
    let q4 = document.querySelector('input[name="q4"]:checked');
    if (q4 && q4.value === "a") {
        score++;
        output += "<p style='color:green'>Q4 Correct</p>";
    } else {
        output += "<p style='color:red'>Q4 Incorrect (Answer: &lt;a&gt;)</p>";
    }

    // Q5 multi-select
    let q5 = document.querySelectorAll('input[name="q5"]:checked');
    let answers = Array.from(q5).map(el => el.value);

    let correct =
        answers.includes("html") &&
        answers.includes("css") &&
        answers.includes("js") &&
        answers.length === 3;

    if (correct) {
        score++;
        output += "<p style='color:green'>Q5 Correct</p>";
    } else {
        output += "<p style='color:red'>Q5 Incorrect (Answer: HTML, CSS, JavaScript)</p>";
    }

    // PASS / FAIL
    let resultColor = score >= 3 ? "green" : "red";
    let resultText = score >= 3 ? "PASS" : "FAIL";

    document.getElementById("results").innerHTML = `
        <h2 style="color:${resultColor}">${resultText}</h2>
        <p><strong>Score:</strong> ${score} / ${total}</p>
        ${output}
    `;
}

function resetQuiz() {
    document.getElementById("results").innerHTML = "";
}