javascript - 如何在简单的 HTML 和普通 JavaScript 测验中自动计算测验分数？

Question

我创建了一个包含 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？

更新

请查看乔治的回答，然后是我的回答。

Answer 1

您正确地使用 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>