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

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構造を追加します。

?

1

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 に送信されます。 、正解の場合、ユーザーのスコアが与えられます。

?

1 2 3 4 5 6

$(関数(){ $('#クイズコンテナ').jquizzy({ questions: , //テスト質問情報 sendResultsURL: '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 = "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 のコア部分は次のとおりです。

?

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

if (config.sendResultsURL !== null) { var Collat​​e = []; var myanswers = ''; //ユーザーが回答した質問への回答を取得します for (r = 0; r collat​​e.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ファイルを直接インポートしたりできます。

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

http://www.bkjia.com/PHPjc/990336.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/990336.html技術記事 jQuery+PHP+MySQL を使用してオンライン テスト プロジェクトを実装する方法 jQuery+PHP+MySQL を使用してオンライン テスト プロジェクトを実装する方法 この記事では、jQuery+P...

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

1 2 3 4 5 6 7

存在しない場合はテーブルを作成 `クイズ` ( `id` int(11) NOT NULL AUTO_INCREMENT, `質問` varchar(100) NOT NULL, `答え` varchar(500) NOT NULL、 `正しい` tinyint(2) NOT NULL、 主キー (`id`) ) ENGINE=MyISAM デフォルト CHARSET=utf8;