[AI創作專案] 在瀏覽器裡寫程式、馬上跑、自動過關

生科課要教一點程式,最大的門檻常常不是內容,而是環境:電腦教室不能裝軟體、網路被擋、學生載具五花八門。所以我做了「程式練功房」— 一個純前端的 Python 練習平台:打開瀏覽器就能寫、按一下就執行,多組測資自動評測、過關拿星星。不用安裝任何東西、不用註冊帳號,第一次載入後連斷網的教室都能用

👉 https://henrychao521.github.io/coding-dojo/

用生科教室的情境學 Python

市面上的程式練習平台很多,但題目多半是「印出 1 到 100」這類抽象練習。練功房的題目全部長在生科教室裡:

  • 變數 rpm 是馬達轉速,把它印出來;
  • 變數 material 是材料名稱,印出「材料:木板」;
  • 算齒輪減速比、判斷感測器讀值是否超標、用迴圈累加雷切板件的總長……

學生在程式裡遇到的數字,就是他們在工作桌上遇到的數字 — 程式不是另一門課,是工具。

第一波開放三個單元(各 7 題練習 + 1 題挑戰,共 24 題):U1 輸出與變數、U2 條件判斷、U3 迴圈;函式、清單與綜合小專題是規劃中的第二波,地圖上先以鎖定狀態預告。

寫完按一下,測資說了算

每題附「輸入/情境 → 預期結果」對照表,學生寫完按「執行並評測」,系統用多組測資逐一比對輸出 — 例如「印出馬達轉速」會用 rpm=120、240、75 三組值各跑一次,寫死答案是騙不過去的。卡住可以看提示(每題兩層,第二層直接給答案),但看提示會降星:過關拿三顆星、用過提示拿兩顆 — 誠實面對自己的學習狀態,也保留「先求過再求好」的空間。

技術上怎麼做到「零後端」?

Python 直譯器用 Pyodide(WebAssembly 版的 CPython)直接在瀏覽器裡跑,編輯器是 CodeMirror 6,兩者都打包在站內 — 所以第一次載入後,執行、評測、進度全部在本機完成,沒有任何伺服器。這帶來三個對教室很實際的好處:

  • 不用裝、不用等:平板、Chromebook、老電腦都一樣能跑;
  • 斷網照用:載入過一次就好(網路只在第一次需要);
  • 沒有帳號與個資問題:進度存在各自裝置的 localStorage,不上傳任何資料。

沒有伺服器,老師怎麼看全班進度?

教師後台的做法很「低科技」但可靠:學生按「匯出我的進度」得到一個 JSON 檔,交給老師(教室共用資料夾、雲端硬碟、隨身碟都行),老師在「班級彙整」一次匯入全班檔案,馬上得到每人每單元的完成題數與星數,還能輸出 CSV 接回成績單。資料自始至終不經過任何伺服器。

課堂使用建議

  • 一節課一單元的節奏:前 10 分鐘看單元講義(每單元附短講義頁),剩下時間刷題;挑戰題給先寫完的學生。
  • 把星星當形成性評量:三顆星=獨立完成,兩顆=有看提示 — 比「有交/沒交」多一層資訊。
  • 搭配硬體課程:U1–U3 的觀念(變數、判斷、迴圈)正好是 Arduino/micro:bit 程式的前置,先在練功房把語法練順,上硬體時就能專心在電路與機構。

平台開源、免費,直接拿去課堂用;第二波單元(函式、清單、綜合小專題)完成後會再更新。

發表留言