How to use Jquery+php+mysql to implement an online test project _php Tutorial

How to use Jquery+php+mysql to implement an online test project

　How to use Jquery+php+mysql to implement an online test project

This article will be combined with examples to introduce how to use Jquery+php+mysql to achieve online test questions, including dynamic reading of the topic, the background score after the answer, and return to answer results.

In the previous article, we described the effect of a test question implemented with jquery. Then this article will be combined with examples to introduce how to use Jquery+php+mysql to achieve online test questions, including dynamic reading of the topic, the background score after the answer, and return to answer the results. This is a comprehensive Web application article, it is recommended that you should have the basic knowledge of html,jquery and PHP and MySQL in this article.

quiz.php

I am writing PHP and HTML in the quiz.php file for ease of interpretation. First and this site on the previous article: jquery implementation of the test answer function, load the jquery library and quizs.js files, and then in the appropriate location to add the test question HTML structure.

?

1

We are going to read the topic information when the page loads and display it to the jquery call. The topic information comes from the database, we can first add the topic and its answer option information in the data table quiz.

We construct SQL statements, use PHP to query the database, read the question and answer options information, and note that we do not need to read the correct answer at this time. The topic information is then assigned to the variable $json in JSON format.

?

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

Include_once ("connect.php");//Connect database $sql = "SELECT * from quiz ORDER by ID ASC"; $query = mysql_query ($sql); Querying data while ($row =mysql_fetch_array ($query)) { $answers = Explode (' # # # ', $row [' answer ']); Separate the answer options $arr [] = Array ( ' Question ' = $row [' id ']. ', '. $row [' question '],//Topic ' Answers ' = $answers//Answer options ); } $json = Json_encode ($arr); Convert JSON format ?>

We get a bunch of JSON-formatted data, and then, like the previous article, call Jquizzy (), as follows:

?

1 2 3 4 5 6

$ (function () { $ (' #quiz-container '). Jquizzy ({ Questions: ,//Question information Sendresultsurl: ' data.php '//Result processing address }); });

In this way, we run the Web page quiz.php, is not generated a test question, look at the source code, we can only see the JSON data, but can not see the answer to the corresponding part of the question.

data.php

When calling the test question, there is an option Sendresultsurl, it is in the user to finish the problem, click "Finish" button, to the background data.php send an AJAX interaction request, data.php will be based on the user's answer, than the correct answers, and then give the user scores.

?

include_once ("connect.php");//Connection Database

$data = $_request[' an '];//Get answer info

$answers = ex Plode (' | ', $data); Parse data

$an _len = count ($answers)-1;///Number of topics

$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 questions

while ($row =mysql_fetch_array ($query)) {

if ($answers [$i]== $row [' correct ']) {//comparison to correct answer

$arr [' res '] [] = 1; Correct

$q _right + = 1;//correct answer +1

}else{

$arr [' res '] [] = 0;//error

}

$i + +;

}

$arr [' score '] = Round (($q _right/$an _len) *100);//calculation score

Echo json_encode ($arr);

td>

1 2 3 4 5 6 7 8 9 11 + + + / / / + +

data.php, the first connection to the database, receive processing parameters An,an is the answer of the front-end user answers, and then query the data table, the user submitted the answer and data table in the correct answer, compared to do the corresponding processing, and calculate the user answer scores, the final output return JSON format data to the foreground call.

Quizs.js

We have modified the JS code, mainly for the front and rear Ajax interactive part, the core of Quizs.js is as follows:

?

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

If (config.sendresultsurl!== null) { var collate = []; var myanswers = '; //Get answers to your questions for (r = 0; r < useranswers.length; r++) { Collate.push (' {"Questionnumber": "' + parseint (r + 1, Ten) + '", "us Eranswer ":" ' + 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) + " ") + "; }); ResultSet = ' ' + judgeskills (json.score) + ' Your score: ' + json.score + ' + ResultSet + '; Supercontainer.find ('. Result-keeper '). HTML (ResultSet). Show (+); } }); }

After the user answers the questions, the answer of the user is composed of a string such as "1|2|4|1|3|" In the form, and then through the $.getjson will answer to the parameter an submitted to the background, the background PHP processing than the correct answer, will be more than the results returned, return results such as: {"res": [1,0,1,1,0], "score": 60},res is the answer to the results, Each of the five questions to answer the results, 1 means that the answer is normal, 0 means the answer error, score means score. The returned results are then processed, resulting in the evaluation and total score of each question, generating the corresponding HTML structure.

Mysql

Finally, the structure of MySQL data table quiz is attached:

?

1 2 3 4 5 6 7

CREATE TABLE IF not EXISTS ' quiz ' ( ' id ' int (one) not NULL auto_increment, ' Question ' varchar (+) not NULL, ' Answer ' varchar (+) not NULL, ' Correct ' tinyint (2) not NULL, PRIMARY KEY (' id ') ) Engine=myisam DEFAULT Charset=utf8;

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

The above mentioned is the whole content of this article, I hope you can like.

http://www.bkjia.com/PHPjc/990336.html www.bkjia.com true http://www.bkjia.com/PHPjc/990336.html techarticle How to use Jquery+php+mysql to implement an online test project how to use Jquery+php+mysql to implement an online test project This article will be combined with examples to show you how to use the Jquery+p ...

