https://github.com/whiteshadow1234/bopomofo_flashcards
📖Website that helps users learn Zhuyin symbols and sounds through interactive, randomized flashcards.
https://github.com/whiteshadow1234/bopomofo_flashcards
bopomofo flashcards mandarin-phonetic-symbols mps nextjs tailwindcss zhuyin zhuyin-fuhao
Last synced: 2 months ago
JSON representation
📖Website that helps users learn Zhuyin symbols and sounds through interactive, randomized flashcards.
- Host: GitHub
- URL: https://github.com/whiteshadow1234/bopomofo_flashcards
- Owner: whiteSHADOW1234
- License: mit
- Created: 2024-10-11T18:45:00.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-02-10T15:23:53.000Z (4 months ago)
- Last Synced: 2025-03-27T21:11:09.495Z (3 months ago)
- Topics: bopomofo, flashcards, mandarin-phonetic-symbols, mps, nextjs, tailwindcss, zhuyin, zhuyin-fuhao
- Language: TypeScript
- Homepage: https://bopomofo-flashcards.vercel.app
- Size: 286 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A simple, responsive web application built with Next.js and React that presents Bopomofo symbols as interactive flashcards. This project serves as a valuable learning tool for both students learning Zhuyin (also known as Bopomofo) and teachers instructing it. It provides a visually engaging and user-friendly way to practice and reinforce recognition of these essential Mandarin phonetic symbols.
## Features
* **Interactive Flashcards:** Click on a card to reveal the corresponding Bopomofo symbol. This interactive element makes learning more engaging for students.
* **Shuffled Decks:** The order of the Bopomofo symbols is randomized each time the page loads, providing a fresh learning experience and preventing memorization based on card order. This is particularly helpful for repeated practice.
* **Categorized Sections:** Bopomofo symbols are divided into three sections: Initials (聲符), Medials (介音), and Finals (韻符). This categorization helps learners understand the structure and components of Zhuyin, making it easier to grasp the phonetic system. Teachers can use these sections to focus on specific aspects of Bopomofo.
* **Visual Feedback:** The last flipped card in each section is highlighted, offering a clear visual cue for the user's progress. This allows both learners and teachers to track progress and focus on areas needing more attention.
* **Clean and Simple UI:** The interface is designed to be clean, intuitive, and easy to navigate, making it accessible for learners of all ages and technical abilities.
* **Responsive Design:** The website adapts to different screen sizes, ensuring a consistent and user-friendly experience on desktops, tablets, and mobile phones.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/whiteSHADOW1234/bopomofo-flashcards.git
```
2. Navigate to the project directory:
```bash
cd bopomofo-flashcards
```
3. Install the dependencies:
```bash
npm install
```
## Usage
This website is designed to be a versatile tool for both individual learning and classroom instruction.
**For Learners:** Use the interactive flashcards to memorize and practice Bopomofo symbols at your own pace. The shuffled decks and categorized sections help reinforce learning and understanding.
**For Teachers:** Incorporate the website into your lesson plans to introduce or review Bopomofo. The clear visual presentation and interactive nature, and responsive design of the flashcards can make learning more engaging for students. Use the categorized sections to focus on specific phonetic components.
1. Start the development server:
```bash
npm run dev
```
2. Open your browser and navigate to `http://localhost:3000` (or the port specified in your development server).
## Contributing
Contributions are welcome! Please feel free to submit issues and pull requests. :smile: