class 8 science chapter 5

ch5 part1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🧠 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; }

    .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>🧠 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. Science mein force kise kehte hain?",
    options: [
      "A. Sirf kisi object ko dekhna",
      "B. Kisi object par lagaya gaya push ya pull",
      "C. Sirf object ka colour change karna",
      "D. Kisi object ka temperature measure karna"
    ],
    correct: 1,
    explanation: "Jab hum kisi object ko dhakka dete hain ya kheenchte hain, toh hum us par force apply karte hain.<br><br><strong>Example:</strong> Darwaze ko dhakka dekar kholna push hai, aur darwaze ko apni taraf kheenchna pull hai."
  },

  {
    question: "2. Ek student cardboard box ko aage dhakka deta hai. Woh kaunsa force apply kar raha hai?",
    options: [
      "A. Push",
      "B. Pull",
      "C. Koi force nahi",
      "D. Sirf gravity"
    ],
    correct: 0,
    explanation: "Jab hum kisi object ko apne se door dhakelte hain, toh use push kehte hain.<br><br><strong>Example:</strong> Table ko aage khiskane ke liye dhakka dena push hai."
  },

  {
    question: "3. Inmein se pull ka example kaunsa hai?",
    options: [
      "A. Football ko kick karna",
      "B. Wall ko dhakka dena",
      "C. Bucket ko rassi se upar kheenchna",
      "D. Ball ko bat se hit karna"
    ],
    correct: 2,
    explanation: "Jab hum kisi object ko apni taraf ya apni direction mein kheenchte hain, toh use pull kehte hain.<br><br><strong>Example:</strong> Well se paani ki bucket ko rassi se kheenchkar upar lana pull hai."
  },

  {
    question: "4. Ragini cycling karte samay pedals ko harder push karti hai. Pedals par force lagane ka main purpose kya hai?",
    options: [
      "A. Bicycle ka colour badalna",
      "B. Tyres ka size badhana",
      "C. Bicycle ka weight khatam karna",
      "D. Bicycle ko chalane aur uski speed badhane mein help karna"
    ],
    correct: 3,
    explanation: "Pedals par force lagane se bicycle move kar sakti hai. Suitable conditions mein zyada effective pedalling force bicycle ki speed badha sakta hai.<br><br><strong>Example:</strong> Cycle ko start karne ke liye hum pedals ko push karte hain."
  },

  {
    question: "5. Jab bicycle hawa ke opposite direction mein chalti hai, toh cyclist ko kya feel ho sakta hai?",
    options: [
      "A. Hawa bilkul nahi lagti",
      "B. Hawa movement ka oppose karti hai",
      "C. Bicycle ka weight zero ho jata hai",
      "D. Pedals apne aap gayab ho jaate hain"
    ],
    correct: 1,
    explanation: "Hawa bicycle aur cyclist ki motion ke opposite direction mein force laga sakti hai. Is wajah se aage badhne ke liye zyada effort lag sakta hai.<br><br><strong>Example:</strong> Tez hawa ke against cycle chalana, hawa ki direction mein cycle chalane se mushkil ho sakta hai."
  },

  {
    question: "6. Agar ek box ko move karna ho, toh us par kya apply karna pad sakta hai?",
    options: [
      "A. Push ya pull",
      "B. Sirf light",
      "C. Sirf sound",
      "D. Sirf smell"
    ],
    correct: 0,
    explanation: "Box ko move karne ke liye hum push ya pull apply kar sakte hain. Force object ki motion ko change karne mein help kar sakta hai.<br><br><strong>Example:</strong> Heavy box ko floor par aage khiskane ke liye dhakka dena."
  },

  {
    question: "7. Bicycle ki bell press karne par kaunsa action hota hai?",
    options: [
      "A. Bell ko pull karna hi zaroori hai",
      "B. Bicycle ka weight badhta hai",
      "C. Bell ke button ya lever par force apply hota hai",
      "D. Gravity khatam ho jaati hai"
    ],
    correct: 2,
    explanation: "Bell ko operate karne ke liye hum uske button ya lever par force lagate hain. Isse bell ka mechanism kaam karta hai aur sound produce hoti hai.<br><br><strong>Example:</strong> Cycle ki bell dabane par “tring-tring” sound aati hai."
  },

  {
    question: "8. Jab Sonali aur Ragini hill se neeche bina pedal kiye fast move karti hain, toh unki speed badhne ka main reason kya hai?",
    options: [
      "A. Hawa ka rang badalna",
      "B. Tyres ka hawa chhod dena",
      "C. Bell ka sound produce karna",
      "D. Gravity ki wajah se downhill motion"
    ],
    correct: 3,
    explanation: "Earth ki gravity bicycle aur riders ko neeche ki taraf pull karti hai. Slope par gravity ka ek component downhill motion mein help karta hai.<br><br><strong>Example:</strong> Hill se neeche aati ball bina push kiye accelerate kar sakti hai."
  },

  {
    question: "9. Force kisi object par apply karne se kya ho sakta hai?",
    options: [
      "A. Object hamesha disappear ho jata hai",
      "B. Object ki motion ya shape change ho sakti hai",
      "C. Object hamesha liquid ban jata hai",
      "D. Object ka mass hamesha zero ho jata hai"
    ],
    correct: 1,
    explanation: "Force object ko move kar sakta hai, uski speed ya direction change kar sakta hai, ya uski shape ko change kar sakta hai.<br><br><strong>Example:</strong> Football ko kick karne se uski motion change hoti hai. Sponge ko press karne se uski shape change hoti hai."
  },

  {
    question: "10. Ek stationary cardboard box ko koi student dhakka deta hai, lekin box move nahi karta. Is situation mein sabse sahi statement kaunsa hai?",
    options: [
      "A. Student ne force apply nahi kiya",
      "B. Box par gravity nahi lag rahi",
      "C. Applied force ke bawajood box stationary reh sakta hai",
      "D. Har force se object ko move karna hi chahiye"
    ],
    correct: 2,
    explanation: "Agar applied force ko friction ya koi doosra opposing force balance kar raha ho, toh object stationary reh sakta hai. Force lagne ka matlab yeh nahi ki object hamesha move karega.<br><br><strong>Example:</strong> Floor par rakhe heavy box ko halka dhakka dene par woh nahi hilta, kyunki friction us motion ko oppose kar sakta 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>