我创建了一个包含 3 个问题的测验来进行练习。测验本身有效,但我想对其进行一些改进(见下文)。该测验由以下代码组成:
let result = 0;
let right = ()=>{
result += 33.3;
};
let wrong = ()=>{
result -= 33.3;
};
let finish = ()=>{
totalScore = result;
if (totalScore < 0) {
totalScore = 0;
}
alert(Math.ceil(totalScore));
}
<form id="quiz">
<div>
<label>Q1 - X?</label>
<input type="radio" name="g1" onclick="right()">Yes</input>
<input type="radio" name="g1" onclick="wrong()">No</input>
</div>
<div>
<label>Q2 - Y?</label>
<input type="radio" name="g2" onclick="wrong()">Yes</input>
<input type="radio" name="g2" onclick="right()">No</input>
</div>
<div>
<label>Q2 - Y?</label>
<input type="radio" name="g3" onclick="right()">Yes</input>
<input type="radio" name="g3" onclick="wrong()">No</input>
</div>
<br>
<input type="button" value="finish" onclick="finish()"></input>
</form>
我一次又一次地尝试找出如何自动计算积分,而不是每次都进行更改,例如 result += 50
(针对 2 个问题)或 result +=33.3
code> (针对 3 个问题),因为它会更有效,但到目前为止我失败了。
我不知道要尝试什么或者要搜索什么。我不明白这基本上应该如何写。
也许答案应该基于 100 除以问题数量,基于表单中 label
标签的数量 (let labelCount = document.querySelectorAll('#quiz label' ).length;
),然后比较正确和错误的答案。
但我不知道如何使用 right()
和 wrong()
函数集成和处理该数据。
您将采用什么方法来自动计算totalScore
?
更新
请查看乔治的回答,然后是我的回答。
最佳答案
您正确地使用 let labelCount = document.querySelectorAll('#quiz label').length;
获取标签数量,然后执行 100/labelCount
。然后您需要做的就是存储该值并将 33.3
替换为该值,如下所示
三个问题示例
let result = 0;
let labelCount = document.querySelectorAll('#quiz label').length;
let questionValue = 100 / labelCount;
let right = () => {
result += questionValue;
};
let wrong = () => {
result -= questionValue;
};
let finish = () => {
totalScore = result;
if (totalScore < 0) {
totalScore = 0;
}
alert(Math.ceil(totalScore));
}
<form id="quiz">
<div>
<label>Q1 - X?</label>
<input type="radio" name="g1" onclick="right()" />Yes
<input type="radio" name="g1" onclick="wrong()" />No
</div>
<div>
<label>Q2 - Y?</label>
<input type="radio" name="g2" onclick="wrong()">Yes
<input type="radio" name="g2" onclick="right()">No
</div>
<div>
<label>Q2 - Y?</label>
<input type="radio" name="g3" onclick="right()">Yes
<input type="radio" name="g3" onclick="wrong()">No
</div>
<br>
<input type="button" value="finish" onclick="finish()">
</form>
四个问题示例
let result = 0;
let labelCount = document.querySelectorAll('#quiz label').length;
let questionValue = 100 / labelCount;
let right = () => {
result += questionValue;
};
let wrong = () => {
result -= questionValue;
};
let finish = () => {
totalScore = result;
if (totalScore < 0) {
totalScore = 0;
}
alert(Math.ceil(totalScore));
}
<form id="quiz">
<div>
<label>Q1 - X?</label>
<input type="radio" name="g1" onclick="right()" />Yes
<input type="radio" name="g1" onclick="wrong()" />No
</div>
<div>
<label>Q2 - Y?</label>
<input type="radio" name="g2" onclick="wrong()">Yes
<input type="radio" name="g2" onclick="right()">No
</div>
<div>
<label>Q3 - Y?</label>
<input type="radio" name="g3" onclick="right()">Yes
<input type="radio" name="g3" onclick="wrong()">No
</div>
<div>
<label>Q4 - Y?</label>
<input type="radio" name="g4" onclick="right()">Yes
<input type="radio" name="g4" onclick="wrong()">No
</div>
<br>
<input type="button" value="finish" onclick="finish()">
</form>
关于javascript - 如何在简单的 HTML 和普通 JavaScript 测验中自动计算测验分数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46955882/