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

在上一篇文章中,我们介绍了使用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文件。

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

(0)

相关推荐

  • 基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片

    本文用示例讲述了如何使用jQuery与PHP及Mysql结合,实现WEB版在线拍照.上传.显示浏览的功能,ajax交互技术贯穿本文始末,所以本文的读者要求具备相当熟悉jQuery及其插件使用和javscript相关知识,具备PHP和Mysql相关知识. 点击此处下载源码     HTML 首先,我们要建立一个主页面index.html来展示最新上传的照片,我们使用jQuery来获取最新的照片,所以这是一个HTML页面,不需要PHP标签,当然还要建立一个包括用来拍照和上传交互所需的HTML结构.

  • PHP+Mysql+jQuery实现动态展示信息

    在本站前面有文章介绍了如何实现发表微博说说:PHP+Mysql+jQuery实现发布微博程序--jQuery篇,本例将基于其数据库结构,用动态的方式展示发表的说说信息. 查看示例:DEMO XHTML 复制代码 代码如下: <div id="demo"> <div class="saylist"> <a href="#"><img src="images/0.jpg" width=&q

  • PHP+jQuery+Ajax+Mysql如何实现发表心情功能

    实现发表心情功能通过php+jquery+ajax+mysql技术,大致流程我先给大家理下:主页index.html页面通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向后台php发送请求,php对用户cookie验证(是否是首次提交),然后将数据库对应的心情字段内容加1,成功后返回前端页面,告诉首页index页面发表成功,并调整柱状图和统计数据. 请看效果图: html: 先看HTML,我们在index.html中放置一个#msg,用来显示操作结果信息,#mood是操

  • PHP+Mysql+jQuery实现发布微博程序 jQuery篇

    该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码 代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正

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

    在上一篇文章中,我们介绍了使用jQuery实现的测试题效果.那么本文将结合实例给大家介绍如何使用jQuery+PHP+MySQL来实现在线测试题,包括动态读取题目,答题完毕后台评分,并返回答题结果.这是一篇WEB综合应用文章,建议阅读本文的您应该具备HTML,jQuery以及PHP和MySQL等基本知识. quiz.php 在这里为了讲解方便,我将php和HTML混写在quiz.php文件中.首先和本站上篇文章:jQuery实现的测试答题功能一样,载入jQuery库和quizs.js文件,然后在

  • jQuery+PHP+MySQL二级联动下拉菜单实例讲解

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 实现效果:当选择大类时,小类下拉框里的选项内容也随着改变. 实现原理:根据大类的值,通过jQuery把值传给后台PHP处理,PHP通过查询MySQl数据库,得到相应的小类,并返回JSON数据给前端处理. XHTML 首先我们要建立两个下拉选择框,第一个是大类,第二个是小类.大类的值可以是预先写好,也可以是从数据库读取. <lab

  • jQuery+PHP+Mysql实现抽奖程序

    抽奖程序在实际生活中广泛运用,由于应用场景不同抽奖的方式也是多种多样的.本文将采用实例讲解如何利用jQuery+PHP+MySQL实现类似电视中常见的一个简单的抽奖程序. 查看演示 本例中的抽奖程序要实现从海量手机号码中一次随机抽取一个号码作为中奖号码,可以多次抽奖,被抽中的号码将不会被再次抽中.抽奖流程:点击"开始"按钮后,程序获取号码信息,滚动显示号码,当点击"停止"按钮后,号码停止滚动,这时显示的号码即为中奖号码,可以点击"开始"按钮继续抽

  • MySQL PXC构建一个新节点只需IST传输的方法(推荐)

    需求场景:原有的pxc环境数据量已经比较大,新买的服务器要加入此集群中,如何让其用IST的方式传输,而不是SST. PXC传输数据有两种方式: IST:Incremental State Transfer 增量同步 SST:State Snapshot Transfer 全量同步 IST 发生的条件:This is done using caching mechanism on nodes (即只发生在之前集群里的节点数据还有在缓存中) 判断方法: mysql> show global stat

  • MySQL根据某一个或者多个字段查找重复数据的sql语句

    sql 查出一张表中重复的所有记录数据 1.表中有id和name 两个字段,查询出name重复的所有数据 select * from xi a where (a.username) in (select username from xi group by username having count(*) > 1) 2.查询出所有数据进行分组之后,和重复数据的重复次数的查询数据,先列下: select count(username) as '重复次数',username from xi group

  • jQuery实现异步上传一个或多个文件

    本文实例为大家分享了jQuery实现异步上传一个或多个文件的具体代码,供大家参考,具体内容如下 首先使用SpringMvc文件上传,需要引入第三方上传文件的jar: <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </depen

  • MySQL UPDATE 语句一个“经典”的坑

    目录 1.有问题的SQL语句 有人问,比如下图: 问题归纳起来就是:在MySQL里面update一条记录,语法都正确的,但记录并没有被更新... 刚遇到这个问题的时候,我拿到这条语句直接在测试库里面执行了一把,发现确实有问题,但和开发描述的还是 有区别 ,这里我用测试数据来模拟下: 1.有问题的SQL语句 执行之后的记录是: 可以看到,结果并不像这位开发同学说的"好像没有效果",实际上是有效果的: why? 看起来,语法是完全没有问题,翻了翻MySQL官方文档的update语法: 看到

  • 关于MySQL分区表的一个性能BUG

    目录 二.使用pt-pmap进行栈分析 三.关于本列中瓶颈点的分析 四.分区表中多次建立template的情况 五.关于一个特殊的流程 六.问题模拟 七.总结 一.问题描述 最近遇到一个问题,也就是使用分区表进行数据查询/加载的时候比普通表的性能下降了约50%,主要瓶颈出现在CPU,既然是CPU瓶颈理所当然的我们可以采集perf top -a -g和pstack来寻找性能瓶颈所在,同时和普通表进行对比,发现CPU主要耗在函数build_template_field上如下图: 二.使用pt-pma

  • MySQL如何统计一个数据库所有表的数据量

    目录 场景: 官网的解释: 补充:查询表大小 总结 场景: mysql统计一个数据库里所有表的数据量,最近在做统计想查找一个数据库里基本所有的表数据量,数据量少的通过select count再加起来也是可以的,不过表的数据有点多,不可能一个一个地查 记得在Navicat里,选择一个数据量,点击表,如图: 是可以看到所有表具体的数据行的 然后可以通过sql实现?在mysql里是可以查询information_schema.tables这张表的 SELECT table_rows,table_nam

随机推荐