一个日语假名背诵工具(平假to罗马音)

无聊写了一个日语平假名默写的小网页，功能就是随机打乱 45 个日语平假名并依次显示在网页上，按键盘输入正确的假名罗马音（字母）后就会自动切换到下一个假名。
45个假名默写完成后可以生成简单的报表，包含每个假名的回答时间和回答错误的次数。

该网页本质上就是一个简单的问答模板，所以也可以打开思路，其不仅仅可以用于日语假名，还可以用来提问英语单词，数学问题等简单的场景。

使用

这个网站单页已经放在了： https://labs.muna.uk/projects/nihongo/hiragana-to-romanization.html 可以直接在线使用，
是一个简单的单文件网页，没有外部资源，如果需要离线使用可以直接右键另存为保存到本地，保存后只有一个 HTML 文件，直接点开即可离线使用。
电脑使用时，无需点击输入框，直接键盘输入即可（建议关闭中文输入法）
手机使用时，需手动点击一下深色的输入框调出键盘后输入（建议关闭中文输入法）
若答案正确会自动加载下一个问题，全部回答完毕后会有简单的报告，报告最后会用 红（跳过未作答，即未掌握），黄（输入时出现错误或答题时间超过2秒），绿（掌握较好） 三种颜色标注每个假名的掌握情况。
如果遇到不会的题目，可以输入 !skip 显示答案（所有显示过答案的假名将会在报告中被红色标出）。

更多应用

该网页本质上就是一个简单的问答模板，所以也可以打开思路，其不仅仅可以用于日语假名，还可以用来提问英语单词，数学问题等简单的场景。

技术部分

正文部分到此结束了，如果你希望自定页面的题库或了解该网页的具体实现方法，可以继续阅读下面的技术实现部分。

自定题库

如果你希望导入自己的题库，你需要先将网页下载下来并按照如下步骤修改源代码。

1. 修改题库数据
   在文件尾部，找到 “const Romanization_datas =” 题库变量赋值部分，按照以下格式修改被 `` 符号括起来的数据。

   题目1|答案1
   题目2|答案2
   ......

2. （可选） 如果题目过长，可修改 “width: 200px 为更大的数值”（使用编辑器的全局替换功能替换为更大的值即可）
3. （可选） 修改掌握判定时间（默认2秒），item.speed < 2，若回答问题的时间大于掌握判定时间，即使回答正确也会在最终的报告中被标黄（掌握不熟），可通过 item.speed < 2 修改这一时间（使用编辑器的全局替换功能替换即可）

ps：如果各位想分享自己做的题库，可以直接发在下面的评论区中。

如何实现

整体实现比较简单，主要通过监听两个网页事件：窗口键盘按下（keydown）和 输入框输入（input），检测到键盘任意键按下时，使输入框获得焦点，当删除键按下时，清空输入框中的内容并认定用户输入错误一次。
此外通过输入框输入事件，每当输入框文本改变时都进行判断是否输入了正确答案，若输入框内容与正确答案相符，则加载下一题目，免去用户按回车或点按钮这一动作。
同时用了一个数组存储每个题目，每次题目使用完成后都将相应的题号从数组中删除，避免重复提问，通过一个范围随机数函数随机从数组中抽取剩下的题目。
因为是临时写的代码，所以看起来比较乱，再加上整体还不是很完善，就没有放Github。
部分代码是阿里云的通义千问写的，整体来讲不错，表扬一下~