class 8 science chapter 5

ch5 part5

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>🧠 Friction Force Quiz</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>🧠 Friction Force Quiz</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. Friction force kise kehte hain?",
    options: [
      "A. Jo force hamesha motion ko increase karta hai",
      "B. Jo force moving ya move karne ki koshish kar rahe object ki motion ko oppose karta hai",
      "C. Jo force sirf objects ko attract karta hai",
      "D. Jo force object ka mass badhata hai"
    ],
    correct: 1,
    explanation: "Friction ek contact force hai jo do surfaces ke contact mein aane par arise hota hai. Yeh object ki sliding ya motion ki tendency ko oppose karta hai.<br><br><b>Example:</b> Floor par slide karta hua box friction ki wajah se kuch distance ke baad ruk jata hai."
  },

  {
    question: "2. Flat ground par rolling ball kuch time baad kyun ruk jaati hai?",
    options: [
      "A. Friction force ki wajah se",
      "B. Ball ka mass zero ho jaata hai",
      "C. Gravity khatam ho jaati hai",
      "D. Ball ki shape gayab ho jaati hai"
    ],
    correct: 0,
    explanation: "Ball aur ground ke beech friction ball ki motion ko oppose karta hai, jis se ball ki speed gradually decrease hoti hai.<br><br><b>Example:</b> Football ko ground par roll karne par woh kuch distance ke baad ruk jaati hai."
  },

  {
    question: "3. Friction force ki direction generally kis taraf hoti hai?",
    options: [
      "A. Hamesha upward",
      "B. Hamesha downward",
      "C. Motion ya motion ki tendency ke opposite",
      "D. Hamesha object ke weight ki direction mein"
    ],
    correct: 2,
    explanation: "Friction object ki relative sliding motion ya sliding ki tendency ko oppose karta hai. Isliye yeh us direction ke opposite act karta hai.<br><br><b>Example:</b> Agar box floor par right side slide kar raha hai, toh friction box par left side act karega."
  },

  {
    question: "4. Rough road par bicycle, smooth road ke comparison mein jaldi kyun slow ho sakti hai?",
    options: [
      "A. Rough road par gravity nahi hoti",
      "B. Smooth road par bicycle ka mass zero hota hai",
      "C. Rough road par tyres ka size badh jaata hai",
      "D. Rough road par friction generally zyada hota hai"
    ],
    correct: 3,
    explanation: "Rough surfaces ki irregularities motion ko zyada oppose kar sakti hain. Isliye similar conditions mein bicycle rough road par jaldi slow ho sakti hai.<br><br><b>Example:</b> Rough floor par box ko slide karna smooth floor ke comparison mein mushkil ho sakta hai."
  },

  {
    question: "5. Friction kis type ka force hai?",
    options: [
      "A. Contact force",
      "B. Non-contact force",
      "C. Sirf magnetic force",
      "D. Sirf gravitational force"
    ],
    correct: 0,
    explanation: "Friction tab arise hota hai jab do surfaces contact mein hote hain. Isliye friction contact force hai.<br><br><b>Example:</b> Shoes aur ground ke beech friction walking mein help karta hai."
  },

  {
    question: "6. Do surfaces par friction arise hone ka ek main reason kya hai?",
    options: [
      "A. Surfaces ka hamesha liquid hona",
      "B. Surfaces ki minute irregularities ka ek-doosre ko oppose karna",
      "C. Surfaces ka completely disappear hona",
      "D. Objects ka light produce karna"
    ],
    correct: 1,
    explanation: "Surfaces smooth dikhne ke bawajood un par tiny irregularities hoti hain. Contact mein aane par ye irregularities relative motion ko oppose kar sakti hain.<br><br><b>Example:</b> Rough wooden block ko table par slide karne mein resistance feel hota hai."
  },

  {
    question: "7. Ek student notebook ko table par push karta hai. Notebook kuch distance ke baad ruk jaati hai. Iska best explanation kya hai?",
    options: [
      "A. Notebook par koi force nahi lagta",
      "B. Notebook ka mass khatam ho jaata hai",
      "C. Notebook aur table ke beech friction uski motion ko oppose karta hai",
      "D. Table notebook ko permanently attract karti hai"
    ],
    correct: 2,
    explanation: "Notebook slide karte waqt notebook aur table ke contact surfaces ke beech friction act karta hai. Yeh notebook ki speed decrease karta hai.<br><br><b>Example:</b> Geometry box ko desk par push karne ke baad woh kuch distance par ruk jata hai."
  },

  {
    question: "8. Friction ke baare mein kaunsa statement correct hai?",
    options: [
      "A. Friction sirf air mein hota hai",
      "B. Friction hamesha motion ko increase karta hai",
      "C. Friction bina kisi interaction ke arise hota hai",
      "D. Friction moving ya move karne ki tendency wale object ko oppose kar sakta hai"
    ],
    correct: 3,
    explanation: "Friction sirf moving objects par hi nahi, balki un objects par bhi act kar sakta hai jo kisi surface par move karne ki koshish kar rahe hon.<br><br><b>Example:</b> Heavy cupboard ko push karne par woh tab tak stationary reh sakta hai jab tak applied force static friction ko overcome na kare."
  },

  {
    question: "9. Agar sliding object ki direction reverse kar di jaaye, toh friction ki direction kya hogi?",
    options: [
      "A. Friction phir bhi relative sliding motion ko oppose karega",
      "B. Friction hamesha original direction mein rahega",
      "C. Friction completely disappear ho jayega",
      "D. Friction hamesha upward act karega"
    ],
    correct: 0,
    explanation: "Friction ki direction object ki current sliding direction ke opposite hoti hai. Object ki direction badalne par friction ki direction bhi badal sakti hai.<br><br><b>Example:</b> Box ko right slide karne par friction left act karta hai; box ko left slide karne par friction right act karta hai."
  },

  {
    question: "10. Table par rakhe box ko push karna rough surface par zyada difficult kyun ho sakta hai?",
    options: [
      "A. Rough surface box ka mass remove kar deti hai",
      "B. Rough surfaces ke beech friction zyada ho sakta hai",
      "C. Rough surface par contact nahi hota",
      "D. Rough surface gravity ko khatam kar deti hai"
    ],
    correct: 1,
    explanation: "Rough surfaces ki irregularities ek-doosre ko zyada oppose kar sakti hain. Is wajah se box ko move karne ke liye generally zyada force ki zaroorat ho sakti hai.<br><br><b>Example:</b> Carpet par heavy box ko slide karna smooth tiles ke comparison mein mushkil ho 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>