這個實例主要給你們介紹如何使用jQuery+PHP+MySQL來實如今線測試題,包括動態讀取題目,答題完畢後臺評分,並返回答題結果。php
讀取答題列表:html
1 $sql = "select * from quiz order by id asc"; 2 $query = mysql_query($sql); 3 while ($row = mysql_fetch_array($query)) { 4 $answers = explode('###', $row['answer']); 5 $arr[] = array( 6 'question' => $row['id'] . '、' . $row['question'], 7 'answers' => $answers 8 ); 9 } 10 $json = json_encode($arr);
生成答題列表:mysql
<div id='quiz-container'></div>
經過遍歷出來的列表,生成答題功能:ajax
1 $(function(){ 2 $('#quiz-container').jquizzy({ 3 questions: <?php echo $json;?>, //試題信息 4 sendResultsURL: 'data.php' //結果處理地址 5 }); 6 });
當用戶打完題,點擊「完成」按鈕時,會向ajax.php發送一個Ajax交互請求,ajax.php會根據用戶的答題狀況,比對正確答案,而後給出用戶所得分。sql
1 $data = $_REQUEST['an']; 2 3 $answers = explode('|',$data); 4 $an_len = count($answers)-1; //題目數 5 6 $sql = "select correct from quiz order by id asc"; 7 8 $query = mysql_query($sql); 9 $i = 0; 10 $score = 0; //初始得分 11 $q_right = 0; //答對的題數 12 while($row=mysql_fetch_array($query)){ 13 if($answers[$i]==$row['correct']){ 14 $arr['res'][] = 1; 15 $q_right += 1; 16 }else{ 17 $arr['res'][] = 0; 18 } 19 $i++; 20 } 21 $arr['score'] = round(($q_right/$an_len)*100); //總得分 22 echo json_encode($arr);
quiz表結構:json
1 CREATE TABLE IF NOT EXISTS `quiz` ( 2 `id` int(11) NOT NULL AUTO_INCREMENT, 3 `question` varchar(100) NOT NULL, 4 `answer` varchar(500) NOT NULL, 5 `correct` tinyint(2) NOT NULL, 6 PRIMARY KEY (`id`) 7 ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ; 8 9 -- 10 -- 轉存表中的數據 `quiz` 11 -- 12 13 INSERT INTO `quiz` (`id`, `question`, `answer`, `correct`) VALUES 14 (1, '羅馬帝國曾一度輝煌,使人神往,故有「條條大陸通羅馬」一說。那麼,今天你是怎樣理解這一諺語的準確含義的?', 'A.入鄉隨俗 ###B.四通八達 ###C.異曲同工 ###D.流連忘返', 3), 15 (2, '找出不一樣類的一項:', 'A.斑馬 ###B.軍馬 ###C.賽馬 ###D.駿馬 ###E.駙馬', 5), 16 (3, ' 蠟燭在空氣中燃燒,蠟燭質量逐漸變小。這說明', 'A.物質能夠自生自滅###B.發生的不是化學變化###C.不遵照質量守恆定律###D.生成物爲氣體,散發到空氣中了', 4), 17 (4, '如下哪位歌手沒有得到過《我是歌手》總冠軍?', 'A.羽泉###B.韓磊###C.鄧紫棋###D.韓紅', 3), 18 (5, '下列哪一個標籤不是HTML5中的新標籤?', 'A.<article>###B.<canvas>###C.<section>###D.<sub>', 4);
本文轉自:https://www.sucaihuo.com/php/113.html 轉載請註明出處!canvas