How to Add MCQ Questions & Answers on Blogger

How to Add MCQ Questions & Answers on Blogger

Hello friends, welcome to our blog, so in today's article, we will tell you how you can Add MCQ Questions & Answers to your blog and website with the help of HTML CSS, and JavaScript.

So first of all, you will have to use a team to Add MCQ Questions & Answers to your blogger website, which you do not have to change again and again, if you change the theme, again and again, then MCQ question answers will also be removed from your blog or won't work again, So that's why first of all choose a good theme template for your blog, which you do not have to change again and again or if you change the theme then you will have to add MCQ question answer again to your theme.

  • So first of all you have to go to your blogger dashboard
  • After that you have to click on the theme
  • After clicking on the theme, you have to click on Edit HTML

After this you have to copy the CSS code given below and paste it under the head, you can paste it anywhere under the head.

<style>
    
.acc {
  background-color:  #00b300;
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ffa31a; 
} 
.pnl {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
    
  </style>

Now you have to copy the below JavaScript code and go to your theme last and paste the Java JavaScript above the body tag.

 <script type='text/javascript'>
     
//<![CDATA[ 
     var acc = document.getElementsByClassName("acc");
     var i;
    for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var pnl = this.nextElementSibling;
    if (pnl.style.display === "block") {
      pnl.style.display = "none";
    } else {
      pnl.style.display = "block";
    }
  });
}
    //]]>
 
</script>
    

After pasting both the codes now you have to save your theme.

Adding HTML

  • Now you have to come to your blogger dashboard
  • And new page click on this
  • And after clicking on the new page, you have to click on the pencil icon and click on the HTML.

After that you have to copy the HTML given below and add as many question answers as you want, in this way copy and paste the link given below and keep adding your question answers.

<button class="acc">Show Answer</button>
<div class="pnl">
  <p></p>
</div>

So this was our today's process that how you can add MCQ question answers to your blog if you have any MCQ on this topic then you can tell us in below comment box.