build a trivia and answer javascript
// code by webdevtrick (https://webdevtrick.com)
function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}
Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}
Quiz.prototype.guess = function(answer) {
if(this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}
this.questionIndex++;
}
Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}
function Question(text, choices, answer) {
this.text = text;
this.choices = choices;
this.answer = answer;
}
Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}
function populate() {
if(quiz.isEnded()) {
showScores();
}
else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;
// show options
var choices = quiz.getQuestionIndex().choices;
for(var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = choices[i];
guess("btn" + i, choices[i]);
}
showProgress();
}
};
function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};
function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};
function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};
// create questions here
var questions = [
new Question("Hyper Text Markup Language Stand For?", ["JavaScript", "XHTML","CSS", "HTML"], "HTML"),
new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS"),
new Question("Which is not a JavaScript Framework?", ["Python Script", "JQuery","Django", "NodeJS"], "Django"),
new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"], "PHP"),
new Question("Webdevtrick.com is about..", ["Web Design", "Graphic Design", "SEO & Development", "All"], "All")
];
// create quiz
var quiz = new Quiz(questions);
// display quiz
populate();
3.75
4
/** code by webdevtrick (https://webdevtrick.com) **/
body {
background-color: #413D3D;
}
.grid {
width: 600px;
height: 500px;
margin: 0 auto;
background-color: #fff;
padding: 10px 50px 50px 50px;
border: 2px solid #cbcbcb;
}
.grid h1 {
font-family: "sans-serif";
background-color: #01BBFF;
font-size: 60px;
text-align: center;
color: #ffffff;
padding: 2px 0px;
}
#score {
color: #01BBFF;
text-align: center;
font-size: 30px;
}
.grid #question {
font-family: "monospace";
font-size: 30px;
color: #01BBFF;
}
.buttons {
margin-top: 30px;
}
#btn0, #btn1, #btn2, #btn3 {
background-color: #01BBFF;
width: 250px;
font-size: 20px;
color: #fff;
border: 1px solid #1D3C6A;
margin: 10px 40px 10px 0px;
padding: 10px 10px;
}
#btn0:hover, #btn1:hover, #btn2:hover, #btn3:hover {
cursor: pointer;
background-color: #01BBFF;
}
#btn0:focus, #btn1:focus, #btn2:focus, #btn3:focus {
outline: 0;
}
#progress {
color: #2b2b2b;
font-size: 18px;
}
Thank you!
4
3.75
(4 Votes)
0
4.33
3
<!DOCTYPE html>
<!-- code by webdevtrick (https://webdevtrick.com) -->
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="grid">
<div id="quiz">
<h1>Quiz in JavaScript Webdevtrick.com</h1>
<hr style="margin-bottom: 20px">
<p id="question"></p>
<div class="buttons">
<button id="btn0"><span id="choice0"></span></button>
<button id="btn1"><span id="choice1"></span></button>
<button id="btn2"><span id="choice2"></span></button>
<button id="btn3"><span id="choice3"></span></button>
</div>
<hr style="margin-top: 50px">
<footer>
<p id="progress">Question x of y</p>
</footer>
</div>
</div>
<script src="question.js"></script>
</body>
</html>
Thank you!
3
4.33
(3 Votes)
0
Are there any code examples left?
New code examples in category Javascript
Relative searches
build a trivia and answer javascript
add new quiz in html page
html js quiz game
js quiz generate questions
simple function to add quiz in javascript
html javascript question answer game
html javascript questions answer game
quiz javascript code
quiz tutorial javascript
javascript quiz code
make quiz html js
quiz html code
quiz javascript
quiz app in javascript
how to make a quiz on website html
make a javascript quiz
how to create quit with one question on one page php
show quiz summary in quiz app html, js
make a quiz in javascript
quiz application in javascript
quiz generator in javascript
create quiz html code
questions creator in html css and javascript
how create custom quiz form js
create quiz in js
online quiz application in html and css js
how we can create quiz on website in html
js quiz game
make javascript question next
quiz questions slide in js
quiz questions slid in js
multiple quiz divs javascript show alert
how can you make a series of questions with javascript
how to create a quiz in html
how to create a trivia game in html
simple quiz app in javascript
how to make quiz in js
javascript application for quiz
javascript code for marking quiz
quiz code in html and javascript
quiz in html and javascript
quiz appp javascript
make multiple choice questions js
makemultiple choice questions js
javascript quiz app
quiz app javascript
simple quiz game javascript object
javascript object create questions quiz
quiz slide javascript
creating a website where people can make their own quiz by adding there questions to a json file
add a button that allows the user to add a question to the website Quiz app using js and json
add a button that allows the user to add a question to the website Quiz app
build js objekt quiz
javascript quiz game
quiz template in javascript
