Make your own free website on

I have been studying spoken Mandarin (Standard) Chinese since the Fall of 1995, when I took advantage of some free classes offered by my employer at the time, McDonnell Douglas. I have since left the friendly confines of the United States' number two defense contractor, however I have continued taking the class, which is administered by Fontbonne College but taught by Berlitz. It seems everybody has their hand in this gravy train.

Anyway, I wanted to put some easy vocabulary words on the web for the following reasons:

Fellow student Chuck Taylor deserves much of the credit for this resource; he typed in the original vocabulary lists, loosely based on our weekly lesson plan. I took what he had done (in a spreadsheet) and converted it to JavaScript/HTML. What follows is a somewhat technical explanation of how these pages came to be.

WARNING -- Nerdy computer stuff follows. If this kind of thing makes you sick, or you just want to see the pages, select a lesson from the table of contents on the right.

The Problem

The ISO-8859 Character set, which is the standard used on the Worldwide Web, does not have all of the characters used in the Pinyin Romanization system. Pinyin is a method by which Chinese language words can be written without using Chinese characters [e.g., the background of this image]. While there are other romanization systems, Pinyin is the system officially used in the PRC for teaching and other uses, such as place names. Pinyin uses four different tone marks above the vowels to represent the four tones of the Mandarin Chinese dialect. It is imperative to include these marks to convey pronunciation information.

I wanted a way of writing out our vocabulary words in a machine-independent fashion, so everyone in the class would have access to them.

The First Solution

I sort of designed my own extension to the HTML "language". I wrote a "filter", unpinyin.c, which takes in an HTML-like file [with my extensions], and convert it to 'real' HTML. My extension is as follows;

Designates Pinyin text. Tones are indicated by a tone number following the vowel. For instance,

<pinyin>Wo3 zuo4 fe1iji1.</pinyin>

gets filtered to

<img src="upperw.gif"><img src="lowero3.gif"> <img src="lowerz.gif"><img src="loweru.gif"><img src="lowero4.gif"> <img src="lowerf.gif"><img src="lowere1.gif"><img src="loweri.gif"><img src="lowerj.gif"><img src="loweri1.gif">.

Then, after one creates the appropriate image files for every character, the browser renders this as


and we have Pinyin!

There are a few problems with this approach, however:

The Second Solution

By coding the files in JavaScript, I eliminated all three of the problems (more like annoyances really) with the "filter" approach.

The code to actually generate the HTML for the lesson is now a series of script functions in the parent frame. You should be able to see it by doing a 'View document source' in your browser. This code more or less takes over the functionality of the unpinyin.c filter I had written.

Also, the individual lesson scripts are now much more concise, even to the point of being editable by those with little or no previous experience editing HTML pages. I've Included a sample of the code for the first lesson to show you what I'm talking about.

Chapter = 1;
Words = new Array(6);
Words[0] = new Array("yi2 ba4 yi2zi", "a chair");
Words[1] = new Array("yi2 ben shu1", "a book");
Words[2] = new Array("yi2 quai diban", "floor");
Words[3] = new Array("yi2 zha1ng zhi", "one paper");
Words[4] = new Array("yi2 zha1ng zhuo4zi", "a table");
Words[5] = new Array("yi2 zhi yuanzhubi", "a ball point pen");

I have also created a Do It Yourself page, so you can type in Pinyin using the numeric notation shown above and get real tone marks!