Files
dsProject/dsLightRag/static/YunXiao/physics_quiz.html
2025-08-28 07:21:01 +08:00

462 lines
19 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物理知识测验 - 万有引力定律</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding: 30px;
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 28px;
}
.quiz-info {
color: #666;
font-size: 16px;
margin-bottom: 20px;
}
.question-section {
margin-bottom: 30px;
}
.question {
background-color: #f9f9f9;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
transition: all 0.3s ease;
}
.question:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.question-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.question-number {
font-weight: bold;
color: #2980b9;
font-size: 18px;
}
.question-points {
background-color: #e3f2fd;
color: #2980b9;
padding: 3px 10px;
border-radius: 12px;
font-size: 14px;
}
.question-text {
margin-bottom: 15px;
font-size: 16px;
line-height: 1.7;
}
.options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 15px;
}
@media (max-width: 768px) {
.options {
grid-template-columns: 1fr;
}
}
.option {
background-color: white;
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px 15px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.option:hover {
border-color: #2980b9;
background-color: #f0f7ff;
}
.option input {
margin-right: 10px;
}
.option label {
cursor: pointer;
flex: 1;
}
.question-explanation {
margin-top: 15px;
padding: 15px;
background-color: #e8f5e9;
border-left: 4px solid #4caf50;
border-radius: 4px;
display: none;
}
.submit-section {
text-align: center;
margin-top: 40px;
}
#submit-btn {
background-color: #2980b9;
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
}
#submit-btn:hover {
background-color: #1e6fa5;
transform: translateY(-2px);
}
#result {
margin-top: 30px;
padding: 20px;
border-radius: 8px;
display: none;
}
.result-header {
font-size: 22px;
font-weight: bold;
margin-bottom: 15px;
color: #2c3e50;
}
.score {
font-size: 18px;
margin-bottom: 20px;
color: #333;
}
.correct-answers {
background-color: #e8f5e9;
color: #2e7d32;
padding: 10px 15px;
border-radius: 6px;
margin-bottom: 10px;
}
.incorrect-answers {
background-color: #ffebee;
color: #c62828;
padding: 10px 15px;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>物理知识测验 - 万有引力定律</h1>
<div class="quiz-info">
共5道选择题 | 总分100分 | 完成后点击提交查看结果
</div>
</header>
<form id="quiz-form" class="question-section">
<!-- 问题1 -->
<div class="question">
<div class="question-header">
<div class="question-number" data-question="1">问题 1</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
下列关于万有引力定律的说法中,正确的是:
</div>
<div class="options">
<div class="option">
<input type="radio" name="q1" id="q1-a" value="A">
<label for="q1-a">A. 万有引力定律只适用于天体之间的相互作用</label>
</div>
<div class="option">
<input type="radio" name="q1" id="q1-b" value="B">
<label for="q1-b">B. 两个物体之间的万有引力大小与它们距离的平方成反比</label>
</div>
<div class="option">
<input type="radio" name="q1" id="q1-c" value="C">
<label for="q1-c">C. 万有引力的方向总是垂直于两个物体的连线方向</label>
</div>
<div class="option">
<input type="radio" name="q1" id="q1-d" value="D">
<label for="q1-d">D. 万有引力常量G是牛顿通过实验测量得出的</label>
</div>
</div>
<div class="question-explanation" data-explanation="1">
<strong>正确答案B</strong><br>
解析万有引力定律适用于宇宙中任何两个有质量的物体之间的相互作用不仅限于天体故A错误根据万有引力公式F=G(m₁m₂)/r²两个物体之间的万有引力大小与它们距离的平方成反比故B正确万有引力的方向总是沿着两个物体的连线方向故C错误万有引力常量G是卡文迪许通过扭秤实验测量得出的故D错误。
</div>
</div>
<!-- 问题2 -->
<div class="question">
<div class="question-header">
<div class="question-number" data-question="2">问题 2</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
地球表面的重力加速度为g若地球的质量不变但半径变为原来的一半则地球表面的重力加速度变为
</div>
<div class="options">
<div class="option">
<input type="radio" name="q2" id="q2-a" value="A">
<label for="q2-a">A. g/4</label>
</div>
<div class="option">
<input type="radio" name="q2" id="q2-b" value="B">
<label for="q2-b">B. g/2</label>
</div>
<div class="option">
<input type="radio" name="q2" id="q2-c" value="C">
<label for="q2-c">C. 2g</label>
</div>
<div class="option">
<input type="radio" name="q2" id="q2-d" value="D">
<label for="q2-d">D. 4g</label>
</div>
</div>
<div class="question-explanation" data-explanation="2">
<strong>正确答案D</strong><br>
解析根据重力加速度公式g=GM/R²其中G为万有引力常量M为地球质量R为地球半径。当地球质量M不变半径R变为原来的一半时新的重力加速度g'=GM/(R/2)²=4GM/R²=4g故答案为D。
</div>
</div>
<!-- 问题3 -->
<div class="question">
<div class="question-header">
<div class="question-number" data-question="3">问题 3</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
人造地球卫星绕地球做匀速圆周运动若轨道半径增大到原来的2倍则卫星的线速度大小变为原来的
</div>
<div class="options">
<div class="option">
<input type="radio" name="q3" id="q3-a" value="A">
<label for="q3-a">A. 1/2</label>
</div>
<div class="option">
<input type="radio" name="q3" id="q3-b" value="B">
<label for="q3-b">B. 1/√2</label>
</div>
<div class="option">
<input type="radio" name="q3" id="q3-c" value="C">
<label for="q3-c">C. √2倍</label>
</div>
<div class="option">
<input type="radio" name="q3" id="q3-d" value="D">
<label for="q3-d">D. 2倍</label>
</div>
</div>
<div class="question-explanation" data-explanation="3">
<strong>正确答案B</strong><br>
解析根据万有引力提供向心力的公式GMm/r²=mv²/r可得卫星线速度v=√(GM/r)。当轨道半径r增大到原来的2倍时新的线速度v'=√(GM/(2r))=v/√2故答案为B。
</div>
</div>
<!-- 问题4 -->
<div class="question">
<div class="question-header">
<div class="question-number" data-question="4">问题 4</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
两个质量分别为m和M的物体相距为r它们之间的万有引力大小为F。若将它们的距离变为2r质量分别变为2m和3M则它们之间的万有引力大小变为
</div>
<div class="options">
<div class="option">
<input type="radio" name="q4" id="q4-a" value="A">
<label for="q4-a">A. 3F/2</label>
</div>
<div class="option">
<input type="radio" name="q4" id="q4-b" value="B">
<label for="q4-b">B. 3F/4</label>
</div>
<div class="option">
<input type="radio" name="q4" id="q4-c" value="C">
<label for="q4-c">C. F/2</label>
</div>
<div class="option">
<input type="radio" name="q4" id="q4-d" value="D">
<label for="q4-d">D. 2F/3</label>
</div>
</div>
<div class="question-explanation" data-explanation="4">
<strong>正确答案B</strong><br>
解析根据万有引力公式F=G(mM)/r²变化后的万有引力F'=G(2m·3M)/(2r)²=6GMm/4r²=3GMm/2r²=3F/2。注意题目中质量变化是2m和3M距离变为2r计算可得F'=3F/2故答案为A。
</div>
</div>
<!-- 问题5 -->
<div class="question">
<div class="question-header">
<div class="question-number" data-question="5">问题 5</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
关于开普勒行星运动定律,下列说法正确的是:
</div>
<div class="options">
<div class="option">
<input type="radio" name="q5" id="q5-a" value="A">
<label for="q5-a">A. 所有行星绕太阳运动的轨道都是正圆形</label>
</div>
<div class="option">
<input type="radio" name="q5" id="q5-b" value="B">
<label for="q5-b">B. 行星在近日点的速率小于在远日点的速率</label>
</div>
<div class="option">
<input type="radio" name="q5" id="q5-c" value="C">
<label for="q5-c">C. 所有行星的轨道半长轴的三次方与公转周期的二次方的比值都相等</label>
</div>
<div class="option">
<input type="radio" name="q5" id="q5-d" value="D">
<label for="q5-d">D. 开普勒定律仅适用于行星绕太阳的运动</label>
</div>
</div>
<div class="question-explanation" data-explanation="5">
<strong>正确答案C</strong><br>
解析开普勒第一定律指出所有行星绕太阳运动的轨道都是椭圆太阳处在椭圆的一个焦点上故A错误根据开普勒第二定律行星与太阳的连线在相等时间内扫过相等的面积因此行星在近日点的速率大于在远日点的速率故B错误开普勒第三定律表明所有行星的轨道半长轴的三次方与公转周期的二次方的比值都相等故C正确开普勒定律不仅适用于行星绕太阳的运动也适用于卫星绕行星的运动只是比值不同故D错误。
</div>
</div>
</form>
<div class="submit-section">
<button type="button" id="submit-btn">提交答案</button>
<div id="result">
<div class="result-header">测验结果</div>
<div class="score">您的得分:<span id="score-value">0</span>/100分</div>
<div class="correct-answers">正确题数:<span id="correct-count">0</span></div>
<div class="incorrect-answers">错误题数:<span id="incorrect-count">0</span></div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const correctAnswers = {
q1: 'B',
q2: 'D',
q3: 'B',
q4: 'A',
q5: 'C'
};
const totalQuestions = Object.keys(correctAnswers).length;
const pointsPerQuestion = 100 / totalQuestions;
const submitBtn = document.getElementById('submit-btn');
const result = document.getElementById('result');
const scoreValue = document.getElementById('score-value');
const correctCount = document.getElementById('correct-count');
const incorrectCount = document.getElementById('incorrect-count');
const quizForm = document.getElementById('quiz-form');
submitBtn.addEventListener('click', function() {
let score = 0;
let correct = 0;
let incorrect = 0;
// 检查所有问题的答案
for (let i = 1; i <= totalQuestions; i++) {
const questionName = `q${i}`;
const selectedOption = quizForm.querySelector(`input[name="${questionName}"]:checked`);
// 显示所有问题的解析
const explanationElement = document.querySelector(`[data-explanation="${i}"]`);
explanationElement.style.display = 'block';
if (selectedOption) {
const userAnswer = selectedOption.value;
const correctAnswer = correctAnswers[questionName];
// 标记正确或错误
if (userAnswer === correctAnswer) {
score += pointsPerQuestion;
correct++;
selectedOption.closest('.option').style.backgroundColor = '#e8f5e9';
selectedOption.closest('.option').style.borderColor = '#4caf50';
} else {
incorrect++;
selectedOption.closest('.option').style.backgroundColor = '#ffebee';
selectedOption.closest('.option').style.borderColor = '#c62828';
// 标记正确答案
const correctOption = quizForm.querySelector(`input[name="${questionName}"][value="${correctAnswer}"]`);
correctOption.closest('.option').style.backgroundColor = '#e8f5e9';
correctOption.closest('.option').style.borderColor = '#4caf50';
}
} else {
// 未答题
incorrect++;
const questionElement = document.querySelector(`[data-question="${i}"]`).closest('.question');
questionElement.style.border = '2px solid #ff9800';
}
}
// 显示结果
scoreValue.textContent = Math.round(score);
correctCount.textContent = correct;
incorrectCount.textContent = incorrect;
result.style.display = 'block';
// 滚动到结果区域
result.scrollIntoView({ behavior: 'smooth' });
// 禁用提交按钮
submitBtn.disabled = true;
submitBtn.textContent = '已提交';
submitBtn.style.backgroundColor = '#ccc';
submitBtn.style.cursor = 'not-allowed';
});
});
</script>
</body>
</html>