DEV Community
·
单页面多难度测验应用
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
本文介绍了如何使用ReactJs创建多难度测验应用。通过三个数组存储不同难度的问题和答案，用户可选择难度并加载相应测验。使用useNavigate进行页面导航，并通过事件对象设置所选测验，最终在页面上显示问题和答案。
🎯
关键要点
- 使用ReactJs创建多难度测验应用。
- 通过三个数组存储不同难度的问题和答案。
- 每个数组包含问题编号、问题文本和潜在答案的数组。
- 使用useNavigate进行页面导航。
- 创建选择难度的组件和用于存储所选测验的变量。
- 使用事件对象设置所选测验，并通过switch语句决定加载哪个测验。
- 将所选测验存储在localStorage中，键名为'chosenQuiz'。
- 创建三个按钮，通过setDifficulty函数访问不同难度的测验。
- 使用currentQuestion状态变量跟踪当前问题，并在测验中递增。
- 从localStorage获取'ChosenQuiz'并解析为可读数据。
➡️
