Simple-Quiz_Application-Javascript/quiz.html at master · Trijit957/Simple-Quiz_Application-Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
div #test {
	border:#000 1px solid;
	padding:10px 40px 40px 40px;
}
</style>
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
    [ "What type if language Javascript is?", "Programming", "Scripting", "Markup", "B"],
	[ "Logistic Regression is what type of machine learning?", "Reinforcement", "Unsupervised", "Supervised", "C"],
	[ "Which has the lowest priority of the following?", "External CSS", "Internal CSS", "Inline CSS", "A"],
	[ "In Jquery '$' represents-", "A function", "A variable", "An object", "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 = "<center>Question "+(pos+1)+" of "+questions.length+"</center>";
	question = questions[pos][0];
	chA = questions[pos][1];
	chB = questions[pos][2];
	chC = questions[pos][3];

	test.innerHTML = "<center><h3>"+question+"</h3></center>";
	test.innerHTML += "<center><input type='radio' name='choices' value='A'> "+chA+"</center><br>";
	test.innerHTML += "<center><input type='radio' name='choices' value='B'> "+chB+"</center><br>";
	test.innerHTML += "<center><input type='radio' name='choices' value='C'> "+chC+"</center><br><br>";

	test.innerHTML += "<center><button onclick='checkAnswer()'>Submit</button></center>";
}
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);
</script>
</head>
<body>
<h2 id="test_status"></h2>
<div id="test"></div>
</body>
</html>