打造線上測驗系統：jQuery + PHP + MySQL 完整實作教學

想自建一套線上測驗平台？本文將帶你從零開始，結合 jQuery 前端互動、PHP 後端邏輯與 MySQL 資料儲存，完整實作一套支援動態載入題目、自動評分、即時回饋結果的線上測驗系統。閱讀前建議具備 HTML、jQuery、PHP 與 MySQL 基礎概念。

系統架構概覽

• quiz.php：主頁面，負責渲染題目結構、從資料庫讀取題目並輸出 JSON 供前端渲染。
• data.php：評分 API，接收前端送回的答案，與資料庫正確答案比對，回傳分數與逐題正誤。
• quizs.js：前端核心邏輯，處理題目渲染、答題流程、AJAX 送出答案與結果顯示。
• MySQL quiz 表：儲存題目、選項與正確答案。

資料庫設計：quiz 表結構

CREATE TABLE IF NOT EXISTS `quiz` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `question` varchar(100) NOT NULL COMMENT '題目內容',
  `answer` varchar(500) NOT NULL COMMENT '選項，以 ### 分隔',
  `correct` tinyint(2) NOT NULL COMMENT '正確選項索引（1-based）',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

範例資料：answer 欄位儲存「選項1###選項2###選項3###選項4」，correct 儲存正確選項的序號（1~4）。

後端核心：quiz.php 動態載入題目

<?php
include_once("connect.php"); // 資料庫連線

// 1. 查詢所有題目（不含正確答案）
$sql = "SELECT id, question, answer FROM quiz ORDER BY id ASC";
$query = mysqli_query($conn, $sql); // 建議改用 mysqli/PDO

$arr = [];
while ($row = mysqli_fetch_assoc($query)) {
    $answers = explode('###', $row['answer']);
    $arr[] = [
        'question' => $row['id'] . '、' . $row['question'],
        'answers'  => $answers
    ];
}
$json = json_encode($arr, JSON_UNESCAPED_UNICODE);
?>

前端以 jQuery 插件 jquizzy 渲染：

$(function(){
    $('#quiz-container').jquizzy({
        questions: <?php echo $json; ?>,
        sendResultsURL: 'data.php' // 交卷時送往評分端點
    });
});

評分邏輯：data.php

<?php
include_once("connect.php");
header('Content-Type: application/json; charset=utf-8');

$data = $_REQUEST['an'] ?? ''; // 格式： "1|3|2|4|"
$answers = explode('|', $data);
$ansCount = count($answers) - 1; // 末尾有空字串

// 取得正確答案序列
$sql = "SELECT correct FROM quiz ORDER BY id ASC";
$query = mysqli_query($conn, $sql);

$res = [];
$correctCount = 0;
$i = 0;
while ($row = mysqli_fetch_assoc($query)) {
    $userAns = (int)($answers[$i] ?? 0);
    $isCorrect = ($userAns === (int)$row['correct']);
    $res[] = $isCorrect ? 1 : 0;
    if ($isCorrect) $correctCount++;
    $i++;
}

$score = $ansCount > 0 ? round(($correctCount / $ansCount) * 100) : 0;
echo json_encode(['res' => $res, 'score' => $score], JSON_UNESCAPED_UNICODE);

前端互動：quizs.js 關鍵邏輯

使用者點擊「完成」後，將答案組成 1|2|4|1|3| 字串，透過 $.getJSON 送至 data.php，收到回傳 {"res":[1,0,1,1,0],"score":60} 後，動態產生結果 HTML：

$.getJSON(config.sendResultsURL, {an: myanswers}, function(json){
    if (!json) return alert('通訊失敗！');
    let html = '<h2 class="qTitle">' + judgeSkills(json.score) + '<br/> 您的分數： ' + json.score + '</h2>';
    json.res.forEach((v, i) => {
        html += '<div class="result-row">'
             + (v === 1 ? '<div class="correct">#' : '<div class="wrong">#')
             + (i+1) + '<span></span></div></div>';
    });
    $('.result-keeper').html(html).show(500);
});

安全性與擴充建議

• 防止作弊：正確答案絕不輸出至前端 JSON，僅在 data.php 伺服器端比對。
• 資料庫驅動升級：範例使用已棄用的 mysql_* 函式，實務請改用 mysqli 或 PDO 並採用預處理語句。
• 題目亂序：可在 SQL 加入 ORDER BY RAND() 或 PHP shuffle($arr)。
• 計時與防重送：Session 記錄開始時間、限制答題時長；交卷後寫入紀錄防重複提交。

完成部署後，即可擁有一套輕量級、可擴充的線上測驗系統，適合教學測驗、企業訓練考核、趣味測驗等多種場景。