如何通过HTML表单向数据库添加测验题并设置正确答案？

Hey there, since you can’t comment on that existing answer due to reputation limits, I’ll walk you through a straightforward solution to set up correct answer selection for your quiz form. Let’s start with a complete, working implementation that aligns with your described layout, then break down how it all works.

Step 1: Complete Form Structure #

First, let’s flesh out your form with 4 answer options. I’ll cover two common scenarios: single correct answer (most standard quizzes) and multiple correct answers, since you mentioned checkboxes.

Single Correct Answer (Radio Buttons) #

Radio buttons ensure only one answer can be marked as correct, which is typical for most quizzes:

<form id="quizForm">
  <div>
    <label for="question_text">Question Text:</label>
    <textarea title="Insert Question Text" name="question_text" id="question_text" rows="3" cols="50"></textarea>
  </div>
  
  <h4>Select Correct Answer -></h4>
  
  <div class="answer-option">
    <input type="radio" name="correct_answer" value="option1" id="correct1">
    <label for="correct1">Answer 1:</label>
    <input type="text" name="answer1" placeholder="Enter answer text here">
  </div>
  
  <div class="answer-option">
    <input type="radio" name="correct_answer" value="option2" id="correct2">
    <label for="correct2">Answer 2:</label>
    <input type="text" name="answer2" placeholder="Enter answer text here">
  </div>
  
  <div class="answer-option">
    <input type="radio" name="correct_answer" value="option3" id="correct3">
    <label for="correct3">Answer 3:</label>
    <input type="text" name="answer3" placeholder="Enter answer text here">
  </div>
  
  <div class="answer-option">
    <input type="radio" name="correct_answer" value="option4" id="correct4">
    <label for="correct4">Answer 4:</label>
    <input type="text" name="answer4" placeholder="Enter answer text here">
  </div>
  
  <button type="button" onclick="saveQuiz()">Save Quiz</button>
</form>

Multiple Correct Answers (Checkboxes) #

If your quiz allows more than one correct answer, swap radio buttons for checkboxes (use an array name to capture multiple selections):

<div class="answer-option">
  <input type="checkbox" name="correct_answers[]" value="option1" id="correct1">
  <label for="correct1">Answer 1:</label>
  <input type="text" name="answer1" placeholder="Enter answer text here">
</div>
<!-- Repeat this structure for options 2-4 with unique IDs -->

Step 2: Add JavaScript to Capture Data #

This function will grab the question text, all answers, and the correct selection(s) when you save the quiz:

function saveQuiz() {
  // Get the question text
  const questionText = document.getElementById('question_text').value;
  
  // Collect all answer texts
  const answers = {
    option1: document.querySelector('input[name="answer1"]').value,
    option2: document.querySelector('input[name="answer2"]').value,
    option3: document.querySelector('input[name="answer3"]').value,
    option4: document.querySelector('input[name="answer4"]').value
  };
  
  // Capture correct answer(s)
  let correctAnswers;
  
  // For single correct answer (radio buttons)
  const selectedRadio = document.querySelector('input[name="correct_answer"]:checked');
  if (selectedRadio) {
    correctAnswers = selectedRadio.value;
  }
  
  // For multiple correct answers (checkboxes) - uncomment below if needed
  // const selectedCheckboxes = document.querySelectorAll('input[name="correct_answers[]"]:checked');
  // correctAnswers = Array.from(selectedCheckboxes).map(box => box.value);
  
  // Do something with the data (e.g., send to a server, store locally)
  console.log('Question:', questionText);
  console.log('All Answers:', answers);
  console.log('Correct Answer(s):', correctAnswers);
  
  // Confirmation alert
  alert('Quiz saved! Check your browser console for the captured data.');
}

Step 3: Optional Styling for Readability #

Add some basic CSS to make the form look cleaner:

.answer-option {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

textarea, input[type="text"] {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  flex-grow: 1;
}

button {
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Key Tips #

• Use radio buttons for single correct answers to prevent users from selecting multiple options by mistake.
• If you need to submit this data to a server, change the button to type="submit" and the form will send all values (including the correct answer) to your backend automatically.
• Ensure each input has a unique id that matches its label’s for attribute for accessibility.

内容的提问来源于stack exchange，提问作者TMI