<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>《将进酒》智能解码器-完整版</title>
<style>
.container {
max-width: 800px;
margin: 20px auto;
font-family: 微软雅黑;
padding: 20px;
}
.question-card {
background: #f0f4ff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
.options {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.option-wrapper {
position: relative;
flex: 1 0 30%;
}
.radio-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.option-btn {
padding: 10px 20px;
background: white;
border: 2px solid #2196F3;
border-radius: 20px;
cursor: pointer;
transition: 0.3s;
display: block;
text-align: center;
}
.option-btn:hover, .radio-input:checked + .option-btn {
background: #2196F3;
color: white;
}
.feedback-area {
margin-top: 15px;
padding: 15px;
background: white;
border-radius: 10px;
display: none;
}
.material-box {
margin: 10px 0;
padding: 10px;
border: 1px dashed #2196F3;
}
#submitBtn {
background: #2196F3;
color: white;
padding: 15px 40px;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 30px auto;
transition: 0.3s;
}
#submitBtn:hover {
background: #1976D2;
}
</style>
</head>
<body>
<div class="container">
<!-- 第一题 -->
<div class="question-card" data-qid="1">
<h3>1. 君不见黄河之水天上来</h3>
<div class="options">
<label class="option-wrapper">
<input type="radio" name="q1" value="豪迈" class="radio-input">
<span class="option-btn">豪迈</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q1" value="悲壮" class="radio-input">
<span class="option-btn">悲壮</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q1" value="迷茫" class="radio-input">
<span class="option-btn">迷茫</span>
</label>
</div>
<div class="feedback-area"></div>
</div>
<!-- 第二题 -->
<div class="question-card" data-qid="2">
<h3>2. 朝如青丝暮成雪</h3>
<div class="options">
<label class="option-wrapper">
<input type="radio" name="q2" value="哀伤" class="radio-input">
<span class="option-btn">哀伤</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q2" value="惊喜" class="radio-input">
<span class="option-btn">惊喜</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q2" value="讽刺" class="radio-input">
<span class="option-btn">讽刺</span>
</label>
</div>
<div class="feedback-area"></div>
</div>
<!-- 第三题 -->
<div class="question-card" data-qid="3">
<h3>3. 天生我材必有用</h3>
<div class="options">
<label class="option-wrapper">
<input type="radio" name="q3" value="自信" class="radio-input">
<span class="option-btn">自信</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q3" value="反讽" class="radio-input">
<span class="option-btn">反讽</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q3" value="焦虑" class="radio-input">
<span class="option-btn">焦虑</span>
</label>
</div>
<div class="feedback-area"></div>
</div>
<!-- 第四题 -->
<div class="question-card" data-qid="4">
<h3>4. 与尔同销万古愁</h3>
<div class="options">
<label class="option-wrapper">
<input type="radio" name="q4" value="解脱" class="radio-input">
<span class="option-btn">解脱</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q4" value="无奈" class="radio-input">
<span class="option-btn">无奈</span>
</label>
<label class="option-wrapper">
<input type="radio" name="q4" value="欢愉" class="radio-input">
<span class="option-btn">欢愉</span>
</label>
</div>
<div class="feedback-area"></div>
</div>
<button id="submitBtn">提交答案</button>
</div>
<script>
// 反馈数据库（保持不变）
const AI_FEEDBACK = { /* 原有反馈内容 */ };
// 学生答案收集器
const studentAnswers = {
timestamp: new Date().toISOString(),
answers: {}
};
// 初始化测验
function initializeQuiz() {
// 绑定单选按钮事件
document.querySelectorAll('.radio-input').forEach(radio => {
radio.addEventListener('change', function() {
const questionCard = this.closest('.question-card');
const qid = questionCard.dataset.qid;
const value = this.value;
// 存储答案
studentAnswers.answers[qid] = value;
// 显示反馈
const feedbackArea = questionCard.querySelector('.feedback-area');
feedbackArea.innerHTML = `
<h4 style="color:#2196F3; margin:0 0 10px 0">${AI_FEEDBACK[qid][value].title}</h4>
${AI_FEEDBACK[qid][value].content}
`;
feedbackArea.style.display = 'block';
});
});
// 提交处理
document.getElementById('submitBtn').addEventListener('click', () => {
const totalQuestions = document.querySelectorAll('.question-card').length;
if (Object.keys(studentAnswers.answers).length < totalQuestions) {
alert('请完成所有题目后再提交！');
return;
}
// 输出到控制台（实际应用可发送到服务器）
console.log('收集到的答案：', studentAnswers);
// 这里可以添加Ajax请求
// fetch('/collect', {
// method: 'POST',
// headers: {'Content-Type': 'application/json'},
// body: JSON.stringify(studentAnswers)
// });
alert('答案已成功提交到终端！\n可在控制台查看详细数据');
});
}
// 页面加载初始化
window.addEventListener('DOMContentLoaded', initializeQuiz);
</script>
<script>
// 完整反馈数据库
const AI_FEEDBACK = {
1: {
豪迈: {
title: "🦅 提示",
content: `
<div class="material-box">
<p> 1.自然意象与生命张力的豪迈;</p>
<p> 2.个人情怀与时代精神的豪迈; </p>
<p> 3.艺术手法与哲学深度的豪迈; </p>
</div>
`
},
悲壮: {
title: "⏳ 你听懂了时间的呐喊",
content: `
<div class="material-box">
<p>📅 创作背景：唐玄宗天宝初年，李白由道士吴筠推荐，由唐玄宗招进京，命李白为供奉翰林。不久，因权贵的谗毁，于天宝三载（744年），李白被排挤出京，唐玄宗赐金放还。此后，李白在江淮一带盘桓，思想极度烦闷，又重新踏上了云游祖国山河的漫漫旅途。李白作此诗时距李白被唐玄宗“赐金放还”已有八年之久。这一时期，李白多次与友人岑勋（岑夫子）应邀到嵩山另一好友元丹丘的颍阳山居为客，三人登高饮宴，借酒放歌。诗人在政治上被排挤，受打击，理想不能实现，常常借饮酒来发泄胸中的郁积。</p>
<p> 提示</p>
<p> 1.时间与生命的不可逆之悲；</p>
<p> 2.理想与现实的冲突之痛；</p>
<p> 3.自然伟力与人类抗争的壮烈; </p>
<p> 4.文化基因中的集体共鸣。 </p>
`
},
迷茫: {
title: "🔍 提示",
content: `
<div class="material-box">
<p> 1.时间流逝与生命短暂的迷茫;</p>
<p> 2.理想幻灭与自我价值的迷茫; </p>
<p>3.精神寄托与解脱的迷茫; </p>
<p>4.历史与宇宙视角的迷茫。 </p>
</div>
`
}
},
2: {
哀伤: {
title: "⏳ 时间魔法师",
content: `
<div class="material-box">
<p>📚 推荐对比阅读《月下独酌》</p>
<p> 提示</p>
<p> 1.时间暴虐与生命脆弱的哀鸣；</p>
<p> 2.理想幻灭与价值虚无的悲叹；</p>
<p> 3.道家哲学与世俗挣扎的冲突; </p>
<p> 4.集体无意识的永恒之痛。 </p>
</div>
`
},
惊喜: {
title: "🎉 发现意外的美",
content: `
<div class="material-box">
<p>注意："朝→暮"的突变暗含<b>对生命流逝的震惊</b></p>
<p>提示</p>
<p> 1.艺术表达的惊喜：夸张修辞的审美颠覆；</p>
<p> 2.生命觉醒的惊喜：存在主义的顿悟；</p>
<p> 3.文化符号的惊喜：青丝与白雪的象征嬗变。</p>
</div>
`
},
讽刺: {
title: "🔄 发现双关含义",
content: `
<div class="material-box">
<p>可能暗示<b>对功名富贵的虚无感</b></p>
<p>提示</p>
<p> 1.对时间暴虐与世俗价值的讽刺；</p>
<p> 2.对社会规则与人生假象的讽刺；</p>
<p> 3.对生命叙事与存在意义的讽刺。</p>
</div>
`
}
},
3: {
自信: {
title: "💪 表面的豪情",
content: `
<div class="material-box">
<p>📊 同期诗作对比分析：<br>
本时期李白实际处于失业状态</p>
<p>提示</p>
<p> 1.自我价值的绝对确信；</p>
<p> 2.逆境中的韧性彰显；</p>
<p> 3.文化基因与时代共鸣; </p>
<p> 4.艺术表达与思想深度的统一.</p>
</div>
`
},
反讽: {
title: "🎭 面具下的真相",
content: `
<div class="material-box">
<p>李白的“天生我材必有用”表面是豪迈的自我肯定，实则暗含尖锐的反讽，这种反讽通过理想与现实的撕裂、社会评价体系的解构以及自我价值的悖论性宣言三重维度呈现。</p>
<p>🎧 提示<br>
<p>1.对政治失意的辛辣自嘲；</p>
<p>2.对功利价值体系的颠覆;</p>
<p>3.自我宣言中的存在主义困境；</p>
<p>4.现代视角下的反讽延展。</p>
</div>
`
},
焦虑: {
title: "😰 豪言背后的不安",
content: `
<div class="material-box">
<p>📈 高频词分析："愁"出现5次＞"乐"出现3次</p>
<p>🎧 提示<br>
<p>1.理想幻灭与自我证明的焦虑；</p>
<p>2.时间压迫与存在价值的焦虑;</p>
<p>3.社会规训与个体自由的焦虑；</p>
<p>4.现代性启示：焦虑的普遍性与转化。</p>
</div>
`
}
},
4: {
解脱: {
title: "🕊️ 短暂的逃避",
content: `
<div class="material-box">
<p>🔍 注意动词选择："销"（溶解）≠"解"（消除）</p>
<p>🎧 提示<br>
<p>1.从政治幻灭到精神放逐的解脱；</p>
<p>2.从时间焦虑到存在顿悟的解脱;</p>
<p>3.从社会规训到酒神狂欢的解脱；</p>
<p>4.从个体悲情到宇宙共鸣的解脱。</p>
</div>
`
},
无奈: {
title: "🌀 循环的困境",
content: `
<div class="material-box">
<p>📜 推荐阅读：《李白晚年经济状况考》</p>
<p>🎧 提示<br>
<p>1.时间洪流中的个体渺小；</p>
<p>2.政治理想的幻灭;</p>
<p>3.精神突围的失败；</p>
<p>4.艺术表达的悖论。</p>
</div>
`
},
欢愉: {
title: "🎭 狂欢的面具",
content: `
<div class="material-box">
<p>🎵 与西方酒神文化是否一致：<br>
<p>🎧 提示<br>
<p>1.狂欢形式的相似性：感性解放与集体宣泄；</p>
<p>2.精神内核的差异性：现世逃避与生命肯定;</p>
<p>3.社会功能的对比：反抗压抑与颠覆秩序；</p>
<p>4.文化基因的分野：和谐节制与本能释放。</p>
</div>
`
}
}
};
// 事件绑定函数
function initializeQuiz() {
document.querySelectorAll('.option-btn').forEach(btn => {
btn.addEventListener('click', function() {
const questionCard = this.closest('.question-card');
const feedbackArea = questionCard.querySelector('.feedback-area');
const qid = questionCard.dataset.qid;
const tag = this.dataset.tag;
// 更新反馈内容
feedbackArea.innerHTML = `
<h4 style="color:#2196F3; margin:0 0 10px 0">${AI_FEEDBACK[qid][tag].title}</h4>
${AI_FEEDBACK[qid][tag].content}
`;
feedbackArea.style.display = 'block';
// 更新按钮状态
questionCard.querySelectorAll('.option-btn').forEach(b => {
b.style.background = 'white';
b.style.color = '#2196F3';
});
this.style.background = '#2196F3';
this.style.color = 'white';
});
});
}
// 初始化
window.addEventListener('DOMContentLoaded', initializeQuiz);
</script>
</body>
</html>
</html>
index.html
index.html