How to use jQuery PHP MySQL to implement an online test project

How to use jQuery PHP MySQL to implement an online testing project

　How to use jQuery PHP MySQL to implement an online testing project

This article will use examples to introduce how to use jQuery PHP MySQL to implement online test questions, including dynamic reading of questions, background scoring after answering the questions, and returning the answer results.

In the previous article, we introduced the test question effect achieved using jQuery. Then this article will use examples to introduce how to use jQuery PHP MySQL to implement online test questions, including dynamic reading of questions, background scoring after answering the questions, and returning the answer results. This is a comprehensive WEB application article. It is recommended that you who read this article should have basic knowledge of HTML, jQuery, PHP and MySQL.

Quiz.php

For the convenience of explanation here, I mixed php and HTML in the quiz.php file. First, it is the same as the previous article on this site: the test answering function implemented by jQuery. Load the jQuery library and quizs.js file, and then add the test question html structure at the appropriate location.

We need to read the question information when the page loads and call jQuery to display it. The question information comes from the database. We can first add the question and its answer option information to the data table quiz.

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格式

We construct a SQL statement, use PHP to query the database, and read the question and answer option information. Note that we do not need to read the correct answer at this time. Then assign the question information to the variable $json in JSON format.

$(function(){

$('#quiz-container').jquizzy({

questions: , //试题信息

sendResultsURL: 'data.php' //结果处理地址

});

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<🎜>include_once("connect.php");//Connect to the database<🎜> <🎜> <🎜> <🎜>$sql = "select * from quiz order by id asc";<🎜> <🎜>$query = mysql_query($sql); //Query data<🎜> <🎜>while($row=mysql_fetch_array($query)){<🎜> <🎜>$answers = explode('###',$row['answer']); //Separate answer options<🎜> <🎜>$arr[] = array(<🎜> <🎜>'question' => $row['id'].', '.$row['question'], //Question 'answers' => $answers //Answer options ); } $json = json_encode($arr); //Convert json format ?>

We got a string of data in json format, and then called jquizzy() as introduced in the previous article. The method is as follows: 　?

1 2 3 4 5 6

$(function(){ $('#quiz-container').jquizzy({ questions: , //question information sendResultsURL: 'data.php' //Result processing address }); });

In this way, let’s run the web page quiz.php again to see if a test question is generated. Looking at the source code, we can only see the json data, but not the answer part corresponding to the test question.

data.php

When calling the test question, there is an option sendResultsURL. When the user finishes typing the question and clicks the "Finish" button, it sends an Ajax interactive request to the background data.php. data.php will respond based on the user's answer. , compare the correct answers, and then give the user's score.

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);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

include_once("connect.php"); //Connect to the database $data = $_REQUEST['an']; //Get answer information $answers = explode('|',$data); //Analyze data $an_len = count($answers)-1; //Number of questions $sql = "select correct from quiz order by id asc"; $query = mysql_query($sql); //Query table $i = 0; $score = 0; //Initial score $q_right = 0; //Number of correct answers while($row=mysql_fetch_array($query)){ if($answers[$i]==$row['correct']){ //Compare the correct answers $arr['res'][] = 1; //Correct $q_right = 1; //Number of correct answers 1 }else{ $arr['res'][] = 0; //Error } $i ; } $arr['score'] = round(($q_right/$an_len)*100); //Calculate the total score echo json_encode($arr);

In data.php, first connect to the database and receive the processing parameter an, which is the answer to the front-end user's answer. Then query the data table, compare the answer submitted by the user with the correct answer to the question in the data table, and make corresponding decisions after comparison. Processing, and calculates the score obtained by the user's answer, and finally outputs and returns json format data to the front desk call.

Quizs.js

We have modified the js code, mainly for the front and backend ajax interaction part. The core parts of quizs.js are as follows:

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 = '

' (corects[index] === 1 ? "

#" (index 1) "

": "

#" (index 1) "

") '

});

resultSet = '

' judgeSkills(json.score) '
您的分数： ' json.score '

' resultSet '

superContainer.find('.result-keeper').html(resultSet).show(500);

}

});

}

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;

6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

if (config.sendResultsURL !== null) { var collate = []; var myanswers = ''; //Get the answers to the questions answered by the user for (r = 0; r < userAnswers.length; r ) {<🎜> <🎜>collate.push('{"questionNumber":"' parseInt(r 1, 10) '", "userAnswer":"' userAnswers[r] '"}');<🎜> <🎜>myanswers = myanswers userAnswers[r] '|';<🎜> <🎜>}<🎜> <🎜> <🎜> <🎜>//Ajax interaction<🎜> <🎜>$.getJSON(config.sendResultsURL,{an:myanswers},function(json){<🎜> <🎜>if(json==null){<🎜> <🎜>alert('Communication failed!');<🎜> <🎜>}else{<🎜> <🎜>var corects = json['res'];<🎜> <🎜>$.each(corects,function(index,array){<🎜> <🎜>resultSet = '

' (corects[index] === 1 ? "

#" (index 1) "

": "

#" (index 1) "

") '< /div>'; }); resultSet = '

' judgeSkills(json.score) '
Your score: ' json.score '

' resultSet '

'; superContainer.find('.result-keeper').html(resultSet).show(500); } }); }

After the user answers the question, the answer to the question answered by the user is formed into a string in the form of "1|2|4|1|3|", and then the answer is submitted to the parameter an through $.getJSON to the background, and the background PHP processing ratio After checking the correct answer, the comparison result is returned. The returned result is as follows: {"res":[1,0,1,1,0],"score":60}, res is the answer comparison result, indicating five values respectively. The answer result of a question, 1 means the answer is normal, 0 means the answer is wrong, and score means the score. Then the returned results are processed to obtain the evaluation results and total score of each question, and the corresponding html structure is generated. 　MySQL Finally, here is the structure of the mysql data table quiz: 　?

1 2 3 4 5 6 7

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;

You can add information to the table, or directly import the quiz.sql file in the source package.

The above is the entire content of this article, I hope you all like it.