教師建立課程

教師登入介面中（圖 4-3-1），系統使用 QRcode 自動產生器，只要行動窄 具起動相關 QRcode 的 APP，就可以使用行動載具方便登入；相關的 APP 很多 在 Android 裡面 QuckMark 就是最常用的（圖 4-3-2）。另外，使用不同的瀏覽 器登入同一個帳號時，是無法登入本系統；系統之所以做此考量，是因為怕多人 登入同一個帳號時，容易將資料搞混。

圖 4-3-1 系統登入

為了方便學生登入後，可在畫面右上角點選 QRcode，不需要再額外登入系 統才能看（圖 4-3-2）。

圖 4-3-2 系統登入後的 QRcode

教師登入後，可新增修改查詢所有學生的帳號密碼（圖 4-3-3）。這裡較特 殊的設定是常用課程密碼。在教師忘記密碼同時，可以將常用密碼設定給課程做 登入使用（圖 4-3-4）。在進入課堂時，老師可以自己預先決定是否要將密碼提 早告訴給學生知道，還是在課堂時才告訴學生。

圖 4-3-3 人員管理列表

圖 4-3-4 人員管理介面

接著進入建立課程，老師登入後是無法看到其他老師的課程教材，所有的課

程都是該登入老師的課程（圖 4-3-5）。若想要新增課程，可以在下方直接新增 課程分類與課程名稱；上方則是顯示現在老師已創建的課程的清單，在清單旁邊 我們可以看到課程開啟的狀態。

圖 4-3-5 建立課程列表

畫面上方，我們可以看到課程分類目錄；當老師新增一筆課程項目時，系統 也會要求您輸入課程目錄，同樣一個目錄裡可以無限新增課程子項目（圖 4-3-6）。 看到您建立的課程清單後，點選項目即可進入編輯。

圖 4-3-6 同一目錄產生多個子課程

從這裡可以直接帶入在帳號管理裡設定的常用的密碼，而課程狀態也是從這 修改；選擇未開放和已下課，學生都無法進入課程。密碼相關設定，系統採用 MD5 加密（圖 4-3-7），防止他人容易登入課程系統。

圖 4-3-7 課程管理介面

另外，介面下方可以自行勾選想要加入的學生。點選加入後才，學生才可以 看到該課程（圖 4-3-8）。

圖 4-3-8 課程管理介面

進入建立教材（圖 4-3-8）後，我們可看到，上方有快速分類搜尋，方便老 師可以快速切換自己的分類清單；由於系統資行庫並無設計分類，所以系統將一 樣的分類名稱當作系統分類使用，方便老師管理自己的課程。

圖 4-3-8 課堂列表

建立好課程之後，我們點選課程管理的建立教材。這裡會出現老師剛剛創立 的課程教材，上方一樣有快速搜尋。當您選定好課程目錄後，就可以清楚看到，

該目錄下面的所有課程，選定要編輯之課程後點選進入（圖 4-3-9）。

圖 4-3-9 選取課程

進入後，我們可以清楚看到一筆一筆建立好的課程清單，每筆資料就如同 PPT 一般，一筆資料代表著是一頁 PPT（圖 4-3-10）。新增題目時，直接在畫面 下方輸入標題和選定教材類型，系統預設的順序是直接抓最後一筆順序，若新增 一樣的標題和頁數，系統會告知順序重復，且無法建立教材（圖 4-3-11）。送出

時，也會直接幫您帶到編輯的最後一頁，方便您直接進入編輯。

圖 4-3-10 課程編輯列表

圖 4-3-11 課堂順序重復

進入編輯區，可以看到教材類型有分以下類型:

1. 一般教材模式 ：

一般教材設定較為單純（圖 4-3-12），系統開發使用的套件是搭配 ckedite 和 ckfinder 一起做使用。頁面中，可設定題目與多功能文字編輯器；文字編 輯器除了可以插入單張圖片，也支援多張圖片上傳的功能；也可以將外部連 結做插入的功能等等，介面如同 Office Word 一樣簡單。

圖 4-3-12 一般教材

當我們點選插入圖片時，點選瀏覽伺服器端（圖 4-3-13），我們可以看 到，儲存過的圖片也會在目錄內一併被使用（圖 4-3-14）。

圖 4-3-13 瀏覽伺服器端

圖 4-3-14 文字編輯器的圖片瀏覽

對於第一次使用文字編級器的老師，很容易上手。圖片不只可以調整大小之

外，也可以做等比的縮放功能，也可以做簡易的靠左靠右對其；或者也可以將圖 片設定一個超連結的功能；對於已編輯過的圖片，我們也可以對圖片按右鍵再進 入編級的功能（圖 4-3-15），這些都是 ckedit 基本可以有的功能（圖 4-3-16）。

圖 4-3-15 按右鍵可以繼續編輯圖片

圖 4-3-16 ckedit 圖片編輯

對於有些沒有安裝 Photoshop 編輯軟體的老師，系統上方也提供了一個 Pixlr 連結網址 http://pixlr.com/editor/ 方便老師在網路上直接做編輯（圖 4-3-17）。Pixlr 基本上就是一個用 Flash 開發的編輯器。功能十分強大，除了可以改圖片大小，

也可以做剪裁、填色、輸入文字、去紅眼效果，此外也可以調整圖片顏色；還有 多種濾鏡，高斯模糊、銳化、馬賽克…功能非常齊全，甚至讀取時，也可以直接 貼上超連結，還有其他帳號同步整合，可以直接連到 FB 照片或是 Picasa 相簿等 等。

圖 4-3-17 Pixlr 線上圖片編輯器

此外，編輯器的下方有即時內文顯示（圖 4-3-18），除了可以即時顯示上方 編輯的內文外，也可以使用手繪電子白板，減少在課堂上老師寫筆記的時間。在 課程中，系統也會有手繪電子白板的功能，與這裡不同的差距在於，在教才編輯 的手繪電子白板，系統並不會持續儲存，而課堂上的手繪電子白板會持續儲存。

圖 4-3-18 即時內文加上電子白板功能

手繪電子白板提供以下的功能 1. 固定色票：

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

圖 4-3-18 色票顏色

2. 筆刷大小：

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

圖 4-3-19 筆刷寬度

3. 透明度調整：

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

圖 4-3-20 透明度調整

4. 橡皮擦的功能：

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

圖 4-3-21 橡皮擦按鈕

5. 方框模式：

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

圖 4-3-22 方框功能

圖 4-3-23 將畫面框選起來

6. 點選清除白板記錄：

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

2. Youtube 影片模式 :

當我們切換成影片模式，系統提供 Youtube 超連結網址崁入。由於 Youtube 是現在網路上最熱門，也是最普遍同時又是速度最快的影片播放器，所以在 建置系統時就只考慮使用 Youtbe 了。慾想要開起的 Youtube 連結網址先拷 貝起來，到本系統，將剛拷貝好的網址貼上，按下送出鍵後，系統會自動過

濾字串，只留下聯結裡的 ID，提供給課程做崁入使用；儲存後，再進入編 輯，可以看到 Youtube 崁入的示範畫面。

3.單（多）選題和投票題模式

最後是單選、多選和投票題（圖 4-3-24），此頁面不僅可以看到題目輸入 與文字編輯器之外，下方還有可勾選的答案選項，這裡的設定如同選擇題一 般，不僅可以設定答案的項目，也能設定答案。

圖 4-3-24 單/多選控制項

依照題目類類型您可以參照以下設定 單選題：

勾選一個答案時，在課堂中選項就是單選題（RADIO），學生在課堂上 只能選定一個答案作答，無法選擇兩個以上（圖 4-3-25），當答題正確時系 統會依照下方設定的分數累計記分。

圖 4-3-25 單選題

多選題：

勾選二個以上的答案時，在課堂中選項就是多選題（Checkbox），學生在 課堂上可以選定多個答案作答，但答題必須全部答對，系統會依照下方設定 的分數累計記分（圖 4-3-26）。

圖 4-3-26 多選題

投票題 :

若老師在設定答案時，無勾選任何答案，系統自動設定成投票題（圖 4-3-27），而學生在選定答案時，是單選的狀態。且在若老師使用投票題時，

最後一個計分的欄位，會自動上鎖並清除分數計算，無法給予分數。

圖 4-3-27 投票題

在同一個編輯頁面，不管老師儲存哪一種類型模式，只要是儲存過的資料，

都可以任意切換成另一個已儲存的模式資料；譬如在當則是 Youtube 連結，儲存 後您想要換成一般教材，但又想換回來，可以直接切換成 Youtbe，這時資料還 是前次編輯過的資料。儲存後，兩種類型的資料都一併被儲存；但在課程中，每 頁教材表現的方式只展示一種。

簡答題 :

簡答題，老師僅需要列出題目，下方與選擇題一樣有記分。進入簡答模式時，

老師只能手動批改作業，無法自動批改。以下介面為簡答題模式（圖 4-3-28）。

圖 4-3-28 選擇題

完成編輯後，若想要快速重新排列順序，可以直接到該教材管理的頁面，點

選畫面下方的重新排列教材按鈕，即可進入快速排列區（圖 4-3-29）。

圖 4-3-29 選擇題

將順序重新拖曳排列後，按送出的按鈕；即可快速完成全部的排列順序。送 出後，避免資料被竄改，在設計系統時加入防寫入功能，避免事件重複被寫入。