1. This is a Sample Question with Correct answer '1'.
2. This is a Sample Question with Correct Answer= 4.
3. This is the Sample Question with Correct Answer 'C'.
4. Your-Question-No.-4-Here
5. Your-Question-5-Here
6. Your-Question-6-Here
7. Your-Question-7-Here
How to Add/Create RESPONSIVE Stylish Quizzes or MCQs Question Collections in Blogger?[Copy below code to post directly]
Below is the CODE to Make MCQs Questions/Stylish Responsive Quiz in Blogger: It Need to be PASTED in Blogger POSTs HTML View.
DEMO
<style>
.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:2px solid #4A235A;
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;}
</style>
<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>
<body>
<div class="scp-quizzes-main">
<div class="scp-quizzes-data">
<h3>1. This is a Sample Question with Correct answer '1'.</h3>
<br />
<input id="correctans1" name="question1" type="radio" />
<label for="correctans1">A. 1
</label><br />
<input name="question1" type="radio" />
<label>B. 2</label><br />
<input name="question1" type="radio" />
<label>C. 3</label> <br />
<input name="question1" type="radio" />
<label>D. 4</label>
</div>
<div class="scp-quizzes-data">
<h3>2. This is a Sample Question with Correct Answer= 4.</h3>
<br />
<input name="question2" type="radio" />
<label>A. 0</label><br />
<input name="question2" type="radio" />
<label>B. 2</label><br />
<input id="correctans2" name="question2" type="radio" />
<label for="correctans2">C. 4</label> <br />
<input name="question2" type="radio" />
<label>D. 6</label>
</div>
<div class="scp-quizzes-data">
<h3>3. This is the Sample Question with Correct Answer 'C'.</h3>
<br />
<input name="question3" type="radio" />
<label>A. A</label><br />
<input name="question3" type="radio" />
<label>B. B</label><br />
<input id="correctans3" name="question3" type="radio" />
<label for="correctans3">C. C</label> <br />
<input name="question3" type="radio" />
<label>D. D</label>
</div>
<div class="scp-quizzes-data">
<h3>4. Your-Question-No.-4-Here</h3>
<br />
<input name="question4" type="radio" />
<label>A. Option-1-Here</label><br />
<input id="correctans4" name="question4" type="radio" />
<label for="correctans4">B. Correct-Option-Here</label><br />
<input name="question4" type="radio" />
<label>C. Option-C-Here</label> <br />
<input name="question4" type="radio" />
<label>D. Option-D-Here</label>
</div>
<div class="scp-quizzes-data">
<h3>5. Your-Question-5-Here</h3>
<br />
<input name="question5" type="radio" />
<label>A. Your-Option-1-Here</label><br />
<input name="question5" type="radio" />
<label>B. Your-Option-B-Here</label><br />
<input name="question5" type="radio" />
<label>C. Your-Option-C-Here</label> <br />
<input id="correctans5" name="question5" type="radio" />
<label for="correctans5">D. Your-Correct-Answer-Here</label>
</div>
<div class="scp-quizzes-data">
<h3>6. Your-Question-6-Here</h3>
<br />
<input name="question6" type="radio" />
<label>A. Your-Option-1-Here</label><br />
<input name="question6" type="radio" />
<label>B. Your-Option-B-Here</label><br />
<input name="question6" type="radio" />
<label>C. Your-Option-C-Here</label> <br />
<input id="correctans6" name="question6" type="radio" />
<label for="correctans6">D. Your-Correct-Answer-Here</label>
</div>
<div class="scp-quizzes-data">
<h3>7. Your-Question-7-Here</h3>
<br />
<input name="question7" type="radio" />
<label>A. Your-Option-1-Here</label><br />
<input name="question7" type="radio" />
<label>B. Your-Option-B-Here</label><br />
<input name="question7" type="radio" />
<label>C. Your-Option-C-Here</label> <br />
<input id="correctans7" name="question7" type="radio" />
<label for="correctans7">D. Your-Correct-Answer-Here</label>
</div>
</div>
</body>
Some Tips to customize above HTLM MCQs Code
:In the above 1st Question, Correct Answer is ‘A’ Option which contains id="correctans1".
In the above 2nd Question, Correct Answer is ‘C’ Option which contains id="correctans2".
For Each and Every Question, Don’t Forget to change the Numbers:
