0

我最近在我的JavaScript測驗中偶然發現了一個錯誤。這是一個多選題測驗。我點擊了其中一個答案。然後,我繼續點擊提交問題,直到測驗完成。我沒有說我在15個問題中得到了1個,而是說我有15個右邊的6個,儘管我把其他問題留給了空白。計算中的這個錯誤只會在選擇選項後繼續單擊提交時發生。任何援助表示讚賞。剛剛注意到我的JavaScript測驗中存在一個缺陷。我需要幫助來修復它

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; 
 
var questions = [ 
 
\t ["What does HTML stand for?", "High Tech Markup Language", "Hyper Text Multiple Listing", "Hyper Text Markup Language", "C"], 
 
\t ["What does CSS stand for?", "Computer Software Supervisor", "Cascading Stylesheets", "Computer Software Systems", "B"], 
 
\t ["What aspect of a website does JavaScript control?", "the behavior", "the structure", "the design & layout", "A"], 
 
\t ["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"], 
 
\t ["The two categories of elements in html are block and...", "outline", "flatline", "inline", "C"], 
 
\t ["Which data type gives a value of true or false?", "character", "boolean", "integer", "B"], 
 
\t ["How do you write a comment in CSS?", "/* */", "//", "just write it out..", "A"], 
 
\t ["Java was developed by which company?", "Netscape", "Sun Microsystems", "Enron", "B"], 
 
\t ["Which gets more priority in CSS?", "class attribute", "element", "id attribute" ,"C"], 
 
\t ["PHP is a _________ language.", "server-side", "client-side", "westside", "A"], 
 
\t ["What does API stand for?", "Application Program Interface", "Apple Programs Iphones", "Advanced Programming Institute", "A"], 
 
\t ["Wordpress is a ...", "Content Management Device", "Content Manipulating Stylesheet", "Content Management System", "C"], 
 
\t ["Which of these is NOT a real programming language?", "C", "CSS", "JavaScript", "B"], 
 
\t ["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"], 
 
\t ["Bootstrap was built at which popular social media site?", "Twitter", "Facebook", "Instagram", "A"] 
 
]; 
 
function _(x) { 
 
\t return document.getElementById(x); 
 
} 
 
function renderQuestion() { 
 
\t test = _("test"); 
 
\t if(pos >= questions.length){ 
 
\t \t test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>"; 
 
\t \t _("test_status").innerHTML = "Test Completed"; 
 
\t \t pos = 0; 
 
\t \t correct = 0; 
 
\t \t return false; 
 
\t } 
 
\t _("test_status").innerHTML = "Question "+(pos+1)+" of "+questions.length; 
 
\t question = questions[pos][0]; 
 
\t chA = questions[pos][1]; 
 
\t chB = questions[pos][2]; 
 
\t chC = questions[pos][3]; 
 
\t test.innerHTML = "<h3>"+question+"</h3>"; 
 
\t test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>"; 
 
\t test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>"; 
 
\t test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>"; 
 
\t test.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>"; 
 
} 
 
function checkAnswer(){ 
 
\t choices = document.getElementsByName("choices"); 
 
\t for(var i=0; i<choices.length; i++){ 
 
\t \t if(choices[i].checked){ 
 
\t \t \t choice = choices[i].value; 
 
\t \t } 
 
\t } 
 
\t if(choice == questions[pos][4]){ 
 
\t \t correct++; 
 
\t } 
 
\t pos++; 
 
\t renderQuestion(); 
 
} 
 
window.addEventListener("load", renderQuestion, false);
body { 
 
\t background: #f5f5f5; 
 
} 
 
* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
header { 
 
\t width: 1000px; 
 
\t height: 190px; 
 
\t background-color: firebrick; 
 
\t margin: 0 auto; 
 
\t border-left: black solid 1px; 
 
\t border-right: black solid 1px; 
 
\t 
 
} 
 
h1 { 
 
\t color: white; 
 
\t text-align: center; 
 
\t position: relative; 
 
\t top: 65px; 
 
\t font-size: 3em; 
 
\t font-family: cooper; 
 
} 
 
h2 { 
 
\t position: relative; 
 
\t top: 30px; 
 
\t margin: 10px; 
 
\t padding: 10px 40px 40px 40px; 
 
} 
 
h3 { 
 
\t text-align: center; 
 
\t font-size: 2em; 
 
} 
 
h5 { 
 
\t color: white; 
 
\t text-align: center; 
 
\t font-size: 1.3em; 
 
\t position: relative; 
 
\t top: 110px; 
 
} 
 
p { 
 
\t text-align: center; 
 
\t font-size: 1.5em; 
 
} 
 
a { 
 
\t text-decoration: none; 
 
} 
 
section { 
 
\t width: 1000px; 
 
\t height: 700px; 
 
\t margin: 0 auto; 
 
\t background-color: white; 
 
\t border-left: black solid 1px; 
 
\t border-right: black solid 1px; 
 
} 
 
#center { 
 
\t text-align: center; 
 
\t position: relative; 
 
\t top: 20px; 
 
} 
 
#test { 
 
\t color: black; 
 
\t border: #000 1px solid; 
 
\t padding: 10px 40px 40px 40px; 
 
\t background-color: white; 
 
\t margin-left: 20px; 
 
\t margin-right: 20px; 
 
\t position: relative; 
 
\t top: 100px; 
 
} 
 
footer { 
 
\t width: 1000px; 
 
\t height: 250px; 
 
\t background-color: #003366; 
 
\t margin: 0 auto; 
 
\t border-left: black solid 1px; 
 
\t border-right: black solid 1px; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Web Developer Quiz</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
\t <div="it"> 
 
\t <h2 id="test_status"></h2> 
 
\t <div id="test"></div> 
 
\t <button><a href="index.html"></a></button> 
 
\t </div> 
 
\t <script src="script.js"></script> 
 
</body> 
 
</html>

+2

爲什麼人們投票關閉這個?這個問題明確說明,代碼格式良好,問題明確。 – naomik

+0

謝謝。我想知道同樣的事情。 – thetekkenmaster

回答

1

在你renderQuestion()功能的開始,您應該重置choice變量

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

現在正在工作。非常感謝。 :) – thetekkenmaster

0

你應該聲明變量choicecheckAnswer()函數內的全球第一你的代碼行。因此,請您全局聲明是這樣的:

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

然後將其添加checkAnswer()這樣的:

function checkAnswer(){ 
    var choice; 
... 
相關問題