How to use jQuery PHP MySQL to implement an online test project, jquerymysql_PHP tutorial

How to use jQuery PHP MySQL to implement an online test project, jquerymysql

In the previous article, we introduced the effect of test questions implemented using jQuery. Then this article will use examples to introduce how to use jQuery PHP MySQL to implement online test questions, including dynamic reading of questions, background scoring after answering the questions, and returning the answer results. This is a comprehensive WEB application article. It is recommended that you who read this article should have basic knowledge of HTML, jQuery, PHP and MySQL.

quiz.php

For the convenience of explanation here, I mixed php and HTML in the quiz.php file. First, it is the same as the previous article on this site: the test answering function implemented by jQuery. Load the jQuery library and quizs.js file, and then add the test question html structure at the appropriate location.

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

We need to read the question information when the page is loaded, and call jQuery to display it. 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 a 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 assign the question information to the variable $json in JSON format.

<&#63;php 
include_once("connect.php");//连接数据库 
 
$sql = "select * from quiz order by id asc"; 
$query = mysql_query($sql); //查询数据 
while($row=mysql_fetch_array($query)){ 
  $answers = explode('###',$row['answer']); //将答案选项分开 
  $arr[] = array( 
    'question' => $row['id'].'、'.$row['question'], //题目 
    'answers' => $answers //答案选项 
  ); 
} 
$json = json_encode($arr); //转换json格式 
&#63;> 

We got a string of data in json format, and then called jquizzy() as introduced in the previous article. The method is as follows:

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: <&#63;php echo $json;&#63;>, //试题信息 
    sendResultsURL: 'data.php' //结果处理地址 
  }); 
}); 

In this way, let’s run the web page quiz.php again to see if a test question is generated. Looking at the source code, we can only see the json data, but not the answer part corresponding to the test question.

data.php

When calling the test question, there is an option sendResultsURL. When the user finishes typing the question and clicks the "Finish" button, an Ajax interactive request is sent to the background data.php. data.php will respond based on the user's answer. , compare the correct answers, and then give the user's score.

include_once("connect.php"); //连接数据库 
 
$data = $_REQUEST['an']; //获取答题信息 
$answers = explode('|',$data); //分析数据 
$an_len = count($answers)-1; //题目数 
 
$sql = "select correct from quiz order by id asc"; 
$query = mysql_query($sql); //查询表 
$i = 0; 
$score = 0; //初始得分 
$q_right = 0; //答对的题数 
while($row=mysql_fetch_array($query)){ 
  if($answers[$i]==$row['correct']){ //比对正确答案 
    $arr['res'][] = 1; //正确 
    $q_right += 1; //正确答题数+1 
  }else{ 
    $arr['res'][] = 0; //错误 
  } 
  $i++; 
} 
$arr['score'] = round(($q_right/$an_len)*100); //计算总得分 
echo json_encode($arr); 

In data.php, first connect to the database and receive the processing parameter an, which is the answer to the front-end user's question. Then query the data table, compare the answer submitted by the user with the correct answer to the question in the data table, and make corresponding decisions after comparison. Processing, and calculates the score obtained by the user's answer, and finally outputs and returns json format data to the front desk call.

quizs.js

We have modified the js code, mainly for the front and backend ajax interaction part. The core parts of quizs.js are as follows:

if (config.sendResultsURL !== null) { 
  var collate = []; 
  var myanswers = ''; 
  //获取用户所答题的答案 
  for (r = 0; r < userAnswers.length; r++) { 
    collate.push('{"questionNumber":"' + parseInt(r + 1, 10) + '", "userAnswer":"' + userAnswers[r] + '"}'); 
    myanswers = myanswers + userAnswers[r]+'|'; 
  } 
   
  //Ajax交互 
  $.getJSON(config.sendResultsURL,{an:myanswers},function(json){ 
    if(json==null){ 
      alert('通讯失败！'); 
    }else{       
      var corects = json['res']; 
      $.each(corects,function(index,array){ 
        resultSet += '<div class="result-row">' + (corects[index] === 1 &#63; "<div class='correct'>#"+(index + 1)+"<span></span></div>": "<div class='wrong'>#"+(index + 1)+"<span></span></div>")+'</div>'; 
      }); 
      resultSet = '<h2 id="judgeSkills-json-score-br-您的分数-json-score">' + judgeSkills(json.score) + '<br/> 您的分数： ' + json.score + '</h2><div class="jquizzy-clear"></div>' + resultSet + '<div class="jquizzy-clear"></div>'; 
             
             
      superContainer.find('.result-keeper').html(resultSet).show(500); 
    }   
  }); 
} 

After the user answers the question, the answer to the question answered by the user is formed into a string in the form of "1|2|4|1|3|", and then the answer is submitted to the parameter an through $.getJSON to the background, and the background PHP processing ratio After checking the correct answer, the comparison result is returned. The returned result is as follows: {"res":[1,0,1,1,0],"score":60}, res is the answer comparison result, indicating five values ​​respectively. The answer result of a question, 1 means the answer is normal, 0 means the answer is wrong, and score means the score. Then the returned results are processed to obtain the evaluation results and total score of each question, and the corresponding html structure is generated.

MySQL

Finally, attach the structure of the mysql data table quiz:

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

http://www.bkjia.com/PHPjc/989867.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/989867.htmlTechArticleHow to use jQuery PHP MySQL to implement an online testing project, jquerymysql In the previous article, we introduced the use Test question effect implemented by jQuery. Then this article will combine examples to...