如何使用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的FTP学习(一)
Oct 09 PHP
php Notice: Undefined index 错误提示解决方法
Aug 29 PHP
JpGraph php柱状图使用介绍
Aug 23 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
Nov 10 PHP
php中配置文件操作 如config.php文件的读取修改等操作
Jul 07 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
Jun 20 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
Sep 04 PHP
php阿拉伯数字转中文人民币大写
Dec 21 PHP
如何判断php mysqli扩展类是否开启
Dec 24 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
May 29 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
Jul 24 PHP
PHP7 参数处理机制修改
Mar 09 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
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
晋城吧对DiscuzX进行的前端优化要点
2010/09/05 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python中除法使用的注意事项
2014/08/21 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python微信操控itchat的方法
2019/05/31 Python
我就是这样学习Python中的列表
2019/06/02 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
分公司经理岗位职责
2013/11/11 职场文书
文字自荐书范文
2014/02/10 职场文书
安全生产月演讲稿
2014/05/09 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python