如何在JavaScript/jQuery实现的HTML测验中存储并展示全部作答答案

先修复原代码的已知问题 #

• 所有单选框共用同一个name属性，导致全局仅能选中1个选项，切换题目后之前的选择会被覆盖，需要按题号区分name属性
• 所有下一题按钮使用重复的id="button"，不符合HTML规范，会导致选择器匹配异常，改为类名next-btn用类选择器匹配

实现逻辑 #

1. 全局声明一个对象用于存储每道题的用户答案
2. 每道题点击下一题按钮时，先获取当前题的题号和选中的答案，存入全局对象
3. 第五题点击提交后，遍历存储的答案，拼接成展示内容插入到结果页容器中

修改后完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="STYLE.CSS">
    <title>问答测验</title>
</head>
<body>
    <form class="questionForm" id="q1" data-question="1">
        <div>
            <p>Question 1</p>
            <p><input type="radio" name="_exam_1" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_1" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_1" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_1" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_1" value="e">E. Zorgzaamheid</p>
        </div>
        <input class="next-btn" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q2" data-question="2">
        <div>
            <p>Question 2</p>
            <p><input type="radio" name="_exam_2" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_2" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_2" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_2" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_2" value="e">E. Zorgzaamheid</p>
        </div>
        <input class="next-btn" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q3" data-question="3">
        <div>
            <p>Question 3</p>
            <p><input type="radio" name="_exam_3" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_3" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_3" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_3" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_3" value="e">E. Zorgzaamheid</p>
        </div>
        <input class="next-btn" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q4" data-question="4">
        <div>
            <p>Question 4</p>
            <p><input type="radio" name="_exam_4" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_4" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_4" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_4" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_4" value="e">E. Zorgzaamheid</p>
        </div>
        <input class="next-btn" type="button" value="Volgende">
    </form>

    <form class="questionForm" id="q5" data-question="5">
        <div>
            <p>Question 5</p>
            <p><input type="radio" name="_exam_5" value="a">A. Rustgeving</p>
            <p><input type="radio" name="_exam_5" value="b">B. Zingeving</p>
            <p><input type="radio" name="_exam_5" value="c">C. Duurzaamheid</p>
            <p><input type="radio" name="_exam_5" value="d">D. Verzuiling</p>
            <p><input type="radio" name="_exam_5" value="e">E. Zorgzaamheid</p>
        </div>
        <input class="next-btn" type="button" value="提交查看结果">
    </form>

    <div id="results" style="display:none;">
        <p>以下是你的作答结果：</p>
        <div id="result-list"></div>
    </div>

    <script src="jquery.js"></script>
    <script src="quiz.js"></script>
</body>
</html>

JS代码（quiz.js） #

// 全局存储用户答案，key为题号，value为选中的选项值
const userAnswers = {};

$(document).ready(function () {
    // 隐藏所有题目和结果页
    $('.questionForm').hide();
    $('#results').hide();
    // 显示第一题
    $('#q1').show();

    // 第一题下一题逻辑
    $('#q1 .next-btn').click(function () {
        const selected = $('input[name="_exam_1"]:checked').val();
        userAnswers[1] = selected;
        $('.questionForm').hide();
        $('#q2').show();
        return false;
    });

    // 第二题下一题逻辑
    $('#q2 .next-btn').click(function () {
        const selected = $('input[name="_exam_2"]:checked').val();
        userAnswers[2] = selected;
        $('.questionForm').hide();
        $('#q3').show();
        return false;
    });

    // 第三题下一题逻辑
    $('#q3 .next-btn').click(function () {
        const selected = $('input[name="_exam_3"]:checked').val();
        userAnswers[3] = selected;
        $('.questionForm').hide();
        $('#q4').show();
        return false;
    });

    // 第四题下一题逻辑
    $('#q4 .next-btn').click(function () {
        const selected = $('input[name="_exam_4"]:checked').val();
        userAnswers[4] = selected;
        $('.questionForm').hide();
        $('#q5').show();
        return false;
    });

    // 第五题提交逻辑
    $('#q5 .next-btn').click(function () {
        const selected = $('input[name="_exam_5"]:checked').val();
        userAnswers[5] = selected;
        $('.questionForm').hide();
        $('#results').show();
        // 拼接结果内容
        let htmlStr = '';
        for(let qid in userAnswers) {
            htmlStr += `<p>第${qid}题：你选择的选项是 ${userAnswers[qid].toUpperCase()}</p>`;
        }
        // 插入到结果页
        $('#result-list').html(htmlStr);
        return false;
    });
});

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