How to Create MCQ Quiz Website in Blogger

Nowadays everything is available in digital form or you can say online form, Quiz question be it banking, ticketing, studying, History, Government Job etc.

$ads={1}

In such a situation, if you have ever thought that you can create a (MCQ) Multiple Choice Questions quiz website or blog in Blogger platform then this post is very important and beneficial for you.

{tocify} $title={Table of Contents}

How to Create MCQ Quiz Website in Blogger

Here, In this article, I will share with you how to create MCQ Website in blogger or add it in your current Blogger website. We will use some CSS, Javascript code and a simple HTML button.

You can easily create a MCQ Quiz website or blog in Blogger and when someone clicks on the answer button the answer will be shown to user.

Let's check out how you can do that in your Blogger website...

How to Create MCQ Website in Blogger

Follow below simple Steps to add MCQ question in your Blogger website...

Step 1. Open Blogger dashboard click on Thems>Edit HTML

Step 2. Next, Copy the below CSS Code and past it just above ]]></b:skin> and save the themes.

.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; }

Step 3. Open Post And add MCQ Questions and Answers.

Step 4. Now switch to HTML View and paste the below HTML Code every question.

<button class="acc">Show Answer</button>
<div class="mcq">
  <p>Ans: Here you add your correct answer of the Question.</p>
</div>

Step 5. Now add the answer between the paragraph tag <p> Here add Answer </p> and change the button label if you want.

Step 6: Now paste the below javascript code after adding button.

<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 simple Multiple Choice Questions (MCQ) quiz function is added to your blogger website successfully.

Friends, you want to add this Features in multiple blog post then you can also add the Javascript code in the theme </head> section.

If you don't want to paste the HTML Javascript code in every blog posts.

Conclusion

Friends, If you have any doubts about this tutorial ask me in the comment section. If you like this tutorial and think it can help others, please share this on social media platforms. 

For more updates on Blogger Templats, Blogging tutorial like this, please Follow this Blog/link/button/#34cf50

Debashis

Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

1 Comments

To be published, comments must be reviewed by the administrator.

Previous Post Next Post