<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文学知识测试</title>
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Tailwind配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4A6CF7',
secondary: '#F59E0B',
neutral: '#64748B',
success: '#10B981',
danger: '#EF4444',
light: '#F8FAFC',
dark: '#1E293B'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Montserrat', 'system-ui', 'sans-serif']
},
boxShadow: {
'custom': '0 4px 20px rgba(0, 0, 0, 0.08)',
'hover': '0 8px 30px rgba(0, 0, 0, 0.12)'
}
}
}
}
</script>
<!-- 自定义工具类 -->
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.transition-custom {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.quiz-gradient {
background: linear-gradient(135deg, #4A6CF7 0%, #6366F1 100%);
}
}
</style>
<style>
/* 全局动画效果 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fadeIn 0.5s ease-out forwards;
}
/* 进度条动画 */
@keyframes progress {
from { width: 0%; }
to { width: var(--progress-width); }
}
.progress-bar {
animation: progress 0.8s ease-out forwards;
}
/* 答案揭晓动画 */
@keyframes reveal {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.reveal-answer {
animation: reveal 0.4s ease-out forwards;
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 选项悬停效果 */
.option-hover:hover {
transform: translateX(4px);
}
</style>
</head>
<body class="bg-light text-dark min-h-screen">
<!-- 顶部导航栏 -->
<header class="sticky top-0 z-50 bg-white shadow-custom">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fa fa-book text-primary text-2xl"></i>
<h1 class="text-xl font-bold text-primary">文学知识测试</h1>
</div>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center">
<span class="text-sm text-neutral">进度:</span>
<div class="w-32 h-2 bg-gray-200 rounded-full ml-2 overflow-hidden">
<div id="progressBar" class="h-full bg-primary rounded-full progress-bar" style="--progress-width: 0%"></div>
</div>
<span id="progressText" class="ml-2 text-sm font-medium">0/10</span>
</div>
<button id="submitBtn" class="hidden md:flex items-center px-4 py-2 bg-primary text-white rounded-lg shadow transition-custom hover:bg-primary/90">
<i class="fa fa-check mr-2"></i>
<span>提交答案</span>
</button>
<button id="mobileMenuBtn" class="md:hidden text-neutral text-xl">
<i class="fa fa-bars"></i>
</button>
</div>
</div>
<!-- 移动端菜单 -->
<div id="mobileMenu" class="hidden md:hidden bg-white border-t border-gray-100 animate-fade-in">
<div class="container mx-auto px-4 py-2">
<div class="flex items-center mb-3">
<span class="text-sm text-neutral">进度:</span>
<div class="w-full h-2 bg-gray-200 rounded-full ml-2 overflow-hidden">
<div class="h-full bg-primary rounded-full progress-bar" style="--progress-width: 0%"></div>
</div>
<span class="ml-2 text-sm font-medium">0/10</span>
</div>
<button id="mobileSubmitBtn" class="w-full py-2 bg-primary text-white rounded-lg shadow transition-custom hover:bg-primary/90">
<i class="fa fa-check mr-2"></i>
提交答案
</button>
</div>
</div>
</header>
<main class="container mx-auto px-4 py-8">
<!-- 测试介绍卡片 -->
<div class="bg-white rounded-2xl shadow-custom p-6 mb-8 animate-fade-in" style="animation-delay: 0.1s">
<div class="quiz-gradient text-white p-4 rounded-xl mb-4">
<h2 class="text-2xl font-bold mb-2 text-shadow">基础知识测试</h2>
<p class="opacity-90">本测试共有10小题，每小题2分，总分20分</p>
</div>
<div class="flex flex-wrap gap-4 mb-4">
<div class="flex items-center bg-blue-50 px-3 py-2 rounded-lg">
<i class="fa fa-clock-o text-primary mr-2"></i>
<span class="text-sm">无时间限制</span>
</div>
<div class="flex items-center bg-green-50 px-3 py-2 rounded-lg">
<i class="fa fa-check-circle text-success mr-2"></i>
<span class="text-sm">完成后自动评分</span>
</div>
<div class="flex items-center bg-purple-50 px-3 py-2 rounded-lg">
<i class="fa fa-lightbulb-o text-purple-500 mr-2"></i>
<span class="text-sm">每道题有详细解析</span>
</div>
</div>
<button id="startBtn" class="px-6 py-3 bg-secondary text-white rounded-lg shadow-lg transition-custom hover:bg-secondary/90 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-secondary/50">
开始测试
<i class="fa fa-arrow-right ml-2"></i>
</button>
</div>
<!-- 测试题目区域 -->
<div id="quizContainer" class="space-y-8 hidden">
<!-- 第1题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="1">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
1
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列加点的字，读音全部正确的一组是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q1" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 将进酒（qiāng） 金樽（zhūn） 径须沽取（gū）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q1" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 馔玉（zhuàn） 还复来（huán） 朝如青丝（zhāo）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q1" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 烹羊（pēn） 对君酌（zhuó） 千金散尽（sàn）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q1" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 恣欢谑（xuè） 千金裘（qiú） 岑夫子（céng）</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第2题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="2">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
2
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列诗句中，没有错别字的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q2" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 人生得意需尽欢</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q2" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 天生我才必有用</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q2" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 径须沽取对君酌</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q2" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 唯有饮者留其名</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第3题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="3">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
3
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列加点字词的释义全都正确的一组是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q3" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 与君（为） 馔玉（玉器） 会须（应当，应该）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q3" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 将进酒（请） 恣欢谑（放纵，尽情） 皆寂寞（不为世所用，默默无闻）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q3" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 沽取（卖） 将出（拿出） 戏谑（玩笑）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q3" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 金樽（杯子） 烹羊（烧煮） 且为乐（将要）</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第4题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="4">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
4
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">依次填入下列横线处的关联词，最恰当的一项是</h3>
<p class="text-gray-600 mb-3">对于熬夜，我们都有这样的经历： 满身疲惫， 愁绪太多，让自己辗转反侧。 我们因烦恼而睡不好， 也会因睡不好而产生更多烦恼。反之，养足了精神，才能抵挡得住生活的刁难。</p>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q4" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 不但 更 如果 那么</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q4" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 尽管 还 只有 才</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q4" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 虽然 但是 如果 那么</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q4" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 由于 因此 即使 也</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第5题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="5">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
5
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列句子没有语病的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q5" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 第六届“中原杯”全国文学作品大奖赛的参赛者大多是以中学师生为主。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q5" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 专业人士提醒留学者，不要等遇到了纠纷，权益受到伤害时才想起律师，应事先处理好有关事宜。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q5" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 鹰在天空飞翔着，唱出了短促而悠长的歌声，我凝望着鹰，想从它如同信号的歌声中听出个珍贵的消息来。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q5" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 无论是提高艺术表现力，还是判断艺术的优劣高下和学术上的是非，都不能靠行政命令，而要靠艰苦的艺术实践，靠平等的争鸣。</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第6题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="6">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
6
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列句子中的标点符号，使用都正确的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q6" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 今天去呢？还是明天去呢？我实在拿不定主意。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q6" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 令人欣慰的是，我们还有“正能量”、“最美”这样的流行语。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q6" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 老师说了一声：“下课！”就走了。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q6" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 新鲜大米，手感滑爽，米粒光洁，透明度好，腹白（米粒上呈乳白色的部分）很小，做出的米饭清香可口。</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第7题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="7">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
7
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列诗句使用修辞手法与其他三项不同的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q7" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 君不见黄河之水天上来，奔流到海不复回。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q7" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 烹羊宰牛且为乐，会须一饮三百杯。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q7" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 钟鼓馔玉不足贵，但愿长醉不愿醒。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q7" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 呼儿将出换美酒，与尔同销万古愁。</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第8题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="8">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
8
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">对下列句子运用的表达方式，判断不正确的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q8" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 秋天的后半夜，月亮下去了，太阳还没有出，只剩下一片乌蓝的天；除了夜游的东西，什么都睡着。（记叙）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q8" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 从能源的角度看，“可燃冰”可视为被高度压缩的天然气资源，每立方米能分解释放出160～180标准立方米的天然气。（说明）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q8" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 四十年的工作，痛苦，进步，使我看到的却是一无所有！（抒情）</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q8" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 殖民主义时期以及后来的第二次世界大战，都在暴力冲突下伴随有较大范围的不同文化冲撞。（议论）</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第9题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="9">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
9
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列对诗歌内容的理解，不正确的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q9" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. “岑夫子”姓岑，“夫子”是对人的尊称，“先生”的意思；“丹丘生”名“丹丘”，“生”是对年轻人的称呼。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q9" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. “将进酒”是“请您喝酒”的意思，是李白宴请客人并根据诗歌的内容自己写的诗题。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q9" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 诗人运用典故，以曹植自比，尽吐心中不平，抒发了怀才不遇的愤激之情。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q9" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 诗中李白由己及人，想到无数圣贤同样“寂寞”，以喝酒排解内心的苦闷，以纵酒来对抗现实的黑暗，以精神的旷达来张扬自己的个性。</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 第10题 -->
<div class="question-card bg-white rounded-2xl shadow-custom p-6 animate-fade-in" data-question="10">
<div class="flex items-start">
<div class="quiz-gradient text-white w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 mt-1">
10
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold mb-3">下列有关诗歌的分析，不正确的一项是</h3>
<ul class="space-y-3">
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q10" value="A" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">A. 《将进酒》这首诗思想感情复杂，诗人既有“天生我材必有用”这样对建功立业的期待，也有壮志难酬、“但愿长醉不愿醒”的抑郁。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q10" value="B" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">B. 《将进酒》中“君不见黄河之水天上来，奔流到海不复回”，既有衬托，以黄河的伟大永恒衬托出生命的恢宏与不朽；又含譬喻，以河水一去不复返喻人生易逝。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q10" value="C" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">C. 《将进酒》句式长短错杂，以七言为主，间用杂言，音韵铿锵有力，传达出诗人豪迈狂放的激情。</span>
</label>
</li>
<li>
<label class="flex items-start p-3 border border-gray-200 rounded-lg cursor-pointer transition-custom hover:border-primary/50 hover:bg-blue-50 option-hover">
<input type="radio" name="q10" value="D" class="mt-1 text-primary focus:ring-primary">
<span class="ml-3">D. 《将进酒》以奇特的想象、大胆的夸张，一吐胸中块垒，体现了浪漫主义诗风。</span>
</label>
</li>
</ul>
<div class="answer-feedback mt-4 hidden reveal-answer"></div>
</div>
</div>
</div>
<!-- 提交区域 -->
<div class="bg-white rounded-2xl shadow-custom p-6 animate-fade-in">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-4 md:mb-0">
<h3 class="text-lg font-semibold">完成测试</h3>
<p class="text-gray-600">检查您的答案后，点击"提交答案"按钮查看结果</p>
</div>
<button id="submitQuizBtn" class="px-6 py-3 bg-primary text-white rounded-lg shadow-lg transition-custom hover:bg-primary/90 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary/50">
<i class="fa fa-check-circle mr-2"></i>
提交答案
</button>
</div>
</div>
</div>
<!-- 结果区域 -->
<div id="resultContainer" class="hidden">
<div class="bg-white rounded-2xl shadow-custom p-8 mb-8 animate-fade-in">
<div class="text-center mb-6">
<div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-green-100 mb-4">
<i class="fa fa-trophy text-secondary text-4xl"></i>
</div>
<h2 class="text-2xl font-bold mb-2">测试完成！</h2>
<p class="text-gray-600">你的得分已经计算出来了</p>
</div>
<div class="max-w-md mx-auto">
<div class="bg-gray-50 rounded-xl p-6 mb-6">
<div class="flex justify-between items-center mb-2">
<span class="text-neutral font-medium">总分</span>
<span class="text-lg font-bold">20分</span>
</div>
<div class="flex justify-between items-center mb-4">
<span class="text-neutral font-medium">你的得分</span>
<span id="score" class="text-2xl font-bold text-primary">0</span>
</div>
<div class="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
<div id="scoreBar" class="h-full bg-primary rounded-full progress-bar" style="--progress-width: 0%"></div>
</div>
<div class="flex justify-between mt-2">
<span class="text-xs text-gray-500">0分</span>
<span id="scorePercentage" class="text-xs font-medium">0%</span>
<span class="text-xs text-gray-500">20分</span>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="bg-blue-50 rounded-lg p-4 text-center">
<div class="text-primary text-2xl font-bold mb-1" id="correctCount">0</div>
<div class="text-sm text-gray-600">正确题数</div>
</div>
<div class="bg-red-50 rounded-lg p-4 text-center">
<div class="text-danger text-2xl font-bold mb-1" id="wrongCount">0</div>
<div class="text-sm text-gray-600">错误题数</div>
</div>
</div>
<button id="reviewAnswersBtn" class="w-full py-3 bg-secondary text-white rounded-lg shadow transition-custom hover:bg-secondary/90">
<i class="fa fa-list-alt mr-2"></i>
查看答案解析
</button>
</div>
</div>
</div>
</main>
<footer class="bg-dark text-white py-8 mt-12">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="flex items-center space-x-2 mb-2">
<i class="fa fa-book text-primary text-xl"></i>
<h2 class="text-xl font-bold">文学知识测试</h2>
</div>
<p class="text-gray-400 text-sm">提升你的文学素养，探索诗歌之美</p>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white transition-custom">
<i class="fa fa-question-circle"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-custom">
<i class="fa fa-cog"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white transition-custom">
<i class="fa fa-user-circle"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm">
© 2025 文学知识测试平台. 保留所有权利.
</div>
</div>
</footer>
<script>
// 正确答案
const correctAnswers = {
q1: "B",
q2: "C",
q3: "B",
q4: "C",
q5: "D",
q6: "D",
q7: "C",
q8: "D",
q9: "B",
q10: "B"
};
// 答案解析
const explanations = {
q1: "正确答案是B。<br>A选项中“金樽”的“樽”读音应为zūn；C选项中“烹羊”的“烹”读音应为pēng；D选项中“岑夫子”的“岑”读音应为cén。",
q2: "正确答案是C。<br>A选项中“需”应为“须”；B选项中“才”应为“材”；D选项中“唯”应为“惟”。",
q3: "正确答案是B。<br>A选项中“馔玉”指美好的饮食，而非“玉器”；C选项中“沽取”应为“买”；D选项中“且为乐”的“且”应为“暂且”。",
q4: "正确答案是C。<br>“虽然……但是……”表示转折关系，“如果……那么……”表示假设关系，符合语境。",
q5: "正确答案是D。<br>A选项句式杂糅，应改为“大多是中学师生”或“以中学师生为主”；B选项“权益受到伤害”搭配不当，应改为“权益受到损害”；C选项“短促而悠长”语义矛盾。",
q6: "正确答案是D。<br>A选项第一个问号应改为逗号；B选项顿号使用错误，应删去；C选项冒号使用错误，应删去。",
q7: "正确答案是C。<br>A、B、D选项均使用了夸张的修辞手法，而C选项使用了借代的修辞手法，“钟鼓馔玉”代指富贵生活。",
q8: "正确答案是D。<br>D选项是陈述一个事实，属于记叙，而非议论。",
q9: "正确答案是B。<br>“将进酒”原是汉乐府短箫铙歌的曲调，题目意思是“劝酒歌”，并非李白自己写的诗题。",
q10: "正确答案是B。<br>“君不见黄河之水天上来，奔流到海不复回”主要运用了夸张和比喻的修辞手法，以河水一去不复返喻人生易逝，没有衬托生命的恢宏与不朽。"
};
// DOM元素
const startBtn = document.getElementById('startBtn');
const quizContainer = document.getElementById('quizContainer');
const resultContainer = document.getElementById('resultContainer');
const submitQuizBtn = document.getElementById('submitQuizBtn');
const reviewAnswersBtn = document.getElementById('reviewAnswersBtn');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const mobileMenu = document.getElementById('mobileMenu');
const mobileSubmitBtn = document.getElementById('mobileSubmitBtn');
const scoreElement = document.getElementById('score');
const scoreBar = document.getElementById('scoreBar');
const scorePercentage = document.getElementById('scorePercentage');
const correctCount = document.getElementById('correctCount');
const wrongCount = document.getElementById('wrongCount');
// 开始测试
startBtn.addEventListener('click', () => {
quizContainer.classList.remove('hidden');
document.getElementById('mobileMenu').classList.remove('hidden');
startBtn.parentElement.classList.add('hidden');
updateProgress();
});
// 移动端菜单切换
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// 监听选项选择，更新进度条
document.querySelectorAll('input[type="radio"]').forEach(radio => {
radio.addEventListener('change', updateProgress);
});
// 更新进度
function updateProgress() {
const answeredQuestions = document.querySelectorAll('input[type="radio"]:checked').length;
const totalQuestions = 10;
const progress = (answeredQuestions / totalQuestions) * 100;
progressBar.style.setProperty('--progress-width', `${progress}%`);
progressText.textContent = `${answeredQuestions}/${totalQuestions}`;
// 移动端进度条
const mobileProgressBars = document.querySelectorAll('.mobileMenu .progress-bar');
mobileProgressBars.forEach(bar => {
bar.style.setProperty('--progress-width', `${progress}%`);
});
const mobileProgressTexts = document.querySelectorAll('.mobileMenu .font-medium');
mobileProgressTexts.forEach(text => {
text.textContent = `${answeredQuestions}/${totalQuestions}`;
});
}
// 提交测试
function submitQuiz() {
let score = 0;
let correct = 0;
let wrong = 0;
// 检查每个问题
for (let i = 1; i <= 10; i++) {
const questionName = `q${i}`;
const selectedOption = document.querySelector(`input[name="${questionName}"]:checked`);
const questionCard = document.querySelector(`.question-card[data-question="${i}"]`);
const feedbackElement = questionCard.querySelector('.answer-feedback');
if (selectedOption) {
const userAnswer = selectedOption.value;
const isCorrect = userAnswer === correctAnswers[questionName];
// 更新计分
if (isCorrect) {
score += 2;
correct++;
} else {
wrong++;
}
// 显示答案反馈
feedbackElement.innerHTML = `
<div class="p-4 rounded-lg ${isCorrect ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}">
<div class="flex items-start">
<div class="flex-shrink-0 mt-0.5">
<i class="fa ${isCorrect ? 'fa-check-circle text-success' : 'fa-times-circle text-danger'} text-xl"></i>
</div>
<div class="ml-3">
<h4 class="font-medium ${isCorrect ? 'text-success' : 'text-danger'}">
${isCorrect ? '回答正确' : '回答错误'}
</h4>
<div class="mt-2 text-sm text-gray-700">
${explanations[questionName]}
</div>
</div>
</div>
</div>
`;
feedbackElement.classList.remove('hidden');
// 高亮正确和错误的选项
document.querySelectorAll(`input[name="${questionName}"]`).forEach(option => {
const label = option.closest('label');
const isOptionCorrect = option.value === correctAnswers[questionName];
if (isOptionCorrect) {
label.classList.add('border-success', 'bg-green-50');
}
if (option.checked && !isOptionCorrect) {
label.classList.add('border-danger', 'bg-red-50');
}
// 禁用所有选项
option.disabled = true;
});
} else {
// 未回答的问题
wrong++;
feedbackElement.innerHTML = `
<div class="p-4 rounded-lg bg-yellow-50 border border-yellow-200">
<div class="flex items-start">
<div class="flex-shrink-0 mt-0.5">
<i class="fa fa-exclamation-circle text-yellow-500 text-xl"></i>
</div>
<div class="ml-3">
<h4 class="font-medium text-yellow-700">未回答</h4>
<div class="mt-2 text-sm text-gray-700">
${explanations[questionName]}
</div>
</div>
</div>
</div>
`;
feedbackElement.classList.remove('hidden');
}
}
// 更新结果
scoreElement.textContent = score;
const percentage = (score / 20) * 100;
scoreBar.style.setProperty('--progress-width', `${percentage}%`);
scorePercentage.textContent = `${percentage}%`;
correctCount.textContent = correct;
wrongCount.textContent = wrong;
// 显示结果
resultContainer.classList.remove('hidden');
// 滚动到结果区域
resultContainer.scrollIntoView({ behavior: 'smooth' });
}
// 提交按钮事件
submitQuizBtn.addEventListener('click', submitQuiz);
mobileSubmitBtn.addEventListener('click', submitQuiz);
document.getElementById('submitBtn').addEventListener('click', submitQuiz);
// 查看答案解析
reviewAnswersBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
</body>
</html>
index.html
index.html