2021年6月17日 星期四

HTML5 : remoteClick 網路遙控器

2021年6月17日 星期四

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

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

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

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

remoteClick 的傳送過程


2021.06.15 以後下載的戳戳樂壓縮檔 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,藏了機關在裡面哦!


相關文章


更新記錄

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



4 意見:

阿翰老師 提到...

不知道為什麼~用家裡面的電腦可以完成抽籤的部分,但一到學校電腦就不能用,目前也不知道是防火牆的原因還是甚麼?不知道有網友跟我一樣的問題嗎?

提到...

您好:
remoteClick 使用的是 Websocket 在通訊(ws:// wss:// ) 一般走的是 TCP port 80 or 443, 因為不知道貴校防火牆設了什麼管理規則, 可能還是請貴校網管查一下有關 Websocket 的部份是否有管制。

康康華 提到...

1.請問下載連結何時會開啟?
2.線上的戳戳樂題目上傳照片後會當機。

提到...

您好:
1.remoeClick 學生在使用時, 遙控器的網址是使用 HTML5 FUN 上的這一個。單獨下載並沒有用, 所以未加上下載的連結。

2.戳戳樂用的照片,建議您把它們都先縮小尺寸,畢竟最後頂多接受 640x480 而已; 先縮小才不會耗掉太多資源。再不然,只好在下載的戳戳樂內,先把圖片和戳戳樂放在一起,研究手動編寫題庫加圖片檔名的方法,這樣是一定不會當機。

ps. 如果您有下載最新的戳戳樂, remoteClick 其實已經放在一起了。不過,產生的學生用網址, 還是用 HTML5 FUN 網站上的那一個。

張貼留言

 
© 2009. Design by Pocket