オンライン質問回答に単一選択質問機能を実装する方法

オンライン応答質問に単一選択質問機能を実装する方法

単一選択質問は、オンライン応答システムで一般的な質問タイプです。ユーザーは複数の中から選択できます。選択肢。正しい答えを選択してください。この記事では、オンライン質問回答における多肢選択質問機能の実装方法と具体的なコード例を詳しく紹介します。

1. フロントエンド設計

1. HTML 構造
   HTML では、ラジオ ボタンを使用して単一選択の質問オプションを実装できます。以下は、単純な HTML 構造の例です。

<div>
  <h3>单选题1：下列哪个城市是英国的首都？</h3>
  <input type="radio" name="question1" value="A"> A. 伦敦<br>
  <input type="radio" name="question1" value="B"> B. 曼彻斯特<br>
  <input type="radio" name="question1" value="C"> C. 利物浦<br>
  <input type="radio" name="question1" value="D"> D. 爱丁堡<br>
</div>

上記のコードでは、name 属性を使用してオプションをグループ化し、ユーザーが 1 つの回答のみを選択できるようにしています。

2. CSS スタイル
   ユーザー エクスペリエンスと視覚効果を向上させるために、単一選択の質問に CSS スタイルを追加できます。以下は簡単な CSS スタイルの例です:

div {
  margin-bottom: 10px;
}

h3 {
  font-size: 16px;
  font-weight: bold;
}

input[type="radio"] {
  margin-right: 5px;
}

上記のスタイルは、多肢選択式の質問のタイトルを太字にし、選択肢の間に一定量のスペースを追加します。

2. バックエンド処理

1. データストレージ
   バックエンドでは、ユーザーの選択結果を保存する必要があります。データベースまたはその他の永続化方法を使用して、回答データを保存できます。以下は、単純なバックエンド ストレージの例です。

// 假设使用Node.js和MongoDB
const mongoose = require('mongoose');

// 定义答题结果的数据结构
const answerSchema = new mongoose.Schema({
  question: String,
  selectedOption: String
});

// 定义答题结果的模型
const Answer = mongoose.model('Answer', answerSchema);

// 存储用户答题结果
function saveAnswer(question, selectedOption) {
  const answer = new Answer({ question, selectedOption });
  answer.save();
}

上記のコードでは、Mongoose ライブラリを使用して MongoDB 上で操作を実装し、ユーザーの質問とオプションをドキュメントとして保存します。

2. データの検証と処理
   ユーザーが回答結果を送信した後、データを検証して処理する必要があります。以下は、単純なバックエンド処理コードの例です。

// 假设使用Node.js和Express框架
app.post('/submit', (req, res) => {
  const question = req.body.question;
  const selectedOption = req.body.selectedOption;

  // 验证用户提交的数据是否完整
  if (!question || !selectedOption) {
    res.status(400).json({ error: '请完整填写答题信息' });
    return;
  }

  // 存储用户答题结果
  saveAnswer(question, selectedOption);

  res.status(200).json({ success: true });
});

上記のコードでは、Express フレームワークを使用して HTTP POST リクエストを処理し、ユーザーが送信した質問とオプションが完了していることを確認します。次に、saveAnswer 関数を呼び出して結果を保存します。

3. 概要

フロントエンド設計とバックエンド処理の上記のサンプルコードを通じて、オンライン質問回答における単一選択質問機能を実現できます。ユーザーは正しいオプションを選択でき、結果はバックエンド データベースに保存されます。このようにして、簡単なオンライン質問応答システムを実装できます。

もちろん、実際のアプリケーションでは、セキュリティやユーザー インタラクション エクスペリエンスなどの要素をさらに考慮する必要があります。この記事で提供されているコード例は単純な出発点にすぎず、読者は実際のニーズに応じて拡張および最適化できます。この記事がオンライン質問回答における四肢選択式質問機能の実装に役立てば幸いです。

以上がオンライン質問回答に単一選択質問機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。