jQuery+PHP+MySQL构建在线测试题系统：原理与实现

核心架构与流程

该系统采用前后端分离的思想（尽管代码耦合在文件中），主要由三个部分构成：前端交互层、后端处理层和数据存储层。用户在前端浏览试题并作答，浏览器收集答案后通过 AJAX 请求发送给 PHP 脚本。PHP 连接 MySQL 数据库，获取标准答案进行比对，计算出用户的得分和每道题的对错情况，最终以 JSON 格式返回给前端。前端接收数据后，动态生成包含得分和每道题解析的 HTML 结构显示给用户。

数据库设计与初始化

首先需要一个 MySQL 数据库来存储题目、选项和正确答案。表结构需包含题目 ID、题干内容、选项列表以及正确答案索引。

以下是创建数据表的 SQL 语句：

CREATE TABLE IF NOT EXISTS `quiz` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `question` varchar(100) NOT NULL,
 `answer` varchar(500) NOT NULL,
 `correct` tinyint(2) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

其中 answer 字段通常以特定分隔符（如 '###'）连接多个选项文本，correct 字段存储正确选项的索引（从 1 开始或从 0 开始，取决于前端逻辑）。

后端准备：读取题目并生成 JSON

在 quiz.php 文件中，首先需要包含数据库连接文件，然后查询所有题目信息。注意，此时只需读取题目和选项，不需要读取正确答案，以避免前端源代码泄露答案。

<?php 
include_once("connect.php");//连接数据库 
$sql = "select * from quiz order by id asc";
$query = mysql_query($sql); //查询数据 
$arr = array();
while($row=mysql_fetch_array($query)){ 
  $answers = explode('###',$row['answer']); //将答案选项分开 
  $arr[] = array(
    'question' => $row['id'].'、'.$row['question'], //题目拼接ID以便显示
    'answers' => $answers //答案选项数组
  ); 
}
$json = json_encode($arr); //转换json格式
?>

第1步：配置前端 Quiz 插件参数

在页面加载时，调用 jQuery 库和相关的测试题 JS 文件（如 quizs.js）。初始化测试插件时，将刚才生成的 $json 变量赋值给插件的 questions 参数，并指定处理结果的 URL sendResultsURL。

<script>
$(function(){
  $('#quiz-container').jquizzy({
    questions: <?php echo $json; ?>, //试题信息
    sendResultsURL: 'data.php' //结果处理地址
  });
});
</script>

此步骤完成后，页面 quiz-container 区域内会动态渲染出题目和选项，且源码中不可见答案。

后端评分：比对答案并计算得分

当用户点击“完成”按钮时，前端会将收集到的答案字符串发送给 data.php。该脚本负责核心评分逻辑。

第2步：接收并解析用户答案

用户在 quizs.js 中将答案拼接成以 '|' 分隔的字符串（例如 "1|2|4|1|3|"），并通过 GET 请求的参数 an 发送。PHP 接收该参数并使用 explode('|', $data) 分割成数组。

<?php
include_once("connect.php"); //连接数据库
$data = $_REQUEST['an']; //获取答题信息
$answers = explode('|',$data); //分析数据
//移除末尾空值并计数
$answers = array_filter($answers);
$an_len = count($answers);
?>

第3步：查询正确答案并比对

遍历用户答案数组，同时从数据库中按顺序取出每道题的正确答案 correct 进行比对。记录每题对错情况，并累计答对题数。

$sql = "select correct from quiz order by id asc";
$query = mysql_query($sql);
$i = 0;
$score = 0; //初始得分
$q_right = 0; //答对的题数
$arr['res'] = array();

while($row=mysql_fetch_array($query)){
  if(isset($answers[$i]) && $answers[$i] == $row['correct']){ //比对正确答案
    $arr['res'][] = 1; //标记为正确
    $q_right += 1; //正确答题数+1
  }else{
    $arr['res'][] = 0; //标记为错误
  }
  $i++;
}

//计算总分（百分制）
if ($an_len > 0) {
    $arr['score'] = round(($q_right / $an_len) * 100);
} else {
    $arr['score'] = 0;
}
echo json_encode($arr);
?>

返回的 JSON 结构示例：{"res":[1,0,1,1,0],"score":60}，其中 res 数组表示每道题的对错（1为对，0为错），score 为总得分。

前端结果展示

在 quizs.js 的 AJAX 回调函数中，接收后端返回的 JSON 数据，并遍历 res 数组生成结果列表。

$.getJSON(config.sendResultsURL,{an:myanswers},function(json){
    if(json==null){
      alert('通讯失败！');
    }else{       
      var corects = json['res'];
      var resultSet = '';
      $.each(corects,function(index,array){
        //根据对错生成不同的HTML样式
        resultSet += '<div class="result-row">' + (corects[index] === 1 ? "<div class='correct'>#"+(index + 1)+"</div>" : "<div class='wrong'>#"+(index + 1)+"</div>")+'</div>';
      });
      //插入标题和结果容器
      superContainer.find('.result-keeper').html(resultSet).show(500);
    }   
  });

至此，用户可以看到自己的得分以及每道题的判分状态。

总结

本实例展示了经典的 Web 综合应用模式：利用 PHP 操作 MySQL 获取数据，JSON 作为数据交换格式，jQuery 简化前端 DOM 操作和 AJAX 请求。开发者在实际项目中应注意使用预处理语句防止 SQL 注入，并考虑增加时间限制、防刷新作弊等安全性功能。
以上就是jQuery+PHP+MySQL实现在线测试项目的详细内容，更多关于jQuery PHP MySQL在线测试的资料请关注本站其它相关文章！