AI提示词
H5 背单词挖空工具生成提示词: 第一部分：角色与任务定义 你是一位专业的前端开发工程师，擅长开发儿童友好的教育类 H5 应用。请你为我开发一个纯前端、单页面、无任何跳转的背单词挖空练习工具。这个工具是给小学生使用的，所以界面要治愈卡通儿童风，色彩柔和，大圆角设计，字体清晰易读。 第二部分：核心功能要求 1. 输入区域 提供一个大的文本输入框，提示文字：“请输入需要背诵的单词，单词与单词之间用逗号或空格分隔" 输入框高度要足够大，方便孩子输入多个单词 支持粘贴多行文本 2. 三个核心操作按钮（并排显示） 生成挖空按钮：点击后，根据输入的单词生成挖空练习 重新生成按钮：点击后，对当前单词列表生成不同位置的新挖空（每次挖空的字母位置要随机变化） 清空按钮：点击后，清空所有内容，回到初始状态 3. 挖空练习区域 每个单词单独一行显示 随机挖去单词中的 2-4 个字母（根据单词长度自动调整，短单词挖 2 个，长单词挖 3-4 个） 挖空的位置用下划线 "____" 表示 每个下划线对应一个输入框，孩子可以在输入框中填写字母 输入框只能输入一个英文字母，自动转换为小写 输入完一个字母后，自动跳转到下一个输入框 4. 批改功能 在挖空练习区域下方添加一个 **"批改答案"** 按钮 点击批改按钮后： 自动检查所有填写的字母 正确的字母：显示绿色对勾 "✓"，输入框变成绿色 错误的字母：显示红色叉号 "✗"，输入框变成红色，并在旁边显示正确的字母 计算正确率，显示 "太棒了！你答对了 X 个，正确率 X%" 如果全部正确：显示大大的表扬动画和鼓励语，如 "你太厉害了！全部答对了！🎉" 如果有错误：将所有错误的单词单独列在下方 "错题重练" 区域 5. 错题重练功能 自动收集所有答错的单词 在 "错题重练" 区域显示这些单词 提供一个 **"重新练习错题"** 按钮 点击后，只对错题生成新的挖空练习 直到所有错题都答对为止 第三部分：界面设计要求 整体风格：治愈卡通儿童风，使用柔和的马卡龙色系 背景：浅蓝或浅粉渐变背景，添加一些简单的卡通装饰元素（如小星星、小云朵） 按钮：大圆角设计，有悬停和点击效果，颜色鲜艳但不刺眼 输入框：大圆角，边框较粗，方便孩子点击输入 字体：使用圆润可爱的无衬线字体，字号足够大 间距：所有元素之间要有足够的间距，避免拥挤 动画：添加简单的过渡动画，如按钮点击、答案批改时的动画效果 第四部分：交互逻辑要求 初始状态：只显示输入区域和三个核心按钮 点击 "生成挖空" 后：显示挖空练习区域和 "批改答案" 按钮 点击 "重新生成" 后：清空当前练习，生成新的随机挖空 点击 "清空" 后：回到初始状态，清空所有内容 点击 "批改答案" 后：显示批改结果和错题重练区域 点击 "重新练习错题" 后：只显示错题的挖空练习 所有操作都在当前页面完成，不刷新页面，不跳转页面 第五部分：代码要求 使用纯 HTML、CSS 和 JavaScript 实现，不需要任何后端 使用 Tailwind CSS v3 进行样式设计 代码结构清晰，注释完整 兼容主流浏览器和手机端 响应式设计，在手机和平板上都能正常显示和使用 所有功能都在前端实现，不需要网络连接 第六部分：额外优化建议 添加键盘支持，方便孩子使用键盘输入 输入框自动聚焦，提高输入效率 添加声音效果（可选），答对时播放鼓励音效 限制输入框只能输入英文字母，防止输入其他字符 单词长度小于 3 个字母时，只挖 1 个空 单词长度大于 8 个字母时，最多挖 4 个空 请你根据以上要求，生成一个完整的、可以直接运行的 H5 背单词挖空工具代码。 （可以用豆包，Kimi或者是智谱清言）