How to add a multiple choice question (MCQ) in Blogger?

 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, and 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? 

#1. Open the blog post and add the MCQ questions and answers 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>

Now the simple MCQ quiz is added to the blogger website. 

Video Guide 👇

If you want to add this code in multiple blog posts then you can paste the CSS and Javascript code in the theme editor. So, that you don’t need to paste the code in every blog post. Check out the video to learn more. 

If you have any doubts ask me in the comment section. If you like this tutorial, share this on social media platforms. 

If you want to join the discussion group in Telegram join here. 

Read Also: How to add an Audio file to Blogger?