如何使用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 Session变量不能传送到下一页的解决方法
Nov 27 PHP
simplehtmldom Doc api帮助文档
Mar 26 PHP
php更新mysql后获取影响的行数发生异常解决方法
Mar 28 PHP
PHP删除指定目录中的所有目录及文件的方法
Feb 26 PHP
基于CakePHP实现的简单博客系统实例
Jun 28 PHP
PHP中substr函数字符串截取用法分析
Jan 07 PHP
ThinkPHP连接Oracle数据库
Apr 22 PHP
PHP检测链接是否存在的代码实例分享
May 06 PHP
php通过smtp邮件验证登陆的方法
May 11 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
May 11 PHP
yii插入数据库防并发的简单代码
May 27 PHP
PHP面向对象程序设计重载(overloading)操作详解
Jun 13 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后退一页表单内容保存实现方法
2012/06/17 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
javascript中new关键字详解
2015/12/14 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python实现图片转字符画的示例代码
2017/08/21 Python
python实现最长公共子序列
2018/05/22 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Python实现SMTP邮件发送
2020/06/16 Python
python 绘制正态曲线的示例
2020/09/24 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
告诉你怎样写创业计划书
2014/01/27 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
廉洁自律个人总结
2015/02/14 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解SQL的窗口函数
2022/04/21 Oracle