Explanation of Stroke Order Animations


Ⅰ. Stroke Order Demonstration

When the web page of a character pops up, users will hear the pronunciation of the character and at the same time see an animation of its stroke order.

The buttons beneath and beside the animated display are as follows:

  1. Play/Stop:
    To switch between playing the pronunciation of a character and stop.
  2. Pause/Play:
    Use this button to control an animation.
  3. Display Strokes One-by-One:
    With each click, only one stroke is shown in accordance with the stroke order of a character.
  4. Replay:
    To start an animation once more again.
  5. Grid Lines:
    Use this button to display or hide the crisscrossed dotted lines within the animated display.
  6. Speed:
    To adjust the speed of an animation to Fast, Medium, or Slow.
  7. Full-screen Mode:
    Click to open a full-screen window.
  8. Add to Vocabulary Workbook:
    Add a character to Vocabulary Workbook.
  9. Pronunciation:
    To hear the pronunciation of a character again. Users must turn on the speakers of their computers or other audio devices.
  10. Stroke-order Tip:
    To display the complete stroke order of the character in question.
  11. Advanced Information:
    Users may find more information about a character by clicking “Advanced Information”. The more detailed information is based upon the following reference books published by the Ministry of Education: Concise Mandarin Chinese Dictionary, A Handbook of Chinese Radicals and Teacher’s Handbook of Standard Form of Chinese Characters. For instructions on how to use it, check “Advanced Information”.
  12. Go to Stroke Order Practice.
↑top
Ⅱ. Stroke Order Practice

Use a mouse or any other input device, such as a drawing tablet, to draw the strokes. Turn on the speakers of your computer to listen to the instructions on drawing.

Step 1
The mouse icon will turn into a virtual pen when it is within the animated display, and you may start practicing drawing strokes.

Step 2
When practicing stroke order, drag the mouse within the outline of a stroke as shown below.

Step 3
Only when the user draws a stroke correctly can he or she continue. If a stroke is not properly drawn or if the user does not draw a stroke in correct order, then an error signal (shown below) will appear, together with an audio message “Oh oh, try again.”

Step 4
Upon correctly completing the strokes of a character, the user will see a correct signal (shown below) together with an audio message “Bravo! Well done.”

The buttons beneath the animated display are as follows:

  1. Stroke-order Hint:
    Click to highlight the next stroke. The user must finish drawing a stroke in order to proceed to the next.
  2. Automatic Hints :
    Click to make the system automatically highlight the next stroke in pink. The user must complete a stroke before the next stroke is highlighted. Click the button again to stop this function.
  3. Reset :
    To start practicing the character again.
  4. Grid Lines :
    Use this button to display or hide the crisscrossed dotted lines within the animated display.
  5. Full-screen Mode :
    Click to open a full-screen window.

Stroke-order Hints:
If the user is uncertain about the next stroke when practicing drawing strokes, he or she may click “Stroke-order Hint” or “Automatic Hints” in order to proceed to the next.

Grid Lines:
Use this buttonto display or hide the crisscrossed dotted lines within the animated display.

Full-screen Mode:
Use the full-screen modeto open a full-screen window.

↑top
Ⅲ.Bopomofo Workbook

Click “Bopomofo Workbook” from the tool bar on any of the web pages other than the home page.

Step 1
Select the Bopomofo symbol(s) you want to practice.

Step 2
Click “Download Workbook”.

Step 3
Select “Open” or “Save”to open or save the file (.pdf).

Ⅳ. Vocabulary Workbook

Click “Vocabulary Workbook” from the tool bar on any of the web pages other than the home page.

Step 1
Select the size of grid cells. System default is set for use by “lower-graders”.
(Note: The size of a cell designed for lower-graders is 2 cm x 2 cm, and the adjacent cell for phonetic symbols is 2 cm long and 0.8 cm wide. The size of a cell designed for the upper-graders is 1.5 cm x 1.5 cm, and the adjacent one for phonetic symbols is 1.5 cm long and 0.5 cm wide.)

Step 2
Select the grid paper with cells for phonetic symbols. System default is set without the design of cells for phonetic symbols.

Step 3
There are two ways to add a character to the Vocabulary Workbook:

  1. Choose a character from the list of search results;
  2. Key in a desired character.

Step 4
Click “Download Vocabulary Workbook” button.

Step 5
Select “Open” or “Save” to open or save this file (.pdf).

If the input character is not included in the list of frequently-used characters established by the Ministry of Education, the following information will appear:

Note: The current version of this learning program is unable to produce phonetic spellings for the characters proper given in the Vocabulary Workbook. For pedagogical purposes, users may choose and print practice sheets with boxes for phonetic symbols and fill in phonetic spellings by themselves.

↑top
Ⅴ. Teaching Resources

Users may select any of the following to make use of the resources provided.

1. Copy Animation HTML Syntax

Step 1
Select “Copy Animation HTML Syntax” to enter the page.

Step 2
Key in the character of which you want to duplicate the animation syntax and then click “Submit”.

Step 3
Click “Copy” and the desired HTML syntax is duplicated.

2. Download Stroke Order of a Character

Step 1
Select “Download Stroke Order of a Character” to enter the page.

Step 2
Key in the desired character(s) or Bopomofo symbol(s). You may key in at most 10 characters or symbols at a time.

Step 3

Click “Download PNG file”to download PNG file format.
Click “Download PDF file”to download PDF file format.

3.Download Frequently Used Characters

 Click to download (4808.pdf).

4.Download Character Layouts

 Click to download (6063png.zip).

5.Download Basice Rules of Stroke Order

 Click to download (stroke_guide.zip).

6.Download Standard Script Font File

 Click to link to the pertinent website to download the font file.

7.Link to Handbook of Bopomofo Symbols

 Click to link to the pertinent website.

8.Stroke Order Animations Search Engine

 by installing a search engine, users may be able to key in the character to be looked up in the web address inpit box (in the upper part of a webpage) to make a direct link to the character’s stroke-order animation

Download the installation and use instructions pdf file.

↑top