教師進入課程

教材編譯完後，我們就可以開始上課了。在課程之前，老師必須先進入課程 管理介面，將要開啟的課程狀態修改成上課中，而後才能開始上課。

圖 4-4-1 進入教室

點選課程應用裡的進入教室，會看到現在所有的課程（圖 4-4-1），這裡僅

出現自己的課程。點選要進入的課程，如果未開放則無法進入（圖 4-4-2），若 課程開放登入時，點選後會顯示課程密碼（圖 4-4-3）。

圖 4-4-2 無法進入教室

圖 4-4-3 輸入課程密碼

教師總共兩種介面，一個是簡報模式另一個是批改模式。以下是簡報模式的 操作介面（圖 4-4-4）。

圖 4-4-4 簡報模式

一、上下頁切換鍵：

最左右邊是切換上下頁，可以由此處點選控制，若是第一頁則無法在往前上 一頁，最後一頁的表現則反之，若系統點選到最後一頁，則無法在繼續點選，只 能點選 Exit 離開系統（圖 4-4-5），此時也會將今日的出席率一併記錄下來，點 選 Exit 時則代表儲存出席率，點選送出後是無法再進行修改，除非課程重新在 跑到最後一頁。

圖 4-4-5 課程最後一頁

二、快速轉頁：

最右下角是轉頁和課程離開（圖 4-4-6）；點選轉頁開來後可以看到此課程 的所有跳頁清單，點選後立即轉頁。倘若選擇了課程離開，就是單純離開課程，

同時不儲存教學出席率。此外，為了方便知道現在在哪個頁面，系統也特別加上 顏色註記，幫助老師了解當前頁面。

圖 4-4-6 跳頁畫面

三、教材內容：

最上方可以看到課程表頭和開課老師，其次中間的地方就是您的教材內容。

教才內容也會依照老師設定的題目，會有不同的樣貌出現。

A. 一般教材：

在建置課程中，我們有在文字編輯器裡建置內容，期內容就會在此呈現。

倘若老師有預先做好電子白板，也可以點選開起電子白板即可載入。這裡的 電子白板，有別於建置教材的電子白板；教學使用的電子白板，可以和學生 作畫面即時的同步，開啟電子白板後，瀏覽器每六秒會自動刷新一次畫面（圖 4-4-7），將手寫圖片轉成 Bas64，接著透過 AJAX 的技術儲存到伺服器中；

學生端，若開啟電子白板後，則每兩秒透過 AJAX 的方式截取一次畫面。

圖 4-4-7 授課畫面

電子白板使用 HTML5 的 CANVAS 元件，系統在此優化線條及透明度，

甚也將行動裝置上的裝置行為，一併掛上去（Touch），使用行動裝置亦可以 與電腦版達到一樣的效果。另外，系統也提供以下的功能

7. 固定色票：

點選色票後，筆刷會自動換色，系統提供以下色票方便老師使用（圖 4-4-8）。

圖 4-4-8 色票顏色

8. 筆刷大小：

點選筆刷大小，可以調整筆刷的粗細度，若點選橡皮擦時，同時也 調整橡皮擦的粗細度，粗細共分 6 級（圖 4-4-9）。

圖 4-4-9 筆刷寬度

9. 透明度調整：

透明度調整，系統共分 100%無透明每往下 1 級則減 10%，點選後 筆刷透明度則切換，搭配橡皮擦使用，也可以對顏色做相對應的擦 除（圖 4-4-10）。

圖 4-4-10 透明度調整

10. 橡皮擦的功能：

橡皮擦也可以與筆刷一樣調整大小，同時也可以搭配透明度，做需 要擦除的範圍；點選 Eraser 後，按鈕便成綠色，這時滑鼠移到想要 擦除的地方，即可擦除（圖 4-4-11）。

圖 4-4-11 橡皮擦按鈕

11. 方框模式：

點選矩形後，按鈕會便成綠色，則代表起動了方框功能（圖 4-4-12）。 方便老師直接將重要的地方直接框選起來（圖 4-4-13）。

圖 4-4-12 方框功能

圖 4-4-13 將畫面框選起來

12. 點選清除白板記錄：

點選清除白板的按鈕後，系統會告知您是否需要刪除，按確定紐後 則會將伺服器上的畫面直接清除，且無法復原。

B. Youtbe 影音播放：

Youtube 教材最為簡易，點選影片播放，即可撥放影片。系統也將 Youtbe 介面設定成白色樣式，讓 Youtbe 看起來可以比較亮眼。若影片支援 720P 以 上，也可以透過 Youtbe 右下腳的齒輪工具，調整畫面的品質。點選放大框 後，也可以進入全螢幕模式（圖 4-4-14）。

圖 4-4-14 Youtube 控制介面

C. 單/複選題以及投票題：

單複選題、投票題的題型是依照老師建立資料時，就決定此題型樣貌。

在建立完後，系統預設將可作答狀態指定成無法作答狀態（圖 4-4-15）。老 師必續點選起動作答，當起動作答後，學生才可以開始答題。這是為了防止 有些學生預先做答而設計，同時也可以知道學生現在真實的學習狀態。另外，

老師亦可以預先告知學生教學密碼，讓學生先溫習教材，到了上課時再答題，

這也達成翻轉教室的目的。

圖 4-4-15 單選(多選、投票)題

點選開放後，老師可以依照自己的時間開放給學生看正確答案（圖 4-4-16）。當點選正確答案後，系統除了會帶入該題的答案之外，也會將答 案補充說明也給一併帶入，方便老師在答題後做簡單的解說（圖 4-4-17）。

當老師看到答案統計的介面裡，學生都答題差不多時，就將答案給關閉，如 此學生便無法再繼續做答。這除了讓學生有參與感之外，對於沒有來課堂的 學生，也不會亂答題。當然老師也可以將題目啟動後，就不做關閉的動作，

這也是可以的。

圖 4-4-16 顯示答案

圖 4-4-17 顯示答案補充說明

D. 簡答題：

進入簡答題時，老師的功能非常單純，僅告知學生題目而已。

圖 4-4-18 簡答題

下方只有開關作答功能兒已，一但啟動，學生才有辦法做答。作答完畢後一

樣可以進行關閉的動作。

進入批改模式：

老師除了可以使用電腦播放簡報之外，也可以透過行動載具進入批改模式，

同時可以看學生現在的學習狀態。進入批改模式後，可以看到這裡只列出選擇題 與簡答題。

圖 4-4-19 批改模式

這裡的設計，是針對老師方便修改學生作答狀態而設計的畫面。上方可以看 到，老師可以想要開啟的題目，做快速控制。除此之外，老師也可以看到學生針 對簡答題作答的狀態，一但學生送出時，老師就會在該畫面看到學生答題狀態，

並不會將此畫面推送到簡報模式上。學生作答總共可以使用兩種方式，一種是純 文字檔，另一種是使用 Canvas 繪圖工具。老師一但看到學生作答狀態，老師可 以直接點選學生是否做答正確。點選後則無法修改，也無法反悔。當答案批准後，

則會顯是批改狀態（如圖 4-4-20）。

圖 4-4-20 批改模式- 批改狀態

送出之後，同時也會將按鈕給鎖定起來，無法在進行修改（如圖 4-4-21）。

圖 4-4-21 批改模式- 送出批改狀態

四、答案統計、學生心情和出席統計：

介面最右邊，從右上到右下，分別是答案統計、學生心情和出席列表。若學 生對此課程有任何的喜好，會在這個頁面上顯示。

A. 答案統計：

當教材題型為選票題或多複選題時，此列表會截取在伺服器上的數據，

透過 AJAX 的方式回傳到老師的介面上（圖 4-4-21）。老師不需要額外 在開介面，做重複做刷新的動作，即可知道現在學生對答案的答題狀況；

若發現多人答錯時，也可以立即做教學補充，提供給老師知道，掌握學 生現場的學習狀態。

圖 4-4-21 學生答案統計

B. 學生心情統計：

畫面右方的心情統計，是顯示學生對課程的了解狀態，這是一個自願性 投票，學生也可以選擇不投票。當學生送出投票時，系統也會透過 AJAX 在 此 DIV 做即時更新（圖 4-4-22）。

圖 4-4-22 學生學習心情

C. 出席列表：

老師可以看到自己和學生登入此課程的出席狀態。出席狀態除了有登入狀態 之外，也有記錄登入時間，可以方便老師做點名的動作。由於，系統並沒有撰寫 到課程與人員的事件掛勾，所以僅簡易表示已登入此課程的師生。但該課程謹記 錄該課程已登入人員，由於人員是無法使用不同的瀏覽器登入，或是同一種身分，

登入兩種課程，所以在資料庫中，只會記錄真實登入人員。

而老師，下課後，必須到課程管理裡建立課程，把該課程狀態改成已下課，

如此學生便無法在進入課程裡（圖 4-4-23）。

圖 4-4-23 課程結束 2