A modern, interactive web application for learning Chinese character stroke order and writing practice with spaced repetition.
- Interactive Canvas: Draw Chinese characters with calligraphy-style brush (thick, smooth strokes)
- Touch Support: Works on both desktop (mouse) and mobile (touch) devices
- Stroke Order GIFs: Animated demonstrations showing correct character formation
- Background Reference: First frame of stroke order appears as background guide after showing answer
- Intelligent Algorithm: Characters you struggle with appear more frequently
- 5-Level Difficulty Rating: Rate each character from Very Hard (1) to Very Easy (5)
- Progress Tracking: Track mastery levels and average scores across difficulty tiers
- Smart Weighting: Recently mastered characters appear less frequently
- 5 Difficulty Levels: Novice (10), Beginner (25), Intermediate (100), Advanced (1000), Master (9900+ chars)
- Visual Progress: Color-coded level indicators show completion status
- Average Scoring: See your performance across each difficulty tier
- Persistent Storage: Progress saved locally in browser
- Spacebar: Show answer (stroke order animation)
- 1-5 Keys: Rate difficulty (1=Very Hard, 5=Very Easy)
- Visual Hints: Tooltips and hotkey indicators on buttons
- Responsive Design: Adapts to desktop and mobile screens
- Level-Specific Themes: Each difficulty level has unique color scheme
- Toast Notifications: Colored confirmation when rating characters
- Smooth Animations: Polished interactions throughout
- Touch Drawing: Natural finger/stylus input on canvas
- Responsive Layout: Optimized button sizes and layout for mobile
- PWA Ready: Can be added to home screen for app-like experience
Visit: Character Cram
-
Clone the repository:
git clone https://github.com/J-Wass/charactercram.git cd charactercram -
Start a local server:
python -m http.server 3000
-
Open http://localhost:3000 in your browser
- Select Difficulty Level: Choose from Novice to Master based on your Chinese proficiency
- Read the Prompt: Study the pinyin pronunciation and English definition
- Draw the Character: Use mouse or finger to write the character on the canvas
- Show Answer: Press spacebar or click "Show Answer" to see the correct stroke order
- Rate Difficulty: Use keys 1-5 or click buttons to rate how difficult the character was
- Repeat: Continue practicing with the spaced repetition algorithm
- Frontend: Pure HTML5, CSS3, JavaScript (ES6+)
- Canvas API: For character drawing and stroke order display
- Local Storage: For progress persistence
- Responsive Design: CSS Grid and Flexbox
- Touch Events: Full mobile device support
charactercram/
├── index.html # Main application
├── app.js # Core application logic
├── style.css # Styles and responsive design
├── chars_data.js # Embedded character data (9900+ characters)
├── chars.json # Raw character data
├── gifs/ # Static Media (1000+ files)
└── README.md # This file
The app includes 9900+ Chinese characters with:
- Character: The Chinese character
- Pinyin: Romanized pronunciation
- Definition: English meaning
- Frequency Rank: Usage frequency in modern Chinese
- HSK Level: Chinese proficiency test classification
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Stroke order GIFs sourced from stroke order databases
- Character frequency data from modern Chinese text corpora
- HSK level classifications from official Chinese proficiency standards
Happy Learning! 加油! 🀄