---
# System prepended metadata

title: YTP 學習歷程檔案

---

# YTP 學習歷程檔案

![](https://i.imgur.com/JORnn3y.png =150x)＠NTUST, Taiwan
_________________________
### 小組簡介
>隊名：薛爛了
>組員1：[姚承希](https://hackmd.io/@SoraiMahiro/H197nZJaA)
>組員2：[吳赫宥](請補上投影片超連結)
>組員3：[薛尹喆](https://hackmd.io/Pcm0sJqHRPe3sdQiWuiU0w)
>題目/目標：演算法動畫網站  
>精誠資訊輔導員：蘇育瑨
>助教：

_________________________
:::success
### 時程規劃
|                | 預估完成時間 | 實際完成時間 |
|:--------------:|:------------:|:------------:|
|    定義題目    |     2024/9     |   2024/10/7       |
|    分工規劃    |     2024/10     |     2024/10     |
| 完成期中報告投影片 |     2024/11    |     2024/11     |
|    完成實作    |     2025/2    |     n     |
| 完成期末報告投影片 |     Text     |     n     |
|    完成預演    |     Text     |     n     |
|     比賽日     |     Text     |     n     |

- 待辦清單
    - [ ] 前端
        - [x] [name=姚承希]UI介面
              [time=2024/12/30]
        - [x] [name=所有人]動畫表達式語法設計
              [time=2024/12/26]
        - [ ] [name=姚承希]動畫表達式語法解析
        - [x] [name=薛尹喆]節點圖繪製
              [time=2025/1/3]
        - [ ] [name=薛尹喆]動畫功能
        - [ ] [name=吳赫宥]動畫編輯

:::
### 實作
https://github.com/YTP-XueMoney/Frontend_new
- 前端: 
    - 網頁框架: vue.js
    - 編輯器: monaco editor
    - 動畫: d3.js

![image](https://hackmd.io/_uploads/HkhEkm7cJl.png)

---
### Meeting Minutes 

#### 2024/9/11: 啟動會議
- 報告事項：
    - 各組介紹 (6頁)
        - 簡單介紹自己，貼上大頭照(每位同學一頁)
        - 參與此專題的目的(每組一頁)
        - 每週預期付出的時間(每組一頁)
        - 希望得到的協助(每組一頁)
- 決議
    - 工作1: 預期成果、負責人、預計完成時間

#### 2024/10/8 例行會議
- 討論事項: 主題決定並詢問教授([投影片](https://www.canva.com/design/DAGS-Ki2H2k/vGrTxFOsDXqSduqxP8bWZg/view?utm_content=DAGS-Ki2H2k&utm_campaign=designshare&utm_medium=link&utm_source=editor))
- 決議:
    製作主題：圖論動畫網站
    - 動機: 可視化可以幫助學習者更好理解複雜演算法。因此，我們的想法就是建立一個用來繪製圖論動畫的網站，以動態的方式展示演算法的執行情形，如深度優先搜尋（DFS）與廣度優先搜尋（BFS）和最短路徑演算法(dijkstra)等。這樣的工具不僅能幫助程式教學，也可以增強學員對這些核心演算法的直觀理解。
    - 預計製作畫面:![預覽圖](https://hackmd.io/_uploads/BJGmDDzyJg.png)
- Comments from Prof. Ray
    1. 使用者是誰？Business Model?
    2. 有沒有類似的解決方案？
    3. 做這件事的困難度？重要性？
    4. 分工
    5. 預計如何展示？

#### 2024/11/1 例行會議
- 討論事項: 期中報告前預演
[投影片](https://www.canva.com/design/DAGVC0tQQfE/p5q3bah2w10lJHzIWX0NwA/view?utm_content=DAGVC0tQQfE&utm_campaign=designshare&utm_medium=link&utm_source=editor)

#### 2024/11/9 期中報告
Q/A:
1. 使用者已有一定背景，可以增加一些可調整的prompt
2. 目標分割縮小
    
#### 2025/1/10
- 進度報告
[投影片](https://www.canva.com/design/DAGbVo107hM/mZJ0p6R6GQWO_AZ6va_9xA/edit?utm_content=DAGbVo107hM&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)

使用故事包裝

----

### Q&A
1. 使用者是誰？
    - 使用者:學生 教授 老師
2. 有沒有類似的解決方案？ 
    - https://www.cs.usfca.edu/~galles/visualization/Algorithms.html
    - https://tldraw.dev/#features
    - https://algorithm-visualizer.org/brute-force/binary-tree-traversal
3. 做這件事的困難度？重要性？
    - 困難度高：需要前端（如 Vue.js、D3.js）和後端（如 Flask）知識，並處理使用者互動的問題
    - 重要性
        - 教育價值:圖論動畫能夠幫助程式學習者視覺化地理解複雜演算法，可用於程式教育、教學演示，在課堂教學和自學中都有很大的應用潛力。

---
### 目前遇到的問題
1. 沒有伺服器
    - 初步解決方法: 使用git上傳到github，每個人下載到自己的電腦執行開發
    - 成果展示比較麻煩
    - 是否可以申請一個伺服器空間
