夜雨聆风用AI工具生成交互式网页（或课件）现在已经是低门槛的操作了，不管哪个学科老师，只要你有想法、有需要，一句话就可以生成交互式网页。这次刚好给三年级进行打字测试，于是就有了这个诗歌+打字新玩法的交互式网页，这个页面通过实时对比、计时挑战和可视化反馈，帮助学生练习古诗词打字速度。
选择诗词：顶部提供一个下拉选择条，可以设置与学生年级相关的古诗。
操作方式：在输入框中对照上方诗歌文字逐字输入，页面会实时显示正确率并自动计时。点击“提交成绩”按钮或按Ctrl+Enter快捷键即可结束练习。支持输入法组合输入，移动端体验也已适配。
视觉风格：页面采用仿古书卷风格，米色纸质背景搭配楷体字体。Canvas画布上会实时标记打字状态：正确字符显示墨绿色，错误字符显示朱红色并带有波浪下划线，当前待输入位置有闪烁的光标提示。
反馈机制：提交后，系统会根据完成时间（快/慢）和正确率（高/低）综合判定评级，弹出包含成绩等级、用时、打字速度和个性化鼓励语的弹窗，给予正向激励。
二、扣子空间做一个网页刚好用了1500积分，生成时间5分钟左右，网页可下载，测试网址：
https://dd855fcd-cbd4-419b-8f7e-d72ae6c94d61-5000.dev.coze.site/
三、通过国家中小学智慧教育平台，进入“用AI”版块的飞象老师，免费生成，交互式网页可下载，测试网址：
https://musk-online.fbcontent.cn/pub-musk-ai-studio/workflow/file/document/wuRy4wBUgRBG7QeykrLmnP.html
最后附上提示语（Prompt）供大家参考，提示语也是可以让AI生成的，生成其它交互式网页也是类似的方法：
请使用 HTML5 + Canvas + JavaScript 制作一个交互式古诗词打字练习网页，要求如下：
1. 诗歌库与选择
顶部提供一个下拉选择条，默认包含三首古诗：《绝句》（杜甫）、《惠崇春江晚景》（苏轼）、《三衢道中》（曾几）。
选择不同诗歌后，页面标题、作者和Canvas展示的诗句内容同步切换。
切换诗歌时如已有输入内容，弹出确认框防止误操作。
2. Canvas 原文展示区
使用 Canvas 绘制诗歌原文，所有字符（含空格、标点、换行符）按固定网格逐字渲染。
根据用户实时输入，字符颜色动态变化：
当前待输入位置显示半透明高亮背景和闪烁光标，换行位置显示“↵”符号。
Canvas 整体风格为仿古书卷，米色底纹，上下有虚线装饰线。
支持窗口大小自适应，保持清晰度（DPR处理）。
3. 输入区域
提供一个多行文本框（textarea），供学生逐字对照输入。
支持中文输入法组合输入（compositionstart/end 事件处理）。
输入时自动开始计时，清空输入则计时归零暂停。
按下 Ctrl+Enter 可快速提交。
4. 实时统计栏
显示已用时间（分:秒格式）、正确字符数、错误字符数（含未输入部分）、输入进度条和百分比。
所有统计根据输入内容实时更新。
5. 提交与成绩反馈
“提交成绩”按钮初始禁用，输入内容后启用。
提交后停止计时，弹出成绩反馈弹窗（包含等级图标、评级文字、正确率、用时、打字速度）。
评级逻辑根据正确率和完成时间综合判定：
优秀：正确率 ≥ 95% 且 用时 ≤ 120秒
良好：正确率 ≥ 85% 且 用时 ≤ 240秒
过关：正确率 ≥ 70%
待努力：其他情况
弹窗中显示个性化鼓励语，并提示是否输入完整、是否超出字数。
提供“再来一次”按钮重置所有状态。
6. 视觉与交互细节
整体风格：古风书卷质感，背景渐变，楷体字体优先，米色/棕色系配色。
按钮有悬停、按下动效，提交按钮为渐变棕色，重置按钮为线框样式。
Canvas 输入激活时外框高亮。
弹窗有淡入和弹性动画效果。
移动端适配，响应式布局，小屏幕下缩小字号和间距。
页面隐藏/恢复时正确处理计时器暂停与继续。
7. 代码结构
所有状态用变量集中管理，功能函数模块化。
诗歌数据独立定义，便于后续增删。
提供必要的防抖、动画帧处理和资源清理逻辑。
请输出完整的单个 HTML 文件，包含内联 CSS 和 JavaScript，确保即开即用。
人工智能通识课怎么上？国家中小学智慧教育平台上的课程包：共36个课时
三个案例了解“企鹅教师助手”智能体—国家智慧教育平台推荐+腾讯出品—果然好用
