我最近在我的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>
爲什麼人們投票關閉這個?這個問題明確說明,代碼格式良好,問題明確。 – naomik
謝謝。我想知道同樣的事情。 – thetekkenmaster