因為疫情學校停課,造就「網上教學」興起。但是教師們多數只是用視訊會議軟體進行網上「授課」,但是並不是真正既「網上教學」。根據範式轉移:網上教學的迷思,eLearning(網上教學)應該是:
這種 distance learning / eLearning / blended learning / flipped classroom,強調教學設計,透過 eLearning 平台,讓學生根據教學設計,進行自主學習。
因為網上「授課」沒有做教學設計,最多只能做到溝通平台既角色。咁點先做到真正既網上教學呢?做教學工具,是教學設計的其中一個環節。
二來香港教師壓力大,除左花時間做教學行政。還要進修學寫程式做教學工具是好辛苦。
有見及此,今日筆者就介紹如何用常用平台,例如,網頁。無須編程技巧就能製作出一簡單教材。今次以網頁配合Micro:Bit做例子,俾小學生學習植物向光性同方向既概念。
Micro:bit是由BCC設計的微型電腦,專門俾小朋友學習編寫程式的工具。Micro:bit透過瀏覽器以砌積木的方法進行程式編寫,不需安裝任何程式,介面簡單易用。
如果是Windows用家,可以使用Notepad做編程工具。如果是MacOS用家,可以使用TextEdit做編程工具。
程式需要使用Chrome瀏覽器和小型伺服器(主要用作存取圖像)。講開始前安裝以下工具:
Web Server for Chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
如果大家想直接進行測試,可跳至"測試"部分。
筆者製作教材解䆁植物向光性。植物向光性,是指植物生長會受光源的方向影響,大部份植物都是向光源方向生長。教材的目的是要求學生利用Microbit向其中一個方向,然後再利用電筒模擬太陽射向Microbit。網頁上的太陽花會轉至Microbit相同方向。透過教材讓小朋友認識辨別方向同植物向光性。
YouTube示範:
Step 1: 請按以下連結下載程式碼程式碼
Step 2:按Clone
Step 3:按Download ZIP
Step 4:解壓ZIP檔案,你會發現多左一個"p5js-ble-microbit"資料夾,呢個資料夾是程式既程式碼了。
Step 1:大家可以是以下連結找需要既圖片(素材),例如,花,令介面生動吸引學生。
例如,找花,
選擇適合的花:
Step 2:按 Download,選擇 Wavefront OBJ(.OBJ)。下載至 "img"資料夾( 在"p5js-ble-microbit"資料夾之下)。
Step 1:打開"dist"資料夾(在"p5js-ble-microbit"資料夾之下)
Step 2:打開p5.config.js
Step 3:更改圖檔名稱做剛下載的檔名,例如,fire-flower.obj
picturePath = 'img/fire-flower.obj'
Step 4:設計/更改流程
features = [
{action:'LIGHT',threshold:200,runStandalone:false},
{action:'DIRECTION',runStandalone:false}
]
每一個步驟是用{。。。}表示,必需順序寫。每一個步驟內部有不同設定,設定定義如下:
設定 | 定義 | 可用值 |
---|---|---|
action | 選擇由Micro:bit收集不同資料和執行對應動作 | LIGHT (收集光強度,無動作) DIRECTION(收集方向,動作是旋轉圖像) |
threshold | threshold值以上可執行對應動作 | LIGHT: 0~255 之間的數字 |
runStandalone | 單獨執行/由所有收集的資料決定是否執行動作 | true:單獨執行 false:由所有收集的資料決定是否執行動作 |
如果大家想了解如何程式碼如何運作,可以看以下解䆁。
用簡潔的文字說明,是利用不同類型的tag表示網頁中不同物件。通常以.html做結尾的檔案,例如,index.html。以下是本程式使用的網頁示範:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src='./dist/p5js-ble-microbit.min.js'></script>
<script src='./dist/p5.microbit.connector.min.js'></script>
<script src='./dist/p5.config.js'></script>
<script src="./sketch.js"></script>
</head>
<body>
<button id="btnConnect">Connect</button>
<button id="btnDisconnect">Disconnect</button>
<div id="canvas"></div>
<script src="./execute.js"></script>
</body>
</html>
以下是總結每一個tag的用途:
Tag | 定義 |
---|---|
<html>。。。</html> | 表示檔案是一份文件是網頁 |
<head>。。。</head> | 表示本網頁載入前的需要的設定,例如,網頁的標題,工具 |
<title>。。。</title> | 表示本網頁的標題 |
<script>。。。</script> | 表示本頁需要載入的工具,即是本程式的所有程式碼 (以js做結尾的檔案,詳細請看下一個部分 "javascript") |
<body>。。。</body> | 表示本頁的內容,本程只需要兩個按鈕, 一個特定大小的多用途區域(例如,載入圖檔) |
<button>。。。</button> | 表示一個按鈕 |
<div>。。。</div> | 表示一個特定大小的多用途區域 |
Javascript是網頁上常用既編程語言,通堂主要幫網頁加入功能性元素,例如,計算網頁瀏覽人次。通常以.js做結尾的檔案,例如,index.js。通常.js檔案配搭.html使用。js檔案負責功能;.html檔案負責表介面表達。
Javascript 會用function設計每項功能,例如以下function是負責接收由Micro:bit傳送的方向資料。
function directionReceived(angle) {
p5_Microbit_Connector.setAngle(angle);
}
function的定義格式如下:
function <Function名>{
自行定義的功能
}
HTML檔案透過使用<script>。。。</script>
載入對應的Javascript檔案進行連結。
大家想了解更多,可以透過Tecky Code得到更多相關知識。以下是Tecky Code的連結:
透過簡單設定特定檔案取代大部編程工作。希望幫到一眾教師用最短時間; 最小既IT知識製作簡單教具常學生學習知識。筆者都會逐步加入其他Micro:bit功能,令大家可以發揮創意製作更多有趣既教具。