class 8 science chapter 5

ch5 part3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Force and Interactions – Science Quiz | APICAL CLASSES</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;
      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;
    }

    input[type="text"] {
      padding: 10px;
      width: 65%;
      max-width: 300px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }
  </style>
</head>

<body>

  <div class="quiz-container">

    <h2>🧠 Force and Interactions – Science Quiz | APICAL CLASSES</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. Force apply hone ke liye minimum kitne objects ke beech interaction zaroori hai?",
    options: [
      "A. Sirf ek object",
      "B. Kam se kam do objects",
      "C. Hamesha five objects",
      "D. Koi object zaroori nahi"
    ],
    correct: 1,
    explanation: "Explanation: Force tab arise hota hai jab do ya do se zyada objects ek-doosre ke saath interact karte hain.<br><br>Example: Jab hum table ko push karte hain, toh hamara hand aur table interact karte hain."
  },

  {
    question: "2. Jab ek student table ko push karta hai, toh force apply karne wale aur force receive karne wale objects kaun se hain?",
    options: [
      "A. Student ka hand aur table",
      "B. Table aur floor only",
      "C. Student ke shoes aur floor only",
      "D. Table aur room ki light"
    ],
    correct: 0,
    explanation: "Explanation: Student ka hand table par force apply karta hai. Is interaction mein hand aur table dono involved hain.<br><br>Example: Door ko haath se push karne par hand door par force lagata hai."
  },

  {
    question: "3. Science mein force ki correct definition kya hai?",
    options: [
      "A. Sirf object ka weight",
      "B. Sirf object ki speed",
      "C. Kisi object par doosre object ke interaction se lagne wala push ya pull",
      "D. Sirf object ka temperature"
    ],
    correct: 2,
    explanation: "Explanation: Force ek push ya pull hai jo kisi doosre object ke saath interaction ke result mein lagta hai.<br><br>Example: Magnet iron nail ko attract karta hai, kyunki magnet aur nail ke beech magnetic interaction hota hai."
  },

  {
    question: "4. Jab football player ball ko kick karta hai, toh kaun se objects interact karte hain?",
    options: [
      "A. Ball aur sky",
      "B. Shoes aur ground only",
      "C. Ball aur goalpost only",
      "D. Player ka foot aur football"
    ],
    correct: 3,
    explanation: "Explanation: Kick karte waqt player ka foot football par force apply karta hai. Foot aur ball ke beech interaction hota hai.<br><br>Example: Football ko kick karne par ball move karne lagti hai."
  },

  {
    question: "5. Force ki SI unit kya hai?",
    options: [
      "A. Metre",
      "B. Newton",
      "C. Kilogram",
      "D. Second"
    ],
    correct: 1,
    explanation: "Explanation: Force ki SI unit newton hai. Iska naam English mein small “n” se likha jata hai, lekin iska symbol capital N hota hai.<br><br>Example: Agar kisi object par 5 newton force lagta hai, toh ise 5 N likhte hain."
  },

  {
    question: "6. Force ke symbol ko kaise likha jata hai?",
    options: [
      "A. N",
      "B. m",
      "C. kg",
      "D. s"
    ],
    correct: 0,
    explanation: "Explanation: Newton force ki SI unit hai aur N uska symbol hai.<br><br>Example: 10 newton force ko 10 N likha jata hai."
  },

  {
    question: "7. Ek magnet bina direct contact ke iron nail ko attract karta hai. Isse kya pata chalta hai?",
    options: [
      "A. Force sirf touch karne se lagta hai",
      "B. Iron nail par koi force nahi lagta",
      "C. Objects bina direct contact ke bhi interact kar sakte hain",
      "D. Magnet ka koi magnetic field nahi hota"
    ],
    correct: 2,
    explanation: "Explanation: Magnetic force bina direct physical contact ke bhi act kar sakta hai. Isliye force ke liye hamesha touching zaroori nahi hai.<br><br>Example: Magnet ko iron nail ke paas lane par nail magnet ki taraf attract ho sakta hai."
  },

  {
    question: "8. Jab ek student drawer ko pull karta hai, toh force kis interaction se arise hota hai?",
    options: [
      "A. Drawer aur sunlight ke interaction se",
      "B. Drawer aur room ke colour ke interaction se",
      "C. Drawer aur sound ke interaction se",
      "D. Student ke hand aur drawer ke interaction se"
    ],
    correct: 3,
    explanation: "Explanation: Student ka hand drawer ko pull karta hai. Dono objects ke beech interaction hone se force apply hota hai.<br><br>Example: Drawer ka handle kheenchkar drawer open karna."
  },

  {
    question: "9. Ek ball floor par rest mein hai. Gravity ball par force apply karti hai. Is interaction mein kaun se objects involved hain?",
    options: [
      "A. Ball aur table",
      "B. Earth aur ball",
      "C. Ball aur light bulb",
      "D. Floor aur window"
    ],
    correct: 1,
    explanation: "Explanation: Earth apni gravitational force se ball ko apni taraf attract karti hai. Is interaction mein Earth aur ball involved hain.<br><br>Example: Haath se chhodi gayi ball Earth ki gravity ke karan neeche girti hai."
  },

  {
    question: "10. Forces aur interactions ke baare mein kaunsa statement correct hai?",
    options: [
      "A. Force ke liye interaction zaroori hai; kam se kam do objects involved hote hain",
      "B. Force hamesha sirf ek object se arise hota hai",
      "C. Force ki SI unit kilogram hai",
      "D. Force sirf tab lagta hai jab objects ek-doosre ko touch karte hain"
    ],
    correct: 0,
    explanation: "Explanation: Force objects ke interaction se arise hota hai. Interaction contact ke through ya non-contact forces, jaise gravity aur magnetism, ke through ho sakta hai.<br><br>Example: Hand table ko push karta hai (contact force), jabki Earth ball ko attract karti hai (gravitational force)."
  }

];

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>