Monday, November 02, 2023
If your website or block is on blogger.com and you want to write article related to question and answer or quiz in your website. So you will not get to see such an option on blogger.com with the help of which you can write articles related to question and answer, but today I will teach you to add a stylish question and answer or quiz box which will also have an answer button, which will help the user Quite easily, you will be able to know the answer of that question by just clicking a button, and this will give users much more attraction from your website.
In this article, I will tell you very easy steps, how you can add Responsive Quiz Box With Show Answer Button to your website or blog.
How To Add Responsive Quiz Box With Show Answer Button In Blogger Post
- Open Blogger Dashboard And Open The Post In Which You Want To Add Quiz Box.
- Now Go To HTML >> And in the post where you want to add the Quiz Box, paste the code below.
<div id="quiz_container"><div class="single enabled"><div class="question"><div class="questionName">Your Question</div></div><div class="btn-prt"><input class="toggle-answer" type="button" value="Show Answer" /></div><div class="answer"><div class="answer-title">Here Put Answer</div></div></div><script>!function(){function a(e){-1!=e.parentNode.parentNode.className.indexOf("enabled")?(e.parentNode.parentNode.className="single disabled",e.value="Hide Answer"):(e.parentNode.parentNode.className="single enabled",e.value="Show Answer")}!function(){for(var e=document.getElementsByClassName("toggle-answer"),n=0;n<e.length;n++)e.hasOwnProperty(n)&&e[n].addEventListener("click",a.bind(this,e[n]))}()}(); </script> <style> #quiz_container{position:relative;width:100%;height:auto;max-width:100%;margin:0 auto;line-height:150%}#quiz_container .single{border:1px solid gray;padding:8px;border-radius:6px;margin-bottom:10px;background:#fff}#quiz_container .question{padding:5px 10px;background:transparent;color:#000}#quiz_container .questionNum{text-align:center}#quiz_container .enabled .answer{display:none}#quiz_container .enabled .hide-answer{display:none}#quiz_container .disabled .show-answer{display:none}#quiz_container .explanation,#quiz_container .answer-title,.btn-prt{margin:10px 10px 0}.quiz-adv{margin-bottom:10px;text-align:center;padding:5px} #quiz_container .answer-title{background: transparent;color: #000;} </style></div>
- Copy the code below to add more questions and answers >> After copying the code below, paste it just above the <script>.
<div id="quiz_container"><div class="single enabled"><div class="question"><div class="questionName">Your Question</div></div><div class="btn-prt"><input class="toggle-answer" type="button" value="Show Answer" /></div><div class="answer"><div class="answer-title">Here Put Answer</div></div></div>
- before publish your post see a preview of your blog post.
- If preview is correct then simply publish it.