01.How to add Quiz to your Blog?

Here you can Make a Quiz for your Blog visitors with instant "check answers" option. Here is the steps should follow to add Quiz to your Blog.

Step1:-
Go to </head>
Steps to reach </head>
step(a)-log into your blog account clcik on "Layout"
step(b)-Edit Html
step(c)-Clcik "Ctrl+F" and search for </head>
Step2:-
Copy and paste the following code before </head>
<style type="text/css">
.commenthidden {display:none}
.commentshown {display:inline}
</style>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
This code makes your answers "show/hide"

Step3:-Save your template.
Step4:-Open new post and write the code as follows or you can copy the following code and paste it in "edit html" you have to change the text as you wish to represent.

<a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>Link Title</a><br />
<div class="commenthidden" id="UniqueName"
>Expanded Content</div>

Note1:-Remember the name should be same in both" javascript togglecomments" and in "comment hidden id"

If you want to add more questions/data in your post just give space between question to question while you post
</div>

Sample Quiz

Following is the code for above "Sample Quiz". Copy this code to any text editor(notepad/word) Replace the Question1,2...10 with your own questions. I have left multiple answers empty for your convenience. Type your answers beside immediately following ABCD.

<br/><span style="font-weight: bold; color: rgb(255, 0, 0);">Sample Quiz</span><form name="f"><br /><b>1.Question ?<br /></b><br /><input name="a" value="4" type="radio">A.<br /><br /><input name="a" value="1" type="radio">B.<br /><br /><input name="a" value="2" type="radio">C.<br /><br /><input name="a" value="3" type="radio">D.<br /><br /><a aiotitle="click to expand" href="javascript:togglecomments('1a')">ClickAnswer</a><br /><div style="font-weight: bold; color: rgb(153, 0, 0);" class="commenthidden" id="1a"> A</div><br /><b>2. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('2a')">Click Answer</a><br /><div class="commenthidden" id="2a"><span style="color: rgb(102, 0, 0); font-weight: bold;">B</span></div><br /><b>3. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('3a')">Click Answer</a><br /><div class="commenthidden" id="3a"><span style="color: rgb(102, 0, 0); font-weight: bold;">D</span></div><br /><b>4. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('4a')">Click Answer</a><br /><div class="commenthidden" id="4a"><span style="color: rgb(102, 0, 0); font-weight: bold;">C</span></div><br /><b>5. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('5a')">Click Answer</a><br /><div class="commenthidden" id="5a"><span style="color: rgb(102, 0, 0); font-weight: bold;">A</span></div><br /><b>6. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('6a')">Click Answer</a><br /><div class="commenthidden" id="6a"><span style="color: rgb(102, 0, 0); font-weight: bold;">B</span></div><br /><b>7. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('7a')">Click Answer</a><br /><div class="commenthidden" id="7a"><span style="color: rgb(102, 0, 0); font-weight: bold;">C</span></div><br /><b>8. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('8a')">Click Answer</a><br /><div class="commenthidden" id="8a"><span style="color: rgb(102, 0, 0); font-weight: bold;">C</span></div><br /><b>9. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('9a')">Click Answer</a><br /><div class="commenthidden" id="9a"><span style="color: rgb(102, 0, 0); font-weight: bold;">B</span></div><br /><b>10. Question ?<br /></b><br /><input name="b" value="2" type="radio"> A..<br /><br /><input name="b" value="4" type="radio">B.<br /><br /><input name="b" value="1" type="radio">C<br /><br /><input name="b" value="3" type="radio">D<br /><a aiotitle="click to expand" href="javascript:togglecomments('10a')">Click Answer</a><br /><div class="commenthidden" id="10a"><span style="color: rgb(102, 0, 0); font-weight: bold;">D</span></div></form><br /><span style="color: rgb(0, 102, 0);"></span>

The code is as follows,

you just add your multiple options as follows

after replacing all questions copy the code and paste it in your post. Click "Publish" your quiz is ready to use for your visitors...

Points to remember
Note:-If you are posting multiple quizzes in a single post or representing multiple quizzes in single page. Then you must be careful about “unique id”, means if you have given ids in Quiz 1 as 1a for answer1 , 2a for answer 2 and have given the same 1a ,2a,3a like answer ids in quiz2 and in quiz3 and posted all three quizzes in a single post or represented in single page then Only Quiz 1 displays and hides the answers where as remaining quizzes doesn’t work. If you open quiz2 and quiz 3 in separate links (in individual separate pages) then they work.

You should not give same id types to different answrs of separate/different questions. The id should be unique.
For example you may have given answers ids like
Q1-1a,-A
Q2-2a-B,
Q3-2a-C,
Q4-2a-D,
Q5-2a-A for question 1,2,3,4,5..then if you click for the answer of Q1 you will see the answer as A, if you click for the answer of Q2 you will see the answer as B, if you click for the answer of Q3,Q4,Q5 you will see the answer as B at the location of Question2 answer location, it is because you have given the same id for 3,4,5 which is actually addresses to Q2 answer…that’s why when you click for the 3,4,5 answers …answer will be displayed at Q2 answer location .

So, you must give ids as follows
Quiz 1
A1=1-1a
A2=1-2a
A3=1-3a

Quiz 2
A1=2-1a
A2=2-2a
A3=2-3a

Quiz 3
A1=3-1a
A2=3-2a
A3=3-3a

For More quizzes go here.www.blogspotquiz.blogspot.com

Blogger Tutorial for Learners

Pages

Labels