需求

孩子小学刚开始学数学，需要大量练习算术题，尤其是口算题。平时作业纸质的口算题，即不能直接反馈结果，又不能统计答题时间等数据，需要一个练习小程序，快速练习并统计。

设想

利用AI生成一个手机网页，选择题型，输入题目数量后，自动出题，答题并完成统计，统计结果可分享。

实现

部分关键对话如下：

生成一个html程序，适配电脑和手机端，内容为口算题，包含一位数加一位数，两位数加一位数，两位数加两位数，10 以内的减法，两位数减一位数，两位数减两位数，表内乘法，两位数乘一位数，两位数乘两位数，表内除法，两位数除以一位数，混合运算等多种题型，用户可多选题型和题目数量（默认50题）后，开始答题，答题过程记录答题时间和对错数量。完成后可以生成分享图片，包含本次答题设置和统计结果，以及当前html的url二维码

点评：基础功能已经实现，电脑版操作正常，发现结果会有负数，应该增加负数开关。发现分享二维码并没有生成，需要修复

选择题目界面，增加结果是否包含负数的选项，默认开启，关闭后生成题目结果不包含负数。分享界面增加开始时间，当前生成二维码失败，没有二维码图片，请修复。

点评：本意是可以保存图片，然后分享，用户可以直接从二维码进入，后期如果增加后台程序可增加参数，获取统计分享用户等等，但是预览环境带有iframe,导致获取的url有误，手工修改为分享地址，方便直接体验。发现历史记录存于本地，且一直再增加，增加功能可删除记录。

历史记录，增加删除和全部删除功能

点评：至此电脑端功能及流程已经实现，发现手机端需要调起输入法键盘会遮挡题目等内容，修改直接在页面增加数字输入功能

在手机端页面上直接增加数字输入键盘，包含数字，负号，小数点，确认，清空按钮，避免调用手机输入法键盘遮挡页面内容，优化用户使用界面，

点评：预览时因为顶部多一个厂商提示，导致结果显示依然被遮挡，但是浏览器直接查看页面不影响，考虑后期再改成统计侧边悬浮，解决遮挡问题。另发现分享成绩生成图片功能只是演示，并不能真实生成，继续修改。

引入外部库，点击分享中的下载图片时直接保存下载图片

点评：点击保存图片，会直接在浏览器调起下载，功能实现。但经测试微信环境有限制并不能直接调起下载，设想并不能实现。

体验地址

扫描上方图片中二维或点击直接进入体验，部分页面依然有遮挡，可下载后使用。

口算练习https://www.doubao.com/share/code/181a1eae01852afa

后续

1.目前题目类型也是AI总结生成的，并没有按年级体现，考虑可按年级知识点重新制作。

2.手机页面结果提示还是会遮挡，考虑使用侧边漂浮来显示结果和统计等信息。

3.还可增加提示音，答对答错直接语音提示，优化使用体验。

4.实际有继续对话完成2的修改但并未实现，且因为每个对话代码都会重新生成，时间较长，体验不是很好。