Bagaimana untuk melaksanakan fungsi soalan pilihan tunggal dalam menjawab soalan dalam talian

Cara melaksanakan fungsi soalan pilihan tunggal dalam menjawab soalan dalam talian

Soalan pilihan tunggal ialah jenis soalan biasa dalam sistem jawapan dalam talian . Pengguna Anda boleh memilih jawapan yang betul daripada berbilang pilihan. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara melaksanakan fungsi soalan aneka pilihan dalam soalan menjawab dalam talian dan memberikan contoh kod khusus.

1. Reka bentuk bahagian hadapan

1. struktur HTML
   Dalam HTML, kami boleh menggunakan butang radio untuk melaksanakan pilihan soalan pilihan tunggal. Berikut ialah contoh struktur HTML yang mudah:

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

Dalam kod di atas, kami menggunakan atribut nama untuk mengumpulkan pilihan untuk memastikan pengguna hanya boleh memilih satu jawapan.

2. Gaya CSS
   Untuk meningkatkan pengalaman pengguna dan kesan visual, kami boleh menambah gaya CSS pada soalan pilihan tunggal. Berikut ialah contoh gaya CSS mudah:

div {
  margin-bottom: 10px;
}

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

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

Gaya di atas akan menebalkan tajuk soalan aneka pilihan dan menambah jarak tertentu antara pilihan.

2. Pemprosesan bahagian belakang

1. Storan data
   Di bahagian belakang, kami perlu menyimpan hasil pemilihan pengguna. Anda boleh menggunakan pangkalan data atau kaedah kegigihan lain untuk menyimpan data jawapan. Berikut ialah contoh storan bahagian belakang yang mudah:

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

Dalam kod di atas, kami menggunakan perpustakaan Mongoose untuk melaksanakan operasi pada MongoDB dan menyimpan soalan dan pilihan pengguna sebagai dokumen.

2. Pengesahan dan pemprosesan data
   Selepas pengguna menyerahkan hasil jawapan, kami perlu mengesahkan dan memproses data. Berikut ialah contoh kod pemprosesan bahagian belakang yang ringkas:

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

Dalam kod di atas, kami menggunakan rangka kerja Express untuk memproses permintaan HTTP POST dan mengesahkan bahawa soalan dan pilihan yang dikemukakan oleh pengguna selesai, dan kemudian Panggil fungsi saveAnswer untuk menyimpan hasilnya.

3. Ringkasan

Melalui contoh kod reka bentuk hadapan dan pemprosesan bahagian belakang di atas, kita boleh merealisasikan fungsi soalan pilihan tunggal dalam menjawab soalan dalam talian. Pengguna boleh memilih pilihan yang betul dan hasilnya disimpan dalam pangkalan data bahagian belakang. Dengan cara ini, kita boleh melaksanakan sistem menjawab soalan dalam talian yang mudah.

Sudah tentu, dalam aplikasi praktikal, kami juga perlu mempertimbangkan lebih lanjut faktor seperti keselamatan dan pengalaman interaksi pengguna. Contoh kod yang disediakan dalam artikel ini hanyalah titik permulaan yang mudah, dan pembaca boleh mengembangkan dan mengoptimumkannya mengikut keperluan sebenar mereka. Saya harap artikel ini akan membantu untuk melaksanakan fungsi soalan pilihan tunggal dalam menjawab soalan dalam talian!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi soalan pilihan tunggal dalam menjawab soalan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!