How to create a MCQ Quiz on Blogger Website?

Thinking about creating a MCQ quiz on your website to test knowledge of your users? Here's how you can easily create and share MCQ quiz with multiple questions on your blogger website easily for free without any 3rd party resources.

In this article, I will teach you how you can easily create and add MCQ quiz to your blogger website easily. I have already used this on multiple websites to get good engagement from users. It's a very easy technique and doesn't require any 3rd party application or website. Just follow the below steps and you are good to go.

After you follow the steps, you will be able create quiz like the above picture, where users can guess the answers, and once they select the option it will be automatically shown if they are right or wrong. You can add as many questions as you want in the quiz.

So let's start. We utilized a little amount of JavaScript in our quiz system. Don't worry if you don't know how to create or utilize HTML, CSS, or JavaScript; I will give you the full code. Just follow each step carefully.

HTML Code

You have to add this HTML code to your body part of the post.

  <div class="quizContainer container-fluid well well-lg">
<div class="quiz-container">
<div class="question-number">
<h3>
Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="question">
</div>
<div class="options">
<div class="option1" id="1" onclick="check(this)">
</div>
<div class="option2" id="2" onclick="check(this)">
</div>
<div class="option3" id="3" onclick="check(this)">
</div>
<div class="option4" id="4" onclick="check(this)">
</div>
</div>
<div class="button">
<button class="btn" onclick="next()" type="button">Next</button>
    </div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
      Good Try!<br />
      You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br />
      That's <span class="percentage"></span>
     </h1>
<button onclick="tryAgain()" type="button">TryAgain</button>
   </div>
</div>

This is the structure of your quiz. After this you have to add the CSS and JavaScript to make it work.

CSS Code

Here's the CSS code. You can either directly paste it before the </style> part in your theme's HTML code. Or, you can directly use it in the post it self in the HTML view.

body{
 margin:0;
 background-color:#d9cdcd;
 font-family: sans-serif;
}
*{
 box-sizing: border-box;
}

.quiz-container{
 max-width: 700px;
 min-height:500px;
 background-color: #ffffff;
 margin:40px auto;

 border-radius:10px;
 padding:30px;
}
.quiz-container::after,.quiz-container::before{
 content: '';
 clear: both;
 display: table;

}
.question-number,
.question,
.options,
.button,
.answers-tracker{
 float: left;
 width: 100%;
}
.question-number h3{
 color:#009688;
 border-bottom: 1px solid #ccc;
 margin:0;
 padding-bottom:10px;
}

.question {
 font-size:22px;
 color:000000;
 padding:20px 0;
 
}

.options div{
    background-color: #fff;
    font-size: 16px;
    color: 000000;
    margin-bottom: 10px;
    border-radius: 5px;
    border: solid 1px darkgray;
    padding: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.options div.disabled{
 pointer-events: none;
}
.options div.correct{
 z-index: 1;
 color: #fff;
}
.options div.correct::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color: #09d209;
 border: solid 1px #09d209;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}
.options div.wrong{
 z-index: 1;
 color: #fff;
}
.options div.wrong::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color:red;
 border: solid 1px red;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}

.button .btn{
 padding:15px 50px;
 border-radius:5px;
 cursor: pointer;
 background-color:#00a0d2;
 font-size:16px;
 color:#ffffff;
 border: none;
 display: inline-block;
 margin:15px 0 20px;
}
.answers-tracker{
 border-top:1px solid #ccc;
 padding-top: 15px;
}
.answers-tracker div{
 height: 40px;
 width: 40px;
 background-color: #cccccc;
 display: inline-block;
 border-radius: 50%;
 margin-right:5px;
 margin: 3px;
}

.answers-tracker div.correct{
    background-color: #fff;
    background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhTysieJiTOusKu2d4WGG0VFMvT99fkqenqY30J-PYQXPkLQzShjoiqTA8uQ3pLvxx7LXuLoDh8AD-jO9NdxVHNDX4IKJT75tdxc_6J4z4jZQu7z3ky3ctWMKTmzAVpTTDoDb2jcjXAbis79ee6T-sAYeMGCtYPAU1_0PuPrjABMqICygN2KOFu33up=s833);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    border: dashed 1px gray;
    margin: 3px;

}
.answers-tracker div.wrong{
 background-color: #fff;
border: dashed 1px gray; background-image:url('https://blogger.googleusercontent.com/img/a/AVvXsEikNX-7_M_M4rqYR0K5JiEHEsIRAx0wMTMdYx9REWw_wm-tdGzPnvSI4VtucGmDc_T4N50WXzMn_Pl6Qok3Y90nOwTqIzoyrsqjJy6VvZYu68ThaurV5UHUHetQfVhzsvlemmgxOP8Dbk9darCC9l4j1DYEHd1uLArCUtJFaZuqHvdNBCMS7z3j61dJ=s708');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;
 margin: 3px;
}

.quiz-over{
 position: fixed;
 left:0;
 top:0;
 width: 90%;
 height: 100%;
 background-color:rgba(0,0,0,0.9);
 z-index: 10;
 display: none;
 align-items: center;
 justify-content: center;
}
.quiz-over.show{
 display: flex;
}
.quiz-over .box{
 background-color:#34a9d2;
 padding:30px;
 border-radius:10px;
 text-align: center;
 flex-basis: 700px;
 max-width:700px;
 color:#ffffff;
}

.quiz-over .box h1{
 font-size:30px;
 margin:0 0 20px;
}

.quiz-over .box button{
 padding:15px 50px;
 border:none;
 background-color:#FF9800;
 border-radius:5px;
 font-size:16px;
 margin:15px 0 20px;
 color:#ffffff;
}

You can simply play with the CSS and change the look of your quiz.

JavaScript Code

The main part of the code is JavaScript. Here's the code.

const options=document.querySelector(".options").children;
  const answerTrackerContainer=document.querySelector(".answers-tracker");
  const questionNumberSpan=document.querySelector(".question-num-value");
  const totalQuestionSpan=document.querySelector(".total-question");
  const correctAnswerSpan=document.querySelector(".correct-answers");
  const totalQuestionSpan2=document.querySelector(".total-question2");
  const percentage=document.querySelector(".percentage");
  const question=document.querySelector(".question");
  const op1=document.querySelector(".option1");
  const op2=document.querySelector(".option2");
  const op3=document.querySelector(".option3");
  const op4=document.querySelector(".option4");
  let questionIndex;
  let index=0;
  let myArray=[];
  let myArr=[];
  let score=0;

  // questions and options and answers

  const questions=[
   {
    q:'Enter Your Question Here',
    options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
    answer:4
   },
   {
    q:'Enter Your Question Here',
    options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
    answer:2
   }
   
  ]

  // set questions and options and question number
  totalQuestionSpan.innerHTML=questions.length;
  function load(){
        questionNumberSpan.innerHTML=index+1;
         question.innerHTML=questions[questionIndex].q;     
         op1.innerHTML=questions[questionIndex].options[0];
         op2.innerHTML=questions[questionIndex].options[1];
         op3.innerHTML=questions[questionIndex].options[2];
         op4.innerHTML=questions[questionIndex].options[3];
         index++;
  }
  
  function check(element){
   if(element.id==questions[questionIndex].answer){
    element.classList.add("correct");
    updateAnswerTracker("correct")
    score++;
    console.log("score:"+score)
   }
   else{
    element.classList.add("wrong");
    updateAnswerTracker("wrong")

   }
   disabledOptions()
  }
   
  function disabledOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.add("disabled");
      if(options[i].id==questions[questionIndex].answer){
       options[i].classList.add("correct");
      }

     }
  }
  
  function enableOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.remove("disabled","correct","wrong");
     }
  }

  function validate(){
      if(!options[0].classList.contains("disabled")){
        alert("Please Selecto one option")
      }
      else{
       enableOptions();
       randomQuestion();
      }
  }

  function next(){
    validate();
  }
   
  function randomQuestion(){
   let randomNumber=Math.floor(Math.random()*questions.length);
   let hitDuplicate=0;
       if(index==questions.length){
        quizOver();
       }
       else{
         if(myArray.length>0){
             for(let i=0; i<myArray.length; i++){
               if(myArray[i]==randomNumber){
                  hitDuplicate=1;
                  break;
               }
             }
             if(hitDuplicate==1){
              randomQuestion();
             }
             else{
               questionIndex=randomNumber;   
              load();
              myArr.push(questionIndex);
             }
         }
         if(myArray.length==0){
           questionIndex=randomNumber;   
           load();
           myArr.push(questionIndex);
         }

       myArray.push(randomNumber);
       
      }
  }
      
  function answerTrakcer(){
     for(let i=0; i<questions.length; i++){
      const div=document.createElement("div")
         answerTrackerContainer.appendChild(div);
     }
  }

 function updateAnswerTracker(classNam){
   answerTrackerContainer.children[index-1].classList.add(classNam);
 }

 function quizOver(){
    document.querySelector(".quiz-over").classList.add("show");
    correctAnswerSpan.innerHTML=score;
    totalQuestionSpan2.innerHTML=questions.length;
    percentage.innerHTML=(score/questions.length)*100 + "%";
 }
 
 function tryAgain(){
     window.location.reload();
 }

 window.onload=function(){
  randomQuestion();
  answerTrakcer();
 
}

Here you just have to modify the " questions and options and answers" part in the code. Add your Questions, options and answer in the code. You can repeat the same format for as many questions as you want.

And that's it. Once you publish it. Your quiz will be ready with full functionality.

Total Code for MCQ Quiz

If the above steps seem somewhat difficult to you, then I have another solution for you. Just copy the code from below and paste it directly in the HTML section of your post. Remember to change the Question, options and answer in the ending of the code.

<style>
body{
 margin:0;
 background-color:#d9cdcd;
 font-family: sans-serif;
}
*{
 box-sizing: border-box;
}

.quiz-container{
 max-width: 700px;
 min-height:500px;
 background-color: #ffffff;
 margin:40px auto;

 border-radius:10px;
 padding:30px;
}
.quiz-container::after,.quiz-container::before{
 content: '';
 clear: both;
 display: table;

}
.question-number,
.question,
.options,
.button,
.answers-tracker{
 float: left;
 width: 100%;
}
.question-number h3{
 color:#009688;
 border-bottom: 1px solid #ccc;
 margin:0;
 padding-bottom:10px;
}

.question {
 font-size:22px;
 color:000000;
 padding:20px 0;
 
}

.options div{
    background-color: #fff;
    font-size: 16px;
    color: 000000;
    margin-bottom: 10px;
    border-radius: 5px;
    border: solid 1px darkgray;
    padding: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.options div.disabled{
 pointer-events: none;
}
.options div.correct{
 z-index: 1;
 color: #fff;
}
.options div.correct::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color: #09d209;
 border: solid 1px #09d209;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}
.options div.wrong{
 z-index: 1;
 color: #fff;
}
.options div.wrong::before{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width: 100%;
 height: 100%;
 background-color:red;
 border: solid 1px red;
 z-index: -1;
 
 animation: animateBackground 1s ease;
 animation-fill-mode: forwards;
}
@keyframes animateBackground{
 0%{
  transform: translateX(-100%);
 }
 100%{
  transform: translateX(0%); 
 }
}

.button .btn{
 padding:15px 50px;
 border-radius:5px;
 cursor: pointer;
 background-color:#00a0d2;
 font-size:16px;
 color:#ffffff;
 border: none;
 display: inline-block;
 margin:15px 0 20px;
}
.answers-tracker{
 border-top:1px solid #ccc;
 padding-top: 15px;
}
.answers-tracker div{
 height: 40px;
 width: 40px;
 background-color: #cccccc;
 display: inline-block;
 border-radius: 50%;
 margin-right:5px;
 margin: 3px;
}

.answers-tracker div.correct{
    background-color: #fff;
    background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEhTysieJiTOusKu2d4WGG0VFMvT99fkqenqY30J-PYQXPkLQzShjoiqTA8uQ3pLvxx7LXuLoDh8AD-jO9NdxVHNDX4IKJT75tdxc_6J4z4jZQu7z3ky3ctWMKTmzAVpTTDoDb2jcjXAbis79ee6T-sAYeMGCtYPAU1_0PuPrjABMqICygN2KOFu33up=s833);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    border: dashed 1px gray;
    margin: 3px;

}
.answers-tracker div.wrong{
 background-color: #fff;
border: dashed 1px gray; background-image:url('https://blogger.googleusercontent.com/img/a/AVvXsEikNX-7_M_M4rqYR0K5JiEHEsIRAx0wMTMdYx9REWw_wm-tdGzPnvSI4VtucGmDc_T4N50WXzMn_Pl6Qok3Y90nOwTqIzoyrsqjJy6VvZYu68ThaurV5UHUHetQfVhzsvlemmgxOP8Dbk9darCC9l4j1DYEHd1uLArCUtJFaZuqHvdNBCMS7z3j61dJ=s708');
 background-position: center;
 background-repeat: no-repeat;
 background-size: 50%;
 margin: 3px;
}

.quiz-over{
 position: fixed;
 left:0;
 top:0;
 width: 90%;
 height: 100%;
 background-color:rgba(0,0,0,0.9);
 z-index: 10;
 display: none;
 align-items: center;
 justify-content: center;
}
.quiz-over.show{
 display: flex;
}
.quiz-over .box{
 background-color:#34a9d2;
 padding:30px;
 border-radius:10px;
 text-align: center;
 flex-basis: 700px;
 max-width:700px;
 color:#ffffff;
}

.quiz-over .box h1{
 font-size:30px;
 margin:0 0 20px;
}

.quiz-over .box button{
 padding:15px 50px;
 border:none;
 background-color:#FF9800;
 border-radius:5px;
 font-size:16px;
 margin:15px 0 20px;
 color:#ffffff;
}
.advt{
     align-items: center;
}

</style>
     <br />
<div class="quizContainer container-fluid well well-lg">
<div class="quiz-container">
<div class="question-number">
<h3>
Question <span class="question-num-value"></span> of <span class="total-question"></span></h3>
</div>
<div class="advt"><img src="https://www.wordstreamcdn.com/wp-content/uploads/2021/07/banner-ads-examples-ncino.jpg"><div>
<div class="question">
</div>
<div class="options">
<div class="option1" id="1" onclick="check(this)">
</div>
<div class="option2" id="2" onclick="check(this)">
</div>
<div class="option3" id="3" onclick="check(this)">
</div>
<div class="option4" id="4" onclick="check(this)">
</div>
</div>
<div class="button">
<button class="btn" onclick="next()" type="button">Next</button>
    </div>
<div class="answers-tracker">
</div>
</div>
<div class="quiz-over">
<div class="box">
<h1>
      Good Try!<br />
      You Got <span class="correct-answers"></span> out of <span class="total-question2"></span> answers correct! <br />
      That's <span class="percentage"></span>
     </h1>
<button onclick="tryAgain()" type="button">TryAgain</button>
   </div>
</div>
<script src="script.js"></script>
<script>
  
  const options=document.querySelector(".options").children;
  const answerTrackerContainer=document.querySelector(".answers-tracker");
  const questionNumberSpan=document.querySelector(".question-num-value");
  const totalQuestionSpan=document.querySelector(".total-question");
  const correctAnswerSpan=document.querySelector(".correct-answers");
  const totalQuestionSpan2=document.querySelector(".total-question2");
  const percentage=document.querySelector(".percentage");
  const question=document.querySelector(".question");
  const op1=document.querySelector(".option1");
  const op2=document.querySelector(".option2");
  const op3=document.querySelector(".option3");
  const op4=document.querySelector(".option4");
  let questionIndex;
  let index=0;
  let myArray=[];
  let myArr=[];
  let score=0;

  // questions and options and answers

  const questions=[
   {
    q:'Enter Your Question Here',
    options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
    answer:4
   },
   {
    q:'Enter Your Question Here',
    options:['A. Option 1','B.Option 2','C. Option 3','D. Option 4'],
    answer:2
   }
   
  ]

  // set questions and options and question number
  totalQuestionSpan.innerHTML=questions.length;
  function load(){
        questionNumberSpan.innerHTML=index+1;
         question.innerHTML=questions[questionIndex].q;     
         op1.innerHTML=questions[questionIndex].options[0];
         op2.innerHTML=questions[questionIndex].options[1];
         op3.innerHTML=questions[questionIndex].options[2];
         op4.innerHTML=questions[questionIndex].options[3];
         index++;
  }
  
  function check(element){
   if(element.id==questions[questionIndex].answer){
    element.classList.add("correct");
    updateAnswerTracker("correct")
    score++;
    console.log("score:"+score)
   }
   else{
    element.classList.add("wrong");
    updateAnswerTracker("wrong")

   }
   disabledOptions()
  }
   
  function disabledOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.add("disabled");
      if(options[i].id==questions[questionIndex].answer){
       options[i].classList.add("correct");
      }

     }
  }
  
  function enableOptions(){
     for(let i=0; i<options.length; i++) {
      options[i].classList.remove("disabled","correct","wrong");
     }
  }

  function validate(){
      if(!options[0].classList.contains("disabled")){
        alert("Please Selecto one option")
      }
      else{
       enableOptions();
       randomQuestion();
      }
  }

  function next(){
    validate();
  }
   
  function randomQuestion(){
   let randomNumber=Math.floor(Math.random()*questions.length);
   let hitDuplicate=0;
       if(index==questions.length){
        quizOver();
       }
       else{
         if(myArray.length>0){
             for(let i=0; i<myArray.length; i++){
               if(myArray[i]==randomNumber){
                  hitDuplicate=1;
                  break;
               }
             }
             if(hitDuplicate==1){
              randomQuestion();
             }
             else{
               questionIndex=randomNumber;   
              load();
              myArr.push(questionIndex);
             }
         }
         if(myArray.length==0){
           questionIndex=randomNumber;   
           load();
           myArr.push(questionIndex);
         }

       myArray.push(randomNumber);
       
      }
  }
      
  function answerTrakcer(){
     for(let i=0; i<questions.length; i++){
      const div=document.createElement("div")
         answerTrackerContainer.appendChild(div);
     }
  }

 function updateAnswerTracker(classNam){
   answerTrackerContainer.children[index-1].classList.add(classNam);
 }

 function quizOver(){
    document.querySelector(".quiz-over").classList.add("show");
    correctAnswerSpan.innerHTML=score;
    totalQuestionSpan2.innerHTML=questions.length;
    percentage.innerHTML=(score/questions.length)*100 + "%";
 }
 
 function tryAgain(){
     window.location.reload();
 }

 window.onload=function(){
  randomQuestion();
  answerTrakcer();
 
}

</script>
</div>

So, this is the complete guide. I hope this helps to create more engaging MCQ quiz for your websites. If you still have any doubts, don't forget to comment.

Innate Blogger

How to create a MCQ Quiz on Blogger Website?

HTML Code

CSS Code

JavaScript Code

Total Code for MCQ Quiz

Post a Comment

BharOs: India's Privacy and Security focused Operating System for Mobiles

How to Use Post Templates for Blogger (Blogspot Website)

How to Remove Powered by Blogger Attribution from Blogger Themes

How to Set Up Crawlers and Indexing Settings in Blogger for SEO

How to Setup Custom Subdomain on Blogger Blog