Comment implémenter la fonction de question à choix unique dans les réponses aux questions en ligne

Comment implémenter la fonction de question à choix unique dans les réponses aux questions en ligne

Les questions à choix multiples sont un type de question courant dans les systèmes de réponse en ligne. Les utilisateurs peuvent choisir une réponse correcte parmi plusieurs options. Dans cet article, nous présenterons en détail comment implémenter la fonction de questions à choix multiples dans les réponses aux questions en ligne et fournirons des exemples de code spécifiques.

1. Conception frontale

1. Structure HTML
   En HTML, nous pouvons utiliser des boutons radio pour implémenter des options de questions à choix unique. Voici un exemple de structure HTML simple :

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

Dans le code ci-dessus, nous utilisons l'attribut name pour regrouper les options et garantir que l'utilisateur ne peut sélectionner qu'une seule réponse.

2. Style CSS
   Afin d'améliorer l'expérience utilisateur et les effets visuels, nous pouvons ajouter des styles CSS aux questions à choix multiples. Voici un exemple simple de style CSS :

div {
  margin-bottom: 10px;
}

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

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

Le style ci-dessus mettra en gras le titre de la question à choix multiple et ajoutera un espace entre les options.

2. Traitement backend

1. Stockage des données
   Dans le backend, nous devons stocker les résultats de la sélection de l'utilisateur. Vous pouvez utiliser une base de données ou d'autres méthodes de persistance pour enregistrer les données de réponse. Voici un exemple simple de stockage backend :

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

Dans le code ci-dessus, nous utilisons la bibliothèque Mongoose pour implémenter des opérations sur MongoDB et stocker les questions et options de l'utilisateur sous forme de document.

2. Vérification et traitement des données
   Une fois que l'utilisateur a soumis les résultats de la réponse, nous devons vérifier et traiter les données. Voici un exemple simple de code de traitement backend :

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

Dans le code ci-dessus, nous utilisons le framework Express pour traiter la requête HTTP POST et vérifier que les questions et options soumises par l'utilisateur sont complètes, puis appeler la fonction saveAnswer pour stocker les résultats.

3. Résumé

Grâce à l'exemple de code ci-dessus de conception frontale et de traitement back-end, nous pouvons réaliser la fonction de question à choix unique dans les réponses aux questions en ligne. L'utilisateur peut sélectionner l'option correcte et les résultats sont stockés dans la base de données principale. De cette façon, nous pouvons mettre en œuvre un système simple de réponses aux questions en ligne.

Bien sûr, dans les applications pratiques, nous devons également prendre davantage en compte des facteurs tels que la sécurité et l'expérience d'interaction des utilisateurs. Les exemples de code fournis dans cet article ne sont qu'un simple point de départ, et les lecteurs peuvent les développer et les optimiser en fonction de leurs besoins réels. J'espère que cet article sera utile pour implémenter la fonction de question à choix unique dans les réponses aux questions en ligne !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!