如何使用jQuery+PHP+MySQL来实现一个在线测试项目


Posted in PHP onApril 26, 2015

在上一篇文章中,我们介绍了使用jQuery实现的测试题效果。那么本文将结合实例给大家介绍如何使用jQuery+PHP+MySQL来实现在线测试题,包括动态读取题目,答题完毕后台评分,并返回答题结果。这是一篇WEB综合应用文章,建议阅读本文的您应该具备HTML,jQuery以及PHP和MySQL等基本知识。

quiz.php

在这里为了讲解方便,我将php和HTML混写在quiz.php文件中。首先和本站上篇文章:jQuery实现的测试答题功能一样,载入jQuery库和quizs.js文件,然后在适当的位置加上测试题html结构。

<div id="quiz-container"></div>

我们要在页面加载的时候将题目信息读取出来,并且给jQuery调用显示。题目信息来自数据库,我们可以先在数据表quiz中加入题目及其答案选项信息。
我们通过构造SQL语句,使用PHP查询数据库,读取题目和答案选项信息,注意这个时候我们不需要读取正确答案。然后将题目信息以JSON格式赋给变量$json。

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

我们得到了一串json格式的数据,然后就像上一篇文章介绍的一样,调用jquizzy(),方法如下:

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

这样,我们再来运行网页quiz.php,是不是生成了一个测试题,查看源代码,我们只能看到json数据,却不能看到试题对应的答案部分。

data.php

在调用测试题的时候,有个选项sendResultsURL,它是在用户打完题,点击“完成”按钮时,向后台data.php发送一个Ajax交互请求,data.php会根据用户的答题情况,比对正确答案,然后给出用户所得分数。

include_once("connect.php"); //连接数据库 
 
$data = $_REQUEST['an']; //获取答题信息 
$answers = explode('|',$data); //分析数据 
$an_len = count($answers)-1; //题目数 
 
$sql = "select correct from quiz order by id asc"; 
$query = mysql_query($sql); //查询表 
$i = 0; 
$score = 0; //初始得分 
$q_right = 0; //答对的题数 
while($row=mysql_fetch_array($query)){ 
  if($answers[$i]==$row['correct']){ //比对正确答案 
    $arr['res'][] = 1; //正确 
    $q_right += 1; //正确答题数+1 
  }else{ 
    $arr['res'][] = 0; //错误 
  } 
  $i++; 
} 
$arr['score'] = round(($q_right/$an_len)*100); //计算总得分 
echo json_encode($arr);

data.php中,首先连接数据库,接收处理参数an,an是前端用户答题的答案,然后查询数据表,将用户提交的答案与数据表中题目的正确答案进行对比,对比后做相应的处理,并计算出用户答题所得分数,最后输出返回json格式数据给前台调用。

quizs.js

我们对js代码做了修改,主要针对前后台ajax交互部分,quizs.js中核心部分如下:

if (config.sendResultsURL !== null) { 
  var collate = []; 
  var myanswers = ''; 
  //获取用户所答题的答案 
  for (r = 0; r < userAnswers.length; r++) { 
    collate.push('{"questionNumber":"' + parseInt(r + 1, 10) + '", "userAnswer":"' + userAnswers[r] + '"}'); 
    myanswers = myanswers + userAnswers[r]+'|'; 
  } 
   
  //Ajax交互 
  $.getJSON(config.sendResultsURL,{an:myanswers},function(json){ 
    if(json==null){ 
      alert('通讯失败!'); 
    }else{       
      var corects = json['res']; 
      $.each(corects,function(index,array){ 
        resultSet += '<div class="result-row">' + (corects[index] === 1 ? "<div class='correct'>#"+(index + 1)+"<span></span></div>": "<div class='wrong'>#"+(index + 1)+"<span></span></div>")+'</div>'; 
      }); 
      resultSet = '<h2 class="qTitle">' + judgeSkills(json.score) + '<br/> 您的分数: ' + json.score + '</h2><div class="jquizzy-clear"></div>' + resultSet + '<div class="jquizzy-clear"></div>'; 
             
             
      superContainer.find('.result-keeper').html(resultSet).show(500); 
    }   
  }); 
}

用户答题后,将用户所答题的答案组成字符串如“1|2|4|1|3|”的形式,然后通过$.getJSON将答案给参数an提交到后台,后台PHP处理比对正确答案后,将比对结果返回过来,返回结果如:{"res":[1,0,1,1,0],"score":60},res是答题比对结果,分别表示五道题的答题结果,1表示答题正常,0表示答题错误,score表示得分。然后将返回的结果处理,得出每道题的评判结果和总得分,生成对应的html结构。

MySQL

最后,附上mysql数据表quiz的结构:

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;

你可以往表中添加信息,也可以直接导入源码包中的quiz.sql文件。

以上所述就是本文的全部内容了,希望大家能够喜欢。

PHP 相关文章推荐
PHP连接MySQL查询结果中文显示乱码解决方法
Oct 25 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
Apr 24 PHP
ThinkPHP Mobile使用方法简明教程
Jun 18 PHP
destoon整合ucenter后注册页面不跳转的解决方法
Jun 21 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
May 13 PHP
CodeIgniter辅助之第三方类库third_party用法分析
Jan 20 PHP
PHP如何使用Memcached
Apr 05 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
Apr 20 PHP
PHP十六进制颜色随机生成器功能示例
Jul 24 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
Sep 16 PHP
PHPMAILER实现PHP发邮件功能
Apr 18 PHP
PHP单例模式实例分析【防继承,防克隆操作】
May 22 PHP
PHP开启opcache提升代码性能
Apr 26 #PHP
php格式化电话号码的方法
Apr 24 #PHP
php生成年月日下载列表的方法
Apr 24 #PHP
PHP传参之传值与传址的区别
Apr 24 #PHP
php获取访问者IP地址汇总
Apr 24 #PHP
php实现的RSS生成类实例
Apr 23 #PHP
php利用事务处理转账问题
Apr 22 #PHP
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
javascript中比较字符串是否相等的方法
2013/07/23 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
Python用GET方法上传文件
2015/03/10 Python
Python3处理文件中每个词的方法
2015/05/22 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
演讲开场白台词大全
2015/05/29 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书