온라인 답변 질문에 단일 선택 질문 기능을 구현하는 방법

온라인 응답 질문에서 단일 선택 질문 기능을 구현하는 방법

객관식 질문은 온라인 응답 시스템에서 일반적인 질문 유형입니다. 사용자는 여러 옵션 중에서 정답을 선택할 수 있습니다. 이번 글에서는 온라인 답변 문제에서 객관식 질문 기능을 구현하는 방법을 자세히 소개하고 구체적인 코드 예시를 제공하겠습니다.

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 속성을 사용하여 옵션을 그룹화하고 사용자가 하나의 답변만 선택할 수 있도록 합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!