Files
dsProject/dsLightRag/static/YunXiao/physics_quiz.html
2025-08-28 08:58:19 +08:00

941 lines
42 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;
}
.difficulty-indicator {
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-weight: bold;
margin-bottom: 15px;
}
.difficulty-easy {
background-color: #e8f5e9;
color: #2e7d32;
}
.difficulty-medium {
background-color: #fff8e1;
color: #ff8f00;
}
.difficulty-hard {
background-color: #ffebee;
color: #c62828;
}
.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.hidden {
display: none;
}
.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;
}
.navigation-section {
text-align: center;
margin: 20px 0;
padding: 15px;
background-color: #f5f5f5;
border-radius: 8px;
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="difficulty-indicator difficulty-medium">当前难度:中等</div>
<div class="quiz-info">
共15道题分三个难度级别。完成当前难度后将根据您的表现推荐下一难度。
</div>
</header>
<div class="question-section">
<!-- 中等难度题目 (初始显示) -->
<div class="question" data-difficulty="medium" data-question="1">
<div class="question-header">
<div class="question-number">中等难度 - 问题 1</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
下列关于万有引力定律的说法中,正确的是:
</div>
<div class="options">
<div class="option">
<input type="radio" name="mq1" id="mq1-a" value="A">
<label for="mq1-a">A. 万有引力定律只适用于天体之间的相互作用</label>
</div>
<div class="option">
<input type="radio" name="mq1" id="mq1-b" value="B">
<label for="mq1-b">B. 两个物体之间的万有引力大小与它们距离的平方成反比</label>
</div>
<div class="option">
<input type="radio" name="mq1" id="mq1-c" value="C">
<label for="mq1-c">C. 万有引力的方向总是垂直于两个物体的连线方向</label>
</div>
<div class="option">
<input type="radio" name="mq1" id="mq1-d" value="D">
<label for="mq1-d">D. 万有引力常量G是牛顿通过实验测量得出的</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案B</strong><br>
解析万有引力定律适用于宇宙中任何两个有质量的物体之间的相互作用不仅限于天体故A错误根据万有引力公式F=G(m₁m₂)/r²两个物体之间的万有引力大小与它们距离的平方成反比故B正确万有引力的方向总是沿着两个物体的连线方向故C错误万有引力常量G是卡文迪许通过扭秤实验测量得出的故D错误。
</div>
</div>
<div class="question" data-difficulty="medium" data-question="2">
<div class="question-header">
<div class="question-number">中等难度 - 问题 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="mq2" id="mq2-a" value="A">
<label for="mq2-a">A. g/4</label>
</div>
<div class="option">
<input type="radio" name="mq2" id="mq2-b" value="B">
<label for="mq2-b">B. g/2</label>
</div>
<div class="option">
<input type="radio" name="mq2" id="mq2-c" value="C">
<label for="mq2-c">C. 2g</label>
</div>
<div class="option">
<input type="radio" name="mq2" id="mq2-d" value="D">
<label for="mq2-d">D. 4g</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案D</strong><br>
解析根据重力加速度公式g=GM/R²其中G为万有引力常量M为地球质量R为地球半径。当地球质量M不变半径R变为原来的一半时新的重力加速度g'=GM/(R/2)²=4GM/R²=4g故答案为D。
</div>
</div>
<div class="question" data-difficulty="medium" data-question="3">
<div class="question-header">
<div class="question-number">中等难度 - 问题 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="mq3" id="mq3-a" value="A">
<label for="mq3-a">A. 1/2</label>
</div>
<div class="option">
<input type="radio" name="mq3" id="mq3-b" value="B">
<label for="mq3-b">B. 1/√2</label>
</div>
<div class="option">
<input type="radio" name="mq3" id="mq3-c" value="C">
<label for="mq3-c">C. √2倍</label>
</div>
<div class="option">
<input type="radio" name="mq3" id="mq3-d" value="D">
<label for="mq3-d">D. 2倍</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案B</strong><br>
解析根据万有引力提供向心力的公式GMm/r²=mv²/r可得卫星线速度v=√(GM/r)。当轨道半径r增大到原来的2倍时新的线速度v'=√(GM/(2r))=v/√2故答案为B。
</div>
</div>
<div class="question" data-difficulty="medium" data-question="4">
<div class="question-header">
<div class="question-number">中等难度 - 问题 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="mq4" id="mq4-a" value="A">
<label for="mq4-a">A. 3F/2</label>
</div>
<div class="option">
<input type="radio" name="mq4" id="mq4-b" value="B">
<label for="mq4-b">B. 3F/4</label>
</div>
<div class="option">
<input type="radio" name="mq4" id="mq4-c" value="C">
<label for="mq4-c">C. F/2</label>
</div>
<div class="option">
<input type="radio" name="mq4" id="mq4-d" value="D">
<label for="mq4-d">D. 2F/3</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案A</strong><br>
解析根据万有引力公式F=G(mM)/r²变化后的万有引力F'=G(2m·3M)/(2r)²=6GMm/4r²=3GMm/2r²=3F/2故答案为A。
</div>
</div>
<div class="question" data-difficulty="medium" data-question="5">
<div class="question-header">
<div class="question-number">中等难度 - 问题 5</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
关于开普勒行星运动定律,下列说法正确的是:
</div>
<div class="options">
<div class="option">
<input type="radio" name="mq5" id="mq5-a" value="A">
<label for="mq5-a">A. 所有行星绕太阳运动的轨道都是正圆形</label>
</div>
<div class="option">
<input type="radio" name="mq5" id="mq5-b" value="B">
<label for="mq5-b">B. 行星在近日点的速率小于在远日点的速率</label>
</div>
<div class="option">
<input type="radio" name="mq5" id="mq5-c" value="C">
<label for="mq5-c">C. 所有行星的轨道半长轴的三次方与公转周期的二次方的比值都相等</label>
</div>
<div class="option">
<input type="radio" name="mq5" id="mq5-d" value="D">
<label for="mq5-d">D. 开普勒定律仅适用于行星绕太阳的运动</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案C</strong><br>
解析开普勒第一定律指出所有行星绕太阳运动的轨道都是椭圆太阳处在椭圆的一个焦点上故A错误根据开普勒第二定律行星与太阳的连线在相等时间内扫过相等的面积因此行星在近日点的速率大于在远日点的速率故B错误开普勒第三定律表明所有行星的轨道半长轴的三次方与公转周期的二次方的比值都相等故C正确开普勒定律不仅适用于行星绕太阳的运动也适用于卫星绕行星的运动只是比值不同故D错误。
</div>
</div>
<!-- 简单难度题目 (初始隐藏) -->
<div class="question hidden" data-difficulty="easy" data-question="1">
<div class="question-header">
<div class="question-number">简单难度 - 问题 1</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
万有引力定律是由哪位科学家提出的?
</div>
<div class="options">
<div class="option">
<input type="radio" name="eq1" id="eq1-a" value="A">
<label for="eq1-a">A. 爱因斯坦</label>
</div>
<div class="option">
<input type="radio" name="eq1" id="eq1-b" value="B">
<label for="eq1-b">B. 牛顿</label>
</div>
<div class="option">
<input type="radio" name="eq1" id="eq1-c" value="C">
<label for="eq1-c">C. 伽利略</label>
</div>
<div class="option">
<input type="radio" name="eq1" id="eq1-d" value="D">
<label for="eq1-d">D. 开普勒</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案B</strong><br>
解析万有引力定律是由英国科学家牛顿在1687年提出的故答案为B。
</div>
</div>
<div class="question hidden" data-difficulty="easy" data-question="2">
<div class="question-header">
<div class="question-number">简单难度 - 问题 2</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
地球对物体的吸引力称为:
</div>
<div class="options">
<div class="option">
<input type="radio" name="eq2" id="eq2-a" value="A">
<label for="eq2-a">A. 重力</label>
</div>
<div class="option">
<input type="radio" name="eq2" id="eq2-b" value="B">
<label for="eq2-b">B. 摩擦力</label>
</div>
<div class="option">
<input type="radio" name="eq2" id="eq2-c" value="C">
<label for="eq2-c">C. 弹力</label>
</div>
<div class="option">
<input type="radio" name="eq2" id="eq2-d" value="D">
<label for="eq2-d">D. 向心力</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案A</strong><br>
解析地球对物体的吸引力称为重力故答案为A。
</div>
</div>
<div class="question hidden" data-difficulty="easy" data-question="3">
<div class="question-header">
<div class="question-number">简单难度 - 问题 3</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
下列哪个现象与万有引力无关?
</div>
<div class="options">
<div class="option">
<input type="radio" name="eq3" id="eq3-a" value="A">
<label for="eq3-a">A. 苹果落地</label>
</div>
<div class="option">
<input type="radio" name="eq3" id="eq3-b" value="B">
<label for="eq3-b">B. 月球绕地球运动</label>
</div>
<div class="option">
<input type="radio" name="eq3" id="eq3-c" value="C">
<label for="eq3-c">C. 磁铁吸引铁钉</label>
</div>
<div class="option">
<input type="radio" name="eq3" id="eq3-d" value="D">
<label for="eq3-d">D. 地球绕太阳公转</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案C</strong><br>
解析磁铁吸引铁钉是磁力作用的结果与万有引力无关故答案为C。
</div>
</div>
<div class="question hidden" data-difficulty="easy" data-question="4">
<div class="question-header">
<div class="question-number">简单难度 - 问题 4</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
物体的质量越大,它受到的重力就:
</div>
<div class="options">
<div class="option">
<input type="radio" name="eq4" id="eq4-a" value="A">
<label for="eq4-a">A. 越小</label>
</div>
<div class="option">
<input type="radio" name="eq4" id="eq4-b" value="B">
<label for="eq4-b">B. 越大</label>
</div>
<div class="option">
<input type="radio" name="eq4" id="eq4-c" value="C">
<label for="eq4-c">C. 不变</label>
</div>
<div class="option">
<input type="radio" name="eq4" id="eq4-d" value="D">
<label for="eq4-d">D. 无法确定</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案B</strong><br>
解析根据重力公式G=mg物体受到的重力与质量成正比质量越大重力越大故答案为B。
</div>
</div>
<div class="question hidden" data-difficulty="easy" data-question="5">
<div class="question-header">
<div class="question-number">简单难度 - 问题 5</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
在地球表面重力加速度g的近似值为
</div>
<div class="options">
<div class="option">
<input type="radio" name="eq5" id="eq5-a" value="A">
<label for="eq5-a">A. 9.8 m/s²</label>
</div>
<div class="option">
<input type="radio" name="eq5" id="eq5-b" value="B">
<label for="eq5-b">B. 5.0 m/s²</label>
</div>
<div class="option">
<input type="radio" name="eq5" id="eq5-c" value="C">
<label for="eq5-c">C. 15.6 m/s²</label>
</div>
<div class="option">
<input type="radio" name="eq5" id="eq5-d" value="D">
<label for="eq5-d">D. 3.0 m/s²</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案A</strong><br>
解析在地球表面重力加速度g的近似值为9.8 m/s²故答案为A。
</div>
</div>
<!-- 高级难度题目 (初始隐藏) -->
<div class="question hidden" data-difficulty="hard" data-question="1">
<div class="question-header">
<div class="question-number">高级难度 - 问题 1</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
已知地球质量为M半径为R万有引力常量为G。一颗人造卫星在离地面高度为R的圆形轨道上运行则该卫星的运行周期为
</div>
<div class="options">
<div class="option">
<input type="radio" name="hq1" id="hq1-a" value="A">
<label for="hq1-a">A. 2π√(2R³/GM)</label>
</div>
<div class="option">
<input type="radio" name="hq1" id="hq1-b" value="B">
<label for="hq1-b">B. 4π√(2R³/GM)</label>
</div>
<div class="option">
<input type="radio" name="hq1" id="hq1-c" value="C">
<label for="hq1-c">C. 2π√(8R³/GM)</label>
</div>
<div class="option">
<input type="radio" name="hq1" id="hq1-d" value="D">
<label for="hq1-d">D. 4π√(R³/GM)</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案C</strong><br>
解析卫星轨道半径r=R+h=2R根据万有引力提供向心力GMm/r²=m(2π/T)²r解得T=2π√(r³/GM)=2π√((2R)³/GM)=2π√(8R³/GM)故答案为C。
</div>
</div>
<div class="question hidden" data-difficulty="hard" data-question="2">
<div class="question-header">
<div class="question-number">高级难度 - 问题 2</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
两个质量分别为m1和m2的星球组成双星系统它们绕两者连线上某一点做匀速圆周运动两星球之间的距离为L。则它们的运行周期T为
</div>
<div class="options">
<div class="option">
<input type="radio" name="hq2" id="hq2-a" value="A">
<label for="hq2-a">A. 2π√(L³/G(m1+m2))</label>
</div>
<div class="option">
<input type="radio" name="hq2" id="hq2-b" value="B">
<label for="hq2-b">B. 2π√(L³/2G(m1+m2))</label>
</div>
<div class="option">
<input type="radio" name="hq2" id="hq2-c" value="C">
<label for="hq2-c">C. 2π√(L³/Gm1m2)</label>
</div>
<div class="option">
<input type="radio" name="hq2" id="hq2-d" value="D">
<label for="hq2-d">D. 2π√(L³/G|m1-m2|)</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案A</strong><br>
解析双星系统中万有引力提供向心力且两星球的角速度相等。设m1和m2到质心的距离分别为r1和r2则r1+r2=Lm1ω²r1=m2ω²r2=Gm1m2/L²解得ω=√(G(m1+m2)/L³)周期T=2π/ω=2π√(L³/G(m1+m2))故答案为A。
</div>
</div>
<div class="question hidden" data-difficulty="hard" data-question="3">
<div class="question-header">
<div class="question-number">高级难度 - 问题 3</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
一物体在地球表面的重量为G若将该物体移至距离地心4R的位置R为地球半径则它的重量变为
</div>
<div class="options">
<div class="option">
<input type="radio" name="hq3" id="hq3-a" value="A">
<label for="hq3-a">A. G/4</label>
</div>
<div class="option">
<input type="radio" name="hq3" id="hq3-b" value="B">
<label for="hq3-b">B. G/8</label>
</div>
<div class="option">
<input type="radio" name="hq3" id="hq3-c" value="C">
<label for="hq3-c">C. G/16</label>
</div>
<div class="option">
<input type="radio" name="hq3" id="hq3-d" value="D">
<label for="hq3-d">D. G/2</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案C</strong><br>
解析重量即物体受到的重力根据万有引力公式G=GMm/r²当距离地心由R变为4R时重力变为原来的1/16故答案为C。
</div>
</div>
<div class="question hidden" data-difficulty="hard" data-question="4">
<div class="question-header">
<div class="question-number">高级难度 - 问题 4</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
已知太阳质量为M地球绕太阳做匀速圆周运动的轨道半径为r万有引力常量为G。则地球绕太阳运动的动能为
</div>
<div class="options">
<div class="option">
<input type="radio" name="hq4" id="hq4-a" value="A">
<label for="hq4-a">A. GMm/2r</label>
</div>
<div class="option">
<input type="radio" name="hq4" id="hq4-b" value="B">
<label for="hq4-b">B. GMm/r</label>
</div>
<div class="option">
<input type="radio" name="hq4" id="hq4-c" value="C">
<label for="hq4-c">C. GMm/4r</label>
</div>
<div class="option">
<input type="radio" name="hq4" id="hq4-d" value="D">
<label for="hq4-d">D. 2GMm/r</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案A</strong><br>
解析地球绕太阳运动的向心力由万有引力提供GMm/r²=mv²/r动能Ek=1/2mv²=GMm/2r故答案为A。
</div>
</div>
<div class="question hidden" data-difficulty="hard" data-question="5">
<div class="question-header">
<div class="question-number">高级难度 - 问题 5</div>
<div class="question-points">20分</div>
</div>
<div class="question-text">
某行星的质量是地球质量的4倍半径是地球半径的2倍。一物体在地球表面的逃逸速度为v则该物体在该行星表面的逃逸速度为
</div>
<div class="options">
<div class="option">
<input type="radio" name="hq5" id="hq5-a" value="A">
<label for="hq5-a">A. v</label>
</div>
<div class="option">
<input type="radio" name="hq5" id="hq5-b" value="B">
<label for="hq5-b">B. √2 v</label>
</div>
<div class="option">
<input type="radio" name="hq5" id="hq5-c" value="C">
<label for="hq5-c">C. 2v</label>
</div>
<div class="option">
<input type="radio" name="hq5" id="hq5-d" value="D">
<label for="hq5-d">D. 4v</label>
</div>
</div>
<div class="question-explanation">
<strong>正确答案B</strong><br>
解析逃逸速度公式v=√(2GM/R)行星的M是地球的4倍R是地球的2倍则v'=√(2G·4M/2R)=√(4GM/R)=√2·√(2GM/R)=√2 v故答案为B。
</div>
</div>
</div>
<div class="navigation-section" id="navigation">
<h3 id="navigation-message"></h3>
<button type="button" id="next-btn">开始答题</button>
</div>
<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 = {
medium: {
mq1: 'B',
mq2: 'D',
mq3: 'B',
mq4: 'A',
mq5: 'C'
},
easy: {
eq1: 'B',
eq2: 'A',
eq3: 'C',
eq4: 'B',
eq5: 'A'
},
hard: {
hq1: 'C',
hq2: 'A',
hq3: 'C',
hq4: 'A',
hq5: 'B'
}
};
// 跟踪测验状态
const quizState = {
currentDifficulty: 'medium', // 初始难度
completedDifficulties: [],
scores: {}
};
// DOM元素
const submitBtn = document.getElementById('submit-btn');
const nextBtn = document.getElementById('next-btn');
const navigationSection = document.getElementById('navigation');
const navigationMessage = document.getElementById('navigation-message');
const result = document.getElementById('result');
const scoreValue = document.getElementById('score-value');
const correctCount = document.getElementById('correct-count');
const incorrectCount = document.getElementById('incorrect-count');
const difficultyIndicator = document.querySelector('.difficulty-indicator');
// 提交当前难度的答案
submitBtn.addEventListener('click', function() {
const currentAnswers = correctAnswers[quizState.currentDifficulty];
const totalQuestions = Object.keys(currentAnswers).length;
let score = 0;
let correct = 0;
let incorrect = 0;
// 检查所有问题的答案
for (const [questionName, correctAnswer] of Object.entries(currentAnswers)) {
const selectedOption = document.querySelector(`input[name="${questionName}"]:checked`);
const questionNumber = questionName.substring(2); // 从mq1提取1
const explanationElement = document.querySelector(`[data-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"] .question-explanation`);
// 显示解析
explanationElement.style.display = 'block';
if (selectedOption) {
const userAnswer = selectedOption.value;
// 标记正确或错误
if (userAnswer === correctAnswer) {
score += 20; // 每题20分
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 = document.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-difficulty="${quizState.currentDifficulty}"][data-question="${questionNumber}"]`);
questionElement.style.border = '2px solid #ff9800';
}
}
// 保存当前难度得分
quizState.scores[quizState.currentDifficulty] = {
score: score,
correct: correct,
incorrect: incorrect
};
quizState.completedDifficulties.push(quizState.currentDifficulty);
// 显示当前难度结果
scoreValue.textContent = score;
correctCount.textContent = correct;
incorrectCount.textContent = incorrect;
result.style.display = 'block';
// 隐藏提交按钮
submitBtn.style.display = 'none';
// 根据当前难度和得分决定下一步
if (quizState.currentDifficulty === 'medium') {
if (correct < 3) {
// 中等难度答对少于3题推荐简单难度
showNavigation('您在中等难度题目中表现不佳,建议先完成简单难度题目来巩固基础。', 'easy');
} else {
// 中等难度答对3题及以上推荐高级难度
showNavigation('恭喜您完成中等难度题目!接下来挑战高级难度题目吧。', 'hard');
}
} else {
// 简单或高级难度完成后,显示最终结果
showFinalResult();
}
});
// 显示导航信息
function showNavigation(message, nextDifficulty) {
navigationMessage.textContent = message;
navigationSection.dataset.nextDifficulty = nextDifficulty;
navigationSection.style.display = 'block';
}
// 开始下一组题目
nextBtn.addEventListener('click', function() {
const nextDifficulty = navigationSection.dataset.nextDifficulty;
if (!nextDifficulty) return;
// 更新当前难度
quizState.currentDifficulty = nextDifficulty;
// 隐藏导航和结果
navigationSection.style.display = 'none';
result.style.display = 'none';
// 显示提交按钮
submitBtn.style.display = 'inline-block';
// 更新难度指示器
difficultyIndicator.textContent = `当前难度:${getDifficultyName(nextDifficulty)}`;
difficultyIndicator.className = `difficulty-indicator difficulty-${nextDifficulty}`;
// 隐藏所有题目
document.querySelectorAll('.question').forEach(question => {
question.classList.add('hidden');
});
// 显示下一组题目
document.querySelectorAll(`[data-difficulty="${nextDifficulty}"]`).forEach(question => {
question.classList.remove('hidden');
});
// 滚动到页面顶部
window.scrollTo(0, 0);
});
// 获取难度名称
function getDifficultyName(difficulty) {
const names = {
easy: '简单',
medium: '中等',
hard: '高级'
};
return names[difficulty] || difficulty;
}
// 显示最终结果
function showFinalResult() {
// 计算总分
let totalScore = 0;
let totalCorrect = 0;
let totalIncorrect = 0;
for (const difficulty of quizState.completedDifficulties) {
totalScore += quizState.scores[difficulty].score;
totalCorrect += quizState.scores[difficulty].correct;
totalIncorrect += quizState.scores[difficulty].incorrect;
}
// 更新结果显示
scoreValue.textContent = totalScore;
correctCount.textContent = totalCorrect;
incorrectCount.textContent = totalIncorrect;
result.style.display = 'block';
// 显示完成信息
navigationMessage.textContent = '恭喜您完成所有推荐题目!';
navigationSection.style.display = 'block';
document.getElementById('next-btn').style.display = 'none';
}
});
</script>
</body>
</html>