How to implement the single-choice question function in online answering questions

How to implement the single-choice question function in online answering questions

Single-choice questions are a common question type in online answering systems. Users can choose from multiple options. Choose a correct answer. In this article, we will introduce in detail how to implement the multiple-choice question function in online answering questions and provide specific code examples.

1. Front-end design

1. HTML structure
   In HTML, we can use radio buttons to implement single-choice question options. The following is a simple HTML structure example:

<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>

In the above code, we use the name attribute to group the options and ensure that the user can only select one answer.

2. CSS Style
   In order to improve user experience and visual effects, we can add CSS styles to single-choice questions. The following is a simple CSS style example:

div {
  margin-bottom: 10px;
}

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

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

The above style will bold the title of the multiple-choice question and add a certain amount of space between the options.

2. Back-end processing

1. Data storage
   In the back-end, we need to store the user's selection results. You can use a database or other persistence methods to save answer data. The following is a simple back-end storage example:

// 假设使用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();
}

In the above code, we use the Mongoose library to implement operations on MongoDB and store the user's questions and options as a document.

2. Data verification and processing
   After the user submits the answer results, we need to verify and process the data. The following is a simple backend processing code example:

// 假设使用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 });
});

In the above code, we use the Express framework to process the HTTP POST request and verify that the questions and options submitted by the user are complete, and then call the saveAnswer function Store the results.

3. Summary

Through the above example code of front-end design and back-end processing, we can realize the single-choice question function in online answering questions. The user can select the correct option and the results are stored in the backend database. In this way, we can implement a simple online question answering system.

Of course, in practical applications, we need to further consider factors such as security and user interaction experience. The code examples provided in this article are just a simple starting point, and readers can expand and optimize them according to their actual needs. I hope this article will be helpful to implement the single-choice question function in online answering questions!

The above is the detailed content of How to implement the single-choice question function in online answering questions. For more information, please follow other related articles on the PHP Chinese website!