1// code by webdevtrick (https://webdevtrick.com)
2function Quiz(questions) {
3 this.score = 0;
4 this.questions = questions;
5 this.questionIndex = 0;
6}
7
8Quiz.prototype.getQuestionIndex = function() {
9 return this.questions[this.questionIndex];
10}
11
12Quiz.prototype.guess = function(answer) {
13 if(this.getQuestionIndex().isCorrectAnswer(answer)) {
14 this.score++;
15 }
16
17 this.questionIndex++;
18}
19
20Quiz.prototype.isEnded = function() {
21 return this.questionIndex === this.questions.length;
22}
23
24
25function Question(text, choices, answer) {
26 this.text = text;
27 this.choices = choices;
28 this.answer = answer;
29}
30
31Question.prototype.isCorrectAnswer = function(choice) {
32 return this.answer === choice;
33}
34
35
36function populate() {
37 if(quiz.isEnded()) {
38 showScores();
39 }
40 else {
41 // show question
42 var element = document.getElementById("question");
43 element.innerHTML = quiz.getQuestionIndex().text;
44
45 // show options
46 var choices = quiz.getQuestionIndex().choices;
47 for(var i = 0; i < choices.length; i++) {
48 var element = document.getElementById("choice" + i);
49 element.innerHTML = choices[i];
50 guess("btn" + i, choices[i]);
51 }
52
53 showProgress();
54 }
55};
56
57function guess(id, guess) {
58 var button = document.getElementById(id);
59 button.onclick = function() {
60 quiz.guess(guess);
61 populate();
62 }
63};
64
65
66function showProgress() {
67 var currentQuestionNumber = quiz.questionIndex + 1;
68 var element = document.getElementById("progress");
69 element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
70};
71
72function showScores() {
73 var gameOverHTML = "<h1>Result</h1>";
74 gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
75 var element = document.getElementById("quiz");
76 element.innerHTML = gameOverHTML;
77};
78
79// create questions here
80var questions = [
81 new Question("Hyper Text Markup Language Stand For?", ["JavaScript", "XHTML","CSS", "HTML"], "HTML"),
82 new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
83 new Question("Which is not a JavaScript Framework?", ["Python Script", "JQuery","Django", "NodeJS"], "Django"),
84 new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"], "PHP"),
85 new Question("Webdevtrick.com is about..", ["Web Design", "Graphic Design", "SEO & Development", "All"], "All")
86];
87
88// create quiz
89var quiz = new Quiz(questions);
90
91// display quiz
92populate();
93
1<!DOCTYPE html>
2<!-- code by webdevtrick (https://webdevtrick.com) -->
3<html>
4<head lang="en">
5 <meta charset="UTF-8">
6 <title>Quiz</title>
7 <link rel="stylesheet" type="text/css" href="style.css">
8</head>
9<body>
10 <div class="grid">
11 <div id="quiz">
12 <h1>Quiz in JavaScript Webdevtrick.com</h1>
13 <hr style="margin-bottom: 20px">
14
15 <p id="question"></p>
16
17 <div class="buttons">
18 <button id="btn0"><span id="choice0"></span></button>
19 <button id="btn1"><span id="choice1"></span></button>
20 <button id="btn2"><span id="choice2"></span></button>
21 <button id="btn3"><span id="choice3"></span></button>
22 </div>
23
24 <hr style="margin-top: 50px">
25 <footer>
26 <p id="progress">Question x of y</p>
27 </footer>
28 </div>
29 </div>
30
31
32<script src="question.js"></script>
33
34</body>
35</html>
36
1/** code by webdevtrick (https://webdevtrick.com) **/
2body {
3 background-color: #413D3D;
4}
5
6.grid {
7 width: 600px;
8 height: 500px;
9 margin: 0 auto;
10 background-color: #fff;
11 padding: 10px 50px 50px 50px;
12 border: 2px solid #cbcbcb;
13
14}
15
16.grid h1 {
17 font-family: "sans-serif";
18 background-color: #01BBFF;
19 font-size: 60px;
20 text-align: center;
21 color: #ffffff;
22 padding: 2px 0px;
23
24}
25
26#score {
27 color: #01BBFF;
28 text-align: center;
29 font-size: 30px;
30}
31
32.grid #question {
33 font-family: "monospace";
34 font-size: 30px;
35 color: #01BBFF;
36}
37
38.buttons {
39 margin-top: 30px;
40}
41
42#btn0, #btn1, #btn2, #btn3 {
43 background-color: #01BBFF;
44 width: 250px;
45 font-size: 20px;
46 color: #fff;
47 border: 1px solid #1D3C6A;
48 margin: 10px 40px 10px 0px;
49 padding: 10px 10px;
50}
51
52#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover {
53 cursor: pointer;
54 background-color: #01BBFF;
55}
56
57#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus {
58 outline: 0;
59}
60
61#progress {
62 color: #2b2b2b;
63 font-size: 18px;
64}
65