jQuery_jqueryにより実装されたオンライン質問応答機能

オンライン アンケート、さまざまな知識のオンライン テスト、その他のアプリケーションなど、Web ページにオンライン テスト機能を追加する必要がある場合があります。このようなアプリケーションでは、多くのフロントエンドおよびバックエンドのスキルの使用が必要です。今日は、質問応答機能をテストする jQuery ベースのフロントエンド アプリケーションを共有します。

HTML

まず、jquery ライブラリ ファイル、quiz.js、および必要な CSS スタイル ファイル style.css をロードします。

<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" /> 

次に、テスト問題を配置する必要がある場所に div#quiz-container を追加します。

コードをコピーします コードは次のとおりです:

jQuery

まず、質問と回答の選択肢を定義します。question は質問、answer は回答の選択肢、correctAnswer は正解です。定義されたinitはjsonデータ形式であることがわかります。

コードをコピーします コードは次のとおりです:

var init={'questions':[{'question':'jQuery とは何ですか? ','answers':['JavaScript ライブラリ','CSS ライブラリ','PHP フレームワーク','上記のいずれでもない'],'correctAnswer':1},{'question':'さまざまなカテゴリのアイテムを見つけますか? ','answers':['ライティングデスク','ソファ','テレビ','テーブルクロス'],'correctAnswer':3},{'question':'面積が最も大きい国は:','回答': ['米国','中国','ロシア','カナダ'],'correctAnswer':3},{'question':'月は地球からどれくらい離れていますか? ','答え':['18万キロメートル','38万キロメートル','100万キロメートル','180万キロメートル'],'正しい答え':2}]};

次に、quiz.js によって提供されるプラグイン メソッドを直接呼び出し、ページを開くと、ページ上にオンライン テスト プロジェクトが生成されていることを確認します。

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: init.questions 
  }); 
}); 

そのため、カスタム テスト問題のスタイル レイアウトを変更したい場合は、quiz.js ファイルとstyles.css ファイルで適切な変更を加えることができます。

質問 この時点で、慎重な友人は問題が近づいていることに気づくでしょう:
1. JS コード内の質問に対する正解を直接マークするのは安全ではありませんか?誰かがソース コードを見て正しい答えを直接得ることができないように、正式なテスト プロジェクトに対する答えをバックグラウンドで決定する必要があるかどうか。
2. 背景と対話するにはどうすればよいですか?たとえば、テストの質問に答える前に身元を確認し、質問に答えた後に結果をバックエンドに送信します。
私が言いたいのは、これはフロントエンド コードのデモ プロジェクトであり、実際のアプリケーションの答えはフロントエンド コードには表示されないということです。実際には、quiz.js にはバックグラウンドの ajax と対話するためのインターフェイスがすでに用意されています。はじめに、記事のタイトルはすでに考えています: jQuery PHP MySQL を使用してオンライン テスト プロジェクトを実装する方法。

デモを表示 ソースコードをダウンロード

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