How to add multiple choice questions (MCQ) in Blogger website?

Here, In this article, I will show you how you can add an MCQ quiz to your blogger website. Here we will use a simple HTML button, some CSS and Javascript code.

You can easily create a quiz website in Blogger and when someone clicks on the answer button the answer will be shown to him.

The download link is given below.

Let’s check how you can do that

Steps to add MCQ question in Blogger?

Table of Contents

#1. Open the blog post and add the MCQ questions and answer in the blog posts.

#2. Now switch to HTML view and paste the HTML button below every question.

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

#3: Now add the answer between the paragraph tag and change the button label.

#4: Now add the CSS code in the blog post.

<style>
.acc {
  background-color: #eee;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .acc:hover {
  background-color: #ccc; 
} 
.mcq {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>

#5: Now paste the javascript code after it.

<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 mcq = this.nextElementSibling;
    if (mcq.style.display === "block") {
      mcq.style.display = "none";
    } else {
      mcq.style.display = "block";
    }
  });
}
    //]]>
 
</script>

If you want to add this code in multiple blog posts then you can paste the CSS and Javascript code in the theme editor.