quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2024

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger, how to create quiz in blogger

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2021

Join Telegram Group: Click Here

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger,how to make quiz for blogger,how to create quiz in blogger,how to create a quiz website in blogger

how to create quiz in blogger

To make a quiz in blogger, you have to follow four steps.

Step 1 

In step 1 I am providing you a code below which you have to copy the whole code. And you have to click on New Post in your blogger website and after selecting HTML view, you have to paste the code on the same.

Select HTML View

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2021

Select All Code & Copy


<html>
<head>
    <meta charset="utf-8"> </meta>
    <title>Alltechinfo_Quiz</title>
    <!-- jquery for maximum compatibility -->
    <!-- 
    This is made by Alltechinfo_Quiz
    Date:- 12/10/2020 (UPDATE_29/-04/2021)
    Copyright:- Alltechinfo_Quiz
    www.alltechinfon.xyz 
    -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
 <script>
    

 var quiztitle = "Quiz Title";

    
    var quiz = [
        
        
        {
            "question"      :   "Q1: Type Question",
            "image"         :   "Past Image URL ",
            "choices"       :   [
                                    "(a)Types options First",
                                    "(b)Type Option Second",
                                    "(c)Type Option Third",
                                    "(d)Type Option Forth"
                                ],
            "correct"       :   "(c)Type Correct Answer",
            "explanation"   :   "Described Correct Options",
        },





       

 {
            "question"      :   "Q2: Type Question",
            "image"         :   "Past Image URL ",
            "choices"       :   [
                                    "(a)Types options First",
                                    "(b)Type Option Second",
                                    "(c)Type Option Third",
                                    "(d)Type Option Forth"
                                ],
            "correct"       :   "(c)Type Correct Answer",
            "explanation"   :   "Described Correct Options",
        },






 {
            "question"      :   "Q3: Type Question",
            "image"         :   "Past Image URL ",
            "choices"       :   [
                                    "(a)Types options First",
                                    "(b)Type Option Second",
                                    "(c)Type Option Third",
                                    "(d)Type Option Forth"
                                ],
            "correct"       :   "(c)Type Correct Answer",
            "explanation"   :   "Described Correct Options",
        },








    ];







    /******* No need to edit below this line *********/
    var currentquestion = 0, score = 0, submt=true, picked;

    jQuery(document).ready(function($){

        /**
         * HTML Encoding function for alt tags and attributes to prevent messy
         * data appearing inside tag attributes.
         */
        function htmlEncode(value){
          return $(document.createElement('div')).text(value).html();
        }

        /**
         * This will add the individual choices for each question to the ul#choice-block
         *
         * @param {choices} array The choices from each question
         */
        function addChoices(choices){
            if(typeof choices !== "undefined" && $.type(choices) == "array"){
                $('#choice-block').empty();
                for(var i=0;i<choices.length; i++){
                    $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block');                    
                }
            }
        }
        
        /**
         * Resets all of the fields to prepare for next question
         */
        function nextQuestion(){
            submt = true;
            $('#explanation').empty();
            $('#question').text(quiz[currentquestion]['question']);
            $('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length);
            if(quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != ""){
                if($('#question-image').length == 0){
                    $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question');
                } else {
                    $('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question']));
                }
            } else {
                $('#question-image').remove();
            }
            addChoices(quiz[currentquestion]['choices']);
            setupButtons();
        }

        /**
         * After a selection is submitted, checks if its the right answer
         *
         * @param {choice} number The li zero-based index of the choice picked
         */
        function processQuestion(choice){
            if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){
                $('.choice').eq(choice).css({'background-color':'#50D943'});
                $('#explanation').html('<strong>Correct!</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
                score++;
            } else {
                $('.choice').eq(choice).css({'background-color':'#D92623'});
                $('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));
            }
            currentquestion++;
            $('#submitbutton').html('NEXT QUESTION &raquo;').on('click', function(){
                if(currentquestion == quiz.length){
                    endQuiz();
                } else {
                    $(this).text('Check Answer').css({'color':'#222'}).off('click');
                    nextQuestion();
                }
            })
        }

        /**
         * Sets up the event listeners for each button.
         */
        function setupButtons(){
            $('.choice').on('mouseover', function(){
                $(this).css({'background-color':'#e1e1e1'});
            });
            $('.choice').on('mouseout', function(){
                $(this).css({'background-color':'#fff'});
            })
            $('.choice').on('click', function(){
                picked = $(this).attr('data-index');
                $('.choice').removeAttr('style').off('mouseout mouseover');
                $(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'});
                if(submt){
                    submt=false;
                    $('#submitbutton').css({'color':'#000'}).on('click', function(){
                        $('.choice').off('click');
                        $(this).off('click');
                        processQuestion(picked);
                    });
                }
            })
        }
        
        /**
         * Quiz ends, display a message.
         */
        function endQuiz(){
            $('#explanation').empty();
            $('#question').empty();
            $('#choice-block').empty();
            $('#submitbutton').remove();
            $('#question').text("You got " + score + " out of " + quiz.length + " correct.");
            $(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question');
        }

        /**
         * Runs the first time and creates all of the elements for the quiz
         */
        function init(){
            //add title
            if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){
                $(document.createElement('h1')).text(quiztitle).appendTo('#frame');
            } else {
                $(document.createElement('h1')).text("Quiz").appendTo('#frame');
            }

            //add pager and questions
            if(typeof quiz !== "undefined" && $.type(quiz) === "array"){
                //add pager
                $(document.createElement('p')).addClass('pager').attr('id','pager').text('Question 1 of ' + quiz.length).appendTo('#frame');
                //add first question
                $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame');
                //add image if present
                if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){
                    $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame');
                }
                $(document.createElement('p')).addClass('explanation').attr('id','explanation').html('&nbsp;').appendTo('#frame');
            
                //questions holder
                $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame');
            
                //add choices
                addChoices(quiz[0]['choices']);
            
                //add submit button
                $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame');
            
                setupButtons();
            }
        }
        
        init();
    });
    </script>
    <style media="all" type="text/css">
        /*css reset */
        html,,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;} 
        article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} 
        body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;} 
      
        strong{font-weight:700;}
        #frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;}
        h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto}
        h2{font:normal  1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;}
        p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;}
        img.question-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;}
        #choice-block{display:block;list-style:none;margin:0;padding:0;}
        #submitbutton{background:#5a6b8c;}
        #submitbutton:hover{background:#7b8da6;}
        #explanation{margin:0 auto;padding:20px;width:75%;}
        .choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
    </style>

<body>
    <div id="frame" role="content"></div>
</body>
</html>

Past Code 

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2021

How To Add More Question

Now if you want to add more questions then all you have to do is copy this code. And now you have to paste the code as shown in the picture. Now you have to paste the code as many times as you want to add the questions.



{
            "question"      :   "Q3: Type Question",
            "image"         :   "Past Image URL ",
            "choices"       :   [
                                    "(a)Types options First",
                                    "(b)Type Option Second",
                                    "(c)Type Option Third",
                                    "(d)Type Option Forth"
                                ],
            "correct"       :   "(c)Type Correct Answer",
            "explanation"   :   "Described Correct Options",
        },

Pest Code For Add More Questions

quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2021

Sharing Is Caring:

1 thought on “quiz maker for blogger: quiz, How Create Free quiz questions For Blogger | how to create quiz in blogger 2024”

Leave a Comment