在JavaScript中做了一个关于我自己的测验

在JavaScript中创建一个关于个人的测验通常涉及以下几个基础概念：

基础概念

变量：用于存储数据。
函数：执行特定任务的代码块。
条件语句：如if...else，用于根据条件执行不同的代码。
循环：如for或while，用于重复执行代码。
DOM操作：用于与网页元素交互。
事件监听：响应用户操作，如点击按钮。

类型与应用场景

选择题测验：用户从多个选项中选择一个正确答案。
填空题测验：用户需要填写答案。
判断题测验：用户判断陈述是否正确。
计分系统：根据用户的回答计算得分。

示例代码

以下是一个简单的选择题测验示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人测验</title>
<script>
function checkAnswers() {
    let score = 0;
    const answers = {
        q1: 'b',
        q2: 'a',
        q3: 'c'
    };

    for (const [question, correctAnswer] of Object.entries(answers)) {
        const userAnswer = document.querySelector(`input[name="${question}"]:checked`).value;
        if (userAnswer === correctAnswer) {
            score++;
        }
    }

    alert(`你的得分是：${score}/3`);
}
</script>
</head>
<body>

<h2>关于我的测验</h2>

<p>问题1：我最喜欢的颜色是什么？</p>
<input type="radio" name="q1" value="a"> 红色<br>
<input type="radio" name="q1" value="b"> 蓝色<br>
<input type="radio" name="q1" value="c"> 绿色<br>

<p>问题2：我通常在哪个时间段工作最有效率？</p>
<input type="radio" name="q2" value="a"> 上午<br>
<input type="radio" name="q2" value="b"> 下午<br>
<input type="radio" name="q2" value="c"> 晚上<br>

<p>问题3：我最喜欢的编程语言是什么？</p>
<input type="radio" name="q3" value="a"> Python<br>
<input type="radio" name="q3" value="b"> Java<br>
<input type="radio" name="q3" value="c"> JavaScript<br>

<button onclick="checkAnswers()">提交答案</button>

</body>
</html>

遇到的问题及解决方法

问题：用户可能未选择任何选项就提交答案。

原因：没有对用户输入进行验证。

解决方法：在checkAnswers函数中添加验证逻辑，确保所有问题都有答案。

function checkAnswers() {
    let score = 0;
    const answers = {
        q1: 'b',
        q2: 'a',
        q3: 'c'
    };

    let allAnswered = true;
    for (const [question, correctAnswer] of Object.entries(answers)) {
        const userAnswer = document.querySelector(`input[name="${question}"]:checked`);
        if (!userAnswer) {
            allAnswered = false;
            alert(`请回答所有问题！`);
            break;
        }
        if (userAnswer.value === correctAnswer) {
            score++;
        }
    }

    if (allAnswered) {
        alert(`你的得分是：${score}/3`);
    }
}

通过这种方式，可以确保用户在提交答案之前已经回答了所有问题，从而提高测验的准确性和用户体验。