class 8 science chapter 1

<!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;
      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;
    }

    .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;
    }

    input[type="text"] {
      padding: 10px;
      width: 60%;
      max-width: 300px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    hr {
      border: none;
      border-top: 1px solid #ddd;
      margin: 20px 0;
    }
  </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. WHO ke according, health ka correct meaning kya hai?",
    options: [
      "A. Sirf diseases ka na hona",
      "B. Sirf physically strong hona",
      "C. Physical, mental aur social well-being ki complete state",
      "D. Sirf healthy food khana"
    ],
    correct: 2,
    explanation: "WHO ke according, health ka matlab sirf disease-free hona nahi hai. Ismein physical health, mental health aur social well-being teeno include hote hain.<br><br><strong>Example:</strong> Ek person ko koi disease nahi hai, lekin woh bahut stressed aur lonely feel karta hai. Uski overall health phir bhi affect ho sakti hai."
  },

  {
    question: "2. Health ke main aspects kaun-se hain?",
    options: [
      "A. Physical, mental aur social",
      "B. Physical, financial aur political",
      "C. Mental, educational aur financial",
      "D. Social, political aur cultural"
    ],
    correct: 0,
    explanation: "Good health ke liye body ka healthy hona, mind ka balanced rehna aur doosron ke saath achhe relationships hona important hai.<br><br><strong>Example:</strong> Regular exercise, stress ko manage karna aur friends ke saath achha time spend karna health ke different aspects ko support karta hai."
  },

  {
    question: "3. New school mein shift hone ke baad boy ko sabse pehle kis problem ka experience hua?",
    options: [
      "A. Uske marks bahut badh gaye",
      "B. Woh lonely feel karne laga",
      "C. Usne naye friends bana liye",
      "D. Uski sleeping habits improve ho gayi"
    ],
    correct: 1,
    explanation: "Boy ek naye city aur school mein aaya tha. Uske friends nahi the aur parents busy rehte the, isliye woh akela feel karta tha.<br><br><strong>Example:</strong> Jab koi student naye school mein aata hai aur usse baat karne ke liye koi friend nahi milta, toh woh lonely feel kar sakta hai."
  },

  {
    question: "4. Boy ne loneliness se cope karne ke liye kya kiya?",
    options: [
      "A. Outdoor games khelna shuru kiya",
      "B. Counsellor se turant help li",
      "C. Phone aur social media par zyada time spend kiya",
      "D. Apne friends ke saath time spend kiya"
    ],
    correct: 2,
    explanation: "Boy loneliness ko handle karne ke liye phone aur social media ka use badhane laga, lekin isse uski feelings aur worse ho gayin.<br><br><strong>Example:</strong> Agar koi student real-life friends se baat karne ke bajay poora din social media scroll karta rahe, toh uski loneliness badh sakti hai."
  },

  {
    question: "5. Story mein boy ki health problems kaun-si thi?",
    options: [
      "A. Headache, weight loss aur poor sleep",
      "B. Better sleep, weight gain aur high energy",
      "C. Improved concentration aur happiness",
      "D. Stronger friendships aur positive mood"
    ],
    correct: 0,
    explanation: "Boy ko headaches hone lage, uska weight kam ho gaya aur woh achhi tarah so nahi pa raha tha. Ye problems uski overall well-being ko affect kar rahi thi.<br><br><strong>Example:</strong> Stress aur disturbed sleep se kuch logon ko headache aur concentration ki problems ho sakti hain."
  },

  {
    question: "6. Boy ke parents aur surroundings ka uski health par kya effect pada?",
    options: [
      "A. Uski loneliness kam ho gayi",
      "B. Uske paas support aur friendship ki kami thi",
      "C. Uski physical activity badh gayi",
      "D. Uski sleeping routine turant improve ho gayi"
    ],
    correct: 1,
    explanation: "Naya environment, friends ki kami aur busy parents ke kaaran boy ko emotional support kam mil raha tha. Isse uski mental aur physical well-being affect hui.<br><br><strong>Example:</strong> Agar ek student ko school mein koi friend ya trusted adult na mile, toh woh stressed ya isolated feel kar sakta hai."
  },

  {
    question: "7. Doctor ne boy ko kya advice di?",
    options: [
      "A. Screen time badhane aur ghar par rehne ki",
      "B. Friends se door rehne ki",
      "C. Screen time kam karne aur counsellor se milne ki",
      "D. School jaana band karne ki"
    ],
    correct: 2,
    explanation: "Doctor ne boy ko screen time reduce karne aur counsellor se help lene ki advice di. Isse uski habits aur emotional well-being improve karne mein help mil sakti thi.<br><br><strong>Example:</strong> Ek student phone use karne ka fixed time decide kar sakta hai aur stress hone par school counsellor se baat kar sakta hai."
  },

  {
    question: "8. School counsellor ne boy ki help kaise ki?",
    options: [
      "A. Use school chhodne ko kaha",
      "B. Use friends banane aur health improve karne mein support diya",
      "C. Use social media par aur time spend karne ko kaha",
      "D. Uski problems ko ignore kiya"
    ],
    correct: 1,
    explanation: "Counsellor ne boy ko support diya taaki woh naye environment mein adjust kar sake, friendships develop kare aur apni well-being improve kare.<br><br><strong>Example:</strong> Counsellor student ko group activities mein participate karne aur doosre students se baat shuru karne ke practical ways bata sakta hai."
  },

  {
    question: "9. Ek healthy person difficult situations ko kaise handle kar sakta hai?",
    options: [
      "A. Har problem se hamesha bachkar",
      "B. Doosron se baat karna band karke",
      "C. Better coping skills aur adjustment ke through",
      "D. Apni feelings ko hamesha ignore karke"
    ],
    correct: 2,
    explanation: "Achhi health person ko daily tasks efficiently perform karne aur difficult situations ka saamna karne mein help karti hai. Support lena aur problems ko calmly solve karna useful skills hain.<br><br><strong>Example:</strong> Exam ke time stressed student timetable bana sakta hai, breaks le sakta hai aur zaroorat padne par teacher se help le sakta hai."
  },

  {
    question: "10. Inmein se overall good health ka best example kaun-sa hai?",
    options: [
      "A. Disease nahi hai, lekin person hamesha lonely aur stressed rehta hai",
      "B. Person sirf exercise karta hai aur sleep ko ignore karta hai",
      "C. Person body ka care karta hai, stress manage karta hai aur healthy relationships maintain karta hai",
      "D. Person poora din phone use karta hai aur meals skip karta hai"
    ],
    correct: 2,
    explanation: "Overall health mein physical fitness, mental well-being aur social relationships teeno important hain. Inmein balance hone se person ki quality of life improve ho sakti hai.<br><br><strong>Example:</strong> Regular exercise, sufficient sleep, balanced diet, positive coping habits aur family-friends ke saath achhe relationships maintain karna good health ko support karta 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 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>