如何使用jQuery+PHP+MySQL來實現一個在線測試項目
本文將結合實例給大家介紹如何使用jQuery+PHP+MySQL來實現在線測試題,包括動態讀取題目,答題完畢后臺評分,并返回答題結果。
在上一篇文章中,我們介紹了使用jQuery實現的測試題效果。那么本文將結合實例給大家介紹如何使用jQuery+PHP+MySQL來實現在線測試題,包括動態讀取題目,答題完畢后臺評分,并返回答題結果。這是一篇WEB綜合應用文章,建議閱讀本文的您應該具備HTML,jQuery以及PHP和MySQL等基本知識。
quiz.php
在這里為了講解方便,我將php和HTML混寫在quiz.php文件中。首先和本站上篇文章:jQuery實現的測試答題功能一樣,載入jQuery庫和quizs.js文件,然后在適當的位置加上測試題html結構。
?
1 <div id="quiz-container"></div>我們要在頁面加載的時候將題目信息讀取出來,并且給jQuery調用顯示。題目信息來自數據庫,我們可以先在數據表quiz中加入題目及其答案選項信息。
我們通過構造SQL語句,使用PHP查詢數據庫,讀取題目和答案選項信息,注意這個時候我們不需要讀取正確答案。然后將題目信息以JSON格式賦給變量$json。
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <?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格式 ?>我們得到了一串json格式的數據,然后就像上一篇文章介紹的一樣,調用jquizzy(),方法如下:
?
1 2 3 4 5 6 $(function(){ $('#quiz-container').jquizzy({ questions: <?php echo $json;?>, //試題信息 sendResultsURL: 'data.php' //結果處理地址 }); });這樣,我們再來運行網頁quiz.php,是不是生成了一個測試題,查看源代碼,我們只能看到json數據,卻不能看到試題對應的答案部分。
data.php
在調用測試題的時候,有個選項sendResultsURL,它是在用戶打完題,點擊“完成”按鈕時,向后臺data.php發送一個Ajax交互請求,data.php會根據用戶的答題情況,比對正確答案,然后給出用戶所得分數。
?
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"); //連接數據庫 $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);新聞熱點
疑難解答
圖片精選