Home  ›  javascript

How to Make a Simple JavaScript Quiz | Create a Basic Quiz using JavaScript

August 13, 2022

Create a Basic Quiz using JavaScript

JavaScript is useful for web development, in web applications, for game development etc. It allows you to implement dynamic features on web pages that cannot be done with only HTML and CSS. In this article, we are going to see how we can make a simple Quiz Web App using JavaScript.

जावास्क्रिप्ट web development के लिए, web application में, game development आदि के लिए उपयोगी है। यह आपको वेब पेजों पर गतिशील सुविधाओं को लागू करने की अनुमति देता है जो केवल HTML और CSS के साथ नहीं किया जा सकता है। इस लेख में, हम यह देखने जा रहे हैं कि कैसे हम जावास्क्रिप्ट का उपयोग करके एक सरल प्रश्नोत्तरी वेब ऐप बना सकते हैं।

how-to-make-a-simple-javascript-quiz

This Quiz Web App will have the following features:

इस क्विज़ वेब ऐप में निम्नलिखित विशेषताएं होंगी:

1. User Interface for Question and four interactive options./ प्रश्न के लिए यूजर इंटरफेस और चार इंटरैक्टिव options ।
2. Score display dynamic. / स्कोर प्रदर्शन dynamic ।
3. When user select any answer then they are moved to next question automatically./ जब उपयोगकर्ता किसी उत्तर का चयन करता है तो वे automaticallyअगले प्रश्न पर चले जाते हैं।

Simple JavaScript Quiz Example:

HTML Code: The following code demonstrates the design part of the quiz app.

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">   
</head>
<body>
    <div class="container-first">
        <div class="container-inner">
            <h3>
        <p id="score"></p>
            </h3>
        </div>
    </div>
    <div class="container">
       <div class="row">
            <div id="div1" class="col-sm-4">
                <div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                           <div id='title'>
                           </div>

                            <div class="start-btn">
                                <button id="start">Start Quiz</button>
                            </div>
                           
                            <div id="content">
                                <div id="question"></div>
                                <div id="answers" class="next"></div>
                                <br />
                                <p id="result"><b>Congratulations! You made it!</b></p>
                                <p id="resultbad"><b>Sorry, you need to score 70 points to pass</b></p>

                                <button id="startagain">Start Again</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4" style="padding-top: 5px">
                <div>
                    <div class="panel panel-default" id="progressbar-sec">
                        <div class="panel-footer">Your Progress<br />
                            <p id="questCount"></p>
                            <div id="barra" class="progress">
                                <div id="bar" class="progress-bar" role="progressbar" aria-valuenow="1"
                                    aria-valuemin="0" aria-valuemax="100" style="width:1%">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
<script src="script.js"></script>
</body>
</html>


CSS code: The CSS helps in aligning different options and design layout for quiz. 

 body {

            color: #545454;

        }

        h4 {

            color: #6d6d6d;

        }

        #barra {

            width: 100%;

            height: 51px;

            background-color: #fff;

            border: 1px solid #000;

            border-radius: 15px;

        }

        #bar {

            height: 10px;

            background-color: #3f51b5d4;

            padding-top: 20px;

            border-radius: 15px;

            padding-bottom: 20px;

            margin-left: 0px;

        }

        #start {

            background-color: #000;

            border: none;

            color: white;

            padding: 16px 42px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 27px;

            margin: 4px 2px;

            cursor: pointer;

            border-radius:5px;

        }

        #back {

            background-color: #4caf50;

            border: none;

            color: white;

            padding: 12px 42px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 12px;

            margin: 4px 2px;

            cursor: pointer;

        }

        #startagain {

            background-color: #4caf50;

            border: none;

            color: white;

            padding: 12px 42px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            font-size: 12px;

            margin: 4px 2px;

            cursor: pointer;

        }

        #div1 {

            height: auto;

        }

        #div2 {

            height: auto;

        }

        #progressbar-sec{

            display: none;

        }

        .start-btn{

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

        .container-first p{

            text-align: right;

        }

        p#score {

            max-width: 450px;

            margin: -20px 45px 0 auto;

             background-color: #000;

            color: #fff;

            padding: 50px 20px;

            font-size: 50px;

            display:none;

        }

        .container-inner{

            display: grid;

            justify-content: end;

        }

        .container {

         max-width: 600px;

         margin: auto;

        text-align: center;

        }

        #question p{

            font-size: 50px;

            color: #000;

        }


 


JavaScript code and jQuery:  Code are following

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

    <script>

        // Create a function that will generate new question objects

        function newQuestion(params) {

            var temp = {

                question: params[0],

                choices: params[1],

                correctAnswer: params[2]

            };

            return temp;

        }

        // Create the array allQuestions and generate all of the new questions

        var allQuestions = [

            ["<p><b>Question 1:</b><br/> How much is 1 + 1?<p/>", ["1", "2", "3", "4"], 1],

            ["<p><b>Question 2:</b><br/>How much is 2 + 2?<p/>", ["2", "6", "3", "4"], 3],

            ["<p><b>Question 3:</b><br/>How much is 3 + 3?<p/>", ["6", "9", "3", "12"], 0],

            ["<p><b>Question 4:</b><br/>How much is 4 + 4?<p/>", ["10", "12", "8", "4"], 2],

            ["<p><b>Question 5:</b><br/>How much is 5 + 5?<p/>", ["10", "15", "14", "11"], 0],

            ["<p><b>Question 6:</b><br/>How much is 6 + 6?<p/>", ["11", "12", "13", "14"], 1],

            ["<p><b>Question 7:</b><br/>How much is 7 + 7?<p/>", ["49", "21", "15", "14"], 3],

            ["<p><b>Question 8:</b><br/>How much is 8 + 8?<p/>", ["0", "16", "64", "24"], 1],

            ["<p><b>Question 9:</b><br/>How much is 9 + 9?<p/>", ["81", "18", "15", "24"], 1],

            ["<p><b>Question 10:</b><br/>How much is 10 + 10?<p/>", ["10", "20", "30", "40"], 1]

        ].map(newQuestion);

        // Create and initialize the total (to 0), number (to 0), and totalQuestions (to the length of allQuestions) variables

        var total = 0, number = 0, totalQuestions = allQuestions.length, answers = [];


        $(document).ready(function () {


            function newQuestionAnswers() {

                $("#content").fadeOut(500, function () {

                    $("#answers").empty();

                    if (number < totalQuestions)

                        $("#questCount").text("Question: " + (number + 1) + " of 10");

                    var query = allQuestions[number];

                    $("#question").html(query.question);


                    // make sure to put in the name parameter and make sure that it's the same as the div that groups

                    // the radio buttons together, otherwise they can all be checked at the same time, you'll never have

                    // just one answer. The use of the html <label> element was discovered here:

                    // http://stackoverflow.com/questions/5795499/changing-text-of-radio-button

                    // Where it was explained that the text of the radio button was now explicitly associated with the

                    // use of <label>

                    for (var i = 0; i < query.choices.length; i++)

                        $("#answers").append("<input type='radio' name='answers' id='radio" + i + "' value='answer" + i

                            + "'><label for='test" + i + "'>" + query.choices[i] + "</label><br>");

                    if (answers.length > number)

                        $("#radio" + answers[number]).prop("checked", true);

                    if (number > 0)

                        $("#back").prop("disabled", false);

                });

                $("#content").fadeIn(500);

            }

            function checkAnswer() {

                // Make sure a radio button is checked before proceeding. If one is checked add it to answers, else if

                // the last radio button is reached and it is not checked alert the user that they must select an answer.

                for (var i = 0; i < $("input").length; i++) {

                    if ($("#radio" + i).is(":checked")) {

                        answers[number] = i;

                        break;

                    }

                    else if (i === $("input").length - 1 && !$("#radio" + i).is(":checked")) {

                        $(".next").after("<p id='warning'>Please select an answer and then click next</p>");

                        return false;

                    }

                }

                var query = allQuestions[number];

                if ($("#radio" + query.correctAnswer).is(":checked"))

                    updateScore(10);

                number += 1;

                return true;

            }

            function finalScore() {

                $("#score").text("Final Score: " + total + "/" + totalQuestions * 10).show(1000);

                $("#question, #answers, #questCount, .next, #back").hide(10);

                $("#startagain").hide(100);

                if (total > 60)

                    $("#result").show(1000);

                if (total < 70)

                    $("#resultbad").show(1000);

            }

            function updateScore(change) {

                total += change;

                $("#score").text("Score " + total);

            }

            $("#back").hide();

            $(".next").hide();

            $("#startagain").hide();

            $("#score").hide();

            $("#bar10").hide();

            $("#result").hide();

            $("#resultbad").hide();

            $("#start").on('click', function () {

                $("#start").hide();

                // $('#h4Start').hide(1000);

                $("#progressbar-sec").show();

                $(".next").show(1000);

                $("#score").show(1000);

                $("#bar").width('5%');

                newQuestionAnswers();

                updateScore(0);

            });

            $("#startagain").on('click', function () {

                location.reload();

            });


            $(".next").on('click', function () {

                $("#back").show(100);

                $("#warning").remove();

                if (checkAnswer()) {

                    if (number < totalQuestions)

                        newQuestionAnswers();

                    else

                        finalScore();

                }

                // Enable the back button if past first question

                if (number > 0)

                    $("#back").prop("disabled", false);

                $("#bar").width('10%');

                if (number > 1)

                    $("#bar").width('20%');

                if (number > 2)

                    $("#bar").width('30%');

                if (number > 3)

                    $("#bar").width('40%');

                if (number > 4)

                    $("#bar").width('50%');

                if (number > 5)

                    $("#bar").width('60%');

                if (number > 6)

                    $("#bar").width('70%');

                if (number > 7)

                    $("#bar").width('80%');

                if (number > 8)

                    $("#bar").width('90%');

                if (number > 9)

                    $("#bar").width('100%');

            });

            $("#back").on('click', function () {

                if (number === totalQuestions) {

                    $("#score").hide();

                    $("#question, #answers, #questCount, .next, #score").show(2500);

                }

                if (number > 0)

                    $("#bar").width('5%');

                if (number > 1)

                    $("#bar").width('10%');

                if (number > 2)

                    $("#bar").width('20%');

                if (number > 3)

                    $("#bar").width('30%');

                if (number > 4)

                    $("#bar").width('40%');

                if (number > 5)

                    $("#bar").width('50%');

                if (number > 6)

                    $("#bar").width('60%');

                if (number > 7)

                    $("#bar").width('70%');

                if (number > 8)

                    $("#bar").width('80%');

                if (number > 9)

                    $("#bar").width('90%');

                number -= 1;

                $("#back").prop("disabled", true);

                if (allQuestions[number].correctAnswer === answers[number])

                    updateScore(-10);

                newQuestionAnswers();

            });

        });

    </script>


Next
« Prev Post
Previous
Next Post »

Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)