教育产品提示词生成器

作者:5411
发布于:2026/9/13
0

用户输入

<!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> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif; background: linear-gradient(160deg, #dbeafe 0%, #eff6ff 45%, #e0e7ff 100%); min-height: 100vh; padding: 18px 14px 40px; display: flex; justify-content: center; color: #1e293b; -webkit-font-smoothing: antialiased; } .app { width: 100%; max-width: 760px; } /* ===== 顶部标题 ===== */ .topbar { text-align: center; margin-bottom: 16px; } .topbar h1 { font-size: 25px; letter-spacing: 1px; font-weight: 800; color: #0c4a6e; } .topbar h1 .emoji { font-size: 22px; } .topbar p { font-size: 12.5px; color: #64748b; margin-top: 7px; letter-spacing: .5px; } /* ===== 数据面板 ===== */ .hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; background: #fff; border: 1.5px solid #e0e7ff; border-radius: 14px; padding: 11px 8px; margin-bottom: 12px; box-shadow: 0 4px 16px rgba(99,102,241,.08); } .hud-item { text-align: center; } .hud-label { display: block; font-size: 11px; color: #94a3b8; margin-bottom: 5px; letter-spacing: .5px; } .hud-value { display: block; font-size: 17px; font-weight: 800; color: #1e293b; line-height: 1.2; } .hud-value.level { color: #0369a1; font-size: 12.5px; } .hud-value.hot { color: #d97706; } .hud-value.cold { color: #dc2626; } /* ===== 关卡进度条 ===== */ .leveltrack { display: flex; gap: 6px; margin-bottom: 14px; } .leveltrack .dot { flex: 1; height: 7px; border-radius: 99px; background: #cbd5e1; transition: all .35s; position: relative; } .leveltrack .dot.done { background: linear-gradient(90deg, #38bdf8, #6366f1); } .leveltrack .dot.active { background: linear-gradient(90deg, #f59e0b, #ef4444); box-shadow: 0 0 12px rgba(245,158,11,.6); } /* ===== 主卡片 ===== */ .card { background: #fff; border-radius: 18px; padding: 20px 20px 18px; box-shadow: 0 18px 50px rgba(15,23,42,.14); transition: box-shadow .3s; } .card.flash-up { animation: flashUp .7s ease; } .card.flash-down { animation: flashDown .7s ease; } @keyframes flashUp { 0%,100% { box-shadow: 0 18px 50px rgba(15,23,42,.14); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.55), 0 18px 50px rgba(15,23,42,.14); } } @keyframes flashDown { 0%,100% { box-shadow: 0 18px 50px rgba(15,23,42,.14); } 50% { box-shadow: 0 0 0 5px rgba(56,189,248,.55), 0 18px 50px rgba(15,23,42,.14); } } /* ===== 挂号单 ===== */ .reg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .reg-tag { font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #0ea5e9, #6366f1); padding: 4px 12px; border-radius: 99px; letter-spacing: .5px; } .reg-no { font-size: 12px; color: #94a3b8; } .sick-sentence { font-size: 19px; line-height: 1.8; font-weight: 700; color: #9f1239; background: #fff1f2; border: 1.5px dashed #fda4af; border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; } .sick-sentence::before { content: "🤒 "; font-size: 16px; } /* ===== 治疗台 ===== */ .section-title { font-size: 13px; font-weight: 800; color: #0369a1; margin-bottom: 10px; letter-spacing: .5px; } .options { display: flex; flex-direction: column; gap: 10px; } .opt { display: flex; align-items: flex-start; gap: 11px; width: 100%; text-align: left; padding: 13px 16px; font-size: 15.5px; line-height: 1.6; font-family: inherit; color: #1e293b; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all .18s; } .opt:hover:not(.disabled) { border-color: #818cf8; background: #eef2ff; transform: translateX(3px); } .opt.disabled { cursor: default; opacity: .95; } .opt.correct { border-color: #10b981; background: #ecfdf5; } .opt.wrong { border-color: #ef4444; background: #fef2f2; } .opt-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cbd5e1; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #64748b; margin-top: 1px; } .opt.correct .opt-mark { border-color: #10b981; background: #10b981; color: #fff; } .opt.wrong .opt-mark { border-color: #ef4444; background: #ef4444; color: #fff; } .opt.correct .opt-mark::after { content: "✓"; } .opt.wrong .opt-mark::after { content: "✕"; } /* ===== 反馈区 ===== */ .feedback { border-radius: 14px; padding: 0 16px; max-height: 0; overflow: hidden; transition: all .32s ease; border: 1.5px solid transparent; } .feedback.show { margin-top: 16px; padding: 14px 16px; max-height: 800px; } .feedback.ok { background: #ecfdf5; border-color: #6ee7b7; } .feedback.no { background: #fef2f2; border-color: #fca5a5; } .fb-title { font-size: 15px; font-weight: 800; margin-bottom: 7px; } .feedback.ok .fb-title { color: #047857; } .feedback.no .fb-title { color: #b91c1c; } .fb-tip { font-size: 13.5px; line-height: 1.85; color: #475569; } .fb-tip b { color: #1e293b; } .fb-cause { display: inline-block; background: #e0f2fe; color: #0369a1; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; margin-right: 6px; } .fb-ask { margin-top: 8px; font-size: 13px; color: #7c3aed; font-weight: 600; } .fb-change { margin-top: 11px; padding: 9px 13px; border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.5; } .fb-change.up { background: #fef3c7; color: #b45309; border: 1px dashed #f59e0b; } .fb-change.down { background: #e0f2fe; color: #0369a1; border: 1px dashed #38bdf8; } .fb-next { margin-top: 12px; font-size: 12.5px; color: #64748b; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .next-btn { font-size: 12.5px; font-family: inherit; font-weight: 700; padding: 6px 15px; border-radius: 99px; cursor: pointer; color: #fff; background: #6366f1; border: none; transition: all .18s; } .next-btn:hover { background: #4f46e5; } .foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: #64748b; letter-spacing: .3px; line-height: 1.7; } @media (max-width: 480px) { .sick-sentence { font-size: 17px; } .topbar h1 { font-size: 20px; } .hud-value.level { font-size: 11px; } .opt { font-size: 14.5px; padding: 12px 13px; } } </style> </head> <body> <div class="app"> <div class="topbar"> <h1><span class="emoji">🏥</span> 句子医院 · 病句诊疗闯关</h1> <p>四年级语文 · 修改病句 · 诊断 → 治疗 → 康复</p> </div> <div class="hud"> <div class="hud-item"> <span class="hud-label">当前关卡</span> <span class="hud-value level" id="hudLevel">门诊部</span> </div> <div class="hud-item"> <span class="hud-label">连对计数</span> <span class="hud-value" id="hudStreak">0</span> </div> <div class="hud-item"> <span class="hud-label">连错计数</span> <span class="hud-value" id="hudWrong">0</span> </div> <div class="hud-item"> <span class="hud-label">正确率</span> <span class="hud-value" id="hudAcc">--</span> </div> </div> <div class="leveltrack" id="levelTrack"></div> <div class="card" id="card"> <div class="reg-head"> <span class="reg-tag">📋 挂号单</span> <span class="reg-no" id="patientNo">第 1 位病人</span> </div> <div class="sick-sentence" id="sickSentence">正在调取病历…</div> <div class="section-title">💊 治疗台 · 请选择修改后的句子</div> <div class="options" id="options"></div> <div class="feedback" id="feedback"></div> </div> <div class="foot"> 题库依据统编版小学语文四年级病句类型编写 · 纯本地运行 · 不联网 </div> </div> <script> /* ========================================================= 一、题库(统编版四年级常见病句) lv: 0=门诊部(单一明显) 1=急诊部(单一隐蔽) 2=专家会诊(复合两处) answer: 正确选项在 options 中的下标 ========================================================= */ const QUESTIONS = [ /* ================= 第1关 · 门诊部(单一明显病句) ================= */ { id:1, lv:0, sick:"我的家乡是桂林人。", cause:"搭配不当", options:[ "我的家乡是桂林。", "我的家乡有桂林人。", "我的家乡在桂林人。", "我的家乡是桂林的人。" ], answer:0, reason:"“家乡”是地方,“人”不能做“家乡”的宾语。删去“人”,让“家乡”和“桂林”搭配。", ask:"为什么“我的家乡是桂林”就通顺了?" }, { id:2, lv:0, sick:"我把作业已经写完了。", cause:"语序颠倒", options:[ "我已经把作业写完了。", "我把作业写完了已经。", "我把已经作业写完了。", "作业把我已经写完了。" ], answer:0, reason:"“已经”应该放在“把”字前面,表示动作完成的时间。正确语序:我已经把作业写完了。", ask:"“已经”放在“把”前面还是后面更顺口?" }, { id:3, lv:0, sick:"秋天的北京是一年中最美的季节。", cause:"搭配不当", options:[ "北京的秋天是一年中最美的季节。", "秋天的北京是一年中最美的城市。", "秋天的北京有一年中最美的季节。", "北京是秋天一年中最美的季节。" ], answer:0, reason:"“北京”是城市,不是“季节”。主语和宾语要调换:北京的秋天是一年中最美的季节。", ask:"为什么“北京的秋天”比“秋天的北京”更准确?" }, { id:4, lv:0, sick:"他光荣地加入了少先队员。", cause:"用词不当", options:[ "他光荣地加入了少先队。", "他光荣地参加了少先队员。", "他光荣地加入少先队员。", "他光荣地加入了少先队员的队伍里。" ], answer:0, reason:"“加入”的宾语应该是组织名称“少先队”,而不是“少先队员”。", ask:"“少先队”和“少先队员”有什么区别?" }, { id:5, lv:0, sick:"我们要养成讲卫生的好习惯,防止不生病。", cause:"否定不当", options:[ "我们要养成讲卫生的好习惯,防止生病。", "我们要养成讲卫生的好习惯,防止没有病。", "我们要养成讲卫生的好习惯,防止不得病。", "我们要养成讲卫生的好习惯,防止不生病。" ], answer:0, reason:"“防止”本身已含否定意味,再加“不”就成了“防止生病”的反面。应删去“不”。", ask:"“防止”和“不”放在一起,意思变成了什么?" }, { id:6, lv:0, sick:"小明和小刚是好朋友,他经常帮助他。", cause:"指代不明", options:[ "小明和小刚是好朋友,小明经常帮助小刚。", "小明和小刚是好朋友,他经常帮助小明。", "小明和小刚是好朋友,他经常帮助他。", "小明和小刚是好朋友,他们经常帮助他。" ], answer:0, reason:"两个“他”指代不清。应把第一个“他”改成“小明”,第二个“他”改成“小刚”。", ask:"如果把两个“他”都换成名字,句子是不是就清楚了?" }, { id:7, lv:0, sick:"他的写作水平明显改进了。", cause:"搭配不当", options:[ "他的写作水平明显提高了。", "他的写作水平明显增加了。", "他的写作水平明显变大了。", "他的写作水平明显改进了。" ], answer:0, reason:"“水平”常与“提高”搭配,不说“水平改进”。“改进”一般用于方法、技术。", ask:"还有哪些词能和“水平”搭配?" }, { id:8, lv:0, sick:"他穿着一件蓝色上衣和一顶白帽子。", cause:"搭配不当", options:[ "他穿着一件蓝色上衣,戴着一顶白帽子。", "他穿戴着蓝色上衣和白帽子。", "他穿着蓝色上衣,戴白帽子一顶。", "他穿着一件蓝色上衣和一顶白帽子。" ], answer:0, reason:"“上衣”用“穿”,“帽子”用“戴”,一个动词不能同时搭配两个不同的对象。", ask:"还有哪些衣物要用“戴”而不是“穿”?" }, /* ================= 第2关 · 急诊部(单一隐蔽病句) ================= */ { id:9, lv:1, sick:"听了老师的报告,使我深受教育。", cause:"成分残缺", options:[ "听了老师的报告,我深受教育。", "听了老师的报告,使我很受教育。", "我听了老师的报告,使深受教育。", "听了老师的报告,使我深受教育。" ], answer:0, reason:"“听了……使……”连用,句子没有主语。删去“使”,让“我”做主语。", ask:"去掉“使”之后,谁“深受教育”?" }, { id:10, lv:1, sick:"他经常回忆过去的往事。", cause:"重复啰嗦", options:[ "他经常回忆往事。", "他经常回忆过去的事情和往事。", "他回忆经常过去的往事。", "他经常回忆过去的往事。" ], answer:0, reason:"“过去”和“往事”意思重复,保留一个即可。", ask:"“往事”本身是什么意思?还需要“过去的”吗?" }, { id:11, lv:1, sick:"我断定他大概是生病了。", cause:"前后矛盾", options:[ "我断定他生病了。", "我断定他大概生病了。", "我断定他生病了大概。", "我断定他大概是生病了。" ], answer:0, reason:"“断定”表示十分肯定,“大概”表示不确定,两者矛盾。应删去“大概”。", ask:"如果要保留“大概”,前面的“断定”应该换成什么词?" }, { id:12, lv:1, sick:"我们要及时纠正并发现学习中的问题。", cause:"语序颠倒", options:[ "我们要及时发现并纠正学习中的问题。", "我们要及时纠正学习中的问题并发现。", "我们要及时地纠正并发现学习中的问题。", "我们要及时纠正并发现学习中的问题。" ], answer:0, reason:"应该先“发现”问题,再“纠正”问题,顺序不能颠倒。", ask:"为什么“发现”要放在“纠正”前面?" }, { id:13, lv:1, sick:"语文对我很感兴趣。", cause:"主客颠倒", options:[ "我对语文很感兴趣。", "语文很对我感兴趣。", "我语文对很感兴趣。", "语文对我很感兴趣。" ], answer:0, reason:"是“我”对“语文”感兴趣,不是“语文”对“我”感兴趣。主客关系要摆正。", ask:"“感兴趣”的主语应该是谁?" }, { id:14, lv:1, sick:"为了防止这类事故不再发生,我们加强了安全教育。", cause:"否定不当", options:[ "为了防止这类事故再次发生,我们加强了安全教育。", "为了防止这类事故不发生,我们加强了安全教育。", "为了防止这类事故发生不再,我们加强了安全教育。", "为了防止这类事故不再发生,我们加强了安全教育。" ], answer:0, reason:"“防止”已含否定,再加“不”变成“防止不发生”,意思相反。应把“不”改为“再次”。", ask:"“防止……不再发生”实际表达的是什么意思?" }, { id:15, lv:1, sick:"他那亲切的话语和慈祥的笑容时时浮现在我眼前。", cause:"搭配不当", options:[ "他那亲切的话语时时回响在我耳边,慈祥的笑容时时浮现在我眼前。", "他那亲切的话语和慈祥的笑容时时回响在我耳边。", "他那亲切的话语和慈祥的笑容时时出现在我耳边。", "他那亲切的话语和慈祥的笑容时时浮现在我眼前。" ], answer:0, reason:"“话语”作用于“耳边”,“笑容”作用于“眼前”,不能合在一起用一个谓语。", ask:"为什么“话语”不能“浮现在眼前”?" }, { id:16, lv:1, sick:"这本书的内容和插图都很丰富。", cause:"搭配不当", options:[ "这本书的内容很丰富,插图也很精美。", "这本书的内容很丰富,插图很丰富。", "这本书的内容和插图都很精美。", "这本书的内容和插图都很丰富。" ], answer:0, reason:"“内容”可以“丰富”,“插图”应说“精美”,不能共用一个“丰富”。", ask:"“插图”还可以用什么词来形容?" }, { id:17, lv:1, sick:"他的作文写得很精彩,受到了老师和同学们的一致好评和称赞。", cause:"重复啰嗦", options:[ "他的作文写得很精彩,受到了老师和同学们的一致好评。", "他的作文写得很精彩,受到了老师和同学们的一致称赞和好评。", "他的作文写得很精彩,受到了老师和同学们的称赞和好评和夸奖。", "他的作文写得很精彩,受到了老师和同学们的一致好评和称赞。" ], answer:0, reason:"“好评”和“称赞”意思重复,保留一个即可。", ask:"“好评”和“称赞”意思一样吗?" }, { id:18, lv:1, sick:"我们一定要发扬和继承中华民族的优良传统。", cause:"语序颠倒", options:[ "我们一定要继承和发扬中华民族的优良传统。", "我们一定要发扬中华民族的优良传统和继承。", "我们一定要继承中华民族的优良传统和发扬。", "我们一定要发扬和继承中华民族的优良传统。" ], answer:0, reason:"应该先“继承”,再“发扬”,逻辑顺序不能颠倒。", ask:"为什么“继承”要放在“发扬”前面?" }, /* ================= 第3关 · 专家会诊(复合病句·两处错误) ================= */ { id:19, lv:2, sick:"通过这次活动,使我提高了认识,丰富了知识和视野。", cause:"成分残缺 + 搭配不当", options:[ "这次活动使我提高了认识,丰富了知识,开阔了视野。", "通过这次活动,我提高了认识,丰富了知识和视野。", "这次活动使我提高了认识,丰富了知识和视野。", "通过这次活动,使我提高了认识,丰富了知识和视野。" ], answer:0, reason:"两处错误:①“通过……使……”缺主语,删去“通过”或“使”;②“丰富”不能搭配“视野”,应改为“开阔视野”。", ask:"“丰富”和“开阔”分别应该搭配什么?" }, { id:20, lv:2, sick:"秋天的北京是一年中最美的季节,我们忍不住情不自禁地赞叹。", cause:"搭配不当 + 重复啰嗦", options:[ "北京的秋天是一年中最美的季节,我们情不自禁地赞叹。", "北京的秋天是一年中最美的季节,我们忍不住情不自禁地赞叹。", "秋天的北京是一年中最美的季节,我们情不自禁地赞叹。", "秋天的北京是一年中最美的季节,我们忍不住情不自禁地赞叹。" ], answer:0, reason:"两处错误:①“北京”是城市不是季节,应改为“北京的秋天”;②“忍不住”和“情不自禁”意思重复,保留一个。", ask:"“情不自禁”是什么意思?还需要“忍不住”吗?" }, { id:21, lv:2, sick:"为了防止这类事故不再发生,我们必须及时纠正并发现安全隐患。", cause:"否定不当 + 语序颠倒", options:[ "为了防止这类事故再次发生,我们必须及时发现并纠正安全隐患。", "为了防止这类事故不再发生,我们必须及时发现并纠正安全隐患。", "为了防止这类事故再次发生,我们必须及时纠正并发现安全隐患。", "为了防止这类事故不再发生,我们必须及时纠正并发现安全隐患。" ], answer:0, reason:"两处错误:①“防止……不再发生”否定不当,应把“不”改为“再次”;②应先“发现”再“纠正”。", ask:"为什么“发现”要放在“纠正”前面?" }, { id:22, lv:2, sick:"他光荣地加入了少先队员,并且经常回忆过去的往事。", cause:"用词不当 + 重复啰嗦", options:[ "他光荣地加入了少先队,并且经常回忆往事。", "他光荣地加入了少先队,并且经常回忆过去的往事。", "他光荣地加入了少先队员,并且经常回忆往事。", "他光荣地加入了少先队员,并且经常回忆过去的往事。" ], answer:0, reason:"两处错误:①“加入”的宾语应是“少先队”;②“过去”和“往事”重复,保留一个。", ask:"“少先队”和“少先队员”分别指什么?" }, { id:23, lv:2, sick:"小明和小刚是好朋友,他经常帮助他,他们一起把作业已经写完了。", cause:"指代不明 + 语序颠倒", options:[ "小明和小刚是好朋友,小明经常帮助小刚,他们一起把作业写完了。", "小明和小刚是好朋友,他经常帮助他,他们一起把作业写完了。", "小明和小刚是好朋友,小明经常帮助小刚,他们一起把作业已经写完了。", "小明和小刚是好朋友,他经常帮助他,他们一起把作业已经写完了。" ], answer:0, reason:"两处错误:①两个“他”指代不明,应改成“小明”“小刚”;②“已经”应放在“把”前面。", ask:"把“已经”放在“把”前面,句子是不是更顺口?" }, { id:24, lv:2, sick:"经过老师的帮助,使我改正了错误,写作水平也明显改进了。", cause:"成分残缺 + 搭配不当", options:[ "经过老师的帮助,我改正了错误,写作水平也明显提高了。", "经过老师的帮助,我改正了错误,写作水平也明显改进了。", "经过老师的帮助,使我改正了错误,写作水平也明显提高了。", "经过老师的帮助,使我改正了错误,写作水平也明显改进了。" ], answer:0, reason:"两处错误:①“经过……使……”缺主语,删去“使”;②“水平”应搭配“提高”而不是“改进”。", ask:"“水平”和“提高”为什么更搭配?" }, { id:25, lv:2, sick:"听了老师的报告,使我深受教育,也让我改进了学习方法和态度。", cause:"成分残缺 + 搭配不当", options:[ "听了老师的报告,我深受教育,也改进了学习方法和态度。", "听了老师的报告,我深受教育,也让我改进了学习方法和态度。", "听了老师的报告,使我深受教育,也改进了学习方法和态度。", "听了老师的报告,使我深受教育,也让我改进了学习方法和态度。" ], answer:0, reason:"两处错误:①“听了……使……”缺主语,删去“使”;②“改进”与“态度”搭配不当,应说“端正态度”。原句改为“改进了学习方法,端正了学习态度”更准确。", ask:"“改进”和“端正”分别应该搭配什么?" } ]; /* ========================================================= 二、关卡配置 ========================================================= */ const LEVELS = [ { name: '门诊部', sub: '单一明显病句' }, { name: '急诊部', sub: '单一隐蔽病句' }, { name: '专家会诊', sub: '复合病句·两处错误' } ]; /* ========================================================= 三、状态 ========================================================= */ const state = { level: 0, streak: 0, wrongStreak: 0, total: 0, correct: 0, patientNo: 0, currentQ: null, locked: false, usedIds: new Set(), timer: null }; /* ========================================================= 四、DOM ========================================================= */ const hudLevel = document.getElementById('hudLevel'); const hudStreak = document.getElementById('hudStreak'); const hudWrong = document.getElementById('hudWrong'); const hudAcc = document.getElementById('hudAcc'); const levelTrack = document.getElementById('levelTrack'); const card = document.getElementById('card'); const patientNo = document.getElementById('patientNo'); const sickEl = document.getElementById('sickSentence'); const optionsEl = document.getElementById('options'); const feedbackEl = document.getElementById('feedback'); /* ========================================================= 五、工具函数 ========================================================= */ function shuffle(arr) { const a = arr.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } /* 从指定关卡抽一道未做过的题 */ function pickQuestion(lv) { const pool = QUESTIONS.filter(q => q.lv === lv); let available = pool.filter(q => !state.usedIds.has(q.id)); if (available.length === 0) { // 该关卡题目已用完,重置该关卡的记录 pool.forEach(q => state.usedIds.delete(q.id)); available = pool; } const q = available[Math.floor(Math.random() * available.length)]; state.usedIds.add(q.id); return q; } /* ========================================================= 六、界面更新 ========================================================= */ function buildTrack() { levelTrack.innerHTML = ''; LEVELS.forEach(() => { const d = document.createElement('div'); d.className = 'dot'; levelTrack.appendChild(d); }); } function updateHUD() { hudLevel.textContent = LEVELS[state.level].name; hudStreak.textContent = state.streak; hudWrong.textContent = state.wrongStreak; hudStreak.className = 'hud-value' + (state.streak > 0 ? ' hot' : ''); hudWrong.className = 'hud-value' + (state.wrongStreak > 0 ? ' cold' : ''); hudAcc.textContent = state.total === 0 ? '--' : Math.round(state.correct / state.total * 100) + '%'; [...levelTrack.children].forEach((el, i) => { el.classList.toggle('active', i === state.level); el.classList.toggle('done', i < state.level); }); } /* ========================================================= 七、渲染题目 ========================================================= */ function renderQuestion() { const q = state.currentQ; state.locked = false; state.patientNo++; patientNo.textContent = '第 ' + state.patientNo + ' 位病人'; sickEl.textContent = q.sick; optionsEl.innerHTML = ''; feedbackEl.className = 'feedback'; feedbackEl.innerHTML = ''; // 打乱选项,同时记录正确项 const indexed = q.options.map((text, i) => ({ text, correct: i === q.answer })); const shuffled = shuffle(indexed); const letters = ['A', 'B', 'C', 'D']; shuffled.forEach((opt, idx) => { const btn = document.createElement('button'); btn.className = 'opt'; const mark = document.createElement('span'); mark.className = 'opt-mark'; mark.textContent = letters[idx]; const txt = document.createElement('span'); txt.className = 'opt-text'; txt.textContent = opt.text; btn.appendChild(mark); btn.appendChild(txt); btn.addEventListener('click', () => { if (state.locked) return; state.locked = true; // 高亮所有选项 [...optionsEl.children].forEach((b, i) => { b.classList.add('disabled'); if (shuffled[i].correct) b.classList.add('correct'); }); if (!opt.correct) btn.classList.add('wrong'); handleAnswer(opt.correct, q); }); optionsEl.appendChild(btn); }); updateHUD(); } /* ========================================================= 八、判题 + 动态调整难度 ========================================================= */ function handleAnswer(isCorrect, q) { state.total++; if (isCorrect) state.correct++; let changeMsg = ''; let changeType = ''; if (isCorrect) { state.streak++; state.wrongStreak = 0; if (state.streak >= 3) { if (state.level < LEVELS.length - 1) { state.level++; state.streak = 0; changeMsg = '连对 3 题 → 升级!进入「' + LEVELS[state.level].name + '」(' + LEVELS[state.level].sub + ')'; changeType = 'up'; flashCard('flash-up'); } else { changeMsg = '连对 3 题 → 已在最高关卡「专家会诊」,继续保持!'; changeType = 'up'; } } } else { state.wrongStreak++; state.streak = 0; if (state.wrongStreak >= 2) { if (state.level > 0) { state.level--; state.wrongStreak = 0; changeMsg = '连错 2 题 → 降级,回到「' + LEVELS[state.level].name + '」(' + LEVELS[state.level].sub + ')'; changeType = 'down'; flashCard('flash-down'); } else { changeMsg = '连错 2 题 → 已在最低关卡「门诊部」,换一道同难度题再练。'; changeType = 'down'; } } } // 反馈面板 const correctText = q.options[q.answer]; feedbackEl.className = 'feedback show ' + (isCorrect ? 'ok' : 'no'); feedbackEl.innerHTML = '<div class="fb-title">' + (isCorrect ? '✔ 治疗成功!' : '✘ 治疗有误') + '</div>' + '<div class="fb-tip">' + '<div><span class="fb-cause">' + q.cause + '</span>' + '正确修改:<b>' + correctText + '</b></div>' + '<div style="margin-top:6px;">' + q.reason + '</div>' + '<div class="fb-ask">💬 想一想:' + q.ask + '</div>' + '</div>' + (changeMsg ? '<div class="fb-change ' + changeType + '">' + changeMsg + '</div>' : '') + '<div class="fb-next">' + '<span><span id="cdText">2.6</span> 秒后自动换题…</span>' + '<button class="next-btn" id="nextBtn">立即下一题 →</button>' + '</div>'; updateHUD(); // 自动换题倒计时 const DELAY = 2600; const startTime = Date.now(); if (state.timer) { clearInterval(state.timer); state.timer = null; } state.timer = setInterval(() => { const left = Math.max(0, (DELAY - (Date.now() - startTime)) / 1000); const cd = document.getElementById('cdText'); if (cd) cd.textContent = left.toFixed(1); if (left <= 0) { clearInterval(state.timer); state.timer = null; goNext(); } }, 100); const nb = document.getElementById('nextBtn'); if (nb) { nb.addEventListener('click', () => { if (state.timer) { clearInterval(state.timer); state.timer = null; } goNext(); }); } } function flashCard(cls) { card.classList.remove('flash-up', 'flash-down'); void card.offsetWidth; card.classList.add(cls); setTimeout(() => card.classList.remove(cls), 750); } /* ========================================================= 九、换题 ========================================================= */ function goNext() { if (state.timer) { clearInterval(state.timer); state.timer = null; } state.currentQ = pickQuestion(state.level); renderQuestion(); } /* ========================================================= 十、启动 ========================================================= */ function init() { buildTrack(); updateHUD(); state.currentQ = pickQuestion(0); renderQuestion(); } init(); </script> </body> </html>教育产品提示词”类润色

提示词

### 🎯 教育产品提示词生成器

你是一位资深教育产品设计师兼前端工程师,精通小学语文教学法与教育游戏化(Gamification)设计,擅长将知识点转化为「低门槛、强反馈、可自适应」的交互式学习产品。

## 任务描述

请为我开发一款**单文件 HTML 教育游戏**,主题为「病句诊疗闯关」,面向**小学四年级学生**,用于训练**修改病句**能力。所有 HTML、CSS、JavaScript 必须写在同一个 `.html` 文件中,双击即可离线运行,不依赖任何外部库、框架或网络资源。

## 输出约束

- **内容范围**:仅围绕统编版小学语文四年级常见病句类型,不得超出该学段认知水平
- **输出格式**:完整单文件 HTML,含内联 `<style>` 与 `<script>`,无外链、无 CDN、无 import
- **语言风格**:中文界面,语气亲切活泼,贴合儿童心理;代码注释使用中文
- **代码要求**:原生 JS,结构清晰分模块(题库 / 配置 / 状态 / DOM / 工具 / 渲染 / 判题 / 换题 / 启动)

## 核心功能要求

### 1. 题库设计
- 覆盖 **3 个难度层级**,每层不少于 8 道题:
  - `lv0` 门诊部:单一明显病句(如搭配不当、语序颠倒、用词不当)
  - `lv1` 急诊部:单一隐蔽病句(如成分残缺、前后矛盾、指代不明、重复啰嗦)
  - `lv2` 专家会诊:复合病句(一句话含两处错误)
- 每题数据结构须包含:`id`、`lv`、`sick`(病句原文)、`cause`(病因标签)、`options`(4 个选项)、`answer`(正确项索引)、`reason`(解析)、`ask`(引导思考的问题)
- 干扰项必须具备「高迷惑性」,针对学生常见误改方式设计

### 2. 游戏化机制
- **状态面板(HUD)**:实时显示当前关卡、连对计数、连错计数、正确率
- **关卡进度条**:3 段式可视化,区分「已通过 / 当前 / 未解锁」
- **动态难度调节**:
  - 连对 3 题 → 升级(最高关卡不再升级)
  - 连错 2 题 → 降级(最低关卡不再降级)
- **防重复机制**:同一题在题库耗尽前不得重复出现,用完自动重置该层

### 3. 交互与反馈
- 选项每次渲染须**随机打乱顺序**,避免记忆答案位置
- 点击后立即锁定选项,正确项高亮绿色,错误选择高亮红色
- 反馈区展开显示:病因标签、正确修改、详细解析、引导性思考问题
- 升级 / 降级时卡片须有对应的闪烁动画(暖色系升级、冷色系降级)
- 判题后 2.6 秒自动换题,同时提供「立即下一题」手动按钮

## 质量标准

- **教学性优先**:每道题的解析必须说明「为什么错」而非只说「答案是什么」
- **认知友好**:用词通俗,避免语法术语堆砌,必要时用类比解释
- **视觉清晰**:医疗主题视觉隐喻(挂号单、治疗台、病人编号),配色清爽不刺眼
- **移动端适配**:480px 以下屏幕自动调整字号与间距
- **零依赖运行**:断网环境下功能完整,无控制台报错

## 示例引导

**示例输入**:病句「我的家乡是桂林人。」
**期望输出**:病因标注「搭配不当」,正确答案「我的家乡是桂林」,解析「家乡是地方,人不能做家乡的宾语,删去'人'即可」,引导问题「为什么'我的家乡是桂林'就通顺了?」

请严格按照以上要求,直接输出可运行的完整 HTML 代码,不要添加任何解释性文字。