jQuery+PHP+MySQL を使用してオンラインテストプロジェクトを実装する方法

jQuery+PHP+MySQL を使用してオンラインテストプロジェクトを実装する方法_PHP チュートリアル

WBOY

リリース： 2016-07-13 09:56:05

オリジナル

843 人が閲覧しました

jQuery+PHP+MySQLを使ってオンラインテストプロジェクトを実装する方法

jQuery+PHP+MySQLを使ってオンラインテストプロジェクトを実装する方法

この記事では、jQuery+PHP+MySQL を使用して、質問の動的な読み取り、質問に回答した後のバックグラウンドスコアリング、回答結果の返しなど、オンラインテストの問題を実装する方法を例を使用して紹介します。

前回の記事では、jQueryを使って実現した試験問題の効果について紹介しました。次に、この記事では、jQuery+PHP+MySQL を使用してオンラインテストの問題を実装する方法 (質問の動的読み取り、質問に回答した後のバックグラウンドスコアリング、回答結果の返しなど) を例を使用して紹介します。これは包括的な WEB アプリケーションの記事です。この記事を読む人には、HTML、jQuery、PHP、MySQL の基本的な知識があることが推奨されます。

quiz.php

ここでは説明の便宜上、quiz.php ファイル内で php と HTML を混合しました。まず、当サイトの前回の記事と同じ、jQueryで実装したテスト解答機能をjQueryライブラリとquids.jsファイルを読み込み、適切な場所にテスト問題のhtml構造を追加します。

ページ読み込み時に質問情報を読み込み、jQueryを呼び出して表示する必要があります。質問情報はデータベースから取得されます。まず、質問とその回答オプション情報をデータテーブルクイズに追加します。

SQL ステートメントを構築し、PHP を使用してデータベースにクエリを実行し、質問と回答の選択肢情報を読み取ります。この時点では正解を読み取る必要はありません。次に、質問情報を変数 $json に JSON 形式で代入します。

include_once("connect.php");//データベースに接続します

$sql = "ID asc によるクイズの順序から * を選択";

$query = mysql_query($sql) //データをクエリします

;

while($row=mysql_fetch_array($query)){

$answers =explode('###',$row['answer']) //個別の回答オプション

$arr[] = 配列(

'question' => $row['id'].', '.$row['question'], //質問

'answers' => $answers //答えのオプション

);

}

$json = json_encode($arr) //json形式を変換します

;

前回の記事で紹介したように、json形式のデータ文字列を取得し、jquizzy()を呼び出しました。メソッドは次のとおりです。

このようにして、Web ページquiz.php を再度実行して、テスト問題が生成されるかどうかを確認してみましょう。ソースコードを見ると、json データのみが表示され、テスト問題に対応する回答部分は表示されません。

data.php

テスト質問を呼び出すとき、sendResultsURL オプションがあります。ユーザーが質問の入力を完了して「完了」ボタンをクリックすると、ユーザーの回答に基づいて Ajax 対話型リクエストがバックグラウンドの data.php に送信されます。、正解の場合、ユーザーのスコアが与えられます。

$(関数(){

$('#クイズコンテナ').jquizzy({

questions: , //テスト質問情報

sendResultsURL: 'data.php' //結果処理アドレス

});

include_once("connect.php") //データベースに接続します

$data = $_REQUEST['an'] //回答情報を取得します

$answers =explode('|',$data) //データを分析します

;

$an_len = count($answers)-1 //質問の数

;

$sql = "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

}その他{

$arr['res'][] = 0; //エラー

;

}

$i++;

}

$arr['score'] =round(($q_right/$an_len)*100) //合計スコアを計算します

echo json_encode($arr);

data.phpでは、まずデータベースに接続し、フロントエンドユーザーの回答である処理パラメータanを受け取り、データテーブルにクエリを実行し、ユーザーが送信した回答と質問の正解を比較します。データテーブルを取得し、比較後対応する処理を行い、ユーザーが質問に回答した際に得られたスコアを計算し、最終的にjson形式のデータをフロントコールに出力して返します。

クイズ.js

js コードに変更を加えました。主に、フロントとバックの ajax インタラクション部分です。quips.js のコア部分は次のとおりです。

if (config.sendResultsURL !== null) {

var Collate = [];

var myanswers = '';

//ユーザーが回答した質問への回答を取得します

for (r = 0; 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('通信に失敗しました!');

}その他{

var corects = json['res'];

$.each(corects,function(index,array){

resultSet += '

' + (corects[index] === 1 ? "

#"+(index + 1)+"

": "

#"+(index + 1)+"

;")+'

});

resultSet = '

' + json.score) + '
' + json.score + '

' + resultSet + '

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

}

});

}

ユーザーが質問に回答した後、ユーザーが回答した質問に対する回答を「1|2|4|1|3|」のような文字列にしてパラメータan～$に渡します。 getJSON をバックグラウンドに送信し、バックグラウンドの PHP 処理が正しく行われた場合、返される比較結果は次のとおりです: {"res":[1,0,1,1,0],"score":60 res は回答の比較結果であり、それぞれ 5 つの質問を表します。1 は回答が正常であることを意味し、0 は回答が間違っていることを意味し、score はスコアを意味します。次に、返された結果を処理して各質問の評価結果と合計スコアを取得し、対応する HTML 構造を生成します。

MySQL

最後に、mysql データテーブルのクイズの構造を示します:

テーブルに情報を追加したり、ソースパッケージ内のquiz.sqlファイルを直接インポートしたりできます。

以上がこの記事の全内容ですが、皆さんに気に入っていただければ幸いです。

の使用方法を例を使用して紹介します。

存在しない場合はテーブルを作成 `クイズ` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`質問` varchar(100) NOT NULL,

`答え` varchar(500) NOT NULL、

`正しい` tinyint(2) NOT NULL、

主キー (`id`)

) ENGINE=MyISAM デフォルト CHARSET=utf8;