如何實現線上答案中的單選題功能
單選題是線上答案系統中常見的一種題型，使用者可以從多個選項中選出一個正確的答案。在本文中，我們將詳細介紹如何實現線上答題中的單選題功能，並提供具體的程式碼範例。
一、前端設計
<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屬性來為選項分組，確保使用者只能選擇一個答案。
div {
margin-bottom: 10px;
}
h3 {
font-size: 16px;
font-weight: bold;
}
input[type="radio"] {
margin-right: 5px;
}上述樣式將單選題的標題加粗，並為選項之間添加一定的間距。
二、後端處理
// 假设使用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的操作，將使用者的問題和選項作為一個文件儲存。
// 假设使用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函數將結果儲存。
三、總結
透過上述前端設計和後端處理的範例程式碼，我們可以實現線上答案中的單選題功能。使用者可以選擇正確的選項，並將答題結果儲存到後端資料庫中。這樣，我們就可以實現一個簡單的線上答題系統。
當然，在實際應用中，我們還需要進一步考慮安全性、使用者互動體驗等因素。這篇文章所提供的程式碼範例只是一個簡單的起點，讀者可以根據自己的實際需求進行擴展和優化。希望本文對於實現線上答題中的單選題功能有所幫助！
以上是如何實現線上答案中的單選題功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
