showing results for - "build a trivia and answer javascript"
Johanna
01 Jan 2021
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
Chahine
13 Oct 2019
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
Hector
23 Feb 2017
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
queries leading to this page
js quiz generate questionsjavascript quiz codequiz javascript codequiz application in javascripthow we can create quiz on website in htmlquiz in html and javascriptcreating a website where people can make their own quiz by adding there questions to a json filequiz tutorial javascriptjavascript object create questions quizhtml js quiz gamequiz template in javascripthow to create a quiz in htmladd a button that allows the user to add a question to the website quiz apphow create custom quiz form jshow can you make a series of questions with javascriptadd a button that allows the user to add a question to the website quiz app using js and jsonmake a javascript quizmake a quiz in javascriptbuild js objekt quizquiz questions slide in jsmake quiz html jssimple function to add quiz in javascriptcreate quiz html codeadd new quiz in html pagehow to create quit with one question on one page phpquiz html codequiz generator in javascriptjavascript quiz appjavascript application for quizhtml javascript questions answer gamesimple quiz app in javascriptquiz javascriptquiz app javascript js quiz gamebuild a trivia and answer javascriptquiz questions slid in jsmake javascript question next quiz code in html and javascriptquiz slide javascriptonline quiz application in html and css jsmake multiple choice questions jshow to make a quiz on website htmlshow quiz summary in quiz app html 2c jshtml javascript question answer gamemultiple quiz divs javascript show alerthow to make quiz in jssimple quiz game javascript objectjavascript quiz gamejavascript code for marking quizhow to create a trivia game in htmlquiz app in javascriptquiz appp javascriptmakemultiple choice questions jsquestions creator in html css and javascriptcreate quiz in jsbuild a trivia and answer javascript