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 topics, complete the background score, and return to answer the results.

In the previous article, we introduced the results of a test question implemented using 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 topics, complete the background score, and return to answer the results. This is a comprehensive Web application article, it is recommended that you read this article you should have Html,jquery and PHP and MySQL and other basic knowledge.

quiz.php

Here I mix PHP and HTML in quiz.php files for easy explanation. First and this site on the article: jquery implementation of the test answer function, loaded into the jquery library and quizs.js files, and then in the appropriate place to add the test title HTML structure.

?

1	<div id= "Quiz-container" ></div>

We're going to read the topic information when the page loads and show it to the jquery call. The topic information comes from the database, we can add the topic and the answer option information in the datasheet quiz first.

We do this by constructing SQL statements, using PHP to query the database, reading questions and answer options, and noticing that we don't need to read the correct answers 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

<?php include_once ("connect.php"),//Connection 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 ']);//split answer options $arr [] = Array (' Question ' => $row [' id ']. $row [' question '],///title ' answers ' => $answers//answer option); } $json = Json_encode ($arr); Convert JSON format?>

We got a bunch of JSON-formatted data and then, like the one in the previous article, called Jquizzy () as follows:

?

1 2 3 4 5 6

$ (function () {$ (' #quiz-container '). Jquizzy ({questions: <?php echo $json;? ",///test Information Sendresultsurl: ' data.php '//Result processing address}"; });

In this way, we will run the 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 part of the question.

data.php

In the call to test questions, there is an option Sendresultsurl, it is in the user hit the title, click the "Finish" button, to the background data.php send an AJAX interactive request, data.php will be based on the user's answer, compared to the correct answer, and then give the user scores.

?

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"); Connection Database $data = $_request[' an ']; Get the answer information $answers = explode (' | ', $data); Analysis data $an _len = count ($answers)-1; Number of topics $sql = "Select correct from quiz the ORDER by ID ASC"; $query = mysql_query ($sql); query table $i = 0; $score = 0; Initial score $q _right = 0; Number of questions answered while ($row =mysql_fetch_array ($query)) {if ($answers [$i]== $row [' correct ']) {//than the correct answer $arr [' res '] = 1;//Correct $q _ Right + 1; Correct answer number +1}else{$arr [' res '] = 0;//Error} $i + +; $arr [' score '] = Round (($q _right/$an _len) *100); Compute the total score of Echo Json_encode ($arr);

In data.php, you first connect to the database, receive processing parameters An,an is the answer to the front-end users, and then query the data table, the user submitted the answer and the correct answer to the problem in the data table, compared to do the corresponding processing, and calculate the user answer scores, the final output returns JSON format data to the foreground call.

Quizs.js

We have modified the JS code, mainly for the front and back of the Ajax interactive part of the Quizs.js, the core part of the following:

?

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

if (Config.sendresultsurl!== null) {var collate = []; var myanswer s = '; Get answers for 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 Interactive $.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></span></div>": <div class= ' wrong ' ># ' + ( Index + 1) + "<span></span></div>") + ' </div> '; }); ResultSet = '

After the user answers the questions, the answer to the user is composed of strings such as "1|2|4|1|3|" The form, and then through the $.getjson the answer to the parameter an submit to the background, the background of PHP processing than the correct answer, will return to the results, return results such as: {"res": [1,0,1,1,0], "score": 60},res is the answer to the results, Respectively, the answer to the five questions, 1 of the answer is normal, 0 means that the answer error, score said score. Then the returned results are processed, the evaluation results and the total score of each question are obtained, and the corresponding HTML structure is generated.

Mysql

Finally, attach the structure of the MySQL datasheet quiz:

?

1 2 3 4 5 6 7

CREATE TABLE IF not EXISTS ' quiz ' (' id ' int (one) not null auto_increment, ' question ' varchar (MB) Not NULL, ' answer ' Varch AR (+) not null, ' correct ' tinyint (2) is 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 entire content of this article, I hope you can enjoy.