We have a Ready-made Code for creating RESPONSIVE Stylish MCQs/Quiz Question Collections in Blogger. You can easily divide Add Quizzes with Multiple Choice Questions in your Blogger Site.
When the user clicks on the Options, our Ready-made Code Displays the Correct Answer with Green Color and Wrong Answer as Red color. You also can change the color if you wish.
Let’s See the DEMO of RESPONSIVE Stylish Quiz/MCQs Question Collections in Blogger:-
DEMO Here
Now Let’s learn to Add/Create RESPONSIVE Stylish Quiz/MCQs Question Collections in Blogger Posts:
#1. First of All, Download the Ready-made Code Notepad file to Create RESPONSIVE Stylish Quiz/MCQs Question Collections in Blogger Posts.Click Here to DOWNLOAD Code Notepad File to Create Responsive Stylish Quiz or MCQs Question Collections in Blogger posts.
#2. You can CUSTOMIZE the Font size, Color, Border Size and Color of Option Boxes, etc., in the Code if needed. Customize the Code present inside <style> tags.
#3. Now, let’s go to the MCQs/Question Part.
Below is the Sample of Code to Make 1 Question:
Remember to Modify the RED PART in the Code below for each question.
Also, id="correctans1" is only Present in that Option which is the correct one, and absent in the other 3 Options as shown in the Sample Code below.
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".
VVI NOTE: Remember to Modify the RED PART in the Code Above for each question.
Remember to Modify the RED PART in the Code below for each question.
Also, id="correctans1" is only Present in that Option which is the correct one, and absent in the other 3 Options as shown in the Sample Code below.
<div class="scp-quizzes-data">
<h3>1. Your-Question-1-Here.</h3><br />
<input id="correctans1" name="question1" type="radio" />
<label for="correctans1">A. Your-Correct-option-Here
</label><br />
<input name="question1" type="radio" />
<label>B. Your-Wrong-Option-Here </label><br />
<input name="question1" type="radio" />
<label>C. Your-Wrong-Option-Here </label> <br />
<input name="question1" type="radio" />
<label>D. Your-Wrong-Option-Here </label>
</div>
In the above 1st Question, Correct Answer is ‘A’ Option which contains id="correctans1".
<div class="scp-quizzes-data">
<h3>2. Your-Question-2-Here.</h3><br />
<input name="question2" type="radio" />
<label>A. Your-Wrong-option-Here
</label><br />
<input name="question2" type="radio" />
<label>B. Your-Wrong-Option-Here </label><br />
<input id="correctans2" name="question2" type="radio" />
<label for="correctans2">C. Your-Correct-Option-Here </label> <br />
<input name="question2" type="radio" />
<label>D. Your-Wrong-Option-Here </label>
</div>
In the above 2nd Question, Correct Answer is ‘C’ Option which contains id="correctans2".
VVI NOTE: Remember to Modify the RED PART in the Code Above for each question.
For Adding New Questions, Add the Above Part in our Code. You can add as many questions as you need. Copy-Paste the Question and option Code Part from <div> to </div> tags.
For Each and Every Question, Don’t Forget to change the Numbers Highlighted in Red Color as shown in the photo below:-
#4. After your Question SET Code is Ready, Just COPY the Code.
Open Blogger, Go to HTML View of the Blogger New Post, Give the Suitable Title and PASTE our CODE in HTML View of the Blogger Post.
Then SAVE the Post, and you are done creating QUIZ / MCQs in your Blogger Post.
Congratulations, you just Learnt to Add Stylish Responsive Quiz or MCQs Questions in Blogger Posts.
Also, you can use these Sites to Create Online Free Quizzes for your Blogger: Classmarker, Quiz Generator.
Also, watch our Video for Step by Step Guide to Add/Create QUIZZES or MCQs Questions' Collections in Blogger Posts: