Download HTML Code for Quiz For Blogger

If you want to create a question-answer website like any quiz so you are at a good place where you can find some valuable content that can help you to create such a website like a quiz. It is very easy to create a question-answer website (Quiz for Blogger Template) for a quiz website in WordPress what somehow we face many problems in blogger,  Because they are lack of such plugins that build a quiz website.  what there are I would like to solve this problem because hair I describe some code that helps you to create such a website that can create a quiz website in Google Blogger.

Here describe some very common steps that you follow and can create a question-answer MCQ website in your blogger template these are very basic steps and do not require any coding language.

How to make a quiz in Blogger.

Here we are giving some simple code that you can copy from here and put these code into your blogger page and you have to made some changes to create a quiz in your blog page. if you follow these some given steps so you can easily create a quiz in your blog page.

(Embade Youtube Video Here)

• Step (1). Copy Html Code for MCQ in Blogger template

<div class="scp-quizzes-main"> <!-----Main Div---->

<div class="scp-quizzes-data"><!-----Question---->

  <h3>1.  Choose the Right?</h3>
  <br />

    <input id="Fastlearning" name="question1" type="radio" />
    <label for="Fastlearning">1. Right
    </label><br />
 
    <input name="question1" type="radio" />
    <label>2. Wrong</label><br />
    <input name="question1" type="radio" />
    <label>3. Wrong</label> <br />
    <input name="question1" type="radio" />
    <label>4. Wrong</label>

 </div> <!-----Question End---->

     </div> <!-----Main Div End---->

Copy above code and paste, in your blog post there where you want to show Quiz.

<script src="https://sharecodepoint.in/sharecodepoint-website-data/quizze-files/jquery-1.9.1.min.js">
</script> 
<script type="text/javascript"> 	$(document).ready(function() { $('label').click(function() { $('label').removeClass('worngans'); $(this).addClass('worngans'); }); });
</script> 

.scp-quizzes-main{ width:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}	 
.scp-quizzes-data{ 
box-shadow: 0px 1px 3px -1px #DCDCDC;
padding:10px;
margin-top:15px;
}
pre{ border:2px solid #f5f5f5; padding:10px; overflow-x:scroll;}
 input[type=radio] {
    display:none; 
}
input[type=radio] + label {
    display:inline-block;
	width:95%;
	padding:10px;
	border:1px solid #ddd;
	margin-bottom:10px;
	cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}
input[type=radio]:checked + label { 
   background-image: none;
   background-color:#0C0;
	color:#fff;
	border:1px solid #0C0 !important;
	-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.worngans{ background-color:#F36;color:#fff; border:1px solid #F36 !important;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}

• Step (2). Put these codes into your Blogger Template

• Step (3). Made some changes.

• Step (4). save

Result/Preview

I hope you found this article (Quiz for blogger template) will be useful for you and make sure you share this article to your needed friend who is looking for creating such a website for MCQ and question-answer website in blogger template and facing any type of problem you can comment and share your problem with us. Thank you for reading this article very carefully and we as we used to provide very useful articles regarding blocking and Blogger issues