HTML 遊戲自訂內容工具使用說明-以自製英文單字卡為例

還記得我前幾天分享的國小英文單字卡 1200 字的整理嗎？今天來介紹老師們如何自己快速建立自己想要的英文單字卡，並放到網路上讓學生自學使用。
製作互動式英文單字卡學習網頁，不用會寫程式也能輕鬆完成！今天來分享我為老師們製作的實用的「HTML 遊戲自訂內容工具」，讓你輕鬆建立單字卡，還能透過「華麗連結生成工具」打造吸睛的整合頁面，並將成果發佈到 GitHub Pages，方便學生隨時線上學習！

一、 利用「HTML 遊戲自訂內容工具」製作英文單字卡

• 這個「阿剛老師的HTML遊戲自訂內容工具」提供多種 HTML 小遊戲，其中包含「可愛風單字卡」遊戲，而且開放自訂題庫功能。 你可以根據自己的需求，例如國小英文單字 1200 字，來建立題庫。
• 製作題庫的方式非常簡單，可以使用 Excel 建立表格，或是透過 ChatGPT 生成表格，快速產生想要的英文單字內容。
• 以單字卡為例，將 ChatGPT 生成的英文單字表格複製到「自製 HTML」工具中的「可愛風單字卡」遊戲，即可匯出修改內容，並另存新檔。
• 重複以上步驟，就能製作多個不同主題的單字卡檔案。

阿剛老師的HTML遊戲自訂內容工具：點我前往

二、利用「華麗連結生成工具」整合你的學習資源

• 利用「華麗連結生成工具」可以將多個 HTML 遊戲檔案整合到單一網頁，並自訂標題、說明和按鈕樣式。
• 將各個 HTML 檔案的完整檔名（包含 .html）複製到「連結網址」欄位，並點擊「新增連結」按鈕，即可生成對應的按鈕連結。
• 調整好頁面配置後，點擊「生成 HTML」，並將檔案存檔至與遊戲檔案相同的資料夾，檔名建議設定為 index。

華麗連結生成工具：點我前往

三、發佈到 GitHub Pages 讓學生輕鬆線上學習

• 完成 HTML 遊戲和整合頁面後，可以透過 GitHub Pages 免費發佈到網路空間，方便學生線上使用。
• 將整個資料夾上傳至你的 GitHub 儲存庫，並在設定頁面中找到 Pages 選項，複製網站網址。
• 將複製的網址加上資料夾路徑，即可在瀏覽器中開啟你的學習網頁。
• 透過網頁右鍵選單，可以建立 QR 碼，方便學生掃描或分享連結。

Github使用說明影片：點我前往