A modern, interactive web application for learning Cantonese Jyutping pronunciation through structured lessons, quizzes, and audio practice.
- 5 Comprehensive Lessons: Progressive learning structure
- Interactive Quizzes: Multiple quiz types (matching, fill-in-the-blank, multiple choice)
- Audio Samples: Native pronunciation examples
- Voice Recording: Record and compare your own pronunciation
- Google Sheets Integration: Easy content management through Google Sheets
- Responsive Design: Works on desktop, tablet, and mobile devices
- GitHub Pages Ready: Static site ready to deploy
epepep/
├── index.html # Main landing page
├── lesson.html # Lesson template page
├── css/
│ └── styles.css # Main stylesheet (warm color scheme)
├── js/
│ ├── app.js # Main application logic
│ ├── lesson.js # Lesson page functionality
│ ├── quiz.js # Quiz components and logic
│ ├── audio.js # Audio playback and recording
│ └── data-loader.js # Google Sheets data integration
├── data/
│ └── lessons.json # Sample lesson data structure
└── audio/ # Audio files directory (to be added)
Lesson data can be maintained in Google Sheets and loaded into the application. See data/lessons.json for the expected structure.
Your Google Sheet should have the following structure:
- Sheet 1: Lessons metadata
- Sheet 2: Audio samples
- Sheet 3: Quiz questions
- Push this repository to GitHub
- Go to repository Settings → Pages
- Select source: Deploy from branch (main)
- Select folder: / (root)
- Click Save
Your site will be available at: https://[username].github.io/[repository-name]/
Simply open index.html in a modern web browser. For best results, use a local web server:
# Using Python 3
python -m http.server 8000
# Using Node.js
npx serveThen visit http://localhost:8000
- Modern browser with ES6+ support
- Web Audio API support (for recording feature)
- MediaRecorder API support
- Progress tracking
- Spaced repetition system
- Additional quiz types
- Certificate of completion
- Dark mode toggle
MIT License