筆順工具-6

2017-03-15
MDBG字典的筆順動畫移到不同的檔案夾去, 所以code又改了。現在Google Photos改版後, URL都很難用, 將最後stop的URL改成:http://westfieldnj.com/ucs/ChineseDiggerQRcode.png, 謝謝。

2017-03-25
很高興, 終於找到另一個字典提供中文字的聲音。發現不少需要簡體字筆順的老師們。
====
筆順重要嗎? 可能對中文為母語的人和華語老師們, 是教學重要的一環。以前是靜態的, 現在是動態的, 希望學生覺得好玩。

學生覺得有用嗎? 我知道的一些海外學生, 對筆順的興趣不大。 想想自己小時候念書時, 課文後也有生字的筆順, 有誰真正好好的看過它們? 寫多順手就會了。

台灣教育部提供的筆順工具沿用舊的big5, 而不願更新成unicode, 顯然是不想支援簡體字, 只好自力救濟啦! 如果你不用簡體字, 請看筆順工具-4或其他的筆順工具。

改寫了University of California San Diego的教授David K. Jordan的程式, 讓華語老師們可以很容易的使用(剪貼)繁簡字的筆順練習。

這些文字動畫圖比教育部新做的flash來的好, 因為它們不僅有筆順, 還用不同的顏色標出了部首。尊重字典站的所有權, 請不要亂下載動畫字。

在下面的表格, 輸入想要的的字(繁簡均可), 按"process", 然後將第5格裡全部的code貼到網頁即可。

stroke generator




★Chinese to Unicode Stroke Code Generator★


The following code was modified from Chinese to Unicode Converter. Please refer to the original document for its limitations.



Character Input Box:
Hex Value(s):
Decimal Value(s):
Web Cut & Paste:
Stroke code
for web pages:

Actions:
Confirmation:





下面是貼出的生字筆順練習樣本, 繁簡字可混合用, 部首還用不同的顏色標出:

Chinese Vocabulary




stop

*Click to generate your own vocabulary. (the animation characters are from http://www.mdbg.net) ← 【在貼code時, 請把這行留著, 如果有他人喜歡, 才知道從哪裡來的, 謝謝!】
補記:
1. code並沒有預設字體及其大小, 完全根據網站模版的的指令來顯示
2. 有些部落格會自動加 new line, 如想要字都在同一行的話, 要將他們放在同一行。
3. iframe 的框架設定較大, 因為 browsers 顯示的位置不相同
4. 發現無名小站好像不接受 iframe
5. 發現在 *.wikispaces.com 上, 不接受a tag有id attribute. 所以得將下列紅色部分刪除: <a id="xxxx" href=.... (xxxx是4位的hex code, 全部有id=的地方都要刪除)
6. 筆順播放無法調整快慢, 因為是gif動畫

✮✮✮如果喜歡這份工具的話, 記得幫作者按一個文章上面或下面的廣告鼓勵一下。✮✮✮


實驗在Blogger上加聲音 NOTES: 2017找到另一個字典中可以加聲音。

參考: HTML Sounds / Audio

補記:
1. 2017-03 如果想加聲音, 試試下面的Sound Generator. 在input box輸入漢語拼音, 用1234表示音調, 以及用空格分開字。For example: lao3 shi1 hao3 tong2 xue2 bang4
2. 在同一網頁上, 最好只用一組字, 因為字的筆劃只會顯示於在同一個格子. 如果需要放很多組, 就需要手動修改格子的名稱。



Chinese Vocabulary Pinyin and Sound

lao3
shi1
hao3
tong2
xue2
bang4

*Click to generate your own vocabulary.

2010-09-21 initial post, 修改多次。
2015-05-07
謝謝chinesepkclass網友告知, 原來的筆順字不見了以及下列聲音的程式碼都無法使用, 尋找如何跟原來擁有者聯絡, 使用幾個方式, 一個多月都沒有得到任何回音。

2015-06-28
終於在MDBG字典中, 找到了可以使用的筆順字, 但是取字的方式不同, 需要修改編碼, 目前工作忙, 還沒有時間修改和測試generation scripts, 請朋友們見諒。

2015-11-24
終於有時間改編程式碼, 使用了MDBG字典中的動畫。請有需要的老師們刪除舊的code, 重新generate需要的字, 改貼新產生的code, 才能看到正確的筆順動畫字。聲音的部分也無法使用, 尚未有代替版。


Learn the strokes of Chinese characters, generate stroke image and sound html code for web pages.

2017-10-17 下列網址, 只要把中文部分換掉, 即可使用和下載聲音檔. 謝謝連老師分享。
https://translate.google.com/translate_tts?ie=UTF-8&client=tw-ob&tl=zh-TW&q=你好棒

有關系列: 筆順工具-5, 自製生字簿

41 comments :

Henny said...

推推推,這個實在是教簡體的老師的一大福音,謝謝老師:)

又慎 said...

老師
請問我按您的網址
但是出來的頁面沒有語法
不知道是哪裡出錯了呢?
謝謝~
http://weber.ucsd.edu/~dkjordan/resources/unicodemaker.html#

ChineseDigger said...

那網址是我修改的原稿, 當然不會有我新加的東西啊! 在此篇上的才是我的東西。

米娜的媽媽 said...

謝謝老師!這個工具很棒. 但是我在 post 上我的blog時, 要給學生看筆順的中文字好小. 例如:第1格我輸入"老師好", 然後 blog 的文章上的老師好很小, 學生不易找到再 click. 如何把字改大呢? 謝謝!

ChineseDigger said...

to 米娜的媽媽,

不知道妳的部落格在哪?

這工具沒有設定字的大小, 依照每個部落格的模版設定來顯示。妳把html code放上後, 是否可以回到普通版面編輯字的大小呢?

ChineseDigger said...

加上一份貼出的樣品

米娜的媽媽 said...

老師太厲害了!這麼快就回答我的問題. 我用無名小站有點頭痛了!其實我在全球華文網也有帳號, 可是不知道如何開啟我的blog.

ChineseDigger said...

請參考2010華文部落格建置(影音教學), 十分清楚喔!

米娜的媽媽 said...

謝謝老師, 問題解決了!我也用blogger試做, 效果很棒!

Meichun Jones (Jeannie) said...

哇...超棒的工具.感謝老師分享!!

Frances Fu said...

感謝!非常好用!

Yamila said...

謝謝ucs老師的分享!真是太棒的工具了。

筱玲

Yamila said...

usc 老師:

請問您的"實驗在Blogger上加聲音"是如何做的呢?

謝謝!

筱玲

ChineseDigger said...

筱玲,

拖了好久, 一直都沒有真正的去做, 被妳一問, 趕快再去看一下怎麼生產程式碼。

在本文最後, 加了聲音的實驗, 將生產出的程式碼, 希望能成功。提供者還未正式開放, 無法保證輸入的漢語拼音一定有相對應的聲音檔案。

馬志芳 said...

真的好棒的工具,對老師真的很好用。謝謝您這樣用心的幫大家。深深一鞠躬。

Yamila said...

謝謝您又加了聲音的解說,感激感激! ^_^

筱玲

Harry_goh said...

请问,我如何把笔顺的速度放慢?

因为我得和学生一起书空笔顺,笔顺的速度不可以行太快,否则学生跟不上。谢谢。

ChineseDigger said...

很抱歉, 這是製作好的動畫圖, 無法調整速度, 請用其它的工具。

Harry_goh said...

没关系,无论如何,谢谢你。
你的笔顺真的帮了我很大的忙。感恩。(",)

Unknown said...

謝謝老師:我很喜歡妳的筆順工具

Judith said...

謝謝老師提供的筆順工具,非常方便好用!
更感謝的是你對華語教學部落格的用心經營,我每次上來都有滿滿的收穫.

ChineseDigger said...

多謝捧場喔!

吴荣顺1 said...

超级棒哦

ChineseDigger said...

謝謝吳老師來訪.

hklim said...

老师,
为何中文词汇无法在iframe中出现,反而跳出我的blog并在新的websheet出现。

我的blog是建立在http://www.schoology.com

请问要如何修正,谢谢。

ChineseDigger said...

to hklim 老師,

每個平台, 都有些不同的功能和限制。很抱歉, 我沒有使用過schoology的部落格, 無法告訴您怎麼修改。

Tatjana said...

請問如何將此工具加到power point檔?

謝謝

ChineseDigger said...

to Tatjana,

比較容易的是, 將網路工具的超連結加入Power Point 裡。在中文字筆順最下方, 可以自己在power point製作。

chinesepkclass said...

老師您好:
最近字體的連結不見了,
請問老師知道原因嗎?

ChineseDigger said...

To: chinesepkclass...

我也不知道為什麼不見了。
大概是那個字體的網站被關掉或是不准別人用。Got denied access error message.

我不知道是否能找到管理員, 只能來試試看嘍。

謝謝告知!!

chinesepkclass said...

謝謝老師!

Tiếng Trung Tiếng Hoa said...

老師好!
yourhanzi.com被hack掉了。
請問還有別的像yourhanzi.com的網站嗎?

ChineseDigger said...

http://chinesedigger.blogspot.com/search/label/Strokes 有其他的筆順網站. 只是目前沒有類似的作法。

網路上越來越多各樣的筆順站, 有些得付費。

因問您問, 剛找到一個字典網, 有animated gif漢字檔案, 寫了email去問, 我是否可以使用他們的動畫字。

如果回音是可以使用的話, 會找時間來修改程式。

ChineseDigger said...

原來的動畫字網站消失, 後來找到了MDBG字典的動畫字; 利用感恩節假期, 修改了程式碼, 希望對老師們有用。

Anonymous said...

老師,謝謝您持續更新這個好用的工具!真是非常感激!!

chinesedigger said...

多謝來訪, 再測試後, 發現要把frame放在生字上方, 不然新的Chrome版本不會顯示字, 修改了.

Truong Pham said...

老師好!程序是不是又有問題了。按Process了都沒看到code。

ChineseDigger said...

To Truong Pham,

謝謝告知, 發現了問題, 是在測試blogger的設定造成的問題, 還原了blogger的一項設定。
現在應該可以用了, 請再試試。

Cần Thơ Tiếng Hoa said...

老師好!好久不見,您最近好嗎?我發現http://www.mdbg.net/chindict/rsc/img/stroke_anim/20320.gif網站又出問題了。筆順演示動畫不再顯示了。

Cần Thơ Tiếng Hoa said...

老師好!筆順動畫的鏈接有了變化,所以以前所做的筆順現在都不能打開。我查看了之後知道要換一下網址。要把http://www.mdbg.net/chindict/rsc/img/stroke_anim/21738.gif裡面的chindict換成chinese才可以打開動畫的gif檔。

ChineseDigger said...

謝謝告知, 網路就是如此, 常常會有變動。查了一下, 發現他們換了網址.
http://www.mdbg.net/chindict/rsc/img/stroke_anim/20320.gif
要改成
https://www.mdbg.net/chinese/rsc/img/stroke_anim/20320.gif