零基礎.10分鐘輕鬆製作STEM教材

Andrew Shek

Andrew Shek

2020-07-03

因為疫情學校停課,造就「網上教學」興起。但是教師們多數只是用視訊會議軟體進行網上「授課」,但是並不是真正既「網上教學」。根據範式轉移:網上教學的迷思,eLearning(網上教學)應該是:

這種 distance learning / eLearning / blended learning / flipped classroom,強調教學設計,透過 eLearning 平台,讓學生根據教學設計,進行自主學習。

因為網上「授課」沒有做教學設計,最多只能做到溝通平台既角色。咁點先做到真正既網上教學呢?做教學工具,是教學設計的其中一個環節。

二來香港教師壓力大,除左花時間做教學行政。還要進修學寫程式做教學工具是好辛苦。

有見及此,今日筆者就介紹如何用常用平台,例如,網頁。無須編程技巧就能製作出一簡單教材。今次以網頁配合Micro:Bit做例子,俾小學生學習植物向光性同方向既概念。

編程之前,需要準備。。。


1. BBC micro:bit

Micro:bit是由BCC設計的微型電腦,專門俾小朋友學習編寫程式的工具。Micro:bit透過瀏覽器以砌積木的方法進行程式編寫,不需安裝任何程式,介面簡單易用。

2. 編程工具,Editor

如果是Windows用家,可以使用Notepad做編程工具。如果是MacOS用家,可以使用TextEdit做編程工具。

3.安裝工具

程式需要使用Chrome瀏覽器和小型伺服器(主要用作存取圖像)。講開始前安裝以下工具:

Chrome
https://www.google.com/intl/zh-HK/chrome/?brand=CHBD&gclid=Cj0KCQjw6PD3BRDPARIsAN8pHuEaEvFlE3li-S6sMl3iJHOGoFOeLYrx7yYtpVXpWCbeHRo5-FhQQ78aApTtEALw_wcB&gclsrc=aw.ds

Web Server for Chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

製作教材


如果大家想直接進行測試,可跳至"測試"部分。

背景

筆者製作教材解䆁植物向光性。植物向光性,是指植物生長會受光源的方向影響,大部份植物都是向光源方向生長。教材的目的是要求學生利用Microbit向其中一個方向,然後再利用電筒模擬太陽射向Microbit。網頁上的太陽花會轉至Microbit相同方向。透過教材讓小朋友認識辨別方向同植物向光性。

示範

YouTube示範:

下載程式碼

Step 1: 請按以下連結下載程式碼程式碼

https://github.com/Andrew-Shek-Dev/p5js-ble-microbit

Step 2:按Clone 1.1.png

Step 3:按Download ZIP 1.2.png

Step 4:解壓ZIP檔案,你會發現多左一個"p5js-ble-microbit"資料夾,呢個資料夾是程式既程式碼了。 1.3.png

選擇圖片

Step 1:大家可以是以下連結找需要既圖片(素材),例如,花,令介面生動吸引學生。

https://clara.io/library

例如,找花, 2.1.png

選擇適合的花: 2.2.png

Step 2:按 Download,選擇 Wavefront OBJ(.OBJ)。下載至 "img"資料夾( 在"p5js-ble-microbit"資料夾之下)。 2.3.png

更改設定

Step 1:打開"dist"資料夾(在"p5js-ble-microbit"資料夾之下) 3.1.png

Step 2:打開p5.config.js 3.2.png 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(收集方向,動作是旋轉圖像)
thresholdthreshold值以上可執行對應動作LIGHT: 0~255 之間的數字
runStandalone單獨執行/由所有收集的資料決定是否執行動作true:單獨執行
false:由所有收集的資料決定是否執行動作

測試


Step 1:啟動小型伺服器

  • 打開Chrome,輸入chrome://apps, 按"Web Server" 4.1.png
  • 更改 "Enter Port"做 8080
  • 按"Choose Folder",選擇"p5js-ble-microbit"資料夾
  • 開啟Web Server 4.2.png

Step 2:執行程式

Step 3:更新Micro:bit程式

  • Micro:bit連接至電腦
  • 打開"p5js-ble-microbit"資料夾
  • 打開"hex"資料夾 5.1.png
  • 拉microbit-MicrobitBLEp5js.hex至Micro:bit 硬盤。 6.1.png

Step 4:連接Micro:bit

  • 開啟Micro:bit
  • 按"Connect" 7.1.png
  • Micro:bit出現笑臉代表連接成功。
  • 可以參考以上YouTube示範進行測試。

程式碼如何運作


如果大家想了解如何程式碼如何運作,可以看以下解䆁。

超文本標記語言(英語:HyperText Markup Language,簡稱:HTML)

用簡潔的文字說明,是利用不同類型的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

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和Javascript

HTML檔案透過使用<script>。。。</script>載入對應的Javascript檔案進行連結。

想了解更多

大家想了解更多,可以透過Tecky Code得到更多相關知識。以下是Tecky Code的連結:

Tecky Code

總結


透過簡單設定特定檔案取代大部編程工作。希望幫到一眾教師用最短時間; 最小既IT知識製作簡單教具常學生學習知識。筆者都會逐步加入其他Micro:bit功能,令大家可以發揮創意製作更多有趣既教具。

參考


範式轉移:網上教學的迷思

留言

延伸閱讀

新年願望:學寫程式懶人包

平常人都能掌握的Programming 原則

做個精明消費者 : Python 簡單數據科學日常應用例子

Excel病特效藥:Office JavaScript API

天文台的理想與現實