Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to use CSS+jQuery+PHP+MySQL to achieve online answer function", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use CSS+jQuery+PHP+MySQL to achieve online answer function" article.

Quiz.php

First load the jQuery library and quizs.js file, and then add the test question html structure in the appropriate location.

The code is as follows:

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

We construct SQL statements, use PHP to query the database, read questions and answer options, and note that we do not need to read the correct answers at this time. Then assign the topic information to the variable $json in JSON format.

The code is as follows:

We get a string of data in json format, and then, as described in the previous article, call jquizzy ()

The code is as follows:

$(function () {)

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

Questions:, / / examination question information

SendResultsURL: 'data.php' / / result processing address

});

});

In this way, when we run the web page quiz.php, we can only see the json data, but not the corresponding answer part of the test question, if we generate a test question and look at the source code.

Data.php

When calling the test question, there is an option sendResultsURL, which sends an Ajax interactive request to the background data.php when the user has finished typing the question and clicks the "finish" button. Data.php will compare the correct answer according to the user's answer, and then give the user's score.

The code is as follows:

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 items

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

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

}

$iTunes +

}

$arr ['score'] = round (($q_right/$an_len) * 100); / / calculate the total score

Echo json_encode ($arr)

In data.php, first connect to the database, receive the processing parameter an,an is the answer of the front-end user's answer, then query the data table, compare the answer submitted by the user with the correct answer of the question in the data table, compare it with the correct answer of the question in the data table, and calculate the score of the user's answer, and finally output and return the data in json format to the foreground.

Quizs.js

We have modified the js code, mainly aiming at the ajax interaction between the foreground and background. The core parts of quizs.js are as follows:

The code is as follows:

If (config.sendResultsURL! = = null) {

Var collate = []

Var myanswers =''

/ / get the answers to the questions answered by the user

For (r = 0; r < userAnswers.length; ringing +) {

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) + ") +''

});

ResultSet ='+ judgeSkills (json.score) + 'your score:' + json.score +''+ resultSet +''

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

}

});

}

After the user answers the question, form the answer into a string such as "1 | 2 | 4 | 1 | 3 |", and then submit the answer to the parameter an to the background through $.getJSON. After the background PHP processes the correct answer, the comparison result will be returned. The result returned is: {"res": [1jing0jing1jing0], "score": 60}. Res is the result of the comparison of the five questions, and 1 indicates that the answer is normal. 0 means wrong answer, and score means score. Then the returned results are processed, the evaluation results and total scores of each question are obtained, and the corresponding html structure is generated.

MySQL

Finally, the structure of the mysql data sheet quiz is attached:

The code is as follows:

CREATE TABLE IF NOT EXISTS `quiz` (

`id`int (11) NOT NULL AUTO_INCREMENT

`room`varchar (100) NOT NULL

`roomer` varchar (500) NOT NULL

`roomt` tinyint (2) NOT NULL

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8

The above is about the content of this article on "how to use CSS+jQuery+PHP+MySQL to achieve online answer function". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more related knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.