ch5 part4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Contact Force and Muscular 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;
}
input[type="text"] {
padding: 10px;
width: 70%;
max-width: 300px;
border: 1px solid #ccc;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h2>🧠 Contact Force and Muscular 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. Contact force kise kehte hain?",
options: [
"A. Jo force bina kisi interaction ke lagta hai",
"B. Jo force sirf sunlight se produce hota hai",
"C. Jo force physical contact hone par act karta hai",
"D. Jo force sirf magnets mein hota hai"
],
correct: 2,
explanation: "Contact force tab act karta hai jab force lagane wale object aur doosre object ke beech physical contact hota hai.<br><br><b>Example:</b> Haath se table ko push karna contact force hai."
},
{
question: "2. Muscular force kiski action se produce hota hai?",
options: [
"A. Body ki muscles",
"B. Sunlight",
"C. Magnet",
"D. Earth ke magnetic field only"
],
correct: 0,
explanation: "Hamari body ki muscles jab contract aur elongate karti hain, toh physical activities ke liye force produce hota hai. Ise muscular force kehte hain.<br><br><b>Example:</b> Dumbbell ko haath se lift karne mein muscular force use hota hai."
},
{
question: "3. Inmein se muscular force ka example kaunsa hai?",
options: [
"A. Magnet ka iron nail ko attract karna",
"B. Earth ka ball ko neeche kheenchna",
"C. Comb ka paper pieces ko attract karna",
"D. Ek person ka heavy box ko push karna"
],
correct: 3,
explanation: "Box ko push karne ke liye person apni muscles ka use karta hai. Isliye muscular force apply hota hai.<br><br><b>Example:</b> Furniture ko room mein doosri jagah move karna."
},
{
question: "4. Contact force apply karne ke liye kya zaroori hota hai?",
options: [
"A. Sirf high temperature",
"B. Objects ke beech physical contact",
"C. Sirf electricity",
"D. Sirf magnetic field"
],
correct: 1,
explanation: "Contact force tabhi act karta hai jab interacting objects physically touch karte hain. Contact direct ya kisi tool ke through ho sakta hai.<br><br><b>Example:</b> Stick se ball ko push karna contact force hai, kyunki stick ball ko touch karti hai."
},
{
question: "5. Rope se bucket ko well se upar kheenchna kis type ke force ka example hai?",
options: [
"A. Gravitational force only",
"B. Magnetic force",
"C. Contact force",
"D. Electrostatic force"
],
correct: 2,
explanation: "Rope bucket ko touch karti hai aur us par pulling force apply karti hai. Isliye yeh contact force hai.<br><br><b>Example:</b> Rope ki help se well se paani ki bucket nikalna."
},
{
question: "6. Animals apni body ko move karne ke liye mainly kaunsa force use karte hain?",
options: [
"A. Muscular force",
"B. Electrostatic force",
"C. Magnetic force",
"D. Nuclear force"
],
correct: 0,
explanation: "Animals ki muscles movement mein help karti hain. Walking, running, jumping aur swimming mein muscular force use hota hai.<br><br><b>Example:</b> Dog ka run karna ya fish ka apni muscles ki help se swim karna."
},
{
question: "7. Bird ke wings movement mein kaunsa force important role play karta hai?",
options: [
"A. Sirf magnetic force",
"B. Sirf gravitational force",
"C. Sirf electrostatic force",
"D. Muscular force"
],
correct: 3,
explanation: "Birds apni muscles ki help se wings move karte hain. Wings ki movement flight mein help karti hai.<br><br><b>Example:</b> Bird ka wings flap karke hawa mein udna."
},
{
question: "8. Ek person stick ki help se door rakhi ball ko push karta hai. Is situation mein contact force kyun hai?",
options: [
"A. Kyunki ball bina force ke move karti hai",
"B. Kyunki stick ball ko touch karke force apply karti hai",
"C. Kyunki stick magnetic hai",
"D. Kyunki ball ka mass zero hai"
],
correct: 1,
explanation: "Contact force direct hand-to-object contact se hi nahi, balki stick ya rope jaise tools ke through bhi apply ho sakta hai.<br><br><b>Example:</b> Hockey stick se ball ko hit karna."
},
{
question: "9. Walking aur running karne mein kaunsa force use hota hai?",
options: [
"A. Magnetic force",
"B. Electrostatic force",
"C. Muscular force",
"D. Gravitational force only"
],
correct: 2,
explanation: "Walking aur running ke dauran body ki muscles contract aur relax karti hain, jisse legs move karte hain.<br><br><b>Example:</b> Race mein daudte samay legs ki muscles force produce karti hain."
},
{
question: "10. Contact force aur muscular force ke baare mein kaunsa statement correct hai?",
options: [
"A. Muscular force, muscles ki action se produce hota hai aur yeh contact force ka example hai",
"B. Muscular force bina muscles ke produce hota hai",
"C. Contact force ke liye physical contact ki zaroorat nahi hoti",
"D. Sirf humans muscular force use karte hain"
],
correct: 0,
explanation: "Muscular force body ki muscles se produce hota hai. Yeh contact force hai, kyunki isse apply karne ke liye body aur object ke beech physical contact hota hai.<br><br><b>Example:</b> Person ka suitcase lift karna ya elephant ka apni muscles ki help se chalna."
}
];
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>
<p><strong>Student Name:</strong> ${userName.replace(/[&<>"']/g, c => ({
'&':'&', '<':'<', '>':'>',
'"':'"', "'":'''
})[c])}</p>
`;
}
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>${String(s.name).replace(/[&<>"']/g, c => ({
'&':'&', '<':'<', '>':'>',
'"':'"', "'":'''
})[c])} - ${s.score}/10 (${s.date})</li>
`).join('');
}
</script>
</body>
</html>