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

Source: Internet
Author: User
Tags php and mysql

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 ...

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.