js选择题,判断对错并统计分数
时间: 2023-12-23 14:05:14 浏览: 84
好的,我可以为您提供一个简单的JS选择题题目,同时编写代码来判断用户的答案并统计分数。题目如下:
```
1. What does CSS stand for?
a) Creative Style Sheets
b) Computer Style Sheets
c) Cascading Style Sheets
d) Colorful Style Sheets
2. What is the correct syntax for referring to an external script called "script.js"?
a) <script href="script.js">
b) <script name="script.js">
c) <script src="script.js">
3. How do you declare a JavaScript variable?
a) var carName;
b) variable carName;
c) v carName;
4. What is the correct way to write a JavaScript array?
a) var colors = "red", "green", "blue";
b) var colors = ["red", "green", "blue"];
c) var colors = {"red", "green", "blue"};
5. Which operator is used to assign a value to a variable?
a) =
b) ==
c) ===
d) !=
6. How do you write "Hello World" in an alert box?
a) alertBox("Hello World");
b) msgBox("Hello World");
c) alert("Hello World");
d) msg("Hello World");
```
现在,为了判断用户的答案并统计分数,我们可以编写以下代码:
```javascript
// 问题和答案
const questions = [
{ question: "1. What does CSS stand for?", answer: "c" },
{ question: "2. What is the correct syntax for referring to an external script called 'script.js'?", answer: "c" },
{ question: "3. How do you declare a JavaScript variable?", answer: "a" },
{ question: "4. What is the correct way to write a JavaScript array?", answer: "b" },
{ question: "5. Which operator is used to assign a value to a variable?", answer: "a" },
{ question: "6. How do you write 'Hello World' in an alert box?", answer: "c" }
];
// 分数
let score = 0;
// 为每个问题创建一个单选框,并将其添加到HTML页面中
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
function buildQuiz() {
const output = [];
questions.forEach((currentQuestion, questionNumber) => {
const answers = [];
for (letter in currentQuestion) {
if (letter !== "question") {
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${letter}">
${letter}: ${currentQuestion[letter]}
</label>`
);
}
}
output.push(
`<div class="question"> ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>`
);
});
quizContainer.innerHTML = output.join("");
}
// 计算分数
function showResults() {
const answerContainers = quizContainer.querySelectorAll(".answers");
questions.forEach((currentQuestion, questionNumber) => {
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if (userAnswer === currentQuestion.answer) {
score++;
answerContainers[questionNumber].style.color = "lightgreen";
} else {
answerContainers[questionNumber].style.color = "red";
}
});
resultsContainer.innerHTML = `You scored ${score} out of ${questions.length}!`;
}
// 在提交按钮被单击时,计算分数
submitButton.addEventListener("click", showResults);
// 构建问题
buildQuiz();
```
这段代码将创建一个包含每个问题和答案的数组。然后,它将为每个问题创建一个单选框,并将其添加到HTML页面中。最后,它将在用户单击提交按钮时计算用户的得分并显示结果。
阅读全文