Update index.html

index.html

@@ -129,7 +129,7 @@
         
         <section id="engineering-apps">
             <h2>在各領域的工程上有何應用？</h2>
-            <p>地球物理方法以其非破壞性、高效率和覆蓋範圍廣的優勢，在多個工程領域中扮演著不可或缺的角色。</p>
+            <p>地球物理方法以其非破壞性、高效率和覆蓋範圍廣的優勢，在多個工程領域中扮演著不可缺的角色。</p>
             <div class="app-grid-expanded">
                 <div class="app-card">
                     <div class="app-card-header"><h3>大地與土木工程</h3></div>
@@ -201,27 +201,27 @@
             <div class="topic-grid">
                 <div class="topic-item">
                     <h3>1. 電磁法 (Electromagnetic Methods)</h3>
-                    <p>電磁法是地熱探勘中最核心且有效的方法之一，其基本原理是探測地下岩層的「電阻率」（Resistivity）。地熱系統中的熱水通常富含溶解的礦物質（鹽類），使其導電性極佳，呈現出「低電阻」的特性。因此，在地表下找到大規模的低電阻異常區，往往就意味著找到了潛在的熱水儲集層 [1, 2]。</p>
+                    <p>電磁法是地熱探勘中最核心且有效的方法之一，其基本原理是探測地下岩層的「電阻率」（Resistivity）。地熱系統中的熱水通常富含溶解的礦物質（鹽類），使其導電性極佳，呈現出「低電阻」的特性。因此，在地表下找到大規模的低電阻異常區，往往就意味著找到了潛在的熱水儲集層。</p>
                     <h4>大地電磁法 (Magnetotellurics, MT)</h4>
-                    <p>這是一種被動式的探測技術。它利用源自太陽風與全球閃電活動等自然現象產生的天然電磁波作為場源 [3]。當這些電磁波傳入地下，會因不同岩層的電阻率而產生衰減和相位變化。科學家在地表同步測量電場與磁場的微弱變化，就能反推出從淺至深數公里範圍內的電阻率分布結構，進而描繪出低電標示誌熱水儲集層的影像 [1, 4]。</p>
+                    <p>這是一種被動式的探測技術。它利用源自太陽風與全球閃電活動等自然現象產生的天然電磁波作為場源。當這些電磁波傳入地下，會因不同岩層的電阻率而產生衰減和相位變化。科學家在地表同步測量電場與磁場的微弱變化，就能反推出從淺至深數公里範圍內的電阻率分布結構，進而描繪出低電標示誌熱水儲集層的影像。</p>
                 </div>
 
                 <div class="topic-item">
                     <h3>2. 磁力法 (Magnetic Method)</h3>
-                    <p>磁力法的原理是測量地表磁場的細微變化，這些變化主要由地下岩石的磁性差異引起 [5]。在地熱探勘中，其最重要的應用是「居禮點深度 (Curie Point Depth, CPD)」分析。</p>
-                    <p><strong>原理與應用：</strong>居禮點是指磁性礦物會失去其鐵磁性的臨界溫度(約攝氏580度) [6, 7]。透過航空磁力測量數據，科學家可以估算出居禮點的深度 [8, 9]。在地熱活躍區，因有深部熱源，居禮點深度會異常地淺 [6]。因此，尋找淺層居禮點異常是判斷區域熱流高低、尋找潛在地熱熱源的有效工具 [9]。</p>
+                    <p>磁力法的原理是測量地表磁場的細微變化，這些變化主要由地下岩石的磁性差異引起。在地熱探勘中，其最重要的應用是「居禮點深度 (Curie Point Depth, CPD)」分析。</p>
+                    <p><strong>原理與應用：</strong>居禮點是指磁性礦物會失去其鐵磁性的臨界溫度(約攝氏580度)。透過航空磁力測量數據，科學家可以估算出居禮點的深度。在地熱活躍區，因有深部熱源，居禮點深度會異常地淺。因此，尋找淺層居禮點異常是判斷區域熱流高低、尋找潛在地熱熱源的有效工具。</p>
                 </div>
 
                 <div class="topic-item">
                     <h3>3. 震測法 (Seismic Methods)</h3>
                     <p>震測法利用震波在不同地質介質中傳播速度和路徑的特性來描繪地下結構，主要分為主動式與被動式兩種。</p>
                     <h4>反射震測法 (Reflection Seismology)</h4>
-                    <p>此方法如同為地層拍攝超音波。使用人工震源在地表激發震波，當震波遇到不同岩層的交界面時，一部分能量會反射回地表，被檢波器記錄下來 [5, 10]。透過分析震波的旅行時間，就可以精確繪製出地下的斷層等構造，而這些斷層往往是控制地熱流體上升的關鍵通道 [10]。</p>
+                    <p>此方法如同為地層拍攝超音波。使用人工震源在地表激發震波，當震波遇到不同岩層的交界面時，一部分能量會反射回地表，被檢波器記錄下來。透過分析震波的旅行時間，就可以精確繪製出地下的斷層等構造，而���些斷層往往是控制地熱流體上升的關鍵通道。</p>
                 </div>
                  <div class="topic-item">
                     <h3>4. 重力法 (Gravity Method)</h3>
-                    <p>重力法的原理是利用精密儀器在地表測量重力值的微小差異 [2]。這些差異主要由地下不同岩石的密度變化所造成 [14]。</p>
-                    <p><strong>原理與應用：</strong>在地熱區，深部的岩漿庫或高溫熱源通常密度較低。因此，重力測勘可以幫助定位與地熱活動相關的深部構造、岩漿侵入體（熱源）或大型斷裂帶 [5, 14]。重力異常圖可以提供地下地質結構的宏觀圖像，常與其他方法結合使用 [15]。</p>
+                    <p>重力法的原理是利用精密儀器在地表測量重力值的微小差異。這些差異主要由地下不同岩石的密度變化所造成。</p>
+                    <p><strong>原理與應用：</strong>在地熱區，深部的岩漿庫或高溫熱源通常密度較低。因此，重力測勘可以幫助定位與地熱活動相關的深部構造、岩漿侵入體（熱源）或大型斷裂帶。重力異常圖可以提供地下地質結構的宏觀圖像，常與其他方法結合使用。</p>
                 </div>
             </div>
             <hr>
@@ -282,46 +282,52 @@ pip install streamlit matplotlib
                 <li><strong>即時協作：</strong>老師或助教可以透過連結直接進入學生的 Codespace 環境，即時進行指導與除錯。</li>
             </ul>
 
-            <h4>2. 教學設計方式</h4>
-            <h5>(A) 老師準備課程模板</h5>
-            <p>首先，老師需要在 GitHub 上建立一個課程專用的 Repository (Repo)，例如 <code>geophysics-class-2025</code>。這個 Repo 將作為所有學生的課程模板，其中包含：</p>
+            <h4>2. 教學設計與協作流程</h4>
+            <h5>(A) 老師的準備工作：建立課程模板</h5>
+            <p>老師需要在 GitHub 上建立一個公開 (Public) 的課程專用 Repository，例如 <code>https://github.com/teacher-account/geophysics-class-2025</code>。這個 Repo 將作為所有學生的課程模板，其中包含：</p>
             <div class="code-block">
 <pre><code>geophysics-class-2025/
 ├── .devcontainer/
 │   └── devcontainer.json  # Codespaces 環境設定檔
 ├── data/                  # 存放地震資料 (miniSEED, CSV 等)
 ├── notebooks/             # 存放 Jupyter Notebook 範例
-├── hw/                    # 存放作業說明與範例
-└── figures/               # 學生儲存繪圖成果的地方
+└── hw/                    # 存放作業說明與範例
 </code></pre>
             </div>
             <p>最重要的部分是 <code>.devcontainer/devcontainer.json</code> 檔案，它定義了 Codespace 啟動時的環境配置。老師可以在此指定所需的 Python 版本、要自動安裝的套件，以及推薦安裝的 VSCode 擴充功能。</p>
-            <p><strong>devcontainer.json 範例：</strong></p>
-            <div class="code-block">
-<pre><code>{
-  "name": "geophysics-class",
-  "image": "mcr.microsoft.com/devcontainers/python:3.11",
-  "postCreateCommand": "pip install obspy pygmt numpy scipy matplotlib pandas jupyter",
-  "customizations": {
-    "vscode": {
-      "extensions": [
-        "ms-python.python",
-        "ms-toolsai.jupyter"
-      ]
-    }
-  }
-}</code></pre>
-            </div>
-
-            <h5>(B) 學生使用流程</h5>
+            
+            <h5>(B) 🧭 學生的操作流程：Fork 與 Pull Request</h5>
+            <p>這套流程非常適合大班課程，老師只需維護一個公開 Repo，學生即可透過 Fork 功能建立個人副本來完成作業。</p>
             <ol style="padding-left: 20px;">
-                <li>登入自己的 GitHub 帳號，並進入老師提供的課程 Repo 頁面。</li>
-                <li>點擊頁面上綠色的 <strong>&lt;&gt; Code</strong> 按鈕，切換到 <strong>Codespaces</strong> 分頁。</li>
-                <li>點擊 <strong>Create codespace on main</strong> 按鈕。</li>
-                <li>等待約 1-2 分鐘，GitHub 會在雲端自動配置好環境（包含 <code>devcontainer.json</code> 中定義的所有套件）。</li>
-                <li>配置完成後，即可在瀏覽器中的 VSCode 環境裡開始編寫程式或執行 Notebook。</li>
+                <li><strong>Fork 課程 Repo：</strong> 進入老師提供的課程 Repo 網址，點擊右上角的 <strong>Fork</strong> 按鈕，在自己的帳號下生成一份完全相同的副本。</li>
+                <li><strong>建立 Codespace：</strong> 進入自己帳號下的 Fork Repo，點擊綠色的 <strong>&lt;&gt; Code</strong> 按鈕 → <strong>Create codespace on main</strong>，等待約 1-2 分鐘讓雲端環境自動安裝完成。</li>
+                <li><strong>完成作業：</strong> 在 Codespace 中，打開 <code>notebooks/</code> 或 <code>hw/</code> 資料夾，編寫���式碼與 Notebook。完成後，使用終端機儲存並推送 (push) 變更到自己的 Fork Repo。<br>
+                    <code>git add .</code><br>
+                    <code>git commit -m "完成 HW1"</code><br>
+                    <code>git push</code>
+                </li>
+                <li><strong>繳交作業 (建立 Pull Request)：</strong>
+                    <ul>
+                        <li>回到 GitHub 上自己的 Fork Repo 頁面，會看到一個 "This branch is 1 commit ahead of..." 的提示，點擊右側的 <strong>Contribute</strong> → <strong>Open pull request</strong>。</li>
+                        <li>確認 Base Repository 是老師的 Repo，而 Head Repository 是自己的 Fork Repo。</li>
+                        <li>仔細填寫 PR 的標題與內容，說明作業目的、方法、附上結果圖，並寫下自己的觀察與討論。</li>
+                        <li>點擊 <strong>Create pull request</strong>，即可將作業繳交給老師。</li>
+                    </ul>
+                </li>
+                <li><strong>接收批改與回饋：</strong> 老師會在 PR 頁面中直接留言、批准作業 (Approve) 或要求修改 (Request changes)。如果需要修改，只需在 Codespace 中更新程式碼並再次 Push，PR 的內容就會自動更新。</li>
             </ol>
 
+            <div class="workflow-summary">
+                <h5>✅ 學生流程總結</h5>
+                <ol>
+                    <li><strong>Fork</strong> 老師的 Repo</li>
+                    <li>在自己的 <strong>Fork Repo</strong> 開 <strong>Codespace</strong> 完成作業</li>
+                    <li><strong>Commit & Push</strong> 到自己的 Fork Repo</li>
+                    <li>建立 <strong>Pull Request (PR)</strong> 把作業交到老師的 Repo</li>
+                    <li>在 PR 中接受老師的 <strong>Review</strong></li>
+                </ol>
+            </div>
+
             <h4>3. 課程應用範例</h4>
             <h5>1. 地震波形處理</h5>
             <p>學生可以直接在 Notebook 中執行 ObsPy 程式碼來讀取和繪製地震波形，並進行濾波、震相辨識等練習。</p>
@@ -337,15 +343,6 @@ fig.coast(region=[119, 123, 21.5, 25.5], projection="M12c", shorelines=True, fra
 fig.plot(x=[121.6], y=[24.0], style="c0.3c", color="red")
 fig.show()</code></pre></div>
 
-            <h5>3. 作業繳交方式</h5>
-            <p>Codespaces 完美整合了 Git 與 GitHub 的流程，作業繳交與協作變得非常高效：</p>
-            <ol style="padding-left: 20px;">
-                <li>學生在自己的分支 (Branch) 上完成 Notebook 作業（例如 <code>hw1-studentID</code>）。</li>
-                <li>完成後，將程式碼推送到 GitHub，並建立一個 Pull Request (PR)。</li>
-                <li>在 PR 的描述中附上程式碼、結果圖，並寫下觀察與結論。</li>
-                <li>同組同學或老師可以在 PR 下方進行 Code Review，例如給予評論、批准合併或要求修改。</li>
-            </ol>
-
             <h4>4. 延伸應用</h4>
             <ul class="step-list">
                 <li><strong>自動化作業分發：</strong> 老師可以使用 GitHub Classroom，讓每位學生點擊連結後，都能自動建立一個含有 Codespaces 配置的個人作業 Repo。</li>
@@ -361,7 +358,7 @@ fig.show()</code></pre></div>
     </main>
 
     <a href="#" class="back-to-top" title="回到頂部">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24" fill="currentColor"><path d="M11.9999 10.8284L7.05023 15.7782L5.63602 14.364L11.9999 8L18.3638 14.364L16.9496 15.7782L11.9999 10.8284Z"></path></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.9999 10.8284L7.05023 15.7782L5.63602 14.364L11.9999 8L18.3638 14.364L16.9496 15.7782L11.9999 10.8284Z"></path></svg>
     </a>
 
     <footer>