如何使用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中的登陆login
Jan 18 PHP
PHP Zip解压 文件在线解压缩的函数代码
May 26 PHP
rrmdir php中递归删除目录及目录下的文件
May 15 PHP
php中获取远程客户端的真实ip地址的方法
Aug 03 PHP
Linux编译升级php的详细方法
Nov 04 PHP
php循环table实现一行两列显示的方法
Jun 04 PHP
PHP Yaf框架的简单安装使用教程(推荐)
Jun 08 PHP
PHP表单验证内容是否为空的实现代码
Nov 14 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
Aug 15 PHP
php微信公众号开发之微信企业付款给个人
Oct 04 PHP
PHP中的self关键字详解
Jun 23 PHP
PHP 观察者模式深入理解与应用分析
Sep 25 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
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
php实现微信支付之退款功能
2018/05/30 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
Python读写ini文件的方法
2015/05/28 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python函数和模块的使用总结
2019/05/20 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
保护环境的建议书
2014/03/12 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
高一新生军训方案
2014/05/12 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
城管个人总结
2015/02/28 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
张丽莉观后感
2015/06/16 职场文书
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle