Skip to content

A desktop web application for learning Mandarin Chinese and its character stroke order.

License

Notifications You must be signed in to change notification settings

sigalor/chinese-learner

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

chinese-learner

A desktop web application for learning Chinese and its character stroke order.

Usage

By default, when you execute npm start, the application runs on http://localhost:1275. You can change the port and all other Express settings in the index.js file.

The current characters are cached in client/cache/. At the moment, the client applications needs the server to fetch the stroke order for characters it doesn't know. If you want the page to be static, set the USE_CACHE_ONLY flag to true in client/js/main.js.

If you are interested in how the stroke order is internally represented, enter something like http://localhost:1275/strokeorder/我 into your web browser. A JSON structure will appear which encodes the vector image for each stroke.

The stroke order sequence is courtesy of EON Media Limited. When you visit a page like Chinese Hideout which uses EON's API, the canvas shown is very static and all in all the page doesn't look nice. I wanted to change that, so I reverse-engineered the API so that this project uses SVGs on the client side instead of canvases. Together with CSS3, this makes animating the stroke order so easy that only stuff like transition: clip-path 0.2s; and clip-path: inset(...) is needed for the individual SVG paths.

Live version

Visit sigalor.github.io/chinese-learner to try out this application.

About

A desktop web application for learning Mandarin Chinese and its character stroke order.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published