Twitter Bootstrap Question posted in

Just noticed a flaw in my JavaScript quiz. I need assistance in fixing it – Twitter bootstrap

I recently discovered a bug in my JavaScript quiz by accident. It’s a multiple choice quiz. I clicked on one of the answers. Then I kept clicking submit through the questions until the quiz was done. Instead of saying that I got 1 out of 15 questions right it said I got like 6 of 15 right, even though I left the other questions blank. This error in calculation only happens when I keep clicking submit after choosing an option. Any assistance is appreciated.

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

2

Answers


  1. 0

    In the beginning of your renderQuestion() function, you should reset your choice variable

    function renderQuestion() {
    choice = undefined;
    test = _("test");
    ...
}
    Login or Signup to reply.
  2. 0

    You should declare the variable choice inside the checkAnswer() function instead of globally on the first line of your code. So make your global declarations look like this:

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

    and then add it checkAnswer() like this:

    function checkAnswer(){
  var choice;
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search