How to Use jQuery + PHP + MySQL to implement an online test project

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 introduce how to use jQuery + PHP + MySQL to implement online testing, including dynamically reading questions, scoring at the background after the answer, and returning the answer results.

In the previous article, we introduced the effects of testing with jQuery. This article will introduce how to use jQuery + PHP + MySQL to implement online testing, including dynamically reading questions, scoring at the background after the answer, and returning the answer results. This is a comprehensive WEB Application Article. We recommend that you have basic knowledge about HTML, jQuery, PHP, MySQL, and so on.

Quiz. php

For convenience, I will mix php and HTML in the quiz. php file. First, load the jQuery Library and the quizs. js file, and add the html structure of the test question to the appropriate location, just like the test answer function implemented by jQuery.

?

1	<Div id = "quiz-container"> </div>

We need to read the question information when loading the page and display it to jQuery call. The question information comes from the database. You can first add the Question and Answer option information to the table quiz.

We construct an 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, the question information is assigned to the variable $ JSON in json format.

?

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

<? Php 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 the json format ?>

We get a string of data in json format and call jquizzy () as described in the previous article. The method is as follows:

?

1 2 3 4 5 6

$ (Function (){ $ ('# Quiz-iner'). jquizzy ({ Questions: <? Php echo $ json;?>, // Question information SendResultsURL: 'Data. php' // result processing address }); });

In this way, we can run the web page quiz. php to check the source code. We can only see json data, but cannot see the answer part of the question.

Data. php

When calling the test question, there is an option sendResultsURL, which is to send data to the background when the user finishes the question and clicks the "finish" button. php sends an Ajax interaction request, data. php compares the correct answer based on the user's answer situation and then gives the user's score.

?

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 ['any']; // obtain 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 a 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 answer $ 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); // calculates the total score Echo json_encode ($ arr );

Data. in php, First connect to the database and receive the processing parameter an. an is the answer of the front-end user, then query the data table, and compare the answers submitted by the user with the correct answers of the questions in the data table, after comparison, perform corresponding processing, calculate the score obtained from the user's answer, and output the json format data to the front-end for calling.

Quizs. js

We modified the js Code mainly for the ajax interaction section in the front and back. The core section 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 21 22 23 24 25

If (config. sendResultsURL! = Null ){ Var collate = []; Var myanswers = ''; // Obtain the user's answer 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 + = '<div class = "result-row">' + (corects [index] = 1? "<Div class = 'correct'> #" + (index + 1) + "<span> </div> ": "<div class = 'wrong '> #" + (index + 1) + "<span> </div>") +' </div> '; }); ResultSet = '     Supercontainer.find('.result-keeper'{.html (resultSet). show (500 ); } }); }

After a user answers a question, the answer is a string consisting of "1 | 2 | 4 | 1 | 3 |", and then passed $. getJSON submits the answer to the parameter an to the backend. After the backend PHP compares the correct answer, the comparison result is returned. The returned result is {"res, 0], "score": 60}, res is the answer comparison result, indicating the answer results of the five questions respectively, 1 indicates that the answer is normal, 0 indicates that the answer is incorrect, and score indicates the score. Then, the returned results are processed to obtain the evaluation results and total scores of each question, and generate the corresponding html structure.

MySQL

Finally, the structure of the mysql Data Table quiz is attached:

?

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 all the content of this article. I hope you will like it.