JSLA 輔助教學工具

本研究實驗使用的教學平台 JSLA(JavaScript Learning Assistant)主要分為三個 部分，第一部分為讓學習者可以線上的觀看或下載教學講義的教學課程。第二部分是 讓學習者可以針對課程練習題或相關內容做留言的實作討論區。第三部分是線上練習 區，供學生線上練習、編寫、執行程式碼。本節會分別針對每一項功能與教學運用作 詳細的說明與介紹。

一、 JSLA-教學課程

JSLA 是以網頁為基礎架構的教學平台，其中包含了教學課程、實作討論區、線上 練習的功能。該平台會讓學生進行個人帳號的註冊，以供紀錄作業的上傳、下載，以 及討論區留言與回饋的狀況，如下圖 3-2。

圖 3-2 為教學系統登入帳戶後的畫面

30

在教學課程裡學生可以在此線上觀看上課的講義，或是下載此課程講義。在此區 可以看到整個教學課程的內容與程序，課程內容包含了 JavaScript 的基本介紹、判斷 式的種類與概念、迴圈的概念、函式的概念、以及期末的網頁專案製作，如下圖 3-3 所示。

圖 3-3 為教學系統教學課程的畫面

二、 JSLA-實作討論區

在實作討論區可以讓學生進行線上的留言，包含針對該練習題的疑問、該課堂中 相關概念的想法、與同儕間的想法互動。留言的內容會包含疑問、心得、討論互動、

重點概念筆記等等，其中這些留言會經由平台依照個人帳號紀錄於後端的資料庫(包含 時間、內容、留言者)，如下圖 3-4 所示。

31

圖 3-4 為教學系統實作討論區的畫面

三、 JSLA-線上練習

線上練習區為學生主要進行 JavaScript 練習的地方，此區有基本的程式編寫、除 錯、執行、顯示結果、上傳下載作業的功能，以及實驗組額外的針對練習題回饋相關教 材的功能，如下圖 3-5 所示，平台 ip 為 140.122.76.98/aoe0 與 140.122.76.98/aoe1。

32

圖 3-5 為教學系統線上練習的畫面

在圖中 1 號區域是關鍵字變色與背景風格選擇，包含了不同種的色調與關鍵字強 調變色處理，讓使用者可以依照個人的喜好與習慣去選擇，有了關鍵字變色的功能也 可以提高程式編寫的效率與更快速、更清楚瀏覽程式碼的效果，如下圖 3-6、3-7 所 示。

圖 3-6 為教學系統線上練習區的區域功能

33

圖 3-7 為線上練習區編譯區風格設定功能

2 號區域為 JavaScript 程式碼編寫的地方，配合下方 3 號區域進行程式碼練習，

包含語法檢查、程式執行與上傳、載入作業等功能。學生在此區練習的程序為編寫好 程式碼，按下「語法檢查」的按鈕進行第一階段的後端語法除錯，如有錯誤會顯示錯 誤訊息，如無語法上的錯誤，則可以按下「執行程式」的按鈕進行該程式的執行結 果，如上圖 3-6 所示。

4 號與 5 號區域為程式執行的結果，5 號區域會顯示程式碼所執行後的輸出結果與 語法錯誤時的錯誤訊息。4 號區域會依照 5 號所執行的結果進行後端的圖形化整合，針 對該練習題配合更直觀的顯示方式或圖形化輸出，如下圖 3-8 所示。

34

圖 3-8 更直觀的顯示方式或圖形化輸出

四、 迷思概念診斷與回饋機制

本研究將根據實驗前所蒐集、設計出來的迷思念列表來診斷學生的迷思概念。其 中會有人為與系統兩類型的診斷，系統方面會根據學生在線上所編譯執行的程式，透 過系統後端，根據輸出的結果，進行程式碼關鍵字或運算變數的錯誤比對，推斷學生 可能造成錯誤的原因，若診斷出學生寫的程式可能因某項迷思概念所造成的錯誤，平 台將給予相關的回饋教材，包含直接敘述錯誤的地方、配合圖文說明、以及供應相關 概念語法資料。人為診斷部分包含了學習單、期中期末測驗學生所填答的狀況進行診 斷，還有對線上程式練習所診斷的結果進行人為的二次診斷。

在 6 號區域(圖 3-6)的「提示與批改」的按鈕是實驗組才會有的功能，其功能會針 對該練習題進行輸出結果的後端判斷。依照錯誤的方式回饋給學習者適當的補充教 材，而教材方面會利用文字敘述、圖形與動畫等方式呈現，讓學習者更具體、有效的 方式了解為何錯誤與相關的概念或語法知識，如下圖 3-9、3-10 所示。

35

圖 3-9 文字敘述的回饋

圖 3-10 圖形與動畫的回饋

36