使用JavaScript实现单选测验input选项的分数累加计算

功能需求 #

• 共3道测验题目，页面每次仅展示1道题，每道题设置3个选项
• 计分规则：选项a计2分、选项b计1分、选项c计0分
• 需实现逻辑：逐题答题过程中累加得分，答完所有题目后展示最终总分

现有编写代码 #

JavaScript 逻辑代码 #

const qData = [
    {
        question: "Question1",
        a: "Yes",
        b: "No",
        c: "Maybe",
    },
    {
        question: "Question2",
        a: "Always",
        b: "Sometimes",
        c: "Never",
    },
    {
        question: "Question3",
        a: "100%",
        b: "50%",
        c: "0%",
    }
    
]

const questionE1 = document.getElementById("question");
const a_text = document.getElementById("a-text");
const b_text = document.getElementById("b-text");
const c_text = document.getElementById("c-text");
const submitBtn = document.getElementById("siguiente")

let currentQuiz = 0;

loadQuiz();

function loadQuiz() {
    const currentQuizData = qData[currentQuiz];

    questionE1.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;

}

submitBtn.addEventListener("click", () => {
    currentQuiz++;
});

const numericalValues = new Array();
numericalValues["a"]= 2;
numericalValues["b"]= 1;
numericalValues["c"]= 0;

function getscore() {
     var puntos = 0;
     var answer = document.getElementById("answer");
     for(var i=0; i<answer.length; i++)
     {
         if(answer[i]) {
             puntos = numericalValues[answer[i].value];
         }
     }
     return puntos;
};

HTML 页面代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
</head>
<body>
  <h1>Quiz</h1>
<div class="container">
    <div class="score">
    <h2 id="question">Question text</h2>
    <ul>
        <li><input type="radio" id="a" name="answer" class="answer"><label id="a-text" for="a">Question</label></li>
        <li><input type="radio" id="b" name="answer" class="answer"><label id="b-text" for="b">Question</label></li>
        <li><input type="radio" id="c" name="answer" class="answer"><label id="c-text" for="c">Question</label></li>
    </ul>
    <button id="siguiente">Next</button>
    </div> 
</div>
<p id="result">Final Score</p>
</body>
</html>

代码修复方案 #

原有代码问题点 #

• 未定义总分存储变量，切换题目时没有累加当前题得分的逻辑
• 单选按钮未设置value属性，选中答案获取逻辑错误：使用getElementById获取class为answer的元素无法拿到单选组，且判断逻辑未校验单选框的选中状态
• 题目切换无边界判断，答完最后一题没有触发结果展示逻辑
• 切换下一题时未清空上一题的选项选中状态
• 结果区域默认展示，未做显隐控制

修复后完整代码 #

修复后JavaScript代码

const qData = [
    {
        question: "Question1",
        a: "Yes",
        b: "No",
        c: "Maybe",
    },
    {
        question: "Question2",
        a: "Always",
        b: "Sometimes",
        c: "Never",
    },
    {
        question: "Question3",
        a: "100%",
        b: "50%",
        c: "0%",
    }
]

const questionEl = document.getElementById("question");
const a_text = document.getElementById("a-text");
const b_text = document.getElementById("b-text");
const c_text = document.getElementById("c-text");
const submitBtn = document.getElementById("siguiente");
const answerEls = document.querySelectorAll(".answer");
const quizContainer = document.querySelector(".score");
const resultEl = document.getElementById("result");

// 选项分值映射
const scoreMap = {
    "a": 2,
    "b": 1,
    "c": 0
}

let currentQuiz = 0;
let totalScore = 0;

// 初始隐藏结果区域
resultEl.style.display = "none";
loadQuiz();

function loadQuiz() {
    // 清空选项选中状态
    answerEls.forEach(el => el.checked = false);
    const currentQuizData = qData[currentQuiz];
    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
}

// 获取当前题选中的答案
function getSelected() {
    let selected = null;
    answerEls.forEach(answerEl => {
        if(answerEl.checked) {
            selected = answerEl.id;
        }
    })
    return selected;
}

submitBtn.addEventListener("click", () => {
    const selectedAns = getSelected();
    // 未选答案时拦截跳转
    if(!selectedAns) {
        alert("请先选择一个答案");
        return;
    }
    // 累加当前题得分
    totalScore += scoreMap[selectedAns];
    currentQuiz++;
    if(currentQuiz < qData.length) {
        // 加载下一题
        loadQuiz();
    } else {
        // 答题结束，展示最终得分
        quizContainer.style.display = "none";
        resultEl.innerText = `最终得分：${totalScore} 分（满分6分）`;
        resultEl.style.display = "block";
    }
});

修复后HTML代码（仅补充单选框value属性）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
</head>
<body>
  <h1>Quiz</h1>
<div class="container">
    <div class="score">
    <h2 id="question">Question text</h2>
    <ul>
        <li><input type="radio" id="a" name="answer" class="answer" value="a"><label id="a-text" for="a">Question</label></li>
        <li><input type="radio" id="b" name="answer" class="answer" value="b"><label id="b-text" for="b">Question</label></li>
        <li><input type="radio" id="c" name="answer" class="answer" value="c"><label id="c-text" for="c">Question</label></li>
    </ul>
    <button id="siguiente">Next</button>
    </div> 
</div>
<p id="result">Final Score</p>
</body>
</html>

额外补充了未选答案的拦截提示，避免用户漏选选项直接跳转下一题，使用普通对象存储分值映射比数组更适配当前键值对场景。

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