How to Create Blogger Quiz With Start Button | Blogger Responsive Quiz | HTML and CSS Quiz For Blogger

Vishal Yadav
1
Hello friends and welcome to our blog. In this post of today, we are going to tell you how you can in Blogger upload an advanced cue in Blogger. Whose templates are given below. You can make a very good cuisine in our blogger by using it. Where you will be given the start button, you will also be given a short description to write and many other things are given in the templates. To see its customization, you can see it in this post by clicking on the video below.

For Customization  watch This Video  






<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Rokkitt|Yeseva+One" rel="stylesheet">
    <style>
body{
            background-color:f6f6f6;
        }
        #next{
            display:none;
        }
        #sub{
            display: none;
        }
        .front{
            margin:2%;
            outline:5px solid gold;
            padding:5%;
            height:fit-content;
            padding-top:inherit;
            text-align: center;
            background-color: Blue;
            color:white;
            font-family: 'Yeseva One', cursive;

        }
        .answers{
            margin:2%;
            margin-top:5%;
            padding:5%;
            align-self: center;
            background-color: white;
            display:none;
            color:#ec71f4;
            border:5px solid white;
            font-family: 'Rokkitt', serif;
            font-size:20px;
        }
        .qa{
            color:Black;
        }
        .quiz{
            margin:2%;
            margin-top:5%;
            padding:5%;
            align-self: center;
            background-color: #326b6c;
            display:none;
            color:Black;
            border:5px solid Gold;
            font-family: 'Rokkitt', serif;
        }
        .result{
            margin:2%;
            padding:5%;
            padding-top:40%;
            height:330px;
            text-align: center;
            background-color: white;
            display: none;
            font-family: 'Rokkitt', serif;

        }
        input[type="radio"] {
          border: 0;
          clip: rect(0 0 0 0);
          height: 1px;
          margin: -1px;
          overflow: hidden;
          padding: 0;
          position: absolute;
          width: 1px;
        }
        .radio{
           
           
             padding-bottom:4%;
           
        }
        .radio label:before {
          content: "";
          display: inline-block;
          width: 15px;
          height:15px;
          margin-right: 0.5em;
          vertical-align: -3px;
          border: 2px solid #666666;
          padding: 0.13em;
          background-color: transparent;
          background-clip: content-box;

        }
        .radio label {
          margin-right: 1em;
        }
        .radio input:hover + label:before {
          border-color: #71d1f4;
        }
        .radio input:checked + label:before {
          background-color: #219011;
          border-color: #219011;
        }
        .arrow{
            width: 0;
            height: 0;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-top: 24px solid white;
            position: relative;
            left:30px;

        }
        #q{
            background-color: white;
            padding-top:10px;
            padding-left:10px;
            padding-bottom:10px;
            font-size:22px;
            font-weight: bold;
            border-radius:5px;
         
        }
        #op1,#op2,#op3,#op4{
            background-color: white;
            margin-bottom:2.5%;
            padding:5px;
            padding-left: 4%;
            border-radius:5px;
            font-size:22px;
        }
        #op1:hover,#op2:hover,#op3:hover,#op4:hover{
            background-color:#ffff99;
        }
        #num{
            background-color:white;
            font-size:20px;
            border-radius:30px;
            padding-left:2%;
            color:#40c2f2;
            width:45px;

        }
        #sub{
            background-color: #612fcc;
            padding: 8px;
            border-radius:5px;
            border:none;
            width:200px;
            font-size:20px;
            color: White;
        }
        #start{
            background-color: #a10;
            color:white;
            padding:8px;
            font-size:20px;
            border:none;
            width:200px;
            border-radius:5px;

        }
        .score{
            font-size:21px;
            font-weight: bolder;
            color: #40c2f2;
        }
        .message{
            font-size: 20px;
            color: #40c2f2;
        }
        .answers{
            display: none;
        }
        #a1,#a2,#a3,#a3,#a4,#a5,#a6,#a7,#a8,#a9,#a10{
            color:#139c24;
            font-weight: bold;
        }

</style>
</head>
<body>
    <div class="front">
        <h1>Tech 260 Quiz</h1>
        <button type="button" id="start">Start</button> 
    </div>
    <div class="quiz">
        <p id="num"></p>
        <div id="q"></div><div class="arrow"></div><br>
        <div class="radio">
            <div id="op1"></div>
            <div id="op2"></div>
            <div id="op3"></div>
            <div id="op4"></div>
        </div><br>
        <center><button type="button" id="sub">Submit</button></center>
<p>Quiz Developed By <a href="https://www.tech260.in" rel="noopener noreferrer" target="_blank"><span style="background-color: rgb(239, 239, 239);">Tech260</span></a></p>
    </div>
    <div class="result" >
        <div class="score"></div>
        <br>
        <div class="message"></div>
        <button type="button" id="an">Click here to see answers</button>
    </div>
    <div class="answers">
        <p class="qa">1.As per Asoka’s inscriptions, which among the following place was declared tax free and proclaimed only 1/8th part as taxable?</p>
        <p >Ans:<span id="a1"> [ Lumbini ] At the 20th anniversary of his enthronement, Asoka announced Lumbini as tax-free and proclaimed only 1/8th part as taxable. Description of this fact i</span></p>
        <p class="qa">2.Which of the following ruler of Satavahana Empire composed Gathasaptashati?</p>
        <p >Ans:<span id="a2"> [ Hala ] Gathasaptashati is composed by Savahana king Hala. It is a collection of poems in Maharashtri Prakrit. The theme of most of the poems is based on love</span></p>
        <p class="qa">3. In the Junagarh inscription, which among the following Saka ruler achievements are highlighted?</p>
        <p >Ans:<span id="a3">[ Rudraraman ] The military achievements, territories and many personal qualities of Rudraraman are highlighted in the famous Junagadh inscription, written in 150 AD</span></p>
        <p class="qa">4.Who among the following laid down for punishment for a person becoming mendicant without making adequate provision for dependent wife and children?</p>
        <p >Ans:<span id="a4"> [ Kautilya ] Chanakya : He is also known by Vishnugupta, Kautilya,was born around 350 BC and is known for his being the chief architect of Mauryan Empire and writi</span></p>
        <p class="qa">5.Which one is the longest epic of the world?</p>
        <p>Ans:<span id="a5"> [ Mahabharata ] The Mahabharata by Ved vyas is the longest epic of the world consists of 1,00,000 shlokas.</span></p>
        <p class="qa">6.According to Buddhist traditions, who was Charioteer of Buddha?</p>
        <p>Ans:<span id="a6"> [ Channa ] Channa was the name of Charioteer of Gautam Buddha.</span></p>
        <p class="qa">7.Who presided First Buddhist Council?</p>
        <p >Ans:<span id="a7">[ Mahakassapa ] The First Buddhist Council was held at Saptaparni cave near Rajagriha in 72 AD, during the reign of Emperor Ajatsatru. It was held under the President</span></p>
        <p class="qa">8.Vallabhi era is identical with which of the following era?</p>
        <p >Ans:<span id="a8"> [ The Gupta era ] Vallabhi era is identical with Gupta era and Vallabhi era followed Gupta era in A.D. 366.</span></p>
        <p class="qa">9.For which among the following offenses, Manu recommended higher punishment to Brahamans than the persons of other varnas?</p>
        <p >Ans:<span id="a9"> [ Theft ] According to Manu, a Brahamana was to be awarded higher punishment than the persons of other varnas for the offence of Theft.</span></p>

        <p class="qa">Which among conclusions has been derived from the debasement of the coins and gradual disappearance of gold coins during the post-Gupta period?</p>
        <p>Ans:<span id="a10"> [ There was a decline in trade ] Debasement of the coins and gradual disappearance of gold coins during the post-Gupta period indicates the Decline of Trade.</span></p>
    </div>
    <script>
 $(document).ready(function(){
        var que;
        var ans;
        var right;
        var i=0;
        var score=0;
        var que1={que:"As per Asoka inscriptions, which among the following place was declared tax free and proclaimed only 1/8th part as taxable?",
            ans:["Kushinagar","Lumbini","Kathmandu","Sarnath"],
            right:"1"};
        var que2={que:"Which of the following ruler of Satavahana Empire composed Gathasaptashati?",
            ans:["Simuka","Gautamiputra Satkarni","Pulumayi","Hala"],
            right:"3"};
        var que3={que:" In the Junagarh inscription, which among the following Saka ruler achievements are highlighted?",
            ans:["Moga","Azes","Rudraraman","Nahapana"], 
right:"2"};
        var que4={que:"Who among the following laid down for punishment for a person becoming mendicant without making adequate provision for dependent wife and children?",
            ans:["Manu","Yajnavalkya","Kautilya","Narada"],
            right:"2"};
        var que5={que:"Which one is the longest epic of the world?",
            ans:["Ramayana","Ramcharitmanas","Mahabharata","Hanuman Chalisa"],
            right:"2"};
        var que6={que:"According to Buddhist traditions, who was Charioteer of Buddha?",
            ans:["Channa","Kanthaka","Devdatta","Chunda"],
            right:"0"};
        var que7={que:"Who presided First Buddhist Council?",
    ans:["Mahakassapa","Vasumitra","Moggliputra Tissa","Sabakami"],
right:"0"};
        var que8={que:"Vallabhi era is identical with which of the following era?",
    ans:["The Vikrama era","The Gupta era","The Harsha era","None of the above"],
right:"1"};
        var que9={que:"For which among the following offenses, Manu recommended higher punishment to Brahamans than the persons of other varnas?",
    ans:["Profanity","Murder","Theft","Treason"],
right:"2"};
        var que10={que:"Which among conclusions has been derived from the debasement of the coins and gradual disappearance of gold coins during the post-Gupta period?",
    ans:["Commodities became cheap","Gold Mining was stalled","Money economy was gradually replaced by Barter Economy","There was a decline in trade"],
right:"3"};
        var quelst=[que1,que2,que3,que4,que5,que6,que7,que8,que9,que10];
        var wrong=[];
        $("#start").click(function(){
            $(".front").hide();
            $("#sub").show();
            $(".quiz").show();
            $("#num").text(i+1+"/"+quelst.length)
            $("#q").text(quelst[i].que);
            $("#op1").html("<input type='radio' name='opt' id='o1' value='0'><label for='o1'>"+quelst[i].ans[0])+"</label>";
            $("#op2").html("<input type='radio' name='opt' id='o2' value='1'><label for='o2'>"+quelst[i].ans[1])+"</label>";
            $("#op3").html("<input type='radio' name='opt' id='o3' value='2'><label for='o3'>"+quelst[i].ans[2])+"</label>";
            $("#op4").html("<input type='radio' name='opt' id='o4' value='3'><label for='o4'>"+quelst[i].ans[3])+"</label>";
         
        });
        $("#sub").click(function(){
         
         
            if($("input[name='opt']:checked").val()!=null){
                if($("input[name='opt']:checked").val()==quelst[i].right){
                    score++;
                }
                else{
                    wrong.push(i);
                } 
                $("#sub").hide();
                $(".score").text(score);
                if(i!=quelst.length-1){
                next();
                }
                else{
                    reslt();
                }

            }
            else{
                $(".p").text("Select One option");
            }
        });
        function next(){
            if(i!=(quelst.length)-1){
                    i++;
                }
            $("#q").text(quelst[i].que);
            $("#op1").html("<input type='radio' name='opt' id='o1' value='0'><label for='o1'>"+quelst[i].ans[0])+"</label>";
            $("#op2").html("<input type='radio' name='opt' id='o2' value='1'><label for='o2'>"+quelst[i].ans[1])+"</label>";
            $("#op3").html("<input type='radio' name='opt' id='o3' value='2'><label for='o3'>"+quelst[i].ans[2])+"</label>";
            $("#op4").html("<input type='radio' name='opt' id='o4' value='3'><label for='o4'>"+quelst[i].ans[3])+"</label>";
            $("#num").text(i+1+"/"+quelst.length);
            $("#sub").show();
            }
        function reslt(){
            $(".quiz").hide();
            $(".result").show();
            $(".score").text(score+"/"+quelst.length);
            if(score<=4){
                $(".message").text("Oh no!!You need to do better.");
            }
            else if(score<8){
                $(".message").text("Good.Dont stop studying.");
            }
            else{
                $(".message").text("Great!!You have really good knowledge of HTML and CSS.");
            }
        }
        $("#an").click(function(){
            $(".result").hide();
            $(".answers").show();
            if((wrong.toString()).search("0")!=-1){
                $("#a1").css('color','#ff6347');
            }
            if((wrong.toString()).search("1")!=-1){
                $("#a2").css('color','#ff6347');
            }
            if((wrong.toString()).search("2")!=-1){
                $("#a3").css('color','#ff6347');
            }
            if((wrong.toString()).search("3")!=-1){
                $("#a4").css('color','#ff6347');
            }
            if((wrong.toString()).search("4")!=-1){
                $("#a5").css('color','#ff6347');
            }
            if((wrong.toString()).search("5")!=-1){
                $("#a6").css('color','#ff6347');
            }
            if((wrong.toString()).search("6")!=-1){
                $("#a7").css('color','#ff6347');
            }
            if((wrong.toString()).search("7")!=-1){
                $("#a8").css('color','#ff6347');
            }
            if((wrong.toString()).search("8")!=-1){
                $("#a9").css('color','#ff6347');
            }
            if((wrong.toString()).search("9")!=-1){
                $("#a10").css('color','#ff6347');
            }
         
        });
     
    });

</script>
</body>

</html>

Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. marathi /hindi language support nahi karti..... !!
    bahot try kia.

    ReplyDelete
Post a Comment

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top