问题分类评分

Question

我想在测验中取一组问题，并将它们分为3个不同的分数。比如数学/英语/科学。

那么，如果数组中的3个问题中的每一个都是一个单独的类别，我可以标记它们并有一个基于类别计算的函数吗?

我知道我可以复制我的函数，并根据类别稍微修改它们，但我觉得有一种更有效的方法。

// Initialize the current question index
let currentQuestionIndex = 0;
// Array of questions
const questions = [{
question: "What does 2+2 equal?",
answers: [{
text: "4",
value: 1
},
{
text: "2",
value: 0
},
{
text: "8",
value: 0
},
{
text: "16",
value: 0
}
]
},
{
question: "What does oblitirate most nearly mean?",
answers: [{
text: "translate",
value: 0
},
{
text: "scatter",
value: 0
},
{
text: "wipe out",
value: 1
},
{
text: "blame",
value: 0
}
]
},
{
question: "What is the chemical formula for water?",
answers: [{
text: "H2O",
value: 0
},
{
text: "K",
value: 0
},
{
text: "Na",
value: 1
},
{
text: "H",
value: 0
}
]
}
];
// Initialize the total score
let totalScore = 0;
// Add the value of the selected answer to the total score and uncheck the other radio buttons
function updateScore(selectedAnswer) {
// Check if a radio button has been selected
if (!selectedAnswer.checked) {
return;
}
// Add the value of the selected answer to the total score
totalScore += parseInt(selectedAnswer.value);
// Get all the radio buttons
const radioButtons = document.getElementsByName("answer");
// Loop through the radio buttons
for (const radioButton of radioButtons) {
// If the radio button is not the selected answer, uncheck it
if (radioButton !== selectedAnswer) {
radioButton.checked = false;
}
}
}
// Show the next question
function showNextQuestion() {
// Hide the form
document.getElementById("form").style.display = "none";
// Show the question and answers
document.getElementById("question").style.display = "block";
document.getElementById("answers").style.display = "block";
document.getElementById("next-button").style.display = "block";
// Check if the current question is the last question
if (currentQuestionIndex < questions.length) {
// If it is not, get the current question
const currentQuestion = questions[currentQuestionIndex];
// Update the question text
document.getElementById("question").innerHTML = currentQuestion.question;
//clear answers
document.getElementById("answers").innerHTML = '';
// Show the answers for the current question
for (const answer of currentQuestion.answers) {
document.getElementById("answers").innerHTML += `
<input type="radio" name="answer" value="${answer.value}" onchange="updateScore(this)"> ${answer.text}<br>
`;
}
// Update the current question index
currentQuestionIndex++;
}
if (currentQuestionIndex === questions.length) {
// If it is, hide the "Next" button and show the "Submit" button
document.getElementById("next-button").style.display = "none";
document.getElementById("submit-button").style.display = "block";
}
}
// Show the total score
function showTotalScore() {
// Hide the question and answers
document.getElementById("question").style.display = "none";
document.getElementById("answers").style.display = "none";
document.getElementById("submit-button").style.display = "none";
// Show the total score
document.getElementById("total-score").style.display = "block";
document.getElementById("total-score").innerHTML = "Total Score: " + totalScore;
}

<form id="form">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone"><br><br>
<input type="button" value="Next" onclick="showNextQuestion()">
</form>
<div id="question" style="display: none;"></div>
<div id="answers" style="display: none;"></div>
<div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div>
<div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div>
<div id="total-score" style="display: none;">Total Score: 0</div>

Answer 1

您只需要创建一个对象将每个类别映射到它的分数，并为每个问题分配一个类别，如下所示:

// Initialize the current question index
let currentQuestionIndex = 0;
// Array of questions
const questions = [{
question: "What does 2+2 equal?",
category: 'maths',
answers: [{
text: "4",
value: 1
},
{
text: "2",
value: 0
},
{
text: "8",
value: 0
},
{
text: "16",
value: 0
}
]
},
{
question: "What does oblitirate most nearly mean?",
category: 'english',
answers: [{
text: "translate",
value: 0
},
{
text: "scatter",
value: 0
},
{
text: "wipe out",
value: 1
},
{
text: "blame",
value: 0
}
]
},
{
question: "What is the chemical formula for water?",
category: 'science',
answers: [{
text: "H2O",
value: 1
},
{
text: "K",
value: 0
},
{
text: "Na",
value: 0
},
{
text: "H",
value: 0
}
]
}
];
// Initialize the total score
const scores = {}
let totalScore = 0
// Add the value of the selected answer to the total score and uncheck the other radio buttons
function updateScore (selectedAnswer, category) {
// Check if a radio button has been selected
if (!selectedAnswer.checked) return;
const v = parseInt(selectedAnswer.value)
// Add the value of the selected answer to the total score
totalScore += v;
// Add the value of the selected answer to the category score
scores[category] += v
// Get all the radio buttons
const radioButtons = document.getElementsByName("answer");
// Loop through the radio buttons
for (const radioButton of radioButtons) {
// If the radio button is not the selected answer, uncheck it
if (radioButton !== selectedAnswer) {
radioButton.checked = false;
}
}
}
// Show the next question
function showNextQuestion() {
// Hide the form
document.getElementById("form").style.display = "none";
// Show the question and answers
document.getElementById("question").style.display = "block";
document.getElementById("answers").style.display = "block";
document.getElementById("next-button").style.display = "block";
// Check if the current question is the last question
if (currentQuestionIndex < questions.length) {
// If it is not, get the current question
const currentQuestion = questions[currentQuestionIndex];
// Update the question text
document.getElementById("question").innerHTML = currentQuestion.question;
//clear answers
document.getElementById("answers").innerHTML = '';
// Init the category score
scores[currentQuestion.category] = 0
// Show the answers for the current question
for (const answer of currentQuestion.answers) {
document.getElementById("answers").innerHTML += `
<input type="radio" name="answer" value="${answer.value}" onchange="updateScore(this, '${ currentQuestion.category }')"> ${answer.text}<br>
`;
}
// Update the current question index
currentQuestionIndex++;
}
if (currentQuestionIndex === questions.length) {
// If it is, hide the "Next" button and show the "Submit" button
document.getElementById("next-button").style.display = "none";
document.getElementById("submit-button").style.display = "block";
}
}
// Show the total score
function showTotalScore() {
let txt = "Total Score: " + totalScore
console.log(scores)
Object.keys(scores).forEach(category => {
// Catpitalize the category
const categoryStr = category.split('').map((e, i) => i ? e : e.toUpperCase()).join('')
txt += `<br />${ categoryStr }: ${ scores[category] }`
})

// Hide the question and answers
document.getElementById("question").style.display = "none";
document.getElementById("answers").style.display = "none";
document.getElementById("submit-button").style.display = "none";
// Show the total score
document.getElementById("total-score").style.display = "block";
document.getElementById("total-score").innerHTML = txt;
}

<form id="form">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="phone">Phone:</label><br>
<input type="text" id="phone" name="phone"><br><br>
<input type="button" value="Next" onclick="showNextQuestion()">
</form>
<div id="question" style="display: none;"></div>
<div id="answers" style="display: none;"></div>
<div id="next-button" style="display: none;"><input type="button" value="Next" onclick="showNextQuestion()"></div>
<div id="submit-button" style="display: none;"><input type="button" value="Submit" onclick="showTotalScore()"></div>
<div id="total-score" style="display: none;">Total Score: 0</div>