javascript quiz ,appropriate message should be displayed and submit button issue

Question

my task consists of writing javascript code for a quiz. every piece of code is good but the main problem is that i should display another message at the end of the quiz saying that if i got all questions correct. a congratulation message should be displayed. (for ex. you got 3 of 3 questions correct, congratulations.)also, we cannot proceed to the next page if the current question hasn't been answered.the submit button should be disabled. should i use an alert box??

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    [ "What is 10 + 4?", "12", "14", "16", "B" ],
	[ "What is 20 - 9?", "7", "13", "11", "C" ],
	[ "What is 7 x 3?", "21", "24", "25", "A" ],
	[ "What is 8 / 2?", "10", "2", "4", "C" ]
];
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);

<h2 id="test_status"></h2>
<div id="test"></div>

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    [ "What is 10 + 4?", "12", "14", "16", "B" ],
	[ "What is 20 - 9?", "7", "13", "11", "C" ],
	[ "What is 7 x 3?", "21", "24", "25", "A" ],
	[ "What is 8 / 2?", "10", "2", "4", "C" ]
];
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);

<h2 id="test_status"></h2>
<div id="test"></div>

Why did you uncheck my answer? Didn't work for you? Are you missing something? — Vi100
– Vi100, Commented Nov 21, 2015 at 23:49

Vi100 · Accepted Answer · 2015-11-21 10:36:13Z

1

Simply change this line:

test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";

for this one:

test.innerHTML = (correct == questions.length ? "CONGRATULATIONS!!! " : "") + "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";

answered Nov 21, 2015 at 10:36

Vi100

4,2241 gold badge34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Azad · Accepted Answer · 2015-11-21 10:35:20Z

0

try this,

if(pos >= questions.length){
        _("test_status").innerHTML = "Test Completed";
        //shows message
        alert("You got "+correct+" of "+questions.length+" questions correct");

        pos = 0;
        correct = 0;
        return false;
    }

answered Nov 21, 2015 at 10:35

Azad

5,2725 gold badges32 silver badges59 bronze badges

Collectives™ on Stack Overflow

javascript quiz ,appropriate message should be displayed and submit button issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related