ZakiLearn/simple-cerf-flashcard

# CEFR 英语单词卡片 一款简单且交互性强的英语单词卡片应用，旨在通过翻卡体验让学习更具吸引力。该项目帮助学习者记忆按 CEFR（欧洲语言共同参考框架）等级分类的英语单词，范围涵盖 A1（初级）到 C2（精通）。 ## 功能 * **交互式翻转卡片** * 单击或点按卡片即可显示释义、词性以及语境例句。 * **键盘导航** * 使用快捷键进行导航和交互：左箭头切换到上一张卡片，右箭头切换到下一张卡片，空格键或回车键翻转卡片。 * **CEFR 等级筛选** * 按熟练度等级（A1、A2、B1、B2、C1、C2）筛选卡片，或查看整个集合。 * **动态洗牌** * 每次应用筛选器时，都会使用 Fisher-Yates 洗牌算法将单词顺序随机化，从而每次提供独特的练习体验。 * **双语解释** * 在英语和印尼语（EN | ID）之间切换释义，以增强可访问性。 * **带有单词留空的语境例句** * 显示例句以展示用法。句子中的目标单词会被自动遮挡，以挑战学习者并检验其理解能力。 * **按需 API 集成** * 从 Free Dictionary API 动态获取释义和使用示例，并通过 Google Translate 客户端 API 处理翻译。 * **LocalStorage 缓存** * 将获取的释义和翻译本地存储在浏览器中，以减少网络请求、加快加载速度，并支持对之前加载过的卡片进行离线查看。 * **轻量且极简的 UI** * 完全专注于学习、无干扰的整洁布局，针对桌面和移动设备屏幕进行了优化。 ## 项目目标 本项目提供了一个轻量且直观的词汇学习工具，可帮助用户： * 使用 CEFR 标准逐步扩充英语词汇量。 * 通过查字典释义和翻译工具，理解语境中的含义。 * 通过交互式的卡片检索强化长期记忆。 ## 技术栈 * **HTML5**：结构化的语义布局和用于提升可访问性的 ARIA 属性。 * **CSS3**：现代布局、响应式设计以及流畅的 3D 翻卡过渡效果。 * **JavaScript**：使用原生 ES6+ 脚本进行 DOM 操作、网络请求、事件委托和缓存。 ## 如何运行该项目 1. 克隆或下载此代码库。 2. 在任何现代浏览器中打开 `index.html` 文件。 3. 确保首次运行时具有有效的互联网连接，以便应用程序查询词典释义和翻译。随后再次加载相同的单词时，将从本地缓存中检索数据。 ## 键盘快捷键 * **空格 / 回车**：翻转卡片 * **右箭头**：下一张卡片 * **左箭头**：上一张卡片 ## 未来改进 * 搜索词汇索引。 * 收藏和书签功能，以便进行重点复习。 * 深色模式主题切换。 * 学习进度追踪器和统计信息。 * 音频发音。 * 间隔重复系统（SRS）集成。 * 测验模式。 * 每日词汇挑战。

标签：LocalStorage, REST API, 单词卡片, 自定义脚本, 英语学习