Question

我最近偶然发现了我的JavaScript测验中的一个错误。这是一个多项选择测验。我点击了其中一个答案。然后我一直点击提交问题直到测验完成。而不是说我有15个问题中的1个正确，它说我有15个中的6个是正确的，即使我把其他问题留空了。计算中的此错误仅在我选择选项后继续单击提交时发生。任何帮助表示赞赏。

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
	["What does HTML stand for?", "High Tech Markup Language", "Hyper Text Multiple Listing", "Hyper Text Markup Language", "C"],
	["What does CSS stand for?", "Computer Software Supervisor", "Cascading Stylesheets", "Computer Software Systems", "B"],
	["What aspect of a website does JavaScript control?", "the behavior", "the structure", "the design & layout", "A"],
	["What are media queries for?","They give the programmer access to covert media files.", "They make websites function well and look great on multiple devices like tablets and smartphones.", "They're a set of javascript libraries...like jquery.", "B"],
	["The two categories of elements in html are block and...", "outline", "flatline", "inline", "C"],
	["Which data type gives a value of true or false?", "character", "boolean", "integer", "B"],
	["How do you write a comment in CSS?", "/* */", "//", "just write it out..", "A"],
	["Java was developed by which company?", "Netscape", "Sun Microsystems", "Enron", "B"],
	["Which gets more priority in CSS?", "class attribute", "element", "id attribute" ,"C"],
	["PHP is a _________ language.", "server-side", "client-side", "westside", "A"],
	["What does API stand for?", "Application Program Interface", "Apple Programs Iphones", "Advanced Programming Institute", "A"],
	["Wordpress is a ...", "Content Management Device", "Content Manipulating Stylesheet", "Content Management System", "C"],
	["Which of these is NOT a real programming language?", "C", "CSS", "JavaScript", "B"],
	["In an HTML document it's best to store javascript in the ____ of the page.", "head", "bottom of the body", "top of the body", "B"],
	["Bootstrap was built at which popular social media site?", "Twitter", "Facebook", "Instagram", "A"]
];
function _(x) {
	return document.getElementById(x);
}
function renderQuestion() {
	test = _("test");
	if(pos >= questions.length){
		test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
		_("test_status").innerHTML = "Test Completed";
		pos = 0;
		correct = 0;
		return false;
	}
	_("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length;
	question = questions[pos][0];
	chA = questions[pos][1];
	chB = questions[pos][2];
	chC = questions[pos][3];
	test.innerHTML = "<h3>"+question+"</h3>";
	test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
	test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
	test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
	test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer(){
	choices = document.getElementsByName("choices");
	for(var i=0; i<choices.length; i++){
		if(choices[i].checked){
			choice = choices[i].value;
		}
	}
	if(choice == questions[pos][4]){
		correct++;
	}
	pos++;
	renderQuestion();
}
window.addEventListener("load", renderQuestion, false);

body {
	background: #f5f5f5;
}
* {
	margin: 0;
	padding: 0;
}
header {
	width: 1000px;
	height: 190px;
	background-color: firebrick;
	margin: 0 auto;
	border-left: black solid 1px;
	border-right: black solid 1px;
	
}
h1 {
	color: white;
	text-align: center;
	position: relative;
	top: 65px;
	font-size: 3em;
	font-family: cooper;
}
h2 {
	position: relative;
	top: 30px;
	margin: 10px;
	padding: 10px 40px 40px 40px;
}
h3 {
	text-align: center;
	font-size: 2em;
}
h5 {
	color: white;
	text-align: center;
	font-size: 1.3em;
	position: relative;
	top: 110px;
}
p {
	text-align: center;
	font-size: 1.5em;
}
a {
	text-decoration: none;
}
section {
	width: 1000px;
	height: 700px;
	margin: 0 auto;
	background-color: white;
	border-left: black solid 1px;
	border-right: black solid 1px;
}
#center {
	text-align: center;
	position: relative;
	top: 20px;
}
#test {
	color: black;
	border: #000 1px solid;
	padding: 10px 40px 40px 40px;
	background-color: white;
	margin-left: 20px;
	margin-right: 20px;
	position: relative;
	top: 100px;
}
footer {
	width: 1000px;
	height: 250px;
	background-color: #003366;
	margin: 0 auto;
	border-left: black solid 1px;
	border-right: black solid 1px;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Web Developer Quiz</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div="it">
	<h2 id="test_status"></h2>
	<div id="test"></div>
	<button><a href="index.html"></a></button>
	</div>
	<script src="script.js"></script>
</body>
</html>

Answer 1

在renderQuestion()功能的开头，您应该重置choice变量

function renderQuestion() {
    choice = undefined;
    test = _("test");
    ...
}

Answer 2

您应该在代码的第一行，在choice函数内声明变量checkAnswer()，而不是全局。所以让你的全局声明看起来像这样：

var pos = 0, test, test_status, question, choices, chA, chB, chC, correct = 0;

然后像这样添加checkAnswer()：

function checkAnswer(){
  var choice;
...

刚刚注意到我的JavaScript测验中的一个缺陷。我需要帮助修复它

2 个答案: