# flash-card-simple

**Repository Path**: Dzreal_admin/flash-card-simple

## Basic Information

- **Project Name**: flash-card-simple
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-13
- **Last Updated**: 2025-10-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🏝️ 少儿英语启蒙岛 (Pico English Island)

一个专为 4-7 岁儿童设计的英语学习应用,采用多邻国 (Duolingo) 风格的游戏化设计,通过"听音识图"的方式帮助孩子轻松学习英语单词。

## ✨ 特色功能

### 🎯 核心理念
- **游戏化学习**: 模仿多邻国的设计哲学,让学习像玩游戏一样有趣
- **听音识图**: 专注于"听音识图"这一核心学习闭环,简单高效
- **儿童优先**: 所有交互都针对 4-7 岁儿童优化 - 大按钮、清晰指引、即时反馈

### 📚 功能模块

#### 1. 学习岛屿 (主界面)
- 🗺️ 可爱的"学习岛屿"地图设计
- 📦 951个单词分类到46个主题关卡
- ✅ 清晰的进度显示和完成状态
- ⭐ 星星奖励系统

#### 2. 学习模式
- 📸 高质量的 WebP 图片展示
- 🔊 标准英语发音音频
- 📊 实时进度条显示
- ⚡ 智能预加载,保证流畅体验
- 💫 流畅的卡片切换动画

#### 3. 测试模式
- 🎧 听音频选图片的测试方式
- ❤️ 生命值系统(3条生命)
- ✅ 即时的正确/错误反馈
- 🎉 庆祝动画和成绩统计
- ⭐ 根据正确率获得星星奖励

## 🎨 设计特点

### 多邻国风格设计
- **高饱和度配色**: 活泼明快的绿色和蓝色为主色调
- **圆润设计**: 所有按钮和卡片都采用大圆角设计
- **流畅动画**: 使用 CSS3 硬件加速动画,确保流畅性
- **积极反馈**: 正确答案有愉快的提示音和动画
- **清晰字体**: 使用大号字体,方便儿童阅读

### 交互设计
- 🖱️ 点击即发音
- ➡️ 简单的"下一个"按钮
- 🎯 大号清晰的选项按钮
- 🎊 完成时的庆祝动画
- 📱 完美支持触摸操作

## 🛠️ 技术架构

### 技术栈
- **HTML5**: 页面结构
- **CSS3**: 所有样式和动画(使用 GPU 加速)
- **JavaScript (ES6)**: 所有逻辑(无框架,轻量高性能)

### 核心技术特点

#### 1. 数据驱动架构
```json
{
  "lessons": [
    {
      "id": "fruits",
      "name": "水果森林",
      "icon": "🍎",
      "word_keys": ["apple", "banana", "orange", ...]
    }
  ],
  "dictionary": {
    "apple": {
      "word_en": "apple",
      "word_cn": "苹果",
      "image": "image/苹果.webp",
      "audio": "audio/苹果_word.mp3"
    }
  }
}
```

#### 2. 智能预加载策略
- ⚡ 启动时只加载数据库JSON(极快)
- 📸 按需加载当前单词的图片和音频
- 🔮 预测性预加载下一个单词资源
- 💾 浏览器缓存优化

#### 3. 性能优化
- **延迟加载**: 资源只在需要时加载
- **预测性加载**: 提前加载用户可能访问的资源
- **GPU加速**: 所有动画使用 `transform` 和 `opacity`
- **图片优化**: 使用 WebP 格式,体积小质量高

## 📊 项目数据

- 📚 **单词总数**: 951个
- 🎯 **主题课程**: 46个
- 🖼️ **图片资源**: 1054张 WebP 格式
- 🔊 **音频资源**: 986个 MP3 文件

### 主题分类示例
- 🍔 美食天地 (61个单词)
- 🏃 动作世界 (59个单词)
- 👋 身体部位 (48个单词)
- 🐶 动物农场 (43个单词)
- 👨‍🍳 烹饪动作 (41个单词)
- 🚗 交通小镇 (36个单词)
- ... 更多主题

## 🚀 使用说明

### 快速开始

1. **打开应用**
   - 在浏览器中打开 `index.html` 文件
   - 建议使用 Chrome、Safari 或 Edge 浏览器
   - 最佳体验: iPad 横屏模式

2. **选择课程**
   - 在学习岛屿地图上选择一个主题
   - 点击课程卡片开始学习

3. **学习模式**
   - 查看图片和单词
   - 点击"🔊 点击发音"按钮听发音
   - 点击"下一个 →"按钮继续
   - 学完所有单词后可以开始测试

4. **测试模式**
   - 听音频,从4个选项中选择正确的图片
   - 答对继续,答错扣除1条生命
   - 完成测试获得星星奖励

### 本地运行

由于浏览器安全限制,建议使用本地服务器运行:

```bash
# 方法1: 使用 Python
python3 -m http.server 8765

# 方法2: 使用 Node.js (需要安装 http-server)
npx http-server -p 8765

# 然后在浏览器访问
# http://localhost:8765
```

## 📁 项目结构

```
Pico-English-Island/
│
├── index.html              # 主页面
├── style.css               # 样式文件(多邻国风格)
├── script.js               # 核心逻辑
├── database.json           # 数据库文件
├── generate_database.py    # 数据库生成脚本
│
├── image/                  # 图片资源 (1054张 WebP)
│   ├── 苹果.webp
│   ├── 香蕉.webp
│   └── ...
│
├── audio/                  # 音频资源 (986个 MP3)
│   ├── 苹果_word.mp3
│   ├── 香蕉_word.mp3
│   ├── download_log.json
│   └── ...
│
└── assets/
    ├── ui/                 # UI 素材
    └── sounds/             # 音效文件
```

## 🎯 设计原则

### 1. KISS原则 (Keep It Simple, Stupid)
- 专注核心功能: 学习 + 测试
- 避免复杂的技能树和社交功能
- 简单直观的用户界面

### 2. 性能第一
- 无重型框架依赖
- 智能资源加载策略
- GPU加速动画

### 3. 儿童友好
- 大按钮,易于点击
- 清晰的视觉指引
- 即时且有趣的反馈
- 积极的鼓励语言

## 🔧 开发说明

### 数据库生成

如果需要重新生成数据库:

```bash
python3 generate_database.py
```

这将:
1. 读取 `audio/download_log.json`
2. 检查对应的图片和音频文件
3. 按主题分类所有单词
4. 生成 `database.json` 文件

### 自定义主题

编辑 `generate_database.py` 中的 `THEMES` 字典:

```python
THEMES = {
    "your_theme": {
        "id": "your_theme",
        "name": "你的主题名称",
        "icon": "🎨",
        "keywords": ["关键词1", "关键词2", ...]
    }
}
```

### 样式自定义

所有颜色和样式变量定义在 `style.css` 的 `:root` 部分:

```css
:root {
    --color-primary: #58CC02;      /* 主色调 */
    --color-secondary: #1CB0F6;    /* 次要色 */
    --radius-lg: 16px;             /* 圆角大小 */
    /* ... 更多变量 */
}
```

## 📱 浏览器兼容性

| 浏览器 | 版本 | 支持状态 |
|--------|------|----------|
| Chrome | 90+ | ✅ 完美支持 |
| Safari | 14+ | ✅ 完美支持 |
| Edge | 90+ | ✅ 完美支持 |
| Firefox | 88+ | ✅ 完美支持 |
| iOS Safari | 14+ | ✅ 完美支持 |
| Android Chrome | 90+ | ✅ 完美支持 |

## 🎓 教育价值

### 学习收益
- 📖 **词汇量**: 学习951个常用英语单词
- 👂 **听力**: 通过标准发音训练听力
- 🧠 **记忆**: 图片+发音+文字多重记忆
- 🎮 **兴趣**: 游戏化设计激发学习兴趣

### 适用场景
- 🏠 家庭自学
- 🏫 幼儿园/小学辅助教学
- 👨‍👩‍👧 亲子互动学习
- 📱 随时随地移动学习

## 📝 更新日志

### Version 1.0.0 (2024-10)
- ✨ 初始版本发布
- 🎨 多邻国风格UI设计
- 📚 951个单词,46个主题
- 🎮 学习模式 + 测试模式
- ⭐ 星星奖励系统
- 💾 本地进度保存

## 📄 许可证

本项目仅供学习和教育用途使用。

## 🙏 致谢

- 设计灵感来自 **Duolingo** (多邻国)
- 图片和音频资源来自项目原始素材
- 感谢所有为儿童英语教育做出贡献的人们

## 📧 联系方式

如有问题或建议,欢迎反馈!

---

**🏝️ 让我们一起在英语启蒙岛上快乐学习吧! 🎉**