Search
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
source
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
source
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
source
similar questions
puzzle interview questions javascripttribonacci sequence in javascriptjavascript problem solving interview questionshack using javascriptjavascript es6 quizestays javascript answer testtabuada de qualquer n c3 bamero java scripthow to make a quiz pages in javascripttrie node pseudocodejavascript rpg tutorialjava script cosinus grad e2 80 9cjavascript factorial e2 80 9d code answer e2 80 99s 27 27javascript double question markjavascript problems for beginners
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