課堂記憶項目開發日志

日期: 2025年8月18日

1. 基礎實現

• 項目目標:

  • 創建一個動態、美觀的“課堂記憶”頁面，展示教師信息、教學成果、學生反饋、未來計劃、教學成就和教學金句。
  • 實現交互功能，包括按鈕點擊展開內容、圖片點擊彈出詳細信息、圖表展示數據。

• 技術棧:

  • HTML5
  • CSS3 (包含Flexbox布局、漸變、陰影、動畫)
  • JavaScript (原生)
  • Chart.js (用于柱狀圖)

• 核心功能實現:

  • 使用 flexbox 和 grid 實現響應式布局，適配不同屏幕尺寸。
  • 通過 transition 和 transform 實現平滑的動畫效果（懸停、展開）。
  • 利用 Chart.js 創建教學成果的柱狀圖，展示實踐案例、幫助學生數和小組項目數量。
  • 實現模態框（Modal）功能，用于展示教師的詳細信息。
  • 添加社交媒體鏈接，并為每個鏈接添加工具提示（Tooltip）。

2. 創新想法

• 視覺設計:

  • 采用漸變背景（linear-gradient）和毛玻璃效果（backdrop-filter: blur(10