HTML5 : remoteClick 網路遙控器

在教室上課時，學生可以親手去操作電子教具或學具，遠距教學時，因為碰不到，互動的樂趣少了很多。以 「HTML5 戳戳樂」來說，雖然遠距時可以用「聲控」的，請螢幕那頭的老師依號碼，幫忙按，少了親手按並即時回饋，樂趣大減。為了解決類似這種的半調子戳戳樂，remoteClick 網路遙控器來了！

remoteClick 網路遙控器的主要原理是這樣的(以戳戳樂為例)：學生按下 remoteClick 遙控器上的號碼以後，程式會將號碼送至 WebSocket server，server 再將資料發向老師端的「接收程式」，「接收程式」再依設定去「按」戳戳樂上格子。

簡單說，關鍵在這個「接收程式」，它「駭」進了我自己設計的戳戳樂，透過網路收到號碼以後，幫忙觸發了戳戳樂格子上按下滑鼠的動作。這樣的設計，好處是不需要更動到原有的戳戳樂程式，而且除了戳戳樂以外，也可以應用在其它的工具中。有空，其它的工具也會陸續加上「網路遙控」的外掛。

底下先示範以戳戳樂加上 remoteClick 網路遙控外掛以後，如何讓學生可以透過網路遙控老師家裡的戳戳樂。

remoteClick 的傳送過程

2021.06.15 以後下載的「HTML5 戳戳樂」壓縮檔 html5_poke.zip 中，會多出幾個跟 remoteClick網路遙控器相關的檔案:

• html5_remoteClick.html : 啟動 remoteClick 用的網頁。
• remoteClick.js : remoteClick 的程式。
• remoteClick_set.js : remoteClick 的設定。
• injection.js : 外掛程式，也就是前面提到的「接收程式」。
• html5_poke.html : 這是戳戳樂原有的檔案，已經加上可以啟動「外掛」的功能。但是如果想使用「外掛」，得用上面提到的 html5_remoteClick.html 較方便。

看到一堆檔案，是要嚇死誰啦！

遙控版的戳戳樂由 html5_remoteClick.html 啟動

是的！不用管前面說的那一堆，反正想使用網路遙控的功能，只要記住，打開最新下載回來，戳戳樂資料夾中的這個檔案就對了：

html5_remoteClick.html

開啟 html5_remoteClick.html 以後，會出現要求輸入自訂代號的對話框

輸入自訂的代號

這個代號可以說，就是班級代號，屆時 remoteClick 學生遙控器如果發給這個代號都會送到這裡。所以如果你的自訂代號跟別人的一樣，兩邊的學生都上線，應該會很精彩。因此建議自訂一個比較不會和別人一樣的代號，比較不會互相干擾。

輸入完代號，按下[繼續]鈕，對話框中的輸入區會出現要給學生用的遙器網址

學生用的遙控器網址已複製, 記得貼到別處備用

網址照說會自動複製到系統的「剪貼簿」中，如果沒有，請自行複製，記得貼到別處備存。

把學生用的遙控器網址分享給學生以後，按下[連線]鈕，應該會自動載入戳戳樂

連上線的戳戳樂右上角會多一個圖示

注意一下戳戳樂的右上角，是不是有個小圖示，如果有，表示已和通訊用的網路主機連上線了。

按下戳戳樂的 [GO] 鈕，打開 [顯示編號] 的選項，就可以準備讓學生遙控你的戳戳樂囉！

此刻的戳戳樂是使用本機的，如果下次還要使用，建議您將這個網址的戳戳樂，加入瀏覽器的「書籤」中，這樣子，以後打開這這個書籤來就能用。當然囉～它也要搭配前面備存給學生用的 remoteClick 遙控器網址。

學生端的操作

當學生打開前面給貴班用的 remoteClick 遙控器網址以後，會出現輸入號碼或姓名的對話框

學生輸入代號

按了 [繼續] 鈕，即可出現數字遙控器了

remoteClick 的網路遙控器

remoteClick 如果連上網路服務，在右上角會出現一個小圖示，此特點跟前面連上線的戳戳樂是一樣的特徵。

此時如果老師端已準備好戳戳樂，輪到的學生就可以在遙控器輸入要按的格子編號，輸入錯誤可以按 [C] 鈕 (Clear) 來清除並重新輸入；確定無誤了，就可以按下 [OK] 來送出：

學生送出編號並讓遠端戳出該格

誰送出了哪個編號，會顯示在戳戳樂右上角圖示的下方：

右上角會顯示最後哪支遙控器送出號碼

以上是 remoteClick 應用在戳戳樂上的簡單介紹。

底下這段影片是稍早版本的操作:

Q & A

Q : 如果學生亂按怎麼辦？

A: 此問題可能要看您和學生的默契了。如果真想知道到底誰按了什麼，利用瀏覽器「開發人員工具」中的「控制台」，看到所有收到訊息。

另外，在戳戳樂中，如果抽完後的內容對話框還沒關閉，因為不是可戳洞的狀態，學生按的號碼是不會有作用的。

Q : 如果上次戳戳樂的網址或學生遙控器的網址沒記下來怎麼辦？

A : 沒關係，再從開啟 html5_remoteClick.html 做起，即可得到網址。

進階使用者則可以觀察一下網址裡的問號開始的那個username=xxxx、classroom=xxxx，藏了機關在裡面哦！

相關文章

• 雄 : HTML5 : Poke 戳戳樂

更新記錄

• 2021.06.17 應用程式端的右上角會顯示發送者的訊息；設定檔中 appUrl 可以使用相對路徑或絕對路徑；設定檔中新增 remoteClickUrl 的參數，可以指定學生遙控器的網址；網址列中若設定 username 及 classroom，學生可以跳過輸入代號的流程，直接出現遙控器。
• 2021.06.16 修改 html5_poke.html 載入 injection.js 的程序，讓它更有效率；injection.js 改得彈性更大，以便日後可以較簡易的套至其它工具中。
• 2021.06.16 release。