如何在简单的HTML和vanilla 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（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替换为该值，如下所示

三个问题示例

＆＃13;

＆＃13;

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));
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

四个问题示例

＆＃13;

＆＃13;

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));
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

带有Let和right的

wrong正在创建result的本地范围，并且在执行{时未使用结果的全局值{1}}和right功能。

您需要使用wrong和var right

<强>演示

＆＃13;

＆＃13;

var wrong

＆＃13;

let result = 0;

var right = ()=>{ //see the change here. `let` is replaced with `var`
	result += 33.3;
};

var wrong = ()=>{ //see the change here. `let` is replaced with `var`
	result -= 33.3;
};

let finish = ()=>{
	totalScore = result;
	if (totalScore < 0) {
		totalScore = 0;
	}
	console.log(Math.ceil(totalScore));
}

＆＃13;

＆＃13;

＆＃13;

  

我一次又一次地尝试弄清楚如何计算积分   自动，而不是我每次改变结果+ = 50（2   问题）或结果+ = 33.3（3个问题），因为它会更多   效率很高，但到目前为止我都失败了。

您可以遵循此方法

• 将<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>值分配给单选按钮本身。

• 删除data-isCorrect属性，并通过迭代所有单选按钮添加点击事件。

演示4个问题

＆＃13;

＆＃13;

onclick

＆＃13;

let result = 0;
var radios = document.querySelectorAll( "input[type='radio']" );

[].slice.call( radios ).forEach( function( element ){   
   element.addEventListener( "click", function(){
       var isCorrect = this.getAttribute( "data-isCorrect" ) == "true";
       result += isCorrect ? 33.3 : -33.3;
   });
});

let finish = ()=>{
	totalScore = result;
	if (totalScore < 0) {
		totalScore = 0;
	}
	console.log(Math.ceil(totalScore));
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

根据乔治的答案和我的补充，这是一个完全有效的例子：

<!DOCTYPE html>
<html>
    <body>
        <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 - Z?</label>
                <input type="radio" name="g3" onclick="right()">Yes
                <input type="radio" name="g3" onclick="wrong()">No
            </div>

            <!-- -->

            <div>
                <input type="button" value="finish" onclick="finish()">
            </div>
        </form>

        <script>
            let result = 0;
            let labelCount = document.querySelectorAll('#quiz label').length;
            let questionValue = 100 / labelCount;

            let right = ()=>{
                result += questionValue;
            };

            let wrong = ()=>{
                result -= questionValue;
            };

            let finish = ()=>{
                let labelCount = document.querySelectorAll('#quiz label').length;
                let checkedButtonsCount = document.querySelectorAll('#quiz :checked').length;
                if (labelCount !== checkedButtonsCount) {
                    alert("At least one group is blank.");
                }
                if (result < 0) {
                    result = 0;
                }
                if (result > 100) {
                    result = 100;
                }
                return alert(Math.ceil(result));
            };
        </script>
    </body>
</html>

在这个例子中，我没有与George的版本有关的问题（见评论）。我还添加了一个检查，以查看是否单击了所有单选按钮，并返回警报。