class 8 science chapter 5

ch5 part2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Effects of Force – 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>🧠 Effects of Force – 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 kisi stationary object par apply karne se kya ho sakta hai?",
    options: [
      "A. Object ka colour hamesha change hoga",
      "B. Object ka mass zero ho jayega",
      "C. Object rest se move karna start kar sakta hai",
      "D. Object hamesha disappear ho jayega"
    ],
    correct: 2,
    explanation: "Explanation: Jab stationary object par suitable unbalanced force lagta hai, toh object move karna start kar sakta hai.<br><br>Example: Football ko kick karne par woh rest se move karne lagti hai."
  },

  {
    question: "2. Ek fielder moving ball ko pakadkar rok deta hai. Force ka kya effect hua?",
    options: [
      "A. Ball ruk gayi",
      "B. Ball ka colour badal gaya",
      "C. Ball ka mass badh gaya",
      "D. Ball ka temperature hamesha badh gaya"
    ],
    correct: 0,
    explanation: "Explanation: Fielder ball par force apply karta hai, jisse ball ki speed decrease hote-hote zero ho sakti hai.<br><br>Example: Cricket mein fielder ball ko catch karke rok deta hai."
  },

  {
    question: "3. Moving ball ko bat se hit karne par ball doosri direction mein chali jaati hai. Force ka kaunsa effect hai?",
    options: [
      "A. Sirf shape change",
      "B. Sirf colour change",
      "C. Mass change",
      "D. Direction of motion change"
    ],
    correct: 3,
    explanation: "Explanation: Moving object par force lagne se uski direction change ho sakti hai.<br><br>Example: Cricket ball bowler ki taraf se aati hai, lekin bat se hit hone ke baad doosri direction mein ja sakti hai."
  },

  {
    question: "4. Inflated balloon ko haath se press karne par uski shape change hoti hai. Iska reason kya hai?",
    options: [
      "A. Balloon par gravity khatam ho jaati hai",
      "B. Applied force balloon ki shape change karta hai",
      "C. Balloon ka mass zero ho jata hai",
      "D. Balloon mein hawa solid ban jaati hai"
    ],
    correct: 1,
    explanation: "Explanation: Kisi object ko press, stretch ya squeeze karne se force uski shape change kar sakta hai.<br><br>Example: Sponge ko haath se dabane par uski shape change ho jaati hai."
  },

  {
    question: "5. Moving bicycle par brakes lagane se generally kya hota hai?",
    options: [
      "A. Bicycle ki speed badhti hai",
      "B. Bicycle ka colour badalta hai",
      "C. Bicycle ki speed decrease hoti hai",
      "D. Bicycle ka mass kam ho jata hai"
    ],
    correct: 2,
    explanation: "Explanation: Brakes lagane par frictional force bicycle ki motion ko oppose karta hai. Isse bicycle slow ho sakti hai aur ruk sakti hai.<br><br>Example: Road par cycle chalate samay brake lagane se cycle slow hokar ruk jaati hai."
  },

  {
    question: "6. Rubber band ko dono taraf se kheenchne par kya effect hota hai?",
    options: [
      "A. Uski shape aur length change ho sakti hai",
      "B. Uska mass zero ho jata hai",
      "C. Woh bina force ke disappear ho jaati hai",
      "D. Uski direction of motion hamesha change hoti hai"
    ],
    correct: 0,
    explanation: "Explanation: Stretching force rubber band ko deform kar sakta hai. Force hatane par rubber band apni original shape ke paas wapas aa sakti hai.<br><br>Example: Rubber band ko kheenchne par woh lambi ho jaati hai."
  },

  {
    question: "7. Ek moving football ko doosra player opposite direction mein kick karta hai. Force kya kar sakta hai?",
    options: [
      "A. Football ka mass khatam kar sakta hai",
      "B. Football ko hamesha same direction mein rakhega",
      "C. Football ko transparent bana dega",
      "D. Football ki speed aur direction change kar sakta hai"
    ],
    correct: 3,
    explanation: "Explanation: Applied force moving object ki speed badha, ghata ya uski direction change kar sakta hai. Exact effect force ki direction aur magnitude par depend karta hai.<br><br>Example: Football ko opposite direction mein kick karne se woh slow ho sakti hai ya reverse direction mein ja sakti hai."
  },

  {
    question: "8. Chapati belne ke liye rolling pin se dough ko press kiya jata hai. Force ka main effect kya hai?",
    options: [
      "A. Dough ka mass zero hota hai",
      "B. Dough ki shape aur thickness change hoti hai",
      "C. Dough hawa mein udne lagta hai",
      "D. Dough ka colour hamesha blue ho jata hai"
    ],
    correct: 1,
    explanation: "Explanation: Rolling pin dough par force apply karta hai, jisse dough flat hokar chapati ki shape leta hai.<br><br>Example: Aate ke dough ko belne par woh gol aur patla ho jata hai."
  },

  {
    question: "9. Autorickshaw ka driver steering handle turn karta hai. Isse kya change ho sakta hai?",
    options: [
      "A. Autorickshaw ka mass zero ho sakta hai",
      "B. Tyres ka size turant badal sakta hai",
      "C. Autorickshaw ki direction change ho sakti hai",
      "D. Road ka colour change ho sakta hai"
    ],
    correct: 2,
    explanation: "Explanation: Steering turn karne se wheels ki direction change hoti hai, jisse moving autorickshaw ka path change ho sakta hai.<br><br>Example: Driver left turn leta hai toh autorickshaw left direction mein mudta hai."
  },

  {
    question: "10. Force ke effects ke baare mein kaunsa statement correct hai?",
    options: [
      "A. Force object ko move kara sakta hai, slow kar sakta hai, direction ya shape change kar sakta hai",
      "B. Force sirf object ka colour change karta hai",
      "C. Force ka moving objects par koi effect nahi hota",
      "D. Force hamesha object ka mass badhata hai"
    ],
    correct: 0,
    explanation: "Explanation: Force ke different effects ho sakte hain—object rest se move kar sakta hai, moving object slow ya fast ho sakta hai, direction change ho sakti hai, aur shape bhi change ho sakti hai.<br><br>Example: Football ko kick karna motion change karta hai, brakes lagana speed kam karta hai, aur balloon ko press karna shape change 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>