「國中數學＿一元二次方程式選擇題遊戲」的技術重點，並涵蓋如何在網頁中使用 MathJax 進行數學式排版的原理與設定。此文件可以視為製作「二次方程式判別式測驗」網頁的完整說明，包含程式碼範例與 MathJax 的配置方式。
一、MathJax 與 LaTeX 簡介
TeX/LaTeX
TeX/LaTeX 是用來將文件輸出到列印設備的排版引擎，側重於較完整的排版功能（包含文字、數學式、段落、頁面配置等）。
MathJax
MathJax 是在網頁端呈現數學符號與公式的 JavaScript 函式庫。
由於 HTML/CSS 本身已能處理大部分的文字排版，因此 MathJax 只專注於「數學模式」(Math Mode) 的符號排版與顯示。
MathJax 會檢查網頁中哪些區段是數學模式，並將其轉譯為美觀的數學公式。
數學模式的邊界符號（Delimiter）
在 LaTeX 中，行間公式常用 $$ ... $$ 包住，行內公式常用 $ ... $。
在 MathJax 中，為避免衝突，預設的「行內公式」會改用 \( ... \) 與 \) ... \) 包住。如果想改回 $ ... $，需自行設定。
數學模式中的內容會被 MathJax 自動轉譯顯示為排版良好的公式。例如：
x=−b±b2−4ac2a
x=2a−b±b2−4ac
MathJax 的個人化配置
可以透過一個全域的 MathJax 物件來設定，如想使用 $ ... $、$$ ... $$ 來標示數學模式，可在
若要加載其它套件（如 mathtools），可在 loader 與 tex 區塊中加入：
MathJax = {
loader: {
load: ['[tex]/mathtools']
},
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
packages: {
'[+]': ['mathtools'] // 額外加載 mathtools
}
}
};
如果要新增自訂的 LaTeX 宏 (macros)，在 macros 中進行設定。例如要定義 \myvec{AB} 顯示為帶箭號的向量：
macros: {
myvec: ['\\overset{\\xrightharpoonup{}}{#1}', 1]
}
注意：在 JavaScript 字串中，每個反斜線 \ 通常要再用 \\ 跳脫一次。
二、遊戲示範程式碼範例
以下是一個示範「二次方程式判別式測驗」的完整 HTML 程式碼，使用 MathJax 進行數學式顯示，並利用 JavaScript 建立選擇題與互動功能。
程式碼說明
HTML 結構
中載入 Google 字體與 MathJax。
內嵌一些基本的 CSS，設定網頁字體、頁面寬度、按鈕與題目區塊的風格。
設置一個音效開關（可依需求拿掉或改寫）。
主要的互動區塊包含：
#equation: 用來顯示隨機生成的二次方程式
#choices: 用來顯示判別式的選項（radio button）
#feedback: 答對答錯後的訊息
#explanation: 解題過程（答題後才顯示）
三個按鈕：送出答案、下一題、提示
JavaScript
generateEquation()：隨機產生二次方程式中 a、b、c 的數值。
displayEquation(a, b, c)：將方程式組合成字串並插入網頁。
typesetMath()：呼叫 MathJax.typesetPromise()，手動觸發 MathJax 重新排版（適用於新版 MathJax 3）。
calculateDiscriminant(a, b, c)：計算判別式 Δ=b2−4acΔ=b2−4ac。
generateWrongOptions(correct)：產生三個錯誤的判別式選項。
generateOptions(correctDiscriminant)：將正確與錯誤選項洗牌後顯示。
submitBtn 點擊：評分並給予回饋，顯示解題說明。
nextBtn 點擊：刷新新題目、重置答題區。
hintBtn 點擊：顯示計算判別式的提示。
二次方程式判別式測驗
三、其他 LaTeX 語法補充
行內模式 vs. 行間模式
行內模式（預設 MathJax 為 \( ... \)）
行間模式（預設 MathJax 為 $$ ... $$ 或 \\[ ... \\]）
若要改回 $ ... $ 與 $$ ... $$，可在 MathJax = { tex: { inlineMath: [...], displayMath: [...] } }; 中自行配置。
常見的數學符號
分數 \frac{a}{b}
上下標 x^2, x_i, e^{-x}
開根號 \sqrt{x}
向量箭號 \vec{AB} (或 \myvec{AB} 若有自行定義宏)
括號 \left(\frac{a}{b}\right), \left[ ... \right] …等
若不熟悉 LaTeX，通常可以在「線上 LaTeX 編輯器」或「Word + MathType」先組出想要的數學式，再將其 LaTeX 語法複製到網頁程式碼中。
自訂宏 (macro) 的使用
在 MathJax = { tex: { macros: { myvec: [...] } } } 中宣告
之後在數學式內可直接 \myvec{AB} 顯示為你設定的符號（例如帶箭頭的 AB→AB
）。
四、結論與建議
複製範例程式碼
直接將上述 HTML 程式碼貼入本地檔案或網頁主體，即可得到「二次方程式判別式測驗」的範例。
調整程式
若想改變使用 $ ... $ 做行內模式，需要在載入 MathJax 之前調整 MathJax.tex.inlineMath。
若要修改外觀、配色或題目生成邏輯，可針對 CSS 與 JavaScript 函式做更進一步的調整。
進階功能
配合後端（例如 Firebase、Node.js 等）可保存成績或做更高階的題庫管理。
加入提示音效、動畫效果或更多互動元素，增進學習趣味。
整體來說，只要熟悉 JavaScript 與 MathJax 的基本設定，即可輕鬆打造互動式的數學測驗網頁。祝教學開發順利！
二次方程式判別式測驗
分數：0