class 8 science chapter 1

ch3 part 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Health and Well-being</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
}

.quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
}

h2 {
    text-align: center;
    color: #1e3c72;
}

.question {
    font-weight: bold;
    margin: 10px 0;
    line-height: 1.6;
}

.options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1.5;
}

.options label:hover {
    background: #f0f0f0;
}

.correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
}

.wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

.explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
}

.controls {
    text-align: center;
    margin-top: 15px;
}

button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
}

button:hover {
    background-color: #1e3c72;
}

#scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
}

#scoreboard h3 {
    text-align: center;
}

ol {
    padding-left: 20px;
}

#userName {
    padding: 10px;
    width: 65%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
</style>
</head>

<body>

<div class="quiz-container">

    <h2>🧠 Science Quiz – Health and Well-being</h2>

    <div id="nameSection">
        <p><strong>Enter your name to start:</strong></p>
        <input type="text" id="userName" placeholder="Your Name">
        <button onclick="startQuiz()">Start Quiz</button>
    </div>

    <div id="quizSection" style="display:none;">

        <div id="questionContainer"></div>

        <div class="controls">
            <button onclick="prevQuestion()" id="prevBtn">Previous</button>
            <button onclick="nextQuestion()" id="nextBtn">Next</button>
            <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
        </div>

        <div id="result" style="text-align:center; margin-top:20px;"></div>

        <div id="scoreboard">
            <h3>πŸ† Scoreboard</h3>
            <ol id="scoreList"></ol>
        </div>

    </div>
</div>

<script>

const questions = [

{
    question: "1. Healthy rehne ke liye humein kaisa food khana chahiye?",
    options: [
        "A. Sirf fast food",
        "B. Healthy aur balanced diet",
        "C. Sirf sweets aur chocolates",
        "D. Sirf oily food"
    ],
    correct: 1,
    explanation: "Balanced diet mein carbohydrates, proteins, fats, vitamins, minerals aur other essential nutrients suitable amounts mein hote hain. Ye body ko energy dene, growth aur repair mein help karte hain.<br><br><strong>Example:</strong> Roti, dal, green vegetables, fruits aur milk ko apni diet mein include karna healthy eating ka example hai."
},

{
    question: "2. Personal hygiene maintain karne ka kya meaning hai?",
    options: [
        "A. Apne body aur surroundings ko clean rakhna",
        "B. Sirf expensive clothes pehenna",
        "C. Sirf exercise karna",
        "D. Din bhar phone use karna"
    ],
    correct: 0,
    explanation: "Personal hygiene ka matlab apne body ko clean rakhna aur aisi habits follow karna hai jo infections aur diseases ka risk kam karne mein help karti hain.<br><br><strong>Example:</strong> Regular bathing, hands ko soap se wash karna aur daily clean clothes pehenna personal hygiene ke examples hain."
},

{
    question: "3. Regular exercise karne se kya benefit hota hai?",
    options: [
        "A. Body hamesha weak hoti hai",
        "B. Sleep ki zaroorat khatam ho jaati hai",
        "C. Body fit aur active rehne mein help milti hai",
        "D. Balanced diet ki zaroorat nahi rehti"
    ],
    correct: 2,
    explanation: "Regular physical activity muscles aur bones ko strong rakhne, fitness improve karne aur mental well-being support karne mein help karti hai.<br><br><strong>Example:</strong> Walking, cycling, swimming aur outdoor games regular exercise ke examples hain."
},

{
    question: "4. Relaxation ya meditation daily karne se kya help mil sakti hai?",
    options: [
        "A. Stress manage karne mein",
        "B. Personal hygiene bhoolne mein",
        "C. Junk food ki need badhane mein",
        "D. Sleep ko completely avoid karne mein"
    ],
    correct: 0,
    explanation: "Relaxation aur meditation mind ko calm karne aur stress manage karne mein help kar sakte hain. Isse mental well-being support hoti hai.<br><br><strong>Example:</strong> Student daily 5–10 minutes calmly baithkar breathing par focus kar sakta hai."
},

{
    question: "5. Mobile phone aur digital screens ka excessive use kyun avoid karna chahiye?",
    options: [
        "A. Kyunki phone se hamesha fever hota hai",
        "B. Kyunki excessive screen time sleep aur daily routine ko affect kar sakta hai",
        "C. Kyunki phone use karne se food digest nahi hota",
        "D. Kyunki screen use karna kabhi useful nahi hota"
    ],
    correct: 1,
    explanation: "Bahut zyada screen time physical activity aur sleep ke liye available time ko reduce kar sakta hai. Isliye screen use ko balance karna important hai.<br><br><strong>Example:</strong> Sone se pehle bahut der tak mobile chalane ke bajay phone side mein rakhkar time par sona better habit hai."
},

{
    question: "6. Roz junk food aur fast food khane se kya problem ho sakti hai?",
    options: [
        "A. Hamesha better nutrition milta hai",
        "B. Body ko saare nutrients automatically mil jaate hain",
        "C. Balanced nutrition maintain karna difficult ho sakta hai",
        "D. Exercise ki zaroorat khatam ho jaati hai"
    ],
    correct: 2,
    explanation: "Bahut se fast foods mein salt, sugar ya unhealthy fats zyada aur essential nutrients comparatively kam ho sakte hain. Inhe frequently khane se balanced diet maintain karna difficult ho sakta hai.<br><br><strong>Example:</strong> Daily chips aur burgers khane ke bajay fruits, vegetables aur homemade meals choose karna healthier option hai."
},

{
    question: "7. Proper sleep lena kyun important hai?",
    options: [
        "A. Body aur mind ko rest aur recovery dene ke liye",
        "B. Exercise ko permanently replace karne ke liye",
        "C. Meals skip karne ke liye",
        "D. Personal hygiene avoid karne ke liye"
    ],
    correct: 0,
    explanation: "Proper sleep body ki recovery, memory, concentration aur mood ko support karti hai. Har age group ko apni age ke according sufficient sleep leni chahiye.<br><br><strong>Example:</strong> Student agar raat ko time par soye aur sufficient sleep le, toh use school mein concentrate karne mein help mil sakti hai."
},

{
    question: "8. Breakfast skip karna healthy habit hai ya unhealthy habit?",
    options: [
        "A. Hamesha healthy habit",
        "B. Unhealthy habit, kyunki regular meals skip karna nutrition aur energy ko affect kar sakta hai",
        "C. Healthy habit, kyunki breakfast ki kabhi zaroorat nahi hoti",
        "D. Exercise ka replacement"
    ],
    correct: 1,
    explanation: "Meals skip karne se body ki energy aur nutritional needs meet karna difficult ho sakta hai. Regular, balanced meals lena helpful hota hai.<br><br><strong>Example:</strong> Breakfast mein poha, oats, eggs ya roti-sabzi jaise options liye ja sakte hain."
},

{
    question: "9. Hamari health kin major factors par depend karti hai?",
    options: [
        "A. Sirf clothes aur fashion par",
        "B. Sirf mobile phone par",
        "C. Lifestyle aur environment par",
        "D. Sirf school ke marks par"
    ],
    correct: 2,
    explanation: "Lifestyle mein hamari daily habits, food, exercise aur sleep include hote hain. Environment mein hamare surroundings, cleanliness aur living conditions aate hain. Dono health ko affect karte hain.<br><br><strong>Example:</strong> Regular exercise karna healthy lifestyle hai, jabki clean drinking water aur clean surroundings healthy environment ke examples hain."
},

{
    question: "10. Inmein se healthy daily routine ka best example kaun-sa hai?",
    options: [
        "A. Late night mobile use karna aur breakfast skip karna",
        "B. Daily junk food khana aur exercise avoid karna",
        "C. Proper sleep lena, balanced diet khana aur regularly exercise karna",
        "D. Meals skip karna aur poora din inactive rehna"
    ],
    correct: 2,
    explanation: "Healthy routine mein nutritious food, personal hygiene, physical activity, proper sleep aur relaxation ka balance hona chahiye. Ye habits physical aur mental well-being ko support karti hain.<br><br><strong>Example:</strong> Time par sona, morning mein healthy breakfast lena, daily physical activity karna aur family-friends ke saath time spend karna ek healthy routine hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";
let quizSubmitted = false;

function startQuiz() {

    userName = document.getElementById("userName").value.trim();

    if (!userName) {
        return alert("Please enter your name.");
    }

    document.getElementById("nameSection").style.display = "none";
    document.getElementById("quizSection").style.display = "block";

    showQuestion();
    loadScoreboard();
}

function showQuestion() {

    const q = questions[currentQuestion];
    const container = document.getElementById("questionContainer");

    container.innerHTML = `
        <div class="question">${q.question}</div>

        <div class="options">
            ${q.options.map((opt, i) => `
                <label>
                    <input type="radio" name="option" value="${i}"
                    ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
                    ${opt}
                </label>
            `).join('')}
        </div>

        <div class="explanation" id="explain${currentQuestion}">
            ${q.explanation}
        </div>
    `;

    document.getElementById("prevBtn").style.display =
        currentQuestion === 0 ? "none" : "inline-block";

    document.getElementById("nextBtn").style.display =
        currentQuestion === questions.length - 1 ? "none" : "inline-block";

    document.getElementById("submitBtn").style.display =
        currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {

    saveAnswer();

    if (currentQuestion < questions.length - 1) {
        currentQuestion++;
        showQuestion();
    }
}

function prevQuestion() {

    saveAnswer();

    if (currentQuestion > 0) {
        currentQuestion--;
        showQuestion();
    }
}

function saveAnswer() {

    const selected = document.querySelector('input[name="option"]:checked');

    userAnswers[currentQuestion] = selected
        ? parseInt(selected.value)
        : null;
}

function submitQuiz() {

    if (quizSubmitted) return;

    saveAnswer();

    score = 0;

    questions.forEach((q, index) => {
        if (userAnswers[index] === q.correct) {
            score++;
        }
    });

    quizSubmitted = true;

    showResults();
    saveScore(userName, score);
    loadScoreboard();
}

function showResults() {

    const container = document.getElementById("questionContainer");

    container.innerHTML = "";

    questions.forEach((q, index) => {

        const selected = userAnswers[index];
        const correct = q.correct;

        let optsHTML = q.options.map((opt, i) => {

            let cls = "";

            if (i === correct) {
                cls = "correct";
            }

            if (selected === i && selected !== correct) {
                cls = "wrong";
            }

            return `<label class="${cls}">${opt}</label>`;

        }).join("");

        container.innerHTML += `
            <div class="question">${q.question}</div>

            <div class="options">
                ${optsHTML}
            </div>

            <div class="explanation" style="display:block;">
                ${q.explanation}
            </div>

            <hr>
        `;
    });

    document.querySelector(".controls").style.display = "none";

    document.getElementById("result").innerHTML =
        `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.push({
        name,
        score,
        date: new Date().toLocaleString()
    });

    localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.sort((a, b) => b.score - a.score);

    document.getElementById("scoreList").innerHTML =
        scores.map(s =>
            `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
        ).join("");
}

</script>

</body>
</html>

ch3part3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Health and Well-being</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
}

.quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
}

h2 {
    text-align: center;
    color: #1e3c72;
}

.question {
    font-weight: bold;
    margin: 10px 0;
    line-height: 1.6;
}

.options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
    line-height: 1.5;
}

.options label:hover {
    background: #f0f0f0;
}

.correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
}

.wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

.explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
}

.controls {
    text-align: center;
    margin-top: 15px;
}

button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
}

button:hover {
    background-color: #1e3c72;
}

#scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
}

#scoreboard h3 {
    text-align: center;
}

ol {
    padding-left: 20px;
}

#userName {
    padding: 10px;
    width: 65%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
}
</style>
</head>

<body>

<div class="quiz-container">

    <h2>🧠 Science Quiz – Health and Well-being</h2>

    <div id="nameSection">
        <p><strong>Enter your name to start:</strong></p>
        <input type="text" id="userName" placeholder="Your Name">
        <button onclick="startQuiz()">Start Quiz</button>
    </div>

    <div id="quizSection" style="display:none;">

        <div id="questionContainer"></div>

        <div class="controls">
            <button onclick="prevQuestion()" id="prevBtn">Previous</button>
            <button onclick="nextQuestion()" id="nextBtn">Next</button>
            <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
        </div>

        <div id="result" style="text-align:center; margin-top:20px;"></div>

        <div id="scoreboard">
            <h3>πŸ† Scoreboard</h3>
            <ol id="scoreList"></ol>
        </div>

    </div>
</div>

<script>

const questions = [

{
    question: "1. Healthy rehne ke liye humein kaisa food khana chahiye?",
    options: [
        "A. Sirf fast food",
        "B. Healthy aur balanced diet",
        "C. Sirf sweets aur chocolates",
        "D. Sirf oily food"
    ],
    correct: 1,
    explanation: "Balanced diet mein carbohydrates, proteins, fats, vitamins, minerals aur other essential nutrients suitable amounts mein hote hain. Ye body ko energy dene, growth aur repair mein help karte hain.<br><br><strong>Example:</strong> Roti, dal, green vegetables, fruits aur milk ko apni diet mein include karna healthy eating ka example hai."
},

{
    question: "2. Personal hygiene maintain karne ka kya meaning hai?",
    options: [
        "A. Apne body aur surroundings ko clean rakhna",
        "B. Sirf expensive clothes pehenna",
        "C. Sirf exercise karna",
        "D. Din bhar phone use karna"
    ],
    correct: 0,
    explanation: "Personal hygiene ka matlab apne body ko clean rakhna aur aisi habits follow karna hai jo infections aur diseases ka risk kam karne mein help karti hain.<br><br><strong>Example:</strong> Regular bathing, hands ko soap se wash karna aur daily clean clothes pehenna personal hygiene ke examples hain."
},

{
    question: "3. Regular exercise karne se kya benefit hota hai?",
    options: [
        "A. Body hamesha weak hoti hai",
        "B. Sleep ki zaroorat khatam ho jaati hai",
        "C. Body fit aur active rehne mein help milti hai",
        "D. Balanced diet ki zaroorat nahi rehti"
    ],
    correct: 2,
    explanation: "Regular physical activity muscles aur bones ko strong rakhne, fitness improve karne aur mental well-being support karne mein help karti hai.<br><br><strong>Example:</strong> Walking, cycling, swimming aur outdoor games regular exercise ke examples hain."
},

{
    question: "4. Relaxation ya meditation daily karne se kya help mil sakti hai?",
    options: [
        "A. Stress manage karne mein",
        "B. Personal hygiene bhoolne mein",
        "C. Junk food ki need badhane mein",
        "D. Sleep ko completely avoid karne mein"
    ],
    correct: 0,
    explanation: "Relaxation aur meditation mind ko calm karne aur stress manage karne mein help kar sakte hain. Isse mental well-being support hoti hai.<br><br><strong>Example:</strong> Student daily 5–10 minutes calmly baithkar breathing par focus kar sakta hai."
},

{
    question: "5. Mobile phone aur digital screens ka excessive use kyun avoid karna chahiye?",
    options: [
        "A. Kyunki phone se hamesha fever hota hai",
        "B. Kyunki excessive screen time sleep aur daily routine ko affect kar sakta hai",
        "C. Kyunki phone use karne se food digest nahi hota",
        "D. Kyunki screen use karna kabhi useful nahi hota"
    ],
    correct: 1,
    explanation: "Bahut zyada screen time physical activity aur sleep ke liye available time ko reduce kar sakta hai. Isliye screen use ko balance karna important hai.<br><br><strong>Example:</strong> Sone se pehle bahut der tak mobile chalane ke bajay phone side mein rakhkar time par sona better habit hai."
},

{
    question: "6. Roz junk food aur fast food khane se kya problem ho sakti hai?",
    options: [
        "A. Hamesha better nutrition milta hai",
        "B. Body ko saare nutrients automatically mil jaate hain",
        "C. Balanced nutrition maintain karna difficult ho sakta hai",
        "D. Exercise ki zaroorat khatam ho jaati hai"
    ],
    correct: 2,
    explanation: "Bahut se fast foods mein salt, sugar ya unhealthy fats zyada aur essential nutrients comparatively kam ho sakte hain. Inhe frequently khane se balanced diet maintain karna difficult ho sakta hai.<br><br><strong>Example:</strong> Daily chips aur burgers khane ke bajay fruits, vegetables aur homemade meals choose karna healthier option hai."
},

{
    question: "7. Proper sleep lena kyun important hai?",
    options: [
        "A. Body aur mind ko rest aur recovery dene ke liye",
        "B. Exercise ko permanently replace karne ke liye",
        "C. Meals skip karne ke liye",
        "D. Personal hygiene avoid karne ke liye"
    ],
    correct: 0,
    explanation: "Proper sleep body ki recovery, memory, concentration aur mood ko support karti hai. Har age group ko apni age ke according sufficient sleep leni chahiye.<br><br><strong>Example:</strong> Student agar raat ko time par soye aur sufficient sleep le, toh use school mein concentrate karne mein help mil sakti hai."
},

{
    question: "8. Breakfast skip karna healthy habit hai ya unhealthy habit?",
    options: [
        "A. Hamesha healthy habit",
        "B. Unhealthy habit, kyunki regular meals skip karna nutrition aur energy ko affect kar sakta hai",
        "C. Healthy habit, kyunki breakfast ki kabhi zaroorat nahi hoti",
        "D. Exercise ka replacement"
    ],
    correct: 1,
    explanation: "Meals skip karne se body ki energy aur nutritional needs meet karna difficult ho sakta hai. Regular, balanced meals lena helpful hota hai.<br><br><strong>Example:</strong> Breakfast mein poha, oats, eggs ya roti-sabzi jaise options liye ja sakte hain."
},

{
    question: "9. Hamari health kin major factors par depend karti hai?",
    options: [
        "A. Sirf clothes aur fashion par",
        "B. Sirf mobile phone par",
        "C. Lifestyle aur environment par",
        "D. Sirf school ke marks par"
    ],
    correct: 2,
    explanation: "Lifestyle mein hamari daily habits, food, exercise aur sleep include hote hain. Environment mein hamare surroundings, cleanliness aur living conditions aate hain. Dono health ko affect karte hain.<br><br><strong>Example:</strong> Regular exercise karna healthy lifestyle hai, jabki clean drinking water aur clean surroundings healthy environment ke examples hain."
},

{
    question: "10. Inmein se healthy daily routine ka best example kaun-sa hai?",
    options: [
        "A. Late night mobile use karna aur breakfast skip karna",
        "B. Daily junk food khana aur exercise avoid karna",
        "C. Proper sleep lena, balanced diet khana aur regularly exercise karna",
        "D. Meals skip karna aur poora din inactive rehna"
    ],
    correct: 2,
    explanation: "Healthy routine mein nutritious food, personal hygiene, physical activity, proper sleep aur relaxation ka balance hona chahiye. Ye habits physical aur mental well-being ko support karti hain.<br><br><strong>Example:</strong> Time par sona, morning mein healthy breakfast lena, daily physical activity karna aur family-friends ke saath time spend karna ek healthy routine hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";
let quizSubmitted = false;

function startQuiz() {

    userName = document.getElementById("userName").value.trim();

    if (!userName) {
        return alert("Please enter your name.");
    }

    document.getElementById("nameSection").style.display = "none";
    document.getElementById("quizSection").style.display = "block";

    showQuestion();
    loadScoreboard();
}

function showQuestion() {

    const q = questions[currentQuestion];
    const container = document.getElementById("questionContainer");

    container.innerHTML = `
        <div class="question">${q.question}</div>

        <div class="options">
            ${q.options.map((opt, i) => `
                <label>
                    <input type="radio" name="option" value="${i}"
                    ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
                    ${opt}
                </label>
            `).join('')}
        </div>

        <div class="explanation" id="explain${currentQuestion}">
            ${q.explanation}
        </div>
    `;

    document.getElementById("prevBtn").style.display =
        currentQuestion === 0 ? "none" : "inline-block";

    document.getElementById("nextBtn").style.display =
        currentQuestion === questions.length - 1 ? "none" : "inline-block";

    document.getElementById("submitBtn").style.display =
        currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {

    saveAnswer();

    if (currentQuestion < questions.length - 1) {
        currentQuestion++;
        showQuestion();
    }
}

function prevQuestion() {

    saveAnswer();

    if (currentQuestion > 0) {
        currentQuestion--;
        showQuestion();
    }
}

function saveAnswer() {

    const selected = document.querySelector('input[name="option"]:checked');

    userAnswers[currentQuestion] = selected
        ? parseInt(selected.value)
        : null;
}

function submitQuiz() {

    if (quizSubmitted) return;

    saveAnswer();

    score = 0;

    questions.forEach((q, index) => {
        if (userAnswers[index] === q.correct) {
            score++;
        }
    });

    quizSubmitted = true;

    showResults();
    saveScore(userName, score);
    loadScoreboard();
}

function showResults() {

    const container = document.getElementById("questionContainer");

    container.innerHTML = "";

    questions.forEach((q, index) => {

        const selected = userAnswers[index];
        const correct = q.correct;

        let optsHTML = q.options.map((opt, i) => {

            let cls = "";

            if (i === correct) {
                cls = "correct";
            }

            if (selected === i && selected !== correct) {
                cls = "wrong";
            }

            return `<label class="${cls}">${opt}</label>`;

        }).join("");

        container.innerHTML += `
            <div class="question">${q.question}</div>

            <div class="options">
                ${optsHTML}
            </div>

            <div class="explanation" style="display:block;">
                ${q.explanation}
            </div>

            <hr>
        `;
    });

    document.querySelector(".controls").style.display = "none";

    document.getElementById("result").innerHTML =
        `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.push({
        name,
        score,
        date: new Date().toLocaleString()
    });

    localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.sort((a, b) => b.score - a.score);

    document.getElementById("scoreList").innerHTML =
        scores.map(s =>
            `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
        ).join("");
}

</script>

</body>
</html>

ch3part4

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Symptoms and Signs</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
  box-sizing: border-box;
}

.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}

h2 {
  text-align: center;
  color: #1e3c72;
}

.question {
  font-weight: bold;
  margin: 15px 0;
  line-height: 1.6;
}

.options label {
  display: block;
  margin: 8px 0;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}

.options label:hover {
  background: #f0f0f0;
}

.options input {
  margin-right: 8px;
}

.correct {
  background-color: #c8f7c5 !important;
  border-color: #28a745 !important;
}

.wrong {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}

.explanation {
  background: #e9ecef;
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 15px;
  border-left: 5px solid #2a5298;
  display: none;
  line-height: 1.6;
}

.controls {
  text-align: center;
  margin-top: 15px;
}

button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #1e3c72;
}

#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}

#scoreboard h3 {
  text-align: center;
}

ol {
  padding-left: 20px;
}

#userName {
  padding: 10px;
  width: 90%;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#result {
  text-align: center;
  margin-top: 20px;
  color: #1e3c72;
}
</style>
</head>

<body>

<div class="quiz-container">

<h2>🧠 Science Quiz – Symptoms and Signs</h2>

<div id="nameSection">
  <p><strong>Enter your name to start:</strong></p>
  <input type="text" id="userName" placeholder="Your Name">
  <button onclick="startQuiz()">Start Quiz</button>
</div>

<div id="quizSection" style="display:none;">

  <div id="questionContainer"></div>

  <div class="controls">
    <button onclick="prevQuestion()" id="prevBtn">Previous</button>
    <button onclick="nextQuestion()" id="nextBtn">Next</button>
    <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
  </div>

  <div id="result"></div>

  <div id="scoreboard">
    <h3>πŸ† Scoreboard</h3>
    <ol id="scoreList"></ol>
  </div>

</div>
</div>

<script>

const questions = [

{
question: "1. Jab hum unwell feel karte hain, toh iska kya meaning ho sakta hai?",
options: [
"A. Body hamesha perfectly kaam kar rahi hai",
"B. Body ke andar kuch theek se kaam nahi kar raha ho sakta hai",
"C. Humein rest ki kabhi zaroorat nahi hoti",
"D. Hum hamesha healthy hote hain"
],
correct: 1,
explanation: "Jab body ka normal functioning affect hota hai, toh humein unwell feel ho sakta hai. Body kuch symptoms ya signs show kar sakti hai.<br><br><b>Example:</b> Agar kisi person ko weakness aur dizziness feel ho, toh uski health mein koi problem ho sakti hai."
},

{
question: "2. Symptom ka correct meaning kya hai?",
options: [
"A. Jo hum khud feel karte hain",
"B. Jo sirf microscope se dikhta hai",
"C. Jo hamesha measure kiya ja sakta hai",
"D. Jo sirf doctor feel karta hai"
],
correct: 0,
explanation: "Symptom woh experience ya feeling hai jo person khud report karta hai. Doctor ko symptom ke baare mein patient batata hai.<br><br><b>Example:</b> Headache, nausea aur dizziness feel hona symptoms ke examples hain."
},

{
question: "3. Inmein se symptom ka example kaun-sa hai?",
options: [
"A. Measured high body temperature",
"B. Skin par visible rash",
"C. Headache feel hona",
"D. Visible swelling"
],
correct: 2,
explanation: "Headache ek symptom hai kyunki person khud pain feel karta hai. High temperature, rash aur swelling signs ho sakte hain jo observe ya measure kiye ja sakte hain.<br><br><b>Example:</b> Agar student kahe, 'Mere sir mein dard ho raha hai,' toh headache ek symptom hai."
},

{
question: "4. Sign ka correct meaning kya hai?",
options: [
"A. Sirf ek feeling jo person experience karta hai",
"B. Aisi cheez jo observe ya measure ki ja sakti hai",
"C. Sirf mood change hona",
"D. Sirf bhookh lagna"
],
correct: 1,
explanation: "Sign woh indication hai jo doctor ya doosra person dekh ya measure kar sakta hai. Signs health condition ko samajhne mein help karte hain.<br><br><b>Example:</b> Thermometer se measured high body temperature fever ka sign hai."
},

{
question: "5. Fever ke time thermometer se high body temperature milna kya hai?",
options: [
"A. Symptom only",
"B. Sign",
"C. Exercise",
"D. Healthy habit"
],
correct: 1,
explanation: "Body temperature ko thermometer se measure kiya ja sakta hai, isliye measured high temperature ek sign hai.<br><br><b>Example:</b> Agar thermometer 38Β°C temperature show kare, toh yeh fever indicate kar sakta hai. Reading aur symptoms ke according doctor se advice leni chahiye."
},

{
question: "6. Inmein se kaunsa sign ka example hai?",
options: [
"A. Pain feel hona",
"B. Tiredness feel hona",
"C. Dizziness feel hona",
"D. Skin par rash dikhna"
],
correct: 3,
explanation: "Rash skin par visible change hota hai, isliye ise sign ke roop mein observe kiya ja sakta hai.<br><br><b>Example:</b> Agar kisi person ki skin par red spots ya rash dikhai de, toh doctor usse examine kar sakta hai."
},

{
question: "7. Tiredness feel hona kis category mein aata hai?",
options: [
"A. Symptom",
"B. Sign only",
"C. Organ",
"D. Microorganism"
],
correct: 0,
explanation: "Tiredness ek feeling hai jise person khud experience karta hai. Isliye tiredness ko symptom maana jaata hai.<br><br><b>Example:</b> Agar koi student kahe ki use bahut thakaan lag rahi hai, toh woh symptom report kar raha hai."
},

{
question: "8. High blood pressure ko sign kyun maana jaata hai?",
options: [
"A. Kyunki ise sirf feel kiya ja sakta hai",
"B. Kyunki ise instrument se measure kiya ja sakta hai",
"C. Kyunki yeh hamesha visible hota hai",
"D. Kyunki yeh healthy body ki guarantee hai"
],
correct: 1,
explanation: "Blood pressure ko blood pressure monitor se measure kiya ja sakta hai. High blood pressure kai baar bina noticeable symptoms ke bhi ho sakta hai.<br><br><b>Example:</b> Doctor check-up ke time BP monitor se blood pressure measure karta hai."
},

{
question: "9. Symptoms aur signs doctors ki help kaise karte hain?",
options: [
"A. Woh bina examination ke har disease confirm kar dete hain",
"B. Woh doctor ko possible health problem samajhne mein help karte hain",
"C. Woh diseases ko hamesha turant cure kar dete hain",
"D. Woh medicines ki zaroorat khatam kar dete hain"
],
correct: 1,
explanation: "Doctor patient ke symptoms aur signs ko examine karke possible causes samajhta hai. Zaroorat padne par tests bhi kar sakta hai.<br><br><b>Example:</b> Fever, cough aur weakness ki information lekar doctor decide kar sakta hai ki further examination ya test ki zaroorat hai ya nahi."
},

{
question: "10. Symptom aur sign ke beech correct difference kaun-sa hai?",
options: [
"A. Symptom feel hota hai, jabki sign observe ya measure kiya ja sakta hai",
"B. Symptom hamesha visible hota hai, sign kabhi visible nahi hota",
"C. Dono ka meaning exactly same hai",
"D. Signs aur symptoms ka health se koi relation nahi hai"
],
correct: 0,
explanation: "Symptom patient ki feeling ya experience hota hai, jabki sign observable ya measurable indication hota hai. Dono doctor ko health problem samajhne mein help karte hain.<br><br><b>Example:</b> Headache ek symptom hai, jabki thermometer se measured high body temperature ek sign hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {

  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    alert("Please enter your name.");
    return;
  }

  currentQuestion = 0;
  userAnswers = [];

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {

  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] === i ? "checked" : ""}>
          ${opt}
        </label>
      `).join("")}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {

  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] =
    selected ? parseInt(selected.value) : null;
}

function nextQuestion() {

  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {

  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {

  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {

  const container = document.getElementById("questionContainer");

  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) cls = "correct";

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join("");

    container.innerHTML += `
      <div class="question">${q.question}</div>

      <div class="options">${optsHTML}</div>

      <div class="explanation" style="display:block;">
        <b>Correct Answer:</b> ${q.options[correct]}
        <br><br>
        ${q.explanation}
      </div>

      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <h4>${userName}</h4>
    <button onclick="location.reload()">Restart Quiz</button>
  `;
}

function saveScore(name, score) {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name: name,
    score: score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join("");
}

</script>

</body>
</html>

ch3part5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Diseases and Their Types</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
  box-sizing: border-box;
}

.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}

h2 {
  text-align: center;
  color: #1e3c72;
}

.question {
  font-weight: bold;
  margin: 15px 0;
  line-height: 1.6;
}

.options label {
  display: block;
  margin: 8px 0;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}

.options label:hover {
  background: #f0f0f0;
}

.options input {
  margin-right: 8px;
}

.correct {
  background-color: #c8f7c5 !important;
  border-color: #28a745 !important;
}

.wrong {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}

.explanation {
  background: #e9ecef;
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 15px;
  border-left: 5px solid #2a5298;
  display: none;
  line-height: 1.6;
}

.controls {
  text-align: center;
  margin-top: 15px;
}

button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #1e3c72;
}

#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}

#scoreboard h3 {
  text-align: center;
}

ol {
  padding-left: 20px;
}

#userName {
  padding: 10px;
  width: 90%;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

#result {
  text-align: center;
  margin-top: 20px;
  color: #1e3c72;
}
</style>
</head>

<body>

<div class="quiz-container">

<h2>🧠 Science Quiz – Diseases and Their Types</h2>

<div id="nameSection">
  <p><strong>Enter your name to start:</strong></p>
  <input type="text" id="userName" placeholder="Your Name">
  <button onclick="startQuiz()">Start Quiz</button>
</div>

<div id="quizSection" style="display:none;">

  <div id="questionContainer"></div>

  <div class="controls">
    <button onclick="prevQuestion()" id="prevBtn">Previous</button>
    <button onclick="nextQuestion()" id="nextBtn">Next</button>
    <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
  </div>

  <div id="result"></div>

  <div id="scoreboard">
    <h3>πŸ† Scoreboard</h3>
    <ol id="scoreList"></ol>
  </div>

</div>
</div>

<script>

const questions = [

{
question: "1. Disease ka correct meaning kya hai?",
options: [
"A. Body ka hamesha normally work karna",
"B. Aisi condition jo body ya mind ke normal functioning ko affect kare",
"C. Sirf body ka grow karna",
"D. Sirf exercise karne ke baad tired hona"
],
correct: 1,
explanation: "Disease ek aisi condition hai jo body ya mind ke normal working ko disturb kar sakti hai. Ismein ek ya zyada organs ya organ systems properly function nahi karte.<br><br><b>Example:</b> Diabetes ek disease hai jo body ke blood glucose ko control karne ki ability ko affect karti hai."
},

{
question: "2. Disease-causing organisms ko kya kehte hain?",
options: [
"A. Nutrients",
"B. Pathogens",
"C. Vitamins",
"D. Hormones"
],
correct: 1,
explanation: "Disease cause karne wale organisms ko pathogens kehte hain. Inmein kuch bacteria, viruses, fungi aur protozoa shamil hote hain. Kuch worms bhi diseases cause kar sakte hain.<br><br><b>Example:</b> Flu virus ek pathogen hai jo influenza disease cause karta hai."
},

{
question: "3. Inmein se kaunsi non-communicable disease hai?",
options: [
"A. Chickenpox",
"B. Flu",
"C. Diabetes",
"D. Typhoid"
],
correct: 2,
explanation: "Non-communicable diseases (NCDs) ek person se doosre person mein directly spread nahi hoti. Ye lifestyle, genetics, nutrition ya environmental factors se related ho sakti hain.<br><br><b>Example:</b> Diabetes ek NCD hai. Yeh kisi person ke paas baithne ya uske saath khana khane se spread nahi hoti."
},

{
question: "4. Communicable disease kise kehte hain?",
options: [
"A. Jo sirf poor nutrition se hoti hai",
"B. Jo pathogens ke kaaran hoti hai aur spread ho sakti hai",
"C. Jo kabhi treatment nahi maangti",
"D. Jo sirf old age mein hoti hai"
],
correct: 1,
explanation: "Communicable diseases pathogens ke kaaran hoti hain aur different routes se ek host se doosre host tak spread kar sakti hain.<br><br><b>Example:</b> Flu infected person ke respiratory droplets ya particles ke through doosre person tak spread ho sakta hai."
},

{
question: "5. Inmein se kaunsi communicable disease hai?",
options: [
"A. Asthma",
"B. Cancer",
"C. Diabetes",
"D. Chickenpox"
],
correct: 3,
explanation: "Chickenpox ek communicable disease hai jo varicella-zoster virus ke kaaran hoti hai. Yeh infected person se doosron tak spread ho sakti hai.<br><br><b>Example:</b> Chickenpox wale person ke close contact mein aane se infection ka risk badh sakta hai."
},

{
question: "6. Non-communicable diseases hone ka possible reason kya hai?",
options: [
"A. Unhealthy lifestyle aur poor nutrition",
"B. Sirf infected person ke saath contact",
"C. Sirf mosquitoes ke bite",
"D. Sirf viruses ka spread hona"
],
correct: 0,
explanation: "Kuch NCDs unhealthy diet, physical inactivity, genetics aur environmental factors se related hoti hain. Har NCD ka cause same nahi hota.<br><br><b>Example:</b> Physical inactivity aur unhealthy diet type 2 diabetes aur heart disease ka risk badha sakte hain."
},

{
question: "7. Dengue disease ka spread mainly kis ke bite se hota hai?",
options: [
"A. Housefly",
"B. Aedes mosquito",
"C. Honeybee",
"D. Butterfly"
],
correct: 1,
explanation: "Dengue ek communicable disease hai jo dengue virus ke kaaran hoti hai. Infected Aedes mosquitoes ke bite se yeh virus humans mein spread hota hai.<br><br><b>Example:</b> Mosquito breeding ko reduce karne ke liye ghar ke aas-paas paani jama nahi hone dena chahiye."
},

{
question: "8. Communicable aur non-communicable diseases mein main difference kya hai?",
options: [
"A. Dono hamesha pathogens se hoti hain",
"B. Communicable diseases spread ho sakti hain, jabki NCDs person-to-person spread nahi hoti",
"C. NCDs hamesha short-term hoti hain",
"D. Communicable diseases ka treatment kabhi possible nahi hota"
],
correct: 1,
explanation: "Communicable diseases pathogens ke kaaran hoti hain aur spread kar sakti hain. Non-communicable diseases directly ek person se doosre person mein spread nahi hoti.<br><br><b>Example:</b> Flu communicable disease hai, jabki asthma non-communicable disease hai."
},

{
question: "9. Kuch diseases short-term hoti hain, jabki kuch long-term. Long-term disease ka kya meaning hai?",
options: [
"A. Jo hamesha ek din mein cure ho jaati hai",
"B. Jo sirf ek ghante rehti hai",
"C. Jo long period tak reh sakti hai aur regular care maang sakti hai",
"D. Jo kisi bhi organ ko affect nahi karti"
],
correct: 2,
explanation: "Long-term diseases ko chronic diseases bhi kaha ja sakta hai. Inmein symptoms aur condition ko manage karne ke liye regular treatment ya care ki zaroorat ho sakti hai.<br><br><b>Example:</b> Diabetes ek long-term condition hai jise medicines, healthy habits aur regular monitoring se manage kiya ja sakta hai."
},

{
question: "10. India mein non-communicable diseases badhne ka ek possible reason kya hai?",
options: [
"A. Sabhi log zyada exercise kar rahe hain",
"B. Processed food ka zyada consumption aur physical activity ki kami",
"C. Sabhi diseases pathogens se hoti hain",
"D. Clean drinking water ka use"
],
correct: 1,
explanation: "Unhealthy diet aur physical inactivity jaise lifestyle factors NCDs ka risk badha sakte hain. Population ageing bhi NCDs ke burden mein contribute kar sakti hai.<br><br><b>Example:</b> Regular physical activity karna, balanced diet lena aur tobacco se door rehna NCDs ke risk ko reduce karne mein help kar sakta hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {

  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    alert("Please enter your name.");
    return;
  }

  currentQuestion = 0;
  userAnswers = [];

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {

  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] === i ? "checked" : ""}>
          ${opt}
        </label>
      `).join("")}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {

  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] =
    selected ? parseInt(selected.value) : null;
}

function nextQuestion() {

  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {

  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {

  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {

  const container = document.getElementById("questionContainer");

  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) cls = "correct";

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join("");

    container.innerHTML += `
      <div class="question">${q.question}</div>

      <div class="options">${optsHTML}</div>

      <div class="explanation" style="display:block;">
        <b>Correct Answer:</b> ${q.options[correct]}
        <br><br>
        ${q.explanation}
      </div>

      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <h4>${userName}</h4>
    <button onclick="location.reload()">Restart Quiz</button>
  `;
}

function saveScore(name, score) {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name: name,
    score: score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join("");
}

</script>

</body>
</html>

ch3part6

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Communicable Diseases and Their Spread</title>

<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
  }

  .quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
  }

  h2 {
    text-align: center;
    color: #1e3c72;
  }

  .question {
    font-weight: bold;
    margin: 10px 0;
  }

  .options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
  }

  .options label:hover {
    background: #f0f0f0;
  }

  .correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
  }

  .wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
  }

  .explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
  }

  .controls {
    text-align: center;
    margin-top: 15px;
  }

  button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }

  button:hover {
    background-color: #1e3c72;
  }

  #scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
  }

  #scoreboard h3 {
    text-align: center;
  }

  ol {
    padding-left: 20px;
  }
</style>
</head>

<body>

<div class="quiz-container">

  <h2>🧠 Science Quiz – Communicable Diseases and Their Spread</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">

    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>

  </div>
</div>

<script>

const questions = [

  {
    question: "1. All communicable diseases kis ke kaaran hoti hain?",
    options: [
      "A. Vitamins",
      "B. Pathogens",
      "C. Minerals",
      "D. Proteins"
    ],
    correct: 1,
    explanation: "Pathogens disease-causing organisms ya agents hote hain. Inmein bacteria, viruses, fungi aur protozoa shamil ho sakte hain. Ye body mein enter karke infections cause kar sakte hain.<br><br><strong>Example:</strong> Influenza virus flu cause karta hai, jabki kuch bacteria typhoid cause karte hain."
  },

  {
    question: "2. Infected person ke cough ya sneeze se pathogens kaise spread ho sakte hain?",
    options: [
      "A. Air mein respiratory droplets ya particles ke through",
      "B. Sirf sunlight ke through",
      "C. Sirf loud sound ke through",
      "D. Sirf exercise ke through"
    ],
    correct: 0,
    explanation: "Jab infected person cough ya sneeze karta hai, toh respiratory droplets aur kuch infectious particles hawa mein release ho sakte hain. Doosre log inhe inhale karke infected ho sakte hain.<br><br><strong>Example:</strong> Flu se infected person ke cough karne par paas khade person ko infection ka risk ho sakta hai."
  },

  {
    question: "3. Infected person se direct contact ka example kaun-sa hai?",
    options: [
      "A. Clean water peena",
      "B. Infected person se handshake karna",
      "C. Healthy food khana",
      "D. Open ground mein running karna"
    ],
    correct: 1,
    explanation: "Kuch pathogens direct physical contact ke through spread ho sakte hain. Lekin har disease handshake se spread nahi hoti; spread hona pathogen aur disease par depend karta hai.<br><br><strong>Example:</strong> Kuch skin infections infected skin ke direct contact se spread ho sakte hain."
  },

  {
    question: "4. Infected person ka towel ya personal item share karne se kya risk ho sakta hai?",
    options: [
      "A. Kuch pathogens indirectly spread ho sakte hain",
      "B. Har disease automatically cure ho jaati hai",
      "C. Body ko extra oxygen milti hai",
      "D. Immunity hamesha badh jaati hai"
    ],
    correct: 0,
    explanation: "Kuch infectious agents contaminated personal items ke through doosre person tak pahunch sakte hain. Isliye towels aur personal hygiene items share karne se bachna chahiye.<br><br><strong>Example:</strong> Contaminated towel share karne se kuch fungal skin infections spread ho sakte hain."
  },

  {
    question: "5. Contaminated drinking water se communicable diseases kaise spread hoti hain?",
    options: [
      "A. Water mein harmful pathogens enter ho jaate hain aur use peene se infection ho sakta hai",
      "B. Water hamesha pathogens ko destroy kar deta hai",
      "C. Water se sirf non-communicable diseases hoti hain",
      "D. Water ka health se koi relation nahi hai"
    ],
    correct: 0,
    explanation: "Jab drinking water harmful microorganisms se contaminated ho jaata hai, toh use peene se infections ho sakte hain.<br><br><strong>Example:</strong> Contaminated water se cholera jaise infections spread ho sakte hain. Safe drinking water use karna important hai."
  },

  {
    question: "6. Food se communicable disease spread hone ka main reason kya ho sakta hai?",
    options: [
      "A. Food ka colourful hona",
      "B. Food ka contaminated pathogens se hona",
      "C. Food ko plate mein serve karna",
      "D. Food ko slowly chew karna"
    ],
    correct: 1,
    explanation: "Agar food harmful pathogens se contaminated ho aur properly handle ya cook na kiya gaya ho, toh use khane se foodborne illness ho sakti hai.<br><br><strong>Example:</strong> Contaminated food se kuch bacterial infections ho sakte hain. Food ko safely store karna aur properly cook karna risk kam karta hai."
  },

  {
    question: "7. Mosquitoes aur houseflies ko disease transmission ke context mein kya kehte hain?",
    options: [
      "A. Nutrients",
      "B. Vectors",
      "C. Decomposers",
      "D. Producers"
    ],
    correct: 1,
    explanation: "Vectors aise living organisms hote hain jo pathogens ko ek host se doosre host tak transmit kar sakte hain.<br><br><strong>Example:</strong> Infected Aedes mosquito dengue virus ko humans tak transmit kar sakta hai."
  },

  {
    question: "8. Dengue spread karne wala important vector kaun-sa hai?",
    options: [
      "A. Aedes mosquito",
      "B. Earthworm",
      "C. Butterfly",
      "D. Honeybee"
    ],
    correct: 0,
    explanation: "Dengue virus infected Aedes mosquitoes ke bite se humans mein transmit hota hai. Mosquito breeding sites ko reduce karna dengue prevention ka important step hai.<br><br><strong>Example:</strong> Cooler, flower pots aur containers mein jama paani regularly empty karna chahiye."
  },

  {
    question: "9. Communicable diseases se bachne ke liye kaunsi habit useful hai?",
    options: [
      "A. Dirty water peena",
      "B. Infected person ke personal items share karna",
      "C. Hands ko soap se wash karna aur safe food-water use karna",
      "D. Cough karte waqt mouth cover na karna"
    ],
    correct: 2,
    explanation: "Handwashing, safe drinking water, food hygiene aur cough etiquette kai infections ka risk reduce karne mein help karte hain.<br><br><strong>Example:</strong> Khana khane se pehle hands soap se wash karo aur cough ya sneeze ke time tissue ya elbow se mouth-nose cover karo."
  },

  {
    question: "10. Diseases ke spread hone ke different routes ko samajhna kyun important hai?",
    options: [
      "A. Taaki hum prevention ke correct steps le sakein",
      "B. Taaki hum sabhi microorganisms se darne lagein",
      "C. Taaki humein hygiene maintain na karni pade",
      "D. Taaki hum treatment ko ignore kar sakein"
    ],
    correct: 0,
    explanation: "Different pathogens different routes se spread hote hain. Transmission ka route samajhne se hum suitable precautions choose kar sakte hain.<br><br><strong>Example:</strong> Dengue ke liye mosquito control, waterborne diseases ke liye safe drinking water aur respiratory infections ke liye cough etiquette helpful precautions hain."
  }

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    return alert("Please enter your name.");
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>

    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] = selected
    ? parseInt(selected.value)
    : null;
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) {
        cls = "correct";
      }

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML =
    `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}

</script>

</body>
</html>

ch3part7

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Common Infectious Diseases</title>

<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
  }

  .quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
  }

  h2 { text-align: center; color: #1e3c72; }
  .question { font-weight: bold; margin: 10px 0; }

  .options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
  }

  .options label:hover { background: #f0f0f0; }

  .correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
  }

  .wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
  }

  .explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
  }

  .controls { text-align: center; margin-top: 15px; }

  button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }

  button:hover { background-color: #1e3c72; }

  #scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
  }

  #scoreboard h3 { text-align: center; }
  ol { padding-left: 20px; }
</style>
</head>

<body>

<div class="quiz-container">

  <h2>🧠 Science Quiz – Common Infectious Diseases</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">

    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>

  </div>
</div>

<script>

const questions = [

  {
    question: "1. Common cold aur influenza kis disease-causing agent ke kaaran hote hain?",
    options: [
      "A. Bacteria",
      "B. Virus",
      "C. Fungi",
      "D. Worms"
    ],
    correct: 1,
    explanation: "Common cold aur influenza dono viruses ke kaaran hote hain. Virus body mein enter karke respiratory tract ko affect kar sakte hain.<br><br><strong>Example:</strong> Common cold hone par naak behna, chheenk aana aur gale mein kharash ho sakti hai."
  },

  {
    question: "2. Common cold aur influenza mein body ka kaunsa part mainly affect hota hai?",
    options: [
      "A. Digestive tract",
      "B. Respiratory tract",
      "C. Bones",
      "D. Kidneys"
    ],
    correct: 1,
    explanation: "Respiratory tract mein naak, gala aur breathing se related passages aate hain. Infections ki wajah se cough, sore throat aur nasal congestion ho sakta hai.<br><br><strong>Example:</strong> Flu hone par khansi aur naak band hone ki problem ho sakti hai."
  },

  {
    question: "3. Chickenpox mein kaunsa symptom commonly dekha jaata hai?",
    options: [
      "A. Itchy skin, rashes aur blisters",
      "B. Sirf toothache",
      "C. Sirf hair fall",
      "D. Sirf knee pain"
    ],
    correct: 0,
    explanation: "Chickenpox ek viral disease hai. Ismein fever ke saath skin par itchy rashes aur fluid-filled blisters ho sakte hain.<br><br><strong>Example:</strong> Chickenpox mein skin par chhote-chhote daane aur blisters dikh sakte hain."
  },

  {
    question: "4. Chickenpox se bachav ka ek important measure kya hai?",
    options: [
      "A. Bina doctor ki salah ke antibiotics lena",
      "B. Vaccination karwana",
      "C. Paani peena band kar dena",
      "D. Exercise bilkul na karna"
    ],
    correct: 1,
    explanation: "Vaccination chickenpox hone ka risk kam karne mein madad karti hai. Infected person ko doosron se door rakhna bhi disease ke spread ko rokne mein helpful hai.<br><br><strong>Example:</strong> Chickenpox se infected child ko school bhejne ke bajay medical advice ke according ghar par isolate rakhna chahiye."
  },

  {
    question: "5. Measles ka causal agent kya hai?",
    options: [
      "A. Bacteria",
      "B. Fungus",
      "C. Virus",
      "D. Worm"
    ],
    correct: 2,
    explanation: "Measles ek viral communicable disease hai. Yeh fever, sore throat aur reddish skin rashes cause kar sakti hai.<br><br><strong>Example:</strong> Measles mein body par laal rashes develop ho sakte hain aur fever bhi aa sakta hai."
  },

  {
    question: "6. Measles se bachav ke liye kaunsa measure important hai?",
    options: [
      "A. Vaccination aur good hygiene",
      "B. Sirf junk food khana",
      "C. Haath dhona band karna",
      "D. Infected person ke close contact mein rehna"
    ],
    correct: 0,
    explanation: "Measles vaccination se prevent ki ja sakti hai. Good hygiene aur infected person ko isolate karna infection ke spread ko control karne mein help karta hai.<br><br><strong>Example:</strong> Measles se infected person ko doosron se alag rakhna aur vaccination schedule follow karna useful hai."
  },

  {
    question: "7. Tuberculosis (TB) kis microorganism ke kaaran hoti hai?",
    options: [
      "A. Virus",
      "B. Bacteria",
      "C. Algae",
      "D. Yeast"
    ],
    correct: 1,
    explanation: "Tuberculosis, yaani TB, bacteria ke kaaran hoti hai. Yeh commonly lungs ko affect karti hai aur iska treatment doctor ki supervision mein karna zaroori hai.<br><br><strong>Example:</strong> TB mein kai hafton tak cough reh sakti hai, isliye medical check-up karwana chahiye."
  },

  {
    question: "8. Tuberculosis mein kaunsa organ mainly affect hota hai?",
    options: [
      "A. Heart",
      "B. Stomach",
      "C. Lungs",
      "D. Skin only"
    ],
    correct: 2,
    explanation: "TB commonly lungs ko infect karti hai. Iske symptoms mein cough, fever, fatigue, appetite kam hona aur raat ko sweating shamil ho sakte hain.<br><br><strong>Example:</strong> TB se affected person ko persistent cough aur weakness ho sakti hai."
  },

  {
    question: "9. Common cold aur influenza ke spread ko kam karne ke liye kya karna chahiye?",
    options: [
      "A. Personal items share karna",
      "B. Khansne par mouth cover na karna",
      "C. Frequently hands wash karna aur cough etiquette follow karna",
      "D. Bina haath dhoye khana khana"
    ],
    correct: 2,
    explanation: "Haath dhona, khansne ya chheenkne par mouth aur nose cover karna, aur zaroorat ke samay mask use karna infection spread ka risk kam kar sakta hai.<br><br><strong>Example:</strong> Cough ya sneeze karte waqt tissue ya elbow se mouth aur nose cover karo."
  },

  {
    question: "10. Neeche diye gaye options mein kaunsa disease aur causal agent ka correct pair hai?",
    options: [
      "A. Chickenpox β€” Bacteria",
      "B. Measles β€” Fungus",
      "C. Tuberculosis β€” Bacteria",
      "D. Influenza β€” Worm"
    ],
    correct: 2,
    explanation: "TB bacteria se hoti hai, jabki chickenpox, measles aur influenza viruses ke kaaran hote hain.<br><br><strong>Example:</strong> TB bacterial disease hai, jabki flu viral disease hai. Dono communicable diseases ho sakti hain, lekin inke causal agents different hain."
  }

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    return alert("Please enter your name.");
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>

    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] = selected
    ? parseInt(selected.value)
    : null;
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) {
        cls = "correct";
      }

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML =
    `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}

</script>

</body>
</html>

ch3part8

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Infectious Diseases</title>

<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
    box-sizing: border-box;
  }

  .quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
  }

  h2 {
    text-align: center;
    color: #1e3c72;
  }

  .question {
    font-weight: bold;
    margin: 15px 0;
    line-height: 1.6;
  }

  .options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
  }

  .options label:hover {
    background: #f0f0f0;
  }

  .options input {
    margin-right: 8px;
  }

  .correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
  }

  .wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
  }

  .explanation {
    background: #e9ecef;
    padding: 12px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
    border-radius: 5px;
  }

  .controls {
    text-align: center;
    margin-top: 15px;
  }

  button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }

  button:hover {
    background-color: #1e3c72;
  }

  #userName {
    padding: 10px;
    width: 95%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  #scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
  }

  #scoreboard h3 {
    text-align: center;
  }

  ol {
    padding-left: 20px;
  }

  hr {
    margin: 25px 0;
    border: 0;
    border-top: 1px solid #ddd;
  }
</style>
</head>

<body>

<div class="quiz-container">

  <h2>🧠 Science Quiz – Common Infectious Diseases</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <br>
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">

    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>

  </div>
</div>

<script>

const questions = [

  {
    question: "1. Common cold aur influenza ke common symptoms kaun-se hain?",
    options: [
      "A. Nasal congestion, cough aur body ache",
      "B. Sirf toothache aur ear pain",
      "C. Sirf hair fall aur itching",
      "D. Sirf bone fracture"
    ],
    correct: 0,
    explanation: "Explanation: Common cold aur influenza respiratory tract ko affect karte hain. Inmein naak band hona, naak behna, cough, fever aur body ache ho sakta hai.<br><br>Example: Flu hone par kisi person ko fever, cough aur body pain ek saath ho sakte hain."
  },

  {
    question: "2. Chickenpox mein skin par hone wale fluid-filled daanon ko kya kaha jaata hai?",
    options: [
      "A. Blisters",
      "B. Bones",
      "C. Muscles",
      "D. Nerves"
    ],
    correct: 0,
    explanation: "Explanation: Chickenpox mein itchy rashes ke saath fluid-filled blisters ho sakte hain. Inhe scratch karne se skin ko damage ho sakta hai.<br><br>Example: Chickenpox ke daanon ko khurachne ke bajay doctor ki advice follow karni chahiye."
  },

  {
    question: "3. Measles mein reddish rashes ke saath kaunsa symptom ho sakta hai?",
    options: [
      "A. Fever",
      "B. Broken bones",
      "C. Increased height",
      "D. Stronger eyesight"
    ],
    correct: 0,
    explanation: "Explanation: Measles ek viral disease hai. Ismein fever, sore throat aur skin par reddish rashes ho sakte hain.<br><br>Example: Agar kisi child ko fever aur rashes hain, toh doctor se check-up karwana chahiye."
  },

  {
    question: "4. Tuberculosis (TB) ka ek common symptom kaunsa hai?",
    options: [
      "A. Persistent cough",
      "B. Sirf hiccups",
      "C. Sirf toothache",
      "D. Sirf nail growth"
    ],
    correct: 0,
    explanation: "Explanation: TB lungs ko affect kar sakti hai. Ismein prolonged cough, fever, fatigue, appetite kam hona aur night sweats ho sakte hain.<br><br>Example: Kai hafton se cough rehne par medical examination karwana important hai."
  },

  {
    question: "5. TB se infected person ke saath close contact ko lekar kaunsi baat sahi hai?",
    options: [
      "A. Koi precaution zaroori nahi hai",
      "B. Medical advice aur appropriate precautions follow karne chahiye",
      "C. Infected person ki medicines share karni chahiye",
      "D. Symptoms ko hamesha ignore karna chahiye"
    ],
    correct: 1,
    explanation: "Explanation: TB hawa ke through spread ho sakti hai, especially jab lungs ya throat TB wala person bacteria hawa mein release karta hai. Proper treatment, ventilation aur medical guidance spread ko kam karte hain.<br><br>Example: TB patient ke room mein ventilation achha rakhna aur doctor ke instructions follow karna helpful hai."
  },

  {
    question: "6. Inmein se kaunsi disease bacteria ke kaaran hoti hai?",
    options: [
      "A. Chickenpox",
      "B. Measles",
      "C. Tuberculosis",
      "D. Influenza"
    ],
    correct: 2,
    explanation: "Explanation: Tuberculosis bacteria se hoti hai, jabki chickenpox, measles aur influenza viruses ke kaaran hote hain.<br><br>Example: TB ek bacterial disease hai, jabki common flu viral disease hai."
  },

  {
    question: "7. Vaccination ka main purpose kya hai?",
    options: [
      "A. Body ko infection se ladne ke liye protection develop karne mein help karna",
      "B. Har disease ko turant cure kar dena",
      "C. Body ko paani ki zaroorat se free karna",
      "D. Sabhi microorganisms ko useful banana"
    ],
    correct: 0,
    explanation: "Explanation: Vaccines immune system ko specific infections ke against protection develop karne mein help karti hain. Vaccination har case mein complete protection ki guarantee nahi deti.<br><br>Example: Measles vaccine measles hone ka risk kam karne mein help karti hai."
  },

  {
    question: "8. Inmein se kaunsa disease prevention ka sahi example hai?",
    options: [
      "A. Cough karte waqt mouth aur nose cover karna",
      "B. Used tissues ko idhar-udhar phenkna",
      "C. Bina haath dhoye khana khana",
      "D. Infected person ke personal items share karna"
    ],
    correct: 0,
    explanation: "Explanation: Cough ya sneeze ke waqt mouth aur nose cover karne se infectious particles ka spread kam ho sakta hai.<br><br>Example: Tissue use karne ke baad use dustbin mein daalo aur hands clean karo."
  },

  {
    question: "9. Common cold, influenza, chickenpox aur measles mein kya common hai?",
    options: [
      "A. Sabhi bacteria se hote hain",
      "B. Sabhi viruses se hote hain",
      "C. Sabhi sirf lungs ko affect karte hain",
      "D. Sabhi non-communicable diseases hain"
    ],
    correct: 1,
    explanation: "Explanation: Ye chaaron viral diseases hain. Inke symptoms aur affected body parts alag ho sakte hain, lekin causal agent virus hota hai.<br><br>Example: Influenza mein respiratory symptoms common hain, jabki chickenpox mein itchy skin blisters bhi ho sakte hain."
  },

  {
    question: "10. Night sweats, fever, fatigue aur appetite loss kis disease ke symptoms ho sakte hain?",
    options: [
      "A. Tuberculosis (TB)",
      "B. Sirf common cold",
      "C. Chickenpox only",
      "D. Measles only"
    ],
    correct: 0,
    explanation: "Explanation: TB mein fever, weakness, appetite loss aur raat ko excessive sweating ho sakti hai. Lekin sirf symptoms se disease confirm nahi hoti; doctor ki evaluation zaroori hai.<br><br>Example: Agar kisi person ko prolonged cough, weight loss aur night sweats ho rahe hain, toh use medical advice leni chahiye."
  }

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {

  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    return alert("Please enter your name.");
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {

  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">
      ${q.question}
    </div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio"
                 name="option"
                 value="${i}"
                 ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>

    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {

  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {

  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function saveAnswer() {

  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] =
    selected ? parseInt(selected.value) : null;
}

function submitQuiz() {

  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {

  const container = document.getElementById("questionContainer");

  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) {
        cls = "correct";
      }

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>

      <div class="options">
        ${optsHTML}
      </div>

      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>

      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>${score === 10 ? "Excellent! Perfect Score!" :
         score >= 7 ? "Very Good! Keep Practicing!" :
         score >= 5 ? "Good Effort! Revise the Topic!" :
         "Keep Learning and Try Again!"}</p>
  `;
}

function saveScore(name, score) {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}

</script>

</body>
</html>

ch3part9

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Common Infectious Diseases</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
}
.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}
h2 { text-align: center; color: #1e3c72; }
.question { font-weight: bold; margin: 10px 0; line-height: 1.6; }
.options label {
  display: block;
  margin: 8px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}
.options label:hover { background: #f0f0f0; }
.correct { background-color: #c8f7c5 !important; border-color: #28a745 !important; }
.wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; }
.explanation {
  background: #e9ecef;
  padding: 10px;
  margin-top: 10px;
  border-left: 5px solid #2a5298;
  display: none;
  line-height: 1.6;
}
.controls { text-align: center; margin-top: 15px; }
button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}
button:hover { background-color: #1e3c72; }
#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}
#scoreboard h3 { text-align: center; }
ol { padding-left: 20px; }
</style>
</head>

<body>
<div class="quiz-container">

  <h2>🧠 Science Quiz – Common Infectious Diseases</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>
</div>

<script>
const questions = [
  {
    question: "1. Common cold aur influenza ke common symptoms kaun-se hain?",
    options: [
      "A. Nasal congestion, cough aur body ache",
      "B. Sirf toothache aur ear pain",
      "C. Sirf hair fall aur itching",
      "D. Sirf bone fracture"
    ],
    correct: 0,
    explanation: "Explanation: Common cold aur influenza respiratory tract ko affect karte hain. Inmein naak band hona, naak behna, cough, fever aur body ache ho sakta hai.<br><br>Example: Flu hone par kisi person ko fever, cough aur body pain ek saath ho sakte hain."
  },
  {
    question: "2. Chickenpox mein skin par hone wale fluid-filled daanon ko kya kaha jaata hai?",
    options: [
      "A. Blisters",
      "B. Bones",
      "C. Muscles",
      "D. Nerves"
    ],
    correct: 0,
    explanation: "Explanation: Chickenpox mein itchy rashes ke saath fluid-filled blisters ho sakte hain. Inhe scratch karne se skin ko damage ho sakta hai.<br><br>Example: Chickenpox ke daanon ko khurachne ke bajay doctor ki advice follow karni chahiye."
  },
  {
    question: "3. Measles mein reddish rashes ke saath kaunsa symptom ho sakta hai?",
    options: [
      "A. Fever",
      "B. Broken bones",
      "C. Increased height",
      "D. Stronger eyesight"
    ],
    correct: 0,
    explanation: "Explanation: Measles ek viral disease hai. Ismein fever, sore throat aur skin par reddish rashes ho sakte hain.<br><br>Example: Agar kisi child ko fever aur rashes hain, toh doctor se check-up karwana chahiye."
  },
  {
    question: "4. Tuberculosis (TB) ka ek common symptom kaunsa hai?",
    options: [
      "A. Persistent cough",
      "B. Sirf hiccups",
      "C. Sirf toothache",
      "D. Sirf nail growth"
    ],
    correct: 0,
    explanation: "Explanation: TB lungs ko affect kar sakti hai. Ismein prolonged cough, fever, fatigue, appetite kam hona aur night sweats ho sakte hain.<br><br>Example: Kai hafton se cough rehne par medical examination karwana important hai."
  },
  {
    question: "5. TB se infected person ke saath close contact ko lekar kaunsi baat sahi hai?",
    options: [
      "A. Koi precaution zaroori nahi hai",
      "B. Medical advice aur appropriate precautions follow karne chahiye",
      "C. Infected person ki medicines share karni chahiye",
      "D. Symptoms ko hamesha ignore karna chahiye"
    ],
    correct: 1,
    explanation: "Explanation: TB hawa ke through spread ho sakti hai, especially jab lungs ya throat TB wala person bacteria hawa mein release karta hai. Proper treatment, ventilation aur medical guidance spread ko kam karte hain.<br><br>Example: TB patient ke room mein ventilation achha rakhna aur doctor ke instructions follow karna helpful hai."
  },
  {
    question: "6. Inmein se kaunsi disease bacteria ke kaaran hoti hai?",
    options: [
      "A. Chickenpox",
      "B. Measles",
      "C. Tuberculosis",
      "D. Influenza"
    ],
    correct: 2,
    explanation: "Explanation: Tuberculosis bacteria se hoti hai, jabki chickenpox, measles aur influenza viruses ke kaaran hote hain.<br><br>Example: TB ek bacterial disease hai, jabki common flu viral disease hai."
  },
  {
    question: "7. Vaccination ka main purpose kya hai?",
    options: [
      "A. Body ko infection se ladne ke liye protection develop karne mein help karna",
      "B. Har disease ko turant cure kar dena",
      "C. Body ko paani ki zaroorat se free karna",
      "D. Sabhi microorganisms ko useful banana"
    ],
    correct: 0,
    explanation: "Explanation: Vaccines immune system ko specific infections ke against protection develop karne mein help karti hain. Vaccination har case mein complete protection ki guarantee nahi deti.<br><br>Example: Measles vaccine measles hone ka risk kam karne mein help karti hai."
  },
  {
    question: "8. Inmein se kaunsa disease prevention ka sahi example hai?",
    options: [
      "A. Cough karte waqt mouth aur nose cover karna",
      "B. Used tissues ko idhar-udhar phenkna",
      "C. Bina haath dhoye khana khana",
      "D. Infected person ke personal items share karna"
    ],
    correct: 0,
    explanation: "Explanation: Cough ya sneeze ke waqt mouth aur nose cover karne se infectious particles ka spread kam ho sakta hai.<br><br>Example: Tissue use karne ke baad use dustbin mein daalo aur hands clean karo."
  },
  {
    question: "9. Common cold, influenza, chickenpox aur measles mein kya common hai?",
    options: [
      "A. Sabhi bacteria se hote hain",
      "B. Sabhi viruses se hote hain",
      "C. Sabhi sirf lungs ko affect karte hain",
      "D. Sabhi non-communicable diseases hain"
    ],
    correct: 1,
    explanation: "Explanation: Ye chaaron viral diseases hain. Inke symptoms aur affected body parts alag ho sakte hain, lekin causal agent virus hota hai.<br><br>Example: Influenza mein respiratory symptoms common hain, jabki chickenpox mein itchy skin blisters bhi ho sakte hain."
  },
  {
    question: "10. Night sweats, fever, fatigue aur appetite loss kis disease ke symptoms ho sakte hain?",
    options: [
      "A. Tuberculosis (TB)",
      "B. Sirf common cold",
      "C. Chickenpox only",
      "D. Measles only"
    ],
    correct: 0,
    explanation: "Explanation: TB mein fever, weakness, appetite loss aur raat ko excessive sweating ho sakti hai. Lekin sirf symptoms se disease confirm nahi hoti; doctor ki evaluation zaroori hai.<br><br>Example: Agar kisi person ko prolonged cough, weight loss aur night sweats ho rahe hain, toh use medical advice leni chahiye."
  }
];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) return alert("Please enter your name.");

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>
    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
            ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>
    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {
  saveAnswer();
  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();
  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');
  userAnswers[currentQuestion] =
    selected ? parseInt(selected.value) : null;
}

function submitQuiz() {
  saveAnswer();
  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) score++;
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {
    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {
      let cls = "";

      if (i === correct) cls = "correct";
      if (selected === i && selected !== correct) cls = "wrong";

      return `<label class="${cls}">${opt}</label>`;
    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML =
    `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}
</script>

</body>
</html>

ch3part10

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Diseases and Their Prevention</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
  box-sizing: border-box;
}
.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}
h2 {
  text-align: center;
  color: #1e3c72;
}
.question {
  font-weight: bold;
  margin: 10px 0;
  line-height: 1.6;
}
.options label {
  display: block;
  margin: 8px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}
.options label:hover {
  background: #f0f0f0;
}
.correct {
  background-color: #c8f7c5 !important;
  border-color: #28a745 !important;
}
.wrong {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}
.explanation {
  background: #e9ecef;
  padding: 10px;
  margin-top: 10px;
  border-left: 5px solid #2a5298;
  display: none;
  line-height: 1.6;
}
.controls {
  text-align: center;
  margin-top: 15px;
}
button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}
button:hover {
  background-color: #1e3c72;
}
#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}
#scoreboard h3 {
  text-align: center;
}
ol {
  padding-left: 20px;
}
#userName {
  padding: 10px;
  width: 95%;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
</style>
</head>

<body>

<div class="quiz-container">

  <h2>🧠 Science Quiz – Diseases and Their Prevention</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>

</div>

<script>

const questions = [

{
  question: "1. Hepatitis A mein nausea aur vomiting ke saath kaunsa symptom ho sakta hai?",
  options: [
    "A. Loss of appetite",
    "B. Improved eyesight",
    "C. Stronger bones",
    "D. Increased height"
  ],
  correct: 0,
  explanation: "Hepatitis A liver ko affect karta hai. Ismein fatigue, fever, nausea, vomiting aur bhookh kam lagna jaise symptoms ho sakte hain.<br><br><strong>Example:</strong> Hepatitis A se affected person ko khana dekhkar bhi nausea feel ho sakta hai."
},

{
  question: "2. Jaundice mein skin aur aankhon ka white part kis colour ka dikh sakta hai?",
  options: [
    "A. Blue",
    "B. Yellow",
    "C. Green",
    "D. Purple"
  ],
  correct: 1,
  explanation: "Jaundice mein bilirubin naam ka substance body mein badh sakta hai, jisse skin aur aankhon ka white part yellow ho jaata hai. Yeh liver-related problems ka sign ho sakta hai.<br><br><strong>Example:</strong> Agar kisi person ki aankhen peeli dikh rahi hain, toh doctor se check-up karwana chahiye."
},

{
  question: "3. Cholera mein severe diarrhoea hone se body mein kya problem ho sakti hai?",
  options: [
    "A. Dehydration",
    "B. Improved digestion",
    "C. Increased bone strength",
    "D. Better eyesight"
  ],
  correct: 0,
  explanation: "Severe diarrhoea mein body se bahut saara water aur salts lose ho sakte hain. Isse dehydration hota hai, jo serious condition ban sakti hai.<br><br><strong>Example:</strong> Cholera ke patient ko severe watery diarrhoea hone par urgent medical care ki zaroorat ho sakti hai."
},

{
  question: "4. Typhoid mein kaunsa symptom commonly dekha ja sakta hai?",
  options: [
    "A. Fever aur headache",
    "B. Sirf toothache",
    "C. Sirf hair growth",
    "D. Sirf skin blisters"
  ],
  correct: 0,
  explanation: "Typhoid ek bacterial infection hai. Ismein fever, headache, abdominal discomfort aur kabhi-kabhi diarrhoea ho sakta hai.<br><br><strong>Example:</strong> Contaminated food khane ke baad fever aur stomach discomfort hone par doctor se consult karna chahiye."
},

{
  question: "5. Ascariasis mein roundworm infection body ke kis part ko mainly affect karta hai?",
  options: [
    "A. Intestine",
    "B. Hair",
    "C. Nails",
    "D. Outer ear only"
  ],
  correct: 0,
  explanation: "Ascariasis roundworms ke kaaran hota hai. Adult worms mainly intestine mein rehte hain aur infection appetite, nutrition aur growth ko affect kar sakta hai.<br><br><strong>Example:</strong> Infected child mein poor growth aur weight loss ho sakta hai."
},

{
  question: "6. Contaminated food aur water se spread hone wali diseases kaun-si hain?",
  options: [
    "A. Cholera aur Typhoid",
    "B. Chickenpox aur Measles only",
    "C. Sirf asthma",
    "D. Sirf diabetes"
  ],
  correct: 0,
  explanation: "Cholera aur Typhoid contaminated food aur water se spread ho sakte hain. In infections ka risk safe water aur proper food hygiene se kam kiya ja sakta hai.<br><br><strong>Example:</strong> Unsafe source ka paani peene se intestinal infections ka risk badh sakta hai."
},

{
  question: "7. Ascariasis se bachne ke liye kaunsi habit useful hai?",
  options: [
    "A. Toilet ke baad hands wash karna",
    "B. Bina haath dhoye khana khana",
    "C. Contaminated soil ko food mein mix karna",
    "D. Fruits ko bina wash kiye khana"
  ],
  correct: 0,
  explanation: "Handwashing se roundworm eggs aur doosre germs ko mouth tak pahunchne se rokne mein help milti hai. Fruits aur vegetables ko achhe se wash karna bhi important hai.<br><br><strong>Example:</strong> Garden mein khelne ke baad aur khana khane se pehle hands wash karo."
},

{
  question: "8. Inmein se kaunsa disease aur causal agent ka correct pair hai?",
  options: [
    "A. Hepatitis A β€” Roundworm",
    "B. Cholera β€” Bacteria",
    "C. Typhoid β€” Virus",
    "D. Ascariasis β€” Fungus"
  ],
  correct: 1,
  explanation: "Cholera bacteria se hota hai. Hepatitis A virus se, Typhoid bacteria se aur Ascariasis roundworms se hota hai.<br><br><strong>Example:</strong> Cholera bacterial infection hai, jabki Hepatitis A viral infection hai."
},

{
  question: "9. Contaminated water se bachne ke liye kaunsa step helpful hai?",
  options: [
    "A. Unsafe water ko bina treatment ke peena",
    "B. Drinking water ko properly boil karna",
    "C. Water ko khule gande container mein rakhna",
    "D. Drinking water mein soil milana"
  ],
  correct: 1,
  explanation: "Water ko properly boil karna kai disease-causing microorganisms ko destroy karne mein help karta hai. Paani ko clean, covered container mein store karna bhi important hai.<br><br><strong>Example:</strong> Agar safe treated drinking water available na ho, toh water ko boil karke thanda karne ke baad clean covered container mein rakho."
},

{
  question: "10. Cholera, Typhoid aur Ascariasis se bachav mein kaunsi baat common hai?",
  options: [
    "A. Personal hygiene aur sanitation maintain karna",
    "B. Food ko hamesha uncovered rakhna",
    "C. Bina dhoye vegetables khana",
    "D. Unsafe drinking water use karna"
  ],
  correct: 0,
  explanation: "Good hygiene, proper sanitation, safe drinking water aur properly prepared food in diseases ka risk kam karne mein help karte hain. Cholera aur Typhoid ke liye vaccination bhi available hai; Ascariasis ke prevention mein hygiene aur sanitation important hain.<br><br><strong>Example:</strong> Hands wash karna, toilets ko clean rakhna aur food ko safely prepare karna infections se bachav mein helpful hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    return alert("Please enter your name.");
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>

    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] =
    selected ? parseInt(selected.value) : null;
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");

  container.innerHTML = "";

  questions.forEach((q, index) => {

    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {

      let cls = "";

      if (i === correct) {
        cls = "correct";
      }

      if (selected === i && selected !== correct) {
        cls = "wrong";
      }

      return `<label class="${cls}">${opt}</label>`;

    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>

      <div class="options">
        ${optsHTML}
      </div>

      <div class="explanation" style="display:block;">
        <strong>Correct Answer:</strong> ${q.options[correct]}
        <br><br>
        ${q.explanation}
      </div>

      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>Student Name: <strong>${userName}</strong></p>
  `;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}

</script>

</body>
</html>

ch3part11

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Malaria and Dengue</title>
<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
  box-sizing: border-box;
}
.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}
h2 { text-align: center; color: #1e3c72; }
.question { font-weight: bold; margin: 10px 0; line-height: 1.6; }
.options label {
  display: block;
  margin: 8px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}
.options label:hover { background: #f0f0f0; }
.correct { background-color: #c8f7c5 !important; border-color: #28a745 !important; }
.wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; }
.explanation {
  background: #e9ecef;
  padding: 10px;
  margin-top: 10px;
  border-left: 5px solid #2a5298;
  display: none;
  line-height: 1.6;
}
.controls { text-align: center; margin-top: 15px; }
button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}
button:hover { background-color: #1e3c72; }
#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}
#scoreboard h3 { text-align: center; }
ol { padding-left: 20px; }
#userName {
  padding: 10px;
  width: 95%;
  max-width: 350px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
</style>
</head>
<body>

<div class="quiz-container">
  <h2>🧠 Science Quiz – Malaria and Dengue</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>
</div>

<script>
const questions = [
{
  question: "1. Malaria kis disease-causing agent ke kaaran hota hai?",
  options: ["A. Virus", "B. Bacteria", "C. Protozoa", "D. Fungus"],
  correct: 2,
  explanation: "Malaria ek disease hai jo Plasmodium naam ke protozoan parasite ke kaaran hoti hai. Yeh infected female Anopheles mosquito ke bite se spread hoti hai.<br><br><strong>Example:</strong> Agar infected mosquito kisi person ko bite karta hai, toh malaria parasite uski body mein enter kar sakta hai."
},
{
  question: "2. Dengue fever kis disease-causing agent ke kaaran hota hai?",
  options: ["A. Virus", "B. Protozoa", "C. Roundworm", "D. Fungus"],
  correct: 0,
  explanation: "Dengue ek viral disease hai jo infected Aedes mosquito ke bite se spread hoti hai.<br><br><strong>Example:</strong> Dengue hone par person ko high fever, headache aur muscle pain ho sakta hai."
},
{
  question: "3. Malaria mein kaunsa symptom commonly dekha jaata hai?",
  options: ["A. Periodic chills aur high fever", "B. Sirf toothache", "C. Sirf hair fall", "D. Sirf ear pain"],
  correct: 0,
  explanation: "Malaria mein high fever, sweating aur thand lagne ke episodes ho sakte hain. Fever ke episodes periodic ho sakte hain.<br><br><strong>Example:</strong> Kisi person ko fever ke saath zor se thand lagna aur baad mein sweating hona malaria ka possible symptom ho sakta hai."
},
{
  question: "4. Dengue ko β€œBreak bone fever” kyon kaha jaata hai?",
  options: [
    "A. Ismein bones hamesha toot jaati hain",
    "B. Ismein severe muscle aur joint pain ho sakta hai",
    "C. Ismein teeth toot jaate hain",
    "D. Ismein hair break hote hain"
  ],
  correct: 1,
  explanation: "Dengue mein severe body ache, muscle pain aur joint pain ho sakta hai. Isi wajah se ise commonly β€œBreak bone fever” bhi kaha jaata hai.<br><br><strong>Example:</strong> Dengue se affected person ko joints aur muscles mein kaafi pain feel ho sakta hai."
},
{
  question: "5. Malaria aur Dengue dono kaise spread hote hain?",
  options: [
    "A. Contaminated books se",
    "B. Infected mosquitoes ke bite se",
    "C. Sirf touch karne se",
    "D. Loud sound se"
  ],
  correct: 1,
  explanation: "Malaria aur Dengue dono mosquito-borne diseases hain. Lekin malaria protozoan parasite se hota hai, jabki dengue virus se hota hai.<br><br><strong>Example:</strong> Ghar ke aas-paas mosquitoes ko breed karne se rokna dono diseases ka risk kam kar sakta hai."
},
{
  question: "6. Mosquito bites se bachne ke liye kaunsa measure useful hai?",
  options: [
    "A. Mosquito repellent use karna",
    "B. Ghar mein paani jama hone dena",
    "C. Mosquito nets use na karna",
    "D. Sleeveless clothes hi pehenna"
  ],
  correct: 0,
  explanation: "Mosquito repellents, mosquito nets aur long-sleeved clothes mosquito bites se protection dene mein help karte hain.<br><br><strong>Example:</strong> Sote waqt mosquito net use karne se mosquitoes ke bite ka risk kam ho sakta hai."
},
{
  question: "7. Ghar ke aas-paas mosquito breeding ko kaise control kiya ja sakta hai?",
  options: [
    "A. Containers mein paani jama karke",
    "B. Still water ko hatakar aur containers ko clean karke",
    "C. Water tanks ko uncovered rakhkar",
    "D. Kachra aur paani jama hone dekar"
  ],
  correct: 1,
  explanation: "Mosquitoes stagnant water mein breed kar sakte hain. Isliye coolers, flower pots aur containers mein jama paani regularly empty ya clean karna chahiye.<br><br><strong>Example:</strong> Cooler ka paani regularly change karo aur buckets ko empty ya covered rakho."
},
{
  question: "8. Dengue fever mein kaunsa symptom ho sakta hai?",
  options: [
    "A. Fever, headache aur joint pain",
    "B. Sirf improved eyesight",
    "C. Sirf stronger bones",
    "D. Sirf increased height"
  ],
  correct: 0,
  explanation: "Dengue mein fever, headache, muscle aur joint pain, nausea aur kabhi-kabhi rash ho sakta hai.<br><br><strong>Example:</strong> Fever ke saath severe body pain hone par medical advice lo. Severe abdominal pain, bleeding ya repeated vomiting ho toh urgent medical care lo."
},
{
  question: "9. Malaria ka parasite body mein mainly kin sites ko affect karta hai?",
  options: [
    "A. Skin aur blood",
    "B. Hair aur nails",
    "C. Teeth only",
    "D. Bones only"
  ],
  correct: 0,
  explanation: "Mosquito bite ke through malaria parasite body mein enter karta hai. Yeh pehle liver mein develop hota hai aur phir red blood cells ko infect karta hai.<br><br><strong>Example:</strong> Malaria mein red blood cells affect hone ki wajah se fever aur weakness ho sakti hai."
},
{
  question: "10. Malaria aur Dengue ke baare mein kaunsa statement correct hai?",
  options: [
    "A. Dono viruses se hote hain",
    "B. Dono protozoa se hote hain",
    "C. Malaria protozoa se aur Dengue virus se hota hai",
    "D. Dono fungi se hote hain"
  ],
  correct: 2,
  explanation: "Malaria ka causal agent Plasmodium protozoan parasite hai, jabki Dengue ka causal agent dengue virus hai. Dono infected mosquitoes ke bite se transmit ho sakte hain.<br><br><strong>Example:</strong> Malaria aur Dengue ke symptoms similar ho sakte hain, isliye correct diagnosis ke liye medical testing zaroori hai."
}
];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    return alert("Please enter your name.");
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>
    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
          ${opt}
        </label>
      `).join('')}
    </div>
    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');
  userAnswers[currentQuestion] = selected ? parseInt(selected.value) : null;
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {
  saveAnswer();
  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {
    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {
      let cls = "";

      if (i === correct) cls = "correct";
      if (selected === i && selected !== correct) cls = "wrong";

      return `<label class="${cls}">${opt}</label>`;
    }).join('');

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        <strong>Correct Answer:</strong> ${q.options[correct]}
        <br><br>
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>Student Name: <strong>${userName}</strong></p>
  `;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join('');
}
</script>
</body>
</html>

ch3part12

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Infectious Diseases and Prevention</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
  }
  .quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
  }
  h2 { text-align: center; color: #1e3c72; }
  .question { font-weight: bold; margin: 10px 0; line-height: 1.6; }
  .options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
  }
  .options label:hover { background: #f0f0f0; }
  .options input { margin-right: 8px; }
  .correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
  }
  .wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
  }
  .explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
  }
  .controls { text-align: center; margin-top: 15px; }
  button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }
  button:hover { background-color: #1e3c72; }
  #userName {
    padding: 10px;
    width: 90%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  #scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
  }
  #scoreboard h3 { text-align: center; }
  ol { padding-left: 20px; }
  @media (max-width: 600px) {
    body { padding: 12px; }
    .quiz-container { width: 100%; padding: 16px; }
  }
</style>
</head>
<body>

<div class="quiz-container">
  <h2>🧠 Science Quiz – Infectious Diseases and Prevention</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <br>
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>
</div>

<script>
const questions = [
  {
    question: "1. Infectious diseases se bachne ke liye sabse important habit kaunsi hai?",
    options: [
      "A. Personal hygiene maintain karna",
      "B. Gande haathon se khana khana",
      "C. Personal items share karna",
      "D. Surroundings ko dirty rakhna"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Personal hygiene ka matlab apne body ko clean rakhna aur daily cleanliness ki habits follow karna hai. Isse pathogens ke spread hone ka risk kam hota hai.<br><br><strong>Example:</strong> Roz nahaana, nails clean rakhna aur khana khane se pehle hands wash karna achhi hygiene habits hain."
  },
  {
    question: "2. Hands ko soap aur water se wash karne ka main purpose kya hai?",
    options: [
      "A. Body temperature badhana",
      "B. Pathogens ko remove karna",
      "C. Height badhana",
      "D. Muscles ko strong banana"
    ],
    correct: 1,
    explanation: "<strong>Explanation:</strong> Pathogens disease-causing microorganisms hote hain. Soap aur water se properly hands wash karne par haathon se germs remove karne mein help milti hai.<br><br><strong>Example:</strong> Toilet use karne ke baad aur khana khane se pehle soap se hands wash karo."
  },
  {
    question: "3. Cough ya sneeze karte waqt humein kya karna chahiye?",
    options: [
      "A. Mouth aur nose ko cover karna",
      "B. Doosron ke face ke paas cough karna",
      "C. Hands wash na karna",
      "D. Used tissue ko floor par phenkna"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Cough aur sneeze ke dauraan infectious particles hawa mein spread ho sakte hain. Mouth aur nose cover karne se doosron tak infection pahunchne ka risk kam hota hai.<br><br><strong>Example:</strong> Cough karte waqt tissue ya elbow se mouth aur nose cover karo."
  },
  {
    question: "4. Crowded places mein mask pehenne se kya benefit ho sakta hai?",
    options: [
      "A. Infection ka risk kam karne mein help mil sakti hai",
      "B. Har disease turant cure ho jaati hai",
      "C. Handwashing ki zaroorat khatam ho jaati hai",
      "D. Body ko nutrients milte hain"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Properly worn mask kuch respiratory infections ke spread ka risk kam karne mein help kar sakta hai. Mask ke saath hygiene aur ventilation bhi important hain.<br><br><strong>Example:</strong> Respiratory infection ke spread ke samay crowded indoor places mein mask pehenna protective ho sakta hai."
  },
  {
    question: "5. Humein towels aur handkerchiefs jaise personal items share karne se kyon bachna chahiye?",
    options: [
      "A. Kyunki kuch infections is tarah spread ho sakte hain",
      "B. Kyunki isse height kam ho jaati hai",
      "C. Kyunki isse bones weak ho jaati hain",
      "D. Kyunki isse digestion ruk jaata hai"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Kuch pathogens contaminated personal items ke through doosre person tak pahunch sakte hain. Isliye personal items ko apna-apna use karna better hai.<br><br><strong>Example:</strong> Apna towel aur handkerchief kisi doosre ke saath share na karo."
  },
  {
    question: "6. Agar hum infectious disease se unwell hain, toh ghar par rest karna kyon helpful hai?",
    options: [
      "A. Isse recovery mein help milti hai aur doosron tak infection spread hone ka risk kam hota hai",
      "B. Isse pathogens aur fast spread hote hain",
      "C. Isse hygiene ki zaroorat nahi hoti",
      "D. Isse har disease bina treatment cure ho jaati hai"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Illness ke samay rest body ko recover karne mein help karta hai. Ghar par rehne se doosron ke contact mein aane ke chances bhi kam ho sakte hain.<br><br><strong>Example:</strong> Flu hone par school ya coaching jaane ke bajay ghar par rest karo aur zaroorat par medical advice lo."
  },
  {
    question: "7. Parasite kise kehte hain?",
    options: [
      "A. Aisa organism jo doosre living being mein ya uske upar rehkar benefit leta hai",
      "B. Aisa organism jo sirf sunlight se energy leta hai",
      "C. Aisa organism jo hamesha non-living hota hai",
      "D. Aisa organism jo kisi doosre organism se kabhi interact nahi karta"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Parasite doosre organism, jise host kehte hain, mein ya uske upar rehta hai aur usse food ya shelter le sakta hai. Isse host ko harm ho sakta hai.<br><br><strong>Example:</strong> Roundworms human intestine mein rehkar nutrients le sakte hain."
  },
  {
    question: "8. Human body mein parasitic worms commonly kis system ko affect karte hain?",
    options: [
      "A. Digestive system",
      "B. Skeletal system only",
      "C. Hair only",
      "D. Respiratory system only"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Kuch parasitic worms digestive system, especially intestine, mein rehte hain. Ye body ke nutrients use kar sakte hain aur health ko affect kar sakte hain.<br><br><strong>Example:</strong> Roundworm infection mein appetite kam hona, diarrhoea ya weight loss ho sakta hai."
  },
  {
    question: "9. Parasitic worms kis tarah spread ho sakte hain?",
    options: [
      "A. Contaminated food, water ya soil ke through",
      "B. Sirf loud sound ke through",
      "C. Sirf sunlight ke through",
      "D. Sirf clean air ke through"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Kuch parasitic worms ke eggs contaminated food, water ya soil se body mein enter kar sakte hain. Hygiene aur sanitation se infection ka risk kam kiya ja sakta hai.<br><br><strong>Example:</strong> Garden mein soil ke saath khelne ke baad hands wash kiye bina khana khane se infection ka risk ho sakta hai."
  },
  {
    question: "10. Ghar, food aur drinking water ko clean rakhne ka main benefit kya hai?",
    options: [
      "A. Infectious diseases ka risk kam karna",
      "B. Pathogens ko badhne dena",
      "C. Food ko contaminated banana",
      "D. Parasites ko body mein enter karwana"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Clean surroundings, safe drinking water aur properly prepared food se harmful pathogens ke contact mein aane ka risk kam hota hai.<br><br><strong>Example:</strong> Drinking water ko safely treat karo, food ko cover karke rakho aur fruits aur vegetables ko achhe se wash karo."
  }
];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    alert("Please enter your name.");
    return;
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>
    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] === i ? "checked" : ""}>
          ${opt}
        </label>
      `).join("")}
    </div>
    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');
  userAnswers[currentQuestion] = selected ? parseInt(selected.value) : null;
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {
    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {
      let cls = "";

      if (i === correct) cls = "correct";
      if (selected === i && selected !== correct) cls = "wrong";

      return `<label class="${cls}">${opt}</label>`;
    }).join("");

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>${score === 10 ? "Excellent! Perfect Score!" :
      score >= 7 ? "Very Good! Keep it up!" :
      score >= 5 ? "Good effort! Keep practising!" :
      "Keep learning and try again!"}</p>
  `;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name: name,
    score: score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${escapeHTML(s.name)} - ${s.score}/10 (${escapeHTML(s.date)})</li>`
    ).join("");
}

function escapeHTML(value) {
  return String(value).replace(/[&<>"']/g, char => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#039;"
  })[char]);
}
</script>

</body>
</html>

ch3part13

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Science Quiz – Non-Communicable Diseases</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
    margin: 0;
    box-sizing: border-box;
  }
  .quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
  }
  h2 { text-align: center; color: #1e3c72; }
  .question { font-weight: bold; margin: 10px 0; line-height: 1.6; }
  .options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
  }
  .options label:hover { background: #f0f0f0; }
  .options input { margin-right: 8px; }
  .correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
  }
  .wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
  }
  .explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
  }
  .controls { text-align: center; margin-top: 15px; }
  button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }
  button:hover { background-color: #1e3c72; }
  #userName {
    padding: 10px;
    width: 90%;
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  #scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
  }
  #scoreboard h3 { text-align: center; }
  ol { padding-left: 20px; }
  @media (max-width: 600px) {
    body { padding: 12px; }
    .quiz-container { width: 100%; padding: 16px; }
  }
</style>
</head>
<body>

<div class="quiz-container">
  <h2>🧠 Science Quiz – Non-Communicable and Deficiency Diseases</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <br>
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>
</div>

<script>
const questions = [
  {
    question: "1. Non-communicable diseases kya hoti hain?",
    options: [
      "A. Jo hamesha mosquitoes se spread hoti hain",
      "B. Jo person se person mein directly spread nahi hoti",
      "C. Jo sirf contaminated water se hoti hain",
      "D. Jo hamesha viruses se hoti hain"
    ],
    correct: 1,
    explanation: "<strong>Explanation:</strong> Non-communicable diseases (NCDs) ek person se doosre person mein infection ki tarah spread nahi hoti. Ye lifestyle, diet, environment ya body ke internal factors se related ho sakti hain.<br><br><strong>Example:</strong> Diabetes ek non-communicable disease hai; ye kisi doosre person ko touch karne se nahi hoti."
  },
  {
    question: "2. Inmein se kaunsi non-communicable disease hai?",
    options: [
      "A. Influenza",
      "B. Chickenpox",
      "C. Diabetes",
      "D. Cholera"
    ],
    correct: 2,
    explanation: "<strong>Explanation:</strong> Diabetes mein blood glucose level ko control karne mein problem hoti hai. Ye non-communicable disease hai, jabki influenza, chickenpox aur cholera infectious diseases hain.<br><br><strong>Example:</strong> Diabetes kisi infected person ke saath baithne ya haath milane se nahi hoti."
  },
  {
    question: "3. Scurvy kis type ki disease hai?",
    options: [
      "A. Deficiency disease",
      "B. Mosquito-borne disease",
      "C. Viral disease",
      "D. Bacterial disease"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Scurvy Vitamin C ki deficiency ke kaaran hoti hai. Nutrients ki kami se hone wali diseases ko deficiency diseases kehte hain.<br><br><strong>Example:</strong> Vitamin C ke sources jaise amla, orange aur guava diet mein include karna Vitamin C ki deficiency se bachne mein help karta hai."
  },
  {
    question: "4. Anaemia kis deficiency se ho sakta hai?",
    options: [
      "A. Iron",
      "B. Vitamin C only",
      "C. Iodine only",
      "D. Water"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Anaemia kai reasons se ho sakta hai, lekin iron deficiency iska ek common cause hai. Iron haemoglobin banane ke liye important hai, jo blood mein oxygen transport karta hai.<br><br><strong>Example:</strong> Iron-rich foods jaise beans, lentils aur green leafy vegetables balanced diet ka part ho sakte hain."
  },
  {
    question: "5. Goitre commonly kis nutrient ki deficiency se hota hai?",
    options: [
      "A. Calcium",
      "B. Iodine",
      "C. Vitamin C",
      "D. Vitamin D"
    ],
    correct: 1,
    explanation: "<strong>Explanation:</strong> Iodine thyroid gland ke normal function ke liye zaroori hai. Iodine ki deficiency se thyroid gland enlarge ho sakti hai, jise goitre kehte hain.<br><br><strong>Example:</strong> Iodised salt iodine provide karne ka ek common source hai."
  },
  {
    question: "6. Chronic disease kise kaha jaata hai?",
    options: [
      "A. Jo hamesha ek din mein cure ho jaaye",
      "B. Jo long time tak persist kare",
      "C. Jo sirf mosquito bite se ho",
      "D. Jo sirf children ko ho"
    ],
    correct: 1,
    explanation: "<strong>Explanation:</strong> Chronic diseases lambe samay tak rehti hain. Textbook ke according, jo diseases aksar 3 months se zyada persist karti hain, unhe chronic diseases kaha jaata hai.<br><br><strong>Example:</strong> Diabetes aur asthma chronic diseases ho sakti hain aur inke liye long-term management ki zaroorat pad sakti hai."
  },
  {
    question: "7. Diabetes hone ke risk ko badhane wala lifestyle factor kaunsa hai?",
    options: [
      "A. Regular physical activity",
      "B. Balanced diet",
      "C. Lack of physical activity",
      "D. Proper sleep"
    ],
    correct: 2,
    explanation: "<strong>Explanation:</strong> Physical activity ki kami, unhealthy eating habits aur overweight hona Type 2 diabetes ke risk ko badha sakte hain. Diabetes ke causes multiple ho sakte hain.<br><br><strong>Example:</strong> Regular walking, cycling ya outdoor games healthy lifestyle maintain karne mein help karte hain."
  },
  {
    question: "8. Non-communicable diseases ke causes mein kya shamil ho sakta hai?",
    options: [
      "A. Lifestyle, diet aur environment",
      "B. Sirf infected person ko touch karna",
      "C. Sirf mosquito bites",
      "D. Sirf contaminated water"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> NCDs ke causes mein unhealthy diet, lack of exercise, environmental factors aur body ke internal changes shamil ho sakte hain.<br><br><strong>Example:</strong> Air pollution asthma ke symptoms ko trigger ya worsen kar sakta hai."
  },
  {
    question: "9. Inmein se kaunsi deficiency disease ka correct pair hai?",
    options: [
      "A. Scurvy β€” Vitamin C deficiency",
      "B. Goitre β€” Vitamin C deficiency",
      "C. Anaemia β€” Iodine deficiency only",
      "D. Diabetes β€” Vitamin C deficiency"
    ],
    correct: 0,
    explanation: "<strong>Explanation:</strong> Scurvy Vitamin C ki deficiency se hoti hai. Goitre commonly iodine deficiency se aur anaemia kai causes se, including iron deficiency, ho sakta hai.<br><br><strong>Example:</strong> Fruits aur vegetables se Vitamin C mil sakta hai, jo scurvy prevent karne mein help karta hai."
  },
  {
    question: "10. Lifestyle-related diseases ko prevent ya manage karne ke liye kya karna chahiye?",
    options: [
      "A. Physical activity avoid karna",
      "B. Har din unhealthy food khana",
      "C. Balanced diet aur regular physical activity maintain karna",
      "D. Health problems ko ignore karna"
    ],
    correct: 2,
    explanation: "<strong>Explanation:</strong> Balanced diet, regular exercise, healthy weight maintain karna aur medical advice follow karna kai lifestyle-related diseases ke risk ko kam karne ya unhe manage karne mein help kar sakta hai.<br><br><strong>Example:</strong> Roz walk karna, vegetables aur whole grains khana aur regular health check-ups karwana healthy habits hain."
  }
];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    alert("Please enter your name.");
    return;
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>
    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] === i ? "checked" : ""}>
          ${opt}
        </label>
      `).join("")}
    </div>
    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');
  userAnswers[currentQuestion] = selected ? parseInt(selected.value) : null;
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {
    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {
      let cls = "";

      if (i === correct) cls = "correct";
      if (selected === i && selected !== correct) cls = "wrong";

      return `<label class="${cls}">${opt}</label>`;
    }).join("");

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>${score === 10 ? "Excellent! Perfect Score!" :
      score >= 7 ? "Very Good! Keep it up!" :
      score >= 5 ? "Good effort! Keep practising!" :
      "Keep learning and try again!"}</p>
  `;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name: name,
    score: score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${escapeHTML(s.name)} - ${s.score}/10 (${escapeHTML(s.date)})</li>`
    ).join("");
}

function escapeHTML(value) {
  return String(value).replace(/[&<>"']/g, char => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#039;"
  })[char]);
}
</script>

</body>
</html>

ch3part14

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Health and Diseases</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
    margin: 0;
}

.quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
}

h2 {
    text-align: center;
    color: #1e3c72;
}

.question {
    font-weight: bold;
    margin: 15px 0;
    line-height: 1.6;
}

.options label {
    display: block;
    margin: 8px 0;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
}

.options label:hover {
    background: #f0f0f0;
}

.options input {
    margin-right: 8px;
}

.correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
}

.wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}

.explanation {
    background: #e9ecef;
    padding: 12px;
    margin-top: 10px;
    margin-bottom: 15px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
}

.controls {
    text-align: center;
    margin-top: 15px;
}

button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
}

button:hover {
    background-color: #1e3c72;
}

#scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
}

#scoreboard h3 {
    text-align: center;
}

ol {
    padding-left: 20px;
}

#userName {
    padding: 10px;
    width: 90%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
}

#result {
    text-align: center;
    margin-top: 20px;
}

@media(max-width:600px) {
    body {
        padding: 10px;
    }

    .quiz-container {
        width: 95%;
        padding: 15px;
    }
}
</style>
</head>

<body>

<div class="quiz-container">

<h2>🧠 Science Quiz – Health and Diseases</h2>

<div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <br>
    <button onclick="startQuiz()">Start Quiz</button>
</div>

<div id="quizSection" style="display:none;">

    <div id="questionContainer"></div>

    <div class="controls">
        <button onclick="prevQuestion()" id="prevBtn">Previous</button>
        <button onclick="nextQuestion()" id="nextBtn">Next</button>
        <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result"></div>

    <div id="scoreboard">
        <h3>πŸ† Scoreboard</h3>
        <ol id="scoreList"></ol>
    </div>

</div>
</div>

<script>

const questions = [

{
question: "1. Obesity ka meaning kya hai?",
options: [
"A. Body mein water ki kami",
"B. Body mein excessive fat jama hona",
"C. Body temperature badhna",
"D. Blood mein infection hona"
],
correct: 1,
explanation: "Obesity ek condition hai jisme body mein excessive fat jama ho jaata hai aur health problems ka risk badh sakta hai.<br><br><b>Example:</b> Unhealthy diet aur physical activity ki kami obesity ke risk ko badha sakti hai."
},

{
question: "2. Obesity ko prevent ya manage karne ke liye kya karna chahiye?",
options: [
"A. Sirf sugary drinks peena",
"B. Physical activity avoid karna",
"C. Balanced diet aur regular exercise karna",
"D. Meals ko hamesha skip karna"
],
correct: 2,
explanation: "Balanced diet aur regular physical activity healthy weight maintain karne mein help karte hain. Crash dieting ya meals skip karna healthy solution nahi hai.<br><br><b>Example:</b> Daily walking, cycling aur fruits, vegetables aur whole grains wali balanced diet helpful ho sakti hai."
},

{
question: "3. Diabetes ka common symptom kaunsa hai?",
options: [
"A. Frequent urination",
"B. Improved eyesight",
"C. Faster wound healing",
"D. Increased bone strength"
],
correct: 0,
explanation: "Diabetes mein blood glucose level high ho sakta hai. Isse frequent urination, excessive thirst, tiredness aur slow wound healing jaise symptoms ho sakte hain.<br><br><b>Example:</b> Agar kisi person ko baar-baar urination aur bahut pyaas lagti hai, toh doctor se check-up karwana chahiye."
},

{
question: "4. Diabetes mein wounds heal hone mein zyada time kyon lag sakta hai?",
options: [
"A. High blood glucose body ki healing process ko affect kar sakta hai",
"B. Body ko sunlight bilkul nahi milti",
"C. Bones ka size badh jaata hai",
"D. Hair growth ruk jaati hai"
],
correct: 0,
explanation: "Poorly controlled diabetes blood vessels, nerves aur immune function ko affect kar sakti hai. Isliye wounds ko heal hone mein zyada time lag sakta hai.<br><br><b>Example:</b> Diabetes wale person ke foot par wound ho, toh usse ignore nahi karna chahiye; medical advice leni chahiye."
},

{
question: "5. High blood pressure ka matlab kya hai?",
options: [
"A. Blood ka pressure arteries ki walls par consistently zyada hona",
"B. Body temperature low hona",
"C. Blood mein water bilkul na hona",
"D. Bones ka weak hona"
],
correct: 0,
explanation: "High blood pressure, jise hypertension bhi kehte hain, mein blood arteries ki walls par zyada force lagata hai. Ismein aksar noticeable symptoms nahi hote, isliye measurement important hai.<br><br><b>Example:</b> Regular blood pressure check karwana hypertension ko identify karne mein help karta hai."
},

{
question: "6. High blood pressure ko manage karne mein kaunsi lifestyle habit helpful hai?",
options: [
"A. Excessive salt lena",
"B. Physical activity avoid karna",
"C. Balanced diet, regular exercise aur salt intake control karna",
"D. Smoking shuru karna"
],
correct: 2,
explanation: "Healthy diet, regular physical activity, limited salt intake aur tobacco se bachna blood pressure ko manage karne mein help kar sakta hai.<br><br><b>Example:</b> Daily walk karna aur packaged foods mein salt ki quantity check karna useful habits hain."
},

{
question: "7. Kamal Ranadive kaun thi?",
options: [
"A. Pioneering biomedical researcher",
"B. Famous football player",
"C. Astronaut",
"D. Classical singer"
],
correct: 0,
explanation: "Kamal Ranadive (1917–2001) ek pioneering biomedical researcher thi. Unhone cancer research mein important contributions diye.<br><br><b>Example:</b> Unki research ne hormones, certain viruses aur cancer ke beech possible relationships ko samajhne mein help ki."
},

{
question: "8. Kamal Ranadive ne cancer ke relation mein kin factors ka study kiya?",
options: [
"A. Hormones aur certain viruses",
"B. Sirf earthquakes",
"C. Sirf ocean currents",
"D. Sirf planetary motion"
],
correct: 0,
explanation: "Kamal Ranadive ne study kiya ki hormones aur certain viruses cancer se kaise related ho sakte hain. Unka research cancer ke treatment aur prevention ki understanding ko improve karne mein helpful raha.<br><br><b>Example:</b> Scientists cancer ke causes aur risk factors ko samajhne ke liye cells, hormones aur viruses ka study karte hain."
},

{
question: "9. Textbook ke according, kaun-se factors cancer ka risk badha sakte hain?",
options: [
"A. Tobacco, unhealthy diet aur pollution",
"B. Sirf reading books",
"C. Sirf drinking clean water",
"D. Sirf regular walking"
],
correct: 0,
explanation: "Tobacco cancer ka established risk factor hai. Kuch environmental exposures, including certain forms of pollution, aur unhealthy dietary patterns bhi kuch cancers ke risk se linked ho sakte hain.<br><br><b>Example:</b> Tobacco products se door rehna cancer prevention ka important step hai."
},

{
question: "10. Kamal Ranadive ki research se kya important lesson milta hai?",
options: [
"A. Healthy lifestyle aur cancer research dono important hain",
"B. Lifestyle ka health par koi effect nahi hota",
"C. Cancer hamesha contagious hota hai",
"D. Har disease sirf infection se hoti hai"
],
correct: 0,
explanation: "Cancer ke causes complex hote hain aur different factors iske risk ko influence kar sakte hain. Research aur healthy lifestyle choices prevention aur treatment ki efforts mein important role play karte hain.<br><br><b>Example:</b> Tobacco avoid karna, balanced diet lena aur pollution exposure ko kam karna overall health ke liye beneficial hai."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {

    userName = document.getElementById("userName").value.trim();

    if (!userName) {
        return alert("Please enter your name.");
    }

    document.getElementById("nameSection").style.display = "none";
    document.getElementById("quizSection").style.display = "block";

    showQuestion();
    loadScoreboard();
}

function showQuestion() {

    const q = questions[currentQuestion];
    const container = document.getElementById("questionContainer");

    container.innerHTML = `
        <div class="question">${q.question}</div>

        <div class="options">
            ${q.options.map((opt, i) => `
                <label>
                    <input type="radio" name="option" value="${i}"
                    ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
                    ${opt}
                </label>
            `).join('')}
        </div>

        <div class="explanation" id="explain${currentQuestion}">
            ${q.explanation}
        </div>
    `;

    document.getElementById("prevBtn").style.display =
        currentQuestion === 0 ? "none" : "inline-block";

    document.getElementById("nextBtn").style.display =
        currentQuestion === questions.length - 1 ? "none" : "inline-block";

    document.getElementById("submitBtn").style.display =
        currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {

    const selected = document.querySelector('input[name="option"]:checked');

    userAnswers[currentQuestion] = selected
        ? parseInt(selected.value)
        : null;
}

function nextQuestion() {

    saveAnswer();

    if (currentQuestion < questions.length - 1) {
        currentQuestion++;
        showQuestion();
    }
}

function prevQuestion() {

    saveAnswer();

    if (currentQuestion > 0) {
        currentQuestion--;
        showQuestion();
    }
}

function submitQuiz() {

    saveAnswer();

    score = 0;

    questions.forEach((q, index) => {
        if (userAnswers[index] === q.correct) {
            score++;
        }
    });

    showResults();
    saveScore(userName, score);
    loadScoreboard();
}

function showResults() {

    const container = document.getElementById("questionContainer");

    container.innerHTML = "";

    questions.forEach((q, index) => {

        const selected = userAnswers[index];
        const correct = q.correct;

        let optsHTML = q.options.map((opt, i) => {

            let cls = "";

            if (i === correct) {
                cls = "correct";
            }

            if (selected === i && selected !== correct) {
                cls = "wrong";
            }

            return `<label class="${cls}">${opt}</label>`;

        }).join("");

        container.innerHTML += `
            <div class="question">${q.question}</div>

            <div class="options">${optsHTML}</div>

            <div class="explanation" style="display:block;">
                <b>Correct Answer:</b> ${q.options[correct]}
                <br><br>
                ${q.explanation}
            </div>
            <hr>
        `;
    });

    document.querySelector(".controls").style.display = "none";

    document.getElementById("result").innerHTML =
        `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.push({
        name: name,
        score: score,
        date: new Date().toLocaleString()
    });

    localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {

    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.sort((a, b) => b.score - a.score);

    document.getElementById("scoreList").innerHTML =
        scores.map(s =>
            `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
        ).join("");
}

</script>

</body>
</html>

ch3part15

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Prevention and Immunity</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    min-height: 100vh;
    margin: 0;
}
.quiz-container {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 800px;
}
h2 { text-align: center; color: #1e3c72; }
.question {
    font-weight: bold;
    margin: 10px 0;
    line-height: 1.6;
}
.options label {
    display: block;
    margin: 8px 0;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: 0.3s;
}
.options label:hover { background: #f0f0f0; }
.options input { margin-right: 8px; }
.correct {
    background-color: #c8f7c5 !important;
    border-color: #28a745 !important;
}
.wrong {
    background-color: #f8d7da !important;
    border-color: #dc3545 !important;
}
.explanation {
    background: #e9ecef;
    padding: 10px;
    margin-top: 10px;
    border-left: 5px solid #2a5298;
    display: none;
    line-height: 1.6;
}
.controls { text-align: center; margin-top: 15px; }
button {
    background-color: #2a5298;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
}
button:hover { background-color: #1e3c72; }
#scoreboard {
    margin-top: 25px;
    background: #eef3f7;
    padding: 15px;
    border-radius: 8px;
}
#scoreboard h3 { text-align: center; }
ol { padding-left: 20px; }
#userName {
    padding: 10px;
    width: 90%;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 10px;
}
@media(max-width:600px) {
    body { padding: 10px; }
    .quiz-container { width: 95%; padding: 15px; }
}
</style>
</head>

<body>
<div class="quiz-container">

<h2>🧠 Science Quiz – Prevention and Immunity</h2>

<div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <br>
    <button onclick="startQuiz()">Start Quiz</button>
</div>

<div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
        <button onclick="prevQuestion()" id="prevBtn">Previous</button>
        <button onclick="nextQuestion()" id="nextBtn">Next</button>
        <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
        <h3>πŸ† Scoreboard</h3>
        <ol id="scoreList"></ol>
    </div>
</div>
</div>

<script>

const questions = [

{
question: "1. β€œPrevention is better than cure” ka kya meaning hai?",
options: [
"A. Disease hone ke baad hi care karni chahiye",
"B. Disease se bachne ke steps lena treatment se better ho sakta hai",
"C. Diseases ko prevent nahi kiya ja sakta",
"D. Har disease bina treatment ke cure ho jaati hai"
],
correct: 1,
explanation: "Prevention ka matlab disease hone se pehle uske risk ko kam karna hai. Isse illness aur usse hone wali complications ka risk kam ho sakta hai.<br><br><b>Example:</b> Hands wash karna, vaccination karwana aur safe drinking water use karna diseases ko prevent karne mein help karta hai."
},

{
question: "2. Odisha ke Bhadrak district mein community sanitation campaign ka main benefit kya tha?",
options: [
"A. Open defecation badh gaya",
"B. Diarrhoea aur infections ke cases kam hue",
"C. Drinking water ki zaroorat khatam ho gayi",
"D. Vaccination band kar di gayi"
],
correct: 1,
explanation: "Campaign se zyada logon ne toilets banana aur use karna shuru kiya. Isse open defecation kam hua aur communicable diseases ka spread reduce karne mein help mili.<br><br><b>Example:</b> Toilet use karne aur proper waste disposal se human waste ke through food aur water contaminate hone ka risk kam hota hai."
},

{
question: "3. Immunity kise kehte hain?",
options: [
"A. Body ki diseases se fight karne ki natural ability",
"B. Body ki height badhane ki ability",
"C. Food ko store karne ki ability",
"D. Body temperature ko hamesha badhane ki ability"
],
correct: 0,
explanation: "Immunity body ki ability hai harmful germs aur infections se protect karne ki. Immune system is protection mein important role play karta hai.<br><br><b>Example:</b> Immune system harmful germs ko recognise karke unke against response develop kar sakta hai."
},

{
question: "4. Body ka kaunsa system diseases se fight karne mein help karta hai?",
options: [
"A. Digestive system",
"B. Skeletal system",
"C. Immune system",
"D. Muscular system"
],
correct: 2,
explanation: "Immune system body ko harmful pathogens, jaise bacteria aur viruses, se protect karne mein help karta hai.<br><br><b>Example:</b> Jab virus body mein enter karta hai, toh immune system usse recognise karke uske against response de sakta hai."
},

{
question: "5. Vaccine ka main purpose kya hai?",
options: [
"A. Immune system ko specific germs ko recognise karna sikhana",
"B. Body ki saari bacteria ko destroy kar dena",
"C. Har disease ko turant cure karna",
"D. Body ko exercise se bachana"
],
correct: 0,
explanation: "Vaccine immune system ko kisi particular pathogen ya uske harmless part ko recognise karne ki training deti hai. Isse future infection ke against protection develop ho sakti hai.<br><br><b>Example:</b> Measles vaccine body ko measles virus ke against immune response develop karne mein help karti hai."
},

{
question: "6. Vaccine se develop hone wali protection ko kya kehte hain?",
options: [
"A. Acquired immunity",
"B. Digestion",
"C. Respiration",
"D. Excretion"
],
correct: 0,
explanation: "Acquired immunity woh protection hai jo pathogen ke exposure ya vaccine ke through develop hoti hai. Is process mein immune system specific germs ko recognise karna seekhta hai.<br><br><b>Example:</b> Vaccination ke baad body measles jaise infection ke against protection develop kar sakti hai."
},

{
question: "7. Inmein se kaunsi disease ke prevention ke liye vaccination use hoti hai?",
options: [
"A. Polio",
"B. Fracture",
"C. Hair fall",
"D. Sprain"
],
correct: 0,
explanation: "Polio vaccine polio infection aur usse hone wali serious complications ka risk kam karne mein help karti hai.<br><br><b>Example:</b> Bachchon ko recommended schedule ke according polio vaccine di jaati hai."
},

{
question: "8. Tetanus shot mein textbook ke according kya hota hai?",
options: [
"A. Active tetanus-causing bacteria",
"B. Inactivated bacterial toxin",
"C. Harmful roundworms",
"D. Live malaria parasites"
],
correct: 1,
explanation: "Tetanus shot mein inactivated tetanus toxin, yaani toxoid, hota hai. Yeh immune system ko protection develop karne mein help karta hai, bina tetanus disease cause kiye.<br><br><b>Example:</b> Deep ya dirty wound hone par doctor tetanus vaccination ki zaroorat assess kar sakta hai."
},

{
question: "9. Vaccines kin forms mein banayi ja sakti hain?",
options: [
"A. Weakened ya dead pathogens, ya unke harmless parts se",
"B. Sirf sugar aur salt se",
"C. Sirf soil aur dust se",
"D. Sirf vitamins se"
],
correct: 0,
explanation: "Different vaccines different technologies se banayi jaati hain. Kuch mein weakened ya inactivated pathogens hote hain, kuch mein pathogen ke harmless parts, aur kuch newer vaccines body cells ko harmless pathogen part banane ke instructions deti hain.<br><br><b>Example:</b> Vaccine ka type disease aur vaccine technology par depend karta hai."
},

{
question: "10. Community sanitation aur vaccination ka common purpose kya hai?",
options: [
"A. Diseases ko prevent karna aur public health improve karna",
"B. Germs ka spread badhana",
"C. Clean water ka use rokna",
"D. Hygiene ko unnecessary banana"
],
correct: 0,
explanation: "Sanitation contaminated waste aur germs ke spread ko kam karne mein help karti hai, jabki vaccination specific infections ke against protection develop karne mein help karti hai.<br><br><b>Example:</b> Toilets ka use, safe drinking water aur recommended vaccines milkar community ko healthy rakhne mein important role play karte hain."
}

];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
    userName = document.getElementById("userName").value.trim();

    if (!userName) return alert("Please enter your name.");

    document.getElementById("nameSection").style.display = "none";
    document.getElementById("quizSection").style.display = "block";

    showQuestion();
    loadScoreboard();
}

function showQuestion() {
    const q = questions[currentQuestion];
    const container = document.getElementById("questionContainer");

    container.innerHTML = `
        <div class="question">${q.question}</div>
        <div class="options">
            ${q.options.map((opt, i) => `
                <label>
                    <input type="radio" name="option" value="${i}"
                    ${userAnswers[currentQuestion] == i ? 'checked' : ''}>
                    ${opt}
                </label>
            `).join('')}
        </div>
        <div class="explanation" id="explain${currentQuestion}">
            ${q.explanation}
        </div>
    `;

    document.getElementById("prevBtn").style.display =
        currentQuestion === 0 ? "none" : "inline-block";

    document.getElementById("nextBtn").style.display =
        currentQuestion === questions.length - 1 ? "none" : "inline-block";

    document.getElementById("submitBtn").style.display =
        currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function saveAnswer() {
    const selected = document.querySelector('input[name="option"]:checked');
    userAnswers[currentQuestion] = selected ? parseInt(selected.value) : null;
}

function nextQuestion() {
    saveAnswer();

    if (currentQuestion < questions.length - 1) {
        currentQuestion++;
        showQuestion();
    }
}

function prevQuestion() {
    saveAnswer();

    if (currentQuestion > 0) {
        currentQuestion--;
        showQuestion();
    }
}

function submitQuiz() {
    saveAnswer();

    score = 0;

    questions.forEach((q, index) => {
        if (userAnswers[index] === q.correct) score++;
    });

    showResults();
    saveScore(userName, score);
    loadScoreboard();
}

function showResults() {
    const container = document.getElementById("questionContainer");
    container.innerHTML = "";

    questions.forEach((q, index) => {
        const selected = userAnswers[index];
        const correct = q.correct;

        let optsHTML = q.options.map((opt, i) => {
            let cls = "";

            if (i === correct) cls = "correct";
            if (selected === i && selected !== correct) cls = "wrong";

            return `<label class="${cls}">${opt}</label>`;
        }).join("");

        container.innerHTML += `
            <div class="question">${q.question}</div>
            <div class="options">${optsHTML}</div>
            <div class="explanation" style="display:block;">
                <b>Correct Answer:</b> ${q.options[correct]}
                <br><br>
                ${q.explanation}
            </div>
            <hr>
        `;
    });

    document.querySelector(".controls").style.display = "none";

    document.getElementById("result").innerHTML =
        `<h3>Your Score: ${score} / ${questions.length}</h3>`;
}

function saveScore(name, score) {
    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.push({
        name,
        score,
        date: new Date().toLocaleString()
    });

    localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
    let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

    scores.sort((a, b) => b.score - a.score);

    document.getElementById("scoreList").innerHTML =
        scores.map(s =>
            `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
        ).join("");
}

</script>
</body>
</html>

ch3part16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Science Quiz – Smallpox and Vaccination</title>

<style>
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  min-height: 100vh;
}
.quiz-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  width: 90%;
  max-width: 800px;
}
h2 { text-align: center; color: #1e3c72; }
.question { font-weight: bold; margin: 10px 0; }
.options label {
  display: block;
  margin: 8px 0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: 0.3s;
}
.options label:hover { background: #f0f0f0; }
.correct {
  background-color: #c8f7c5 !important;
  border-color: #28a745 !important;
}
.wrong {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}
.explanation {
  background: #e9ecef;
  padding: 10px;
  margin-top: 10px;
  border-left: 5px solid #2a5298;
  display: none;
}
.controls { text-align: center; margin-top: 15px; }
button {
  background-color: #2a5298;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  margin: 5px;
}
button:hover { background-color: #1e3c72; }
#scoreboard {
  margin-top: 25px;
  background: #eef3f7;
  padding: 15px;
  border-radius: 8px;
}
#scoreboard h3 { text-align: center; }
ol { padding-left: 20px; }

@media (max-width: 600px) {
  body { padding: 10px; }
  .quiz-container { width: 100%; padding: 15px; }
}
</style>
</head>

<body>
<div class="quiz-container">

  <h2>🧠 Science Quiz – Smallpox and Vaccination</h2>

  <div id="nameSection">
    <p><strong>Enter your name to start:</strong></p>
    <input type="text" id="userName" placeholder="Your Name">
    <button onclick="startQuiz()">Start Quiz</button>
  </div>

  <div id="quizSection" style="display:none;">
    <div id="questionContainer"></div>

    <div class="controls">
      <button onclick="prevQuestion()" id="prevBtn">Previous</button>
      <button onclick="nextQuestion()" id="nextBtn">Next</button>
      <button onclick="submitQuiz()" id="submitBtn" style="display:none;">Submit</button>
    </div>

    <div id="result" style="text-align:center; margin-top:20px;"></div>

    <div id="scoreboard">
      <h3>πŸ† Scoreboard</h3>
      <ol id="scoreList"></ol>
    </div>
  </div>
</div>

<script>
const questions = [
  {
    question: "1. Smallpox vaccine ka invention kis scientist ne kiya tha?",
    options: [
      "A. Louis Pasteur",
      "B. Edward Jenner",
      "C. Alexander Fleming",
      "D. Robert Hooke"
    ],
    correct: 1,
    explanation: "Edward Jenner ek English doctor the. Late 1700s mein unhone observe kiya ki cowpox se infected milkmaids ko smallpox hone ki sambhavna kam thi. Is observation se first smallpox vaccine ka development hua.<br><br><strong>Example:</strong> Jenner ki discovery ne vaccination ke development ka raasta khola aur smallpox prevention mein help ki."
  },
  {
    question: "2. Smallpox disease ka ek common symptom kya tha?",
    options: [
      "A. Blisters",
      "B. Improved eyesight",
      "C. Stronger muscles",
      "D. Increased height"
    ],
    correct: 0,
    explanation: "Smallpox ek serious infectious disease thi, jisme fever aur skin par blisters ho sakte the. Is disease ne history mein millions of people ki jaan li.<br><br><strong>Example:</strong> Smallpox mein skin par painful blisters develop ho sakte the."
  },
  {
    question: "3. Jenner ne kis disease ko smallpox se protection ke saath related observe kiya?",
    options: [
      "A. Cholera",
      "B. Malaria",
      "C. Cowpox",
      "D. Tuberculosis"
    ],
    correct: 2,
    explanation: "Jenner ne observe kiya ki cowpox se infected milkmaids ko smallpox nahi hota tha, ya unmein uske against protection develop ho sakti thi. Cowpox aur smallpox ke viruses related hain.<br><br><strong>Example:</strong> Milkmaids jo cows ke contact mein rehti thi, unmein cowpox infection ke baad smallpox se protection dekhi gayi."
  },
  {
    question: "4. Smallpox se protection develop karne ke liye India mein traditional method kaunsa use hota tha?",
    options: [
      "A. Variolation",
      "B. Photosynthesis",
      "C. Fermentation",
      "D. Respiration"
    ],
    correct: 0,
    explanation: "Variolation smallpox se protection develop karne ka ek traditional method tha. Ismein smallpox sore se material use karke skin ko scratch kiya jaata tha, jisse infection aur immunity develop karne ki koshish hoti thi. Yeh method risky tha aur modern vaccination se different tha.<br><br><strong>Example:</strong> Traditional India mein variolation perform karne wale logon ko teekedaars kaha jaata tha."
  },
  {
    question: "5. Traditional Indian variolation practice karne wale log kya kehlaate the?",
    options: [
      "A. Pathologists",
      "B. Teekedaars",
      "C. Astronauts",
      "D. Botanists"
    ],
    correct: 1,
    explanation: "Teekedaars woh log the jo traditional variolation practice karte the. Yeh smallpox se protection develop karne ka modern vaccination se pehle ka ek method tha.<br><br><strong>Example:</strong> Teekedaars smallpox sore se material use karke traditional variolation perform karte the."
  },
  {
    question: "6. Jenner ne apni discovery ke liye kya observe kiya tha?",
    options: [
      "A. Milkmaids jinko cowpox hua tha, unhe smallpox nahi hota tha",
      "B. Sabhi logon ko smallpox zaroor hota tha",
      "C. Cowpox aur smallpox ka koi relation nahi tha",
      "D. Vaccination se har disease turant cure hoti hai"
    ],
    correct: 0,
    explanation: "Scientific discoveries mein observation important hota hai. Jenner ne milkmaids ke experience ko observe karke cowpox aur smallpox ke beech possible protection ka relation identify kiya.<br><br><strong>Example:</strong> Kisi pattern ko observe karna scientist ko hypothesis banane mein help karta hai."
  },
  {
    question: "7. Scientific method mein hypothesis ka kya meaning hai?",
    options: [
      "A. Ek testable possible explanation",
      "B. Final result bina testing ke",
      "C. Ek random drawing",
      "D. Sirf ek opinion jise test nahi kar sakte"
    ],
    correct: 0,
    explanation: "Hypothesis ek possible explanation hoti hai jise observations aur experiments ke through test kiya ja sakta hai.<br><br><strong>Example:</strong> Jenner ke case mein idea tha ki cowpox infection smallpox se protection de sakta hai. Is idea ko investigate kiya gaya."
  },
  {
    question: "8. Vaccines ka main purpose kya hai?",
    options: [
      "A. Disease hone se pehle protection develop karne mein help karna",
      "B. Har existing disease ko turant cure karna",
      "C. Body ko nutrients dena",
      "D. Har microorganism ko useful banana"
    ],
    correct: 0,
    explanation: "Vaccines preventive hoti hain, curative nahi. Ye immune system ko specific pathogens ko recognise karna sikhati hain aur future infection ke against protection develop karne mein help karti hain.<br><br><strong>Example:</strong> Measles vaccine measles hone ka risk kam karti hai, lekin measles ho jaane par uska treatment nahi hai."
  },
  {
    question: "9. Smallpox ko worldwide eradicate karne mein kis cheez ne important role play kiya?",
    options: [
      "A. Mass vaccination campaigns",
      "B. Sirf exercise",
      "C. Sirf balanced diet",
      "D. Sirf clean clothes"
    ],
    correct: 0,
    explanation: "Worldwide vaccination efforts ne smallpox ko eliminate karne mein major role play kiya. World Health Organization ne 1980 mein smallpox ko eradicated declare kiya.<br><br><strong>Example:</strong> Large-scale vaccination se communities mein smallpox ke spread ko rokne mein help mili."
  },
  {
    question: "10. Vaccination se sirf vaccinated person ko hi benefit hota hai ya doosron ko bhi?",
    options: [
      "A. Sirf vaccinated person ko",
      "B. Doosron ko kabhi benefit nahi hota",
      "C. Vaccinated person aur community dono ko benefit ho sakta hai",
      "D. Vaccination ka koi benefit nahi hota"
    ],
    correct: 2,
    explanation: "Vaccination vaccinated person ko protection deti hai aur kuch diseases ke spread ko community mein kam karne mein help karti hai. Isse un logon ko bhi indirect protection mil sakti hai jo vaccination nahi le sakte ya jinki immunity weak hai.<br><br><strong>Example:</strong> Jab community mein vaccination coverage high hoti hai, toh kuch infections ke spread hone ke chances kam ho sakte hain."
  }
];

let currentQuestion = 0;
let score = 0;
let userAnswers = [];
let userName = "";

function startQuiz() {
  userName = document.getElementById("userName").value.trim();

  if (!userName) {
    alert("Please enter your name.");
    return;
  }

  document.getElementById("nameSection").style.display = "none";
  document.getElementById("quizSection").style.display = "block";

  showQuestion();
  loadScoreboard();
}

function showQuestion() {
  const q = questions[currentQuestion];
  const container = document.getElementById("questionContainer");

  container.innerHTML = `
    <div class="question">${q.question}</div>

    <div class="options">
      ${q.options.map((opt, i) => `
        <label>
          <input type="radio" name="option" value="${i}"
          ${userAnswers[currentQuestion] == i ? "checked" : ""}>
          ${opt}
        </label>
      `).join("")}
    </div>

    <div class="explanation" id="explain${currentQuestion}">
      ${q.explanation}
    </div>
  `;

  document.getElementById("prevBtn").style.display =
    currentQuestion === 0 ? "none" : "inline-block";

  document.getElementById("nextBtn").style.display =
    currentQuestion === questions.length - 1 ? "none" : "inline-block";

  document.getElementById("submitBtn").style.display =
    currentQuestion === questions.length - 1 ? "inline-block" : "none";
}

function nextQuestion() {
  saveAnswer();

  if (currentQuestion < questions.length - 1) {
    currentQuestion++;
    showQuestion();
  }
}

function prevQuestion() {
  saveAnswer();

  if (currentQuestion > 0) {
    currentQuestion--;
    showQuestion();
  }
}

function saveAnswer() {
  const selected = document.querySelector('input[name="option"]:checked');

  userAnswers[currentQuestion] = selected
    ? parseInt(selected.value)
    : null;
}

function submitQuiz() {
  saveAnswer();

  score = 0;

  questions.forEach((q, index) => {
    if (userAnswers[index] === q.correct) {
      score++;
    }
  });

  showResults();
  saveScore(userName, score);
  loadScoreboard();
}

function showResults() {
  const container = document.getElementById("questionContainer");
  container.innerHTML = "";

  questions.forEach((q, index) => {
    const selected = userAnswers[index];
    const correct = q.correct;

    let optsHTML = q.options.map((opt, i) => {
      let cls = "";

      if (i === correct) cls = "correct";
      if (selected === i && selected !== correct) cls = "wrong";

      return `<label class="${cls}">${opt}</label>`;
    }).join("");

    container.innerHTML += `
      <div class="question">${q.question}</div>
      <div class="options">${optsHTML}</div>
      <div class="explanation" style="display:block;">
        ${q.explanation}
      </div>
      <hr>
    `;
  });

  document.querySelector(".controls").style.display = "none";

  document.getElementById("result").innerHTML = `
    <h3>Your Score: ${score} / ${questions.length}</h3>
    <p>${score === 10 ? "Excellent! πŸŽ‰" : "Keep Practicing! πŸ‘"}</p>
  `;
}

function saveScore(name, score) {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.push({
    name,
    score,
    date: new Date().toLocaleString()
  });

  localStorage.setItem("quizScores", JSON.stringify(scores));
}

function loadScoreboard() {
  let scores = JSON.parse(localStorage.getItem("quizScores")) || [];

  scores.sort((a, b) => b.score - a.score);

  document.getElementById("scoreList").innerHTML =
    scores.map(s =>
      `<li>${s.name} - ${s.score}/10 (${s.date})</li>`
    ).join("");
}
</script>
</body>
</html>

ch3part17

ch3part18

ch3part19

ch3part20

Leave a Comment