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

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

前回の記事では、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 形式で代入します。

リーリー

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

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

data.php

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

リーリー

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

クイズ.js

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

リーリー
ユーザーが質問に回答した後、ユーザーが回答した質問に対する回答は「1|2|4|1|3|」の形式で文字列に形成され、その回答がパラメータ an through に送信されます。 $.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/989867.html

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/989867.html技術記事 jQuery+PHP+MySQLを使ってオンラインテストプロジェクトjquerymysqlを実装する方法 前回の記事では、jQueryを使って実装したテスト問題の効果について紹介しました。次に、この記事では例を組み合わせて...