quizApp

modified

HTML

<div id="header">Simple Quiz Application</div>

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

CSS

*{
	margin: 0;
	padding: 0;
}

body {
	font-family: open sans;
	background: #F0E0B0;
	margin: 10px 30px auto;
}

#header {
	font-size: 45px;
	text-align: center;
	margin-top: 30px;
	font-weight: 400;
	color: white;
	text-shadow: 1px 1px 1px #ddd;
}

#test_status {
	font-size: 45px;
	font-weight: normal;
	text-align: center;
	margin-top: 30px;
	color: #666;
}

#test {
	padding: 30px;
	background-color: white;
	margin-top: 10px;
	font-size: 23px;
	text-align: center;
	font-weight: 300;
}

#next, #prev {
	font-size: 22px;
	padding: 5px 10px;
	width: 120px;
}

JavaScript

var correct = 0;
var pos = 0;
var choice;
var allQuestions = [
	{question:"What is 10 + 5?", choices:["15", "12", "10"], answer: "A" },
	{question:"What is 10 - 5?", choices:["5", "6", "8"   ], answer: "A" },
	{question:"What is 10 * 5?", choices:["50", "60", "70"], answer: "A" },
	{question:"What is 10 / 5?", choices:["1", "2", "3"   ], answer: "B" }
];
var answers = [];

function getID(x) {
	return document.getElementById(x)
}
 
function renderQuestions () {
	var testStatus = getID("test_status");
	var test = getID("test");
	if(pos >= allQuestions.length) {
        // Check answers
        var qLen = allQuestions.length, correct = 0;
        for (var i = 0; i < qLen; ++i) {
            if (answers[i] === allQuestions[i].answer) {
                ++correct;
            }
        }
		testStatus.innerHTML = "Test Completed";
		test.innerHTML = "<h2>" + "You got " + correct  + " out of " +  allQuestions.length + "</h2><br/>";
		pos = 0;
		return false
	};
	testStatus.innerHTML = "Question " + (pos + 1) + " of " + allQuestions.length;
	
	var A = allQuestions[pos].choices[0];;
	var B = allQuestions[pos].choices[1];;
	var C = allQuestions[pos].choices[2];
	
	test.innerHTML = "<h2>" + allQuestions[pos].question  + "</h2><br/>";
	test.innerHTML += '<input type="radio" value="A" name="answerChoice" /> ' + A + '<br />';
	test.innerHTML += '<input type="radio" value="B" name="answerChoice" /> ' + B + '<br />';
	test.innerHTML += '<input type="radio" value="C" name="answerChoice" /> ' + C + '<br /><br />';
       
	if (pos == allQuestions.length - 1) {
		test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
		test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Submit"> ';
	}
	else if (pos >= 1) {
		test.innerHTML += '<input type="button" id="next" onclick="prevAnswer()" value="Prev"> ';
		test.innerHTML += '<input type="button" id="next" onclick="checkAnswer()" value="Next"> ';
	}
	else {
		test.innerHTML +=...