# 期末報告規劃
:::success
總時間15分鐘
簡報第一頁標題
第二頁目錄大綱
每一部分第一頁是標題
:::
1. 研究動機
:::success
4分鐘
簡報3~9頁，放圖像，以口頭說明
:::
程式設計課上，講師講解演算法，如dfs、線段數
他開始畫示意圖，並開始講解算法的流程
但隨著白板上的標記越畫越多，學生困惑的眉毛越皺越深，更糟糕的是，這不能重播

老師最後秀出了網路上的演算法動畫，學生看了才一目瞭然(心想著：早播嘛！)
感受到動畫在教學上的強大力量，老師決定以後上課都搭配動畫
但是目前網路上的動畫只涵蓋常見演算法，而且碰到稍有變化的題目就難以實現

因此，我們的目標是建立一個自由度高的演算法動畫網站

2. 現有網站比較
:::success
3分鐘
簡報10~13頁，每一頁放一個網站，列出優缺點
:::
1. [Graph Editor](https://csacademy.com/app/graph_editor/)
優:
可互動(拖拉)
簡單易用
缺:
只能畫圖論
無法加入其他資料
沒有動畫

2. [algorithm-visualizer.org](https://algorithm-visualizer.org/brute-force/binary-tree-traversal)
優:
能逐步執行
動畫與程式碼同步執行
缺:
範例程式輸入麻煩
資料結構樣式有限
不同資料結構被分開

3. [Data Structure Visualizations](https://www.cs.usfca.edu/~galles/visualization/Algorithms.html)
優:
動畫與結構相互對照
動畫比較漂亮
缺:
資料結構樣式有限
不能自訂輸入資料

3. 技術方案與架構設計
:::success
5分鐘
簡報14~19頁
:::
第15頁:
我們程式的功能
1. 可以視覺化所有演算法or範例程式的運行過程
2. 動畫與範例程式可以自由編輯(因應算法變化)
3. 動畫與範例程式同步執行，互相存取資料
4. 可互動的動畫，依照使用者操作展現資料結構的多的面向

第16頁:
網站截圖，說明每個部份的功能

第17頁:
說明輸入輸出的部分

第18~19頁:
說明動畫函示庫使用、設計亮點

4. 未來發展與問題探討
:::success
3分鐘
簡報20~21頁
:::
列出未來可以發展與探討遇到的問題
* 導入生成式AI：將競賽程式碼答案交由AI產生動畫
* 直接編輯動畫區，並生成對應程式碼
* 提供範例讓使用者可以直接選擇
* 使用eval可能有資安風險，改用iframe等方式增加安全性
:::warning

## chatGPT回饋

你的報告規劃已經非常清晰，時間分配合理，內容結構也有邏輯性。以下是一些建議來讓報告更具吸引力和流暢性：

### **整體建議**
1. **開場鋪陳更有故事性**
研究動機部分的故事很好，但可以強調「痛點」，例如：
- 「你是否曾經在課堂上，被老師畫滿白板的算法圖搞得頭昏眼花？」
- 「我們發現，動畫可以大幅提升學習效果，但現有工具仍有許多不足。」

這樣能讓觀眾更有共鳴，也能加強動機的說服力。

2. **適當加入小結或過渡語**
每個章節結束時，可以有一兩句話來串接，例如：
- 「所以我們需要一個能夠靈活編輯動畫的網站，這就是我們的方案。」
- 「既然現有網站都有這些缺點，那我們該如何解決呢？」

這樣可以讓報告更流暢，不會像是單純的資訊羅列。

---

### **章節細節建議**
#### **1. 研究動機**
✅ **優點**：以故事引導，容易引起共鳴
🔹 **建議**：
- 可以用一張對比圖來強調「白板畫滿 vs. 動畫清晰」的對比，讓觀眾更直觀感受問題所在。
- 最後一句可以更明確：「我們的目標是建立一個能夠靈活視覺化任意演算法的動畫平台。」

#### **2. 現有網站比較**
✅ **優點**：具體分析現有工具的優缺點
🔹 **建議**：
- 每個網站可以有 **小標題** 突出核心特點，例如：
- **Graph Editor - 強調互動，但無動畫**
- **Algorithm Visualizer - 動畫同步程式碼，但不夠靈活**
- **Data Structure Visualizations - 視覺化清楚，但不能自訂**
這樣觀眾能更快抓住每個工具的特點。
- 在結尾可以加一個 **表格對比圖**，讓優缺點更一目了然。

#### **3. 技術方案與架構設計**
✅ **優點**：詳細介紹功能與技術
🔹 **建議**：
- 這一部分技術性較高，建議**搭配示範動畫**，例如播放一段簡單動畫來展示「動畫與範例程式同步執行」的效果。
- **網站截圖部分**（第16頁）：可以加上 **標註** 來指引觀眾，比如「這裡是動畫區，這裡是程式碼輸入區」等。

#### **4. 未來發展與問題探討**
✅ **優點**：有前瞻性，讓人看到發展空間
🔹 **建議**：
- 「直接編輯動畫區，並生成對應程式碼」這點可以簡單示範一下未來的可能畫面，例如一個假想 UI 設計圖。
- **安全性探討** 可以稍微多講一點，比如：
- 「目前 eval 可能有資安風險，我們考慮改用 iframe，但這會增加系統開銷，需要進一步評估。」

---

### **簡報設計建議**
- **封面頁**：可以考慮用「對比圖」作為背景（白板 vs. 動畫）。
- **動畫示範**：如果能有一個簡單動畫展示網站的核心功能，會讓報告更吸引人。
- **結論頁面**：最後一頁可以總結「我們的網站解決了什麼問題」+ 「未來發展的可能性」，讓聽眾有個完整的印象。

---

### **總結**
你的報告結構已經很好了，只要稍微調整：
1. 開頭更強調「痛點」來抓住觀眾。
2. 章節之間加上過渡語，使報告更連貫。
3. 增加對比圖、表格、動畫示範，使內容更具吸引力。
4. 未來發展部分補充示範畫面與資安考量，讓內容更具深度。

這樣可以讓你的報告更流暢、說服力更強，也更吸引聽眾！ 🚀

:::