Embedded Files
一、請到canva網站註冊及登入，登入後，在主要選擇：canva ai，並且加入提示詞。最後再點選"幫我撰寫程式碼"
二、也可以直接點選有程式碼的範例，讓canva code直接生成。
三、視窗系統鍵盤快捷鍵練習
0、提示詞內容：
設計一個配對遊戲，利用鍵盤輸入快捷鍵，例如：貼上就是ctrl+v，要按鍵盤的crtl及v才能答對。配對內容有：ctrl+v就是貼上；ctrl+c就是複製；ctrl+x就是剪下；視窗鍵+p就是切換投影；視窗鍵+e就是開啟檔案總管。alt+tab就是切換工作視窗。
1、公開檢視連結，即可以產生一個連結供教學暫時使用。
2、將此設計生成網站，即可以在此命名的網站上使用。
3、連結
四、網路使用習慣，記憶大考驗
0、提示詞內容：
翻牌數量：這裡一共 10 張牌（5 對 → 適合 3x3 或 3x4 的格子）。通常翻牌遊戲要偶數，建議保持 10張（5對） 比較順。
內容設計：
網路遊戲 ↔ 沉迷打遊戲
社群媒體 ↔ 滑手機過久
上網過夜 ↔ 睡眠不足
網路霸凌 ↔ 心理壓力
正確使用 ↔ 健康生活
1、公開檢視連結，即可以產生一個連結供教學暫時使用。
2、將此設計生成網站，即可以在此命名的網站上使用。
3、連結
五、認識三角形的銳角、直角、鈍角
0、提示詞內容：
🔺 初始畫面
🔺 初始畫面
顯示一個可以拖曳兩個頂點（固定一點當底點 A）形成三角形 ABC，隨著點 B 和 C 的移動，角 A（或任一角）動態改變。
🎯 提示詞設計（互動引導語）
[初始提示詞]
🧭 提示：拖曳三角形的頂點來觀察角度的變化！[銳角狀態偵測時]
📐 這是銳角三角形：三個角都小於 90°！[直角狀態偵測時]
🎯 太棒了！你創建了一個直角三角形！其中一個角正好是 90°！[鈍角狀態偵測時]
🔍 看！這是鈍角三角形：其中一個角大於 90°！[進一步引導]
🧪 試著將一條邊拉長，觀察角度是怎麼改變的！
🔧 操作建議：互動邏輯說明
點 A 固定在畫面左下角（例如座標 (100, 400)）
點 B、C 可以拖曳
用 Canvas Code 內建角度計算函式（或三角函數）來判斷角 ABC, BCA, CAB 的角度
畫面呈現建議：
畫出角度標記（如：∠A = 85°）
根據三角形類型自動變更角標註顏色（銳角 = 綠色、直角 = 藍色、鈍角 = 紅色）
在角度改變時，於畫面顯示對應提示詞（可用動畫淡入）
💡 額外加分互動設計
💡 額外加分互動設計
加入「鎖定一邊長」的選項，觀察另一邊移動時的角度變化
加入「顯示三角形分類」開關
角度變成直角或鈍角時發出提示聲效
1、公開檢視連結，即可以產生一個連結供教學暫時使用。
2、或將此設計生成網站，即可以在此命名的網站上使用。
3、連結
六、高音譜記號音階練習
0、提示詞內容：
請設計一個互動式網頁遊戲，功能需求如下：
五線譜與音符呈現
畫面上有高音譜記號與五線譜（五條線）。
在五線譜上從底線往上依序排列 C、D、E、F、G、A、B 的音符位置。
音階間距正確呈現，其中 E–F、B–C 為半音距離，間距需縮短。
玩家控制（小飛機）
五線譜底部有一台小飛機，可以使用滑鼠 左右移動。
小飛機與五線譜保持在同一水平線下方。
射擊與互動
使用者按下滑鼠左鍵，小飛機發射子彈往上。
子彈若擊中某個音符：
播放該音符的聲音（正確音階音效）。
在畫面顯示該音階名稱（例如 C、D、E）。
互動性與視覺效果
子彈與音符有 碰撞偵測。
被擊中的音符可以閃爍或改變顏色，增加互動感。
1、選擇"在設計中使用"。
2、或將此設計生成"網站"或"公開檢視連結"，即可以在此命名的網站上使用。
3、連結
4、這次為了音符位置修改了11次，高音譜記號位置是不正確的喔。
七、低音譜記號音階練習
0、提示詞內容：
「請幫我生成一個互動式網頁：
在畫面最底下有一條水平線（滑鼠左右移動可以控制一個發射器位置）
使用者按下滑鼠左鍵時，從發射器發射一顆子彈向上飛
畫面上有低音譜號的五線譜，上面會出現不同位置的音符（以隨機或預設方式產生）
如果子彈碰到某個音符，就讓該音符消失／被擊中，並即時顯示該音符的音階名稱（例如「C3、D3、F2」等）
同時播放該音符對應的頻率作為音高（使用 Web Audio API）
要有簡單的碰撞偵測、畫面繪製（可用 HTML canvas 或 SVG）、以及音頻合成或播放功能
請幫我產生完整的 HTML + CSS + JavaScript 程式碼，並註解每段功能。
請注意，低音譜號上五線譜的音符位置要跟這裡的對應：https://jumusicstory.com/%E5%A6%82%E4%BD%95%E7%9C%8B%E4%BA%94%E7%B7%9A%E8%AD%9C%E4%BD%8D%E7%BD%AE-1%E5%88%86%E9%90%98%E8%AA%8D%E8%AD%98%E9%9F%B3%E7%AC%A6%E7%9A%84%E4%BD%8D%E7%BD%AE/」
1、選擇"在設計中使用"。
2、或將此設計生成"網站"或"公開檢視連結"，即可以在此命名的網站上使用。
3、連結
4、這次為了低音符位置修改了22次，低音譜記號形狀還有待改善。射擊中音符有得10分。沒射中會扣10分
5、增加了射擊選擇難度，提供指定訊息來射擊。連結
Page updated
Report abuse