【第17道咕嚕咪：從一份簡報，到可以看、可以玩、可以聽的韻母網頁】

 (記錄「國語發音偵探所：聲母篇」網頁製作過程❤️)

「ㄨ的舌頭位置在哪裡？嘴唇是圓的，還是展開的？」

以前上「國音及說話」的韻母課，我會用簡報說明，再請學生實際發音，感受舌頭和嘴唇的變化。這次，我想再往前走一步：能不能把簡報變成一個網頁，讓學生自己操作、練習，答完題目後還能看圖、聽示範？

於是，小金老師和小兔(我的chatGPT)一起開始製作「國語發音偵探所：韻母篇」。

◾第一步：先決定，學生要學會什麼。

我先提供「國音韻母介紹與練習」簡報，讓小兔依照教材整理內容。

網頁的學習重點有三個：

- 舌頭的位置：前、央、後。

- 舌位的高低：高、中、低。

- 唇形的圓展：圓唇、展唇。

例如，ㄨ是單韻母，發音時舌頭靠後、舌位高、嘴唇收圓。

我們也保留簡報中的四種分類：單韻母、複韻母、聲隨韻母、捲舌韻母，讓網頁內容和課堂教學相互配合。

◾第二步：把教材變成可以自己作答的練習。

我們先做了「舌位與唇形」和「韻母分類」兩種測驗。

學生看到韻母後，可以先自己發出聲音，再選擇答案。按下「確認答案」，網頁就會顯示結果與說明。

製作過程中，我把舌位高低原本的「半高、半低」選項合併成「中」，讓學生先掌握高、中、低的基本差別。

後來又加上：七個單韻母答題後，右側會出現對應的觀察圖，方便學生一邊看答案，一邊確認位置。

◾第三步：讓圖上的符號動起來。

只有文字，學生可能還是不容易想像。

所以，我們加入「韻母觀察室」，讓學生點選韻母，直接看圖上的變化。

點選單韻母，對應的標示就會放大，再用螢光黃色外框凸顯出來。

點選複韻母，則用箭頭呈現發音的移動方向。例如，依簡報的教學表示，ㄞ從ㄚ滑向ㄧ，ㄠ從ㄚ滑向ㄨ。

聲隨韻母也加入藍色的鼻音標示，呈現從元音移向鼻音韻尾的路徑。

這些圖不是一次就完成的。我們陸續調整ㄚ的央舌位置、ㄝ與ㄛ的高度，也把原本不明顯的箭頭尖加大，讓學生清楚看見「從哪裡出發，往哪裡移動」。

◾第四步：補上看圖時需要的小提醒。

舌位圖裡的「前、後」，學生一開始可能會看反。

因此，我提供一張口腔側面圖，放在所有韻母觀察圖的左下角，下面寫著：「臉朝向你的左邊」。

這個小提醒，可以幫助學生把圖上的位置和自己的口腔連起來。

我們也調整了電腦版的排列：左側看舌位圖，右側點選四類韻母，下方再放單韻母總表，讓畫面更容易閱讀。

◾第五步：加入小金老師的聲音。

看得懂，還要聽得到。

我錄製並提供16個韻母音檔，再依照檔名，配對到每一個韻母。

接著，新增「16張韻母卡片」。學生點開卡片，就能看放大的觀察圖、讀說明，再按「聽聽看」，聽小金老師示範。

再按一次可以停止，離開卡片或切換單元時，聲音也會停止。

原本的簡報，就這樣逐漸變成可以看、可以操作，也可以聽的學習工具。

◾第六步：邊用、邊看、邊修正。

網頁完成後，還有很多細節要處理。

我提供小金老師與企企鵝的角色圖，後來改用兩人的合照，再去除背景，讓人物自然融入網頁。

我們也加入「小金老師FB」按鈕、點擊網站名稱返回首頁的功能，以及頁尾的教材設計署名與累積瀏覽人次。

過程中，也曾遇到「16張韻母卡片點不進去」的問題。找到程式錯誤後，再修正並檢查單元切換、卡片開啟與返回功能。

最後，我們把網頁、圖片和音檔整理成ZIP，並附上Netlify發布說明，方便之後搬到其他平台使用。

------

這次合作，讓我更清楚看見教師和AI各自的工作。

我負責決定學生要學什麼、核對發音內容，並從教學角度提出修改。

小兔則協助把這些想法轉成網頁，處理版面、互動、圖片和音檔的連接。

整個過程，就是一次次地提出想法、做出來、實際查看，再修改。

從「這裡應該往右一點」、「箭頭要更明顯」，到「學生答完後，應該能看到什麼」，每一個小調整，都讓教材更接近學生的學習需要。

一份簡報，因此多了一種使用方式。學生也多了一個可以自己探索聲音的地方。

------

【後記】

製作網頁的前提是：要先有內容、內容、內容，網頁只是形式，老師要很清楚自己的教學目標、教學設計與教學評量分別是什麼。

小金老師在這個單元的教學目標就是「第一步：先決定，學生要學會什麼」，教學評量則是「第二步：把教材變成可以自己做答的練習」，其他的都是教學設計，就是幫助學生達到目標的方法。

不難，真的不難，小金老師學得會，你也學得會！

#國音及說話

#小金老師的教學日誌

#小金姐姐與AI的對話