Home > Article > Backend Development > How to implement the multiple-choice question function in online answering questions
How to implement the multiple-choice question function in online answering questions
- 王林Original
- 2023-09-24 15:29:151051browse
How to implement the multiple-choice question function in online answering requires specific code examples
In modern education, online answering has become a common learning method. Multiple-choice questions, as one of the question types, are an effective way to assess students' knowledge mastery. In this article, we will introduce how to implement the multiple-choice question function in online answering through code.
First, we need to create a web interface for students to answer questions. The following is a simple HTML code example:
<!DOCTYPE html>
<html>
<head>
<title>多选题示例</title>
</head>
<body>
<h1>多选题示例</h1>
<form id="quizForm">
<h2>题目1：以下哪些是水果？</h2>
<label><input type="checkbox" name="question1" value="A">苹果</label><br>
<label><input type="checkbox" name="question1" value="B">青菜</label><br>
<label><input type="checkbox" name="question1" value="C">香蕉</label><br>
<label><input type="checkbox" name="question1" value="D">西瓜</label><br>
<button type="button" onclick="checkAnswer()">提交答案</button>
</form>
<script>
function checkAnswer() {
var correctAnswer = ["A", "C", "D"]; // 正确答案
var userAnswer = [];
var checkboxes = document.getElementsByName("question1");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
userAnswer.push(checkboxes[i].value);
}
}
// 比较用户答案与正确答案
var isCorrect = userAnswer.length === correctAnswer.length && userAnswer.every((value, index) => value === correctAnswer[index]);
if (isCorrect) {
alert("答案正确！");
} else {
alert("答案错误！");
}
// 可以在这里进行其他操作，如计算得分等
}
</script>
</body>
</html>The above code creates a simple web interface that contains a multiple-choice question where the user needs to choose the correct answer among four options. After the user clicks the submit answer button, the program will obtain the user's answer and compare it with the preset correct answer. If the answer is correct, the prompt message "Answer is correct!" is displayed, otherwise "Answer is wrong!" is displayed.
In the JavaScript code, we use the document.getElementsByName method to obtain all checkbox elements named question1, and then determine which checkboxes are selected by traversing box is checked. Store the user's answer into the userAnswer array. Then, we determine whether the user's answer is correct by comparing the lengths of the two arrays userAnswer and correctAnswer and whether each element in them is equal.
In addition, you can add other operations in the code, such as calculating scores, displaying correct answers, etc.
To sum up, through the above code examples, we can realize the multiple-choice question function in online answering questions. I hope this article is helpful to you, and I wish you accurate and successful answers!
The above is the detailed content of How to implement the multiple-choice question function in online answering questions. For more information, please follow other related articles on the PHP Chinese website!