How to Create a Quiz or Multiple Choice Website In Blogger/Wordpress:
Quiz websites are stimulating user interest by hiding the real answer. Coming to the online business quiz website or multiple choice websites are making more money as compared with professional blogs. To create quiz site, While going to freelancer or another website developing company, they ask huge amount. But being a student investing huge amount is not possible. So that, In this tutorial we are going to see How to Create a Quiz or Multiple Choice Website In Blogger/Wordpress. Using this method we can create in free blogger as well as wordpress.
Note: This method does not require any hosting or domain. but if you are planning to go the quiz website with wordpress means, you have to procure domain as well as hosting. here creating quiz website procedure is same.
Create Quiz site in blogger/wordpress:
Step:1 Create a fresh blog (if you do not have) or click on create new post on your blogger
Step2: Copy the below mentioned java script code
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<h2 style=”text-align: left;”>
<span style=”font-size: small;”><u>Electronic Devices Objective MCQ Questions with Answers: Part-7</u></span></h2>
<span style=”color: red;”>(1) What is the capital of India</span><br />
<b>Options:</b><br />
[a] Dehi<br />
[b] Chennai<br />
[c] Kolkatha<br />
[d] Mumbai<br />
<b>Answers:</b><br />
1. Options B and C<br />
2. Option A only<br />
3. Option D only<br />
4. Option A and D only<br />
<div id=”spoiler1″ style=”display: none;”>
<span style=”text-align: left;”><span style=”color: green;”><b>Ans: 2 </b></span>
</span></div>
<span style=”text-align: left;”>
<button onclick=”if(document.getElementById(‘spoiler1′) .style.display==’none’)
{document.getElementById(‘spoiler1’) .style.display=”}
else{document.getElementById(‘spoiler1′) .style.display=’none’}
” style=”background-color: lightgreen;” title=”Click to Answer content” type=”button”>Answer</button> </span> <br />
<br />
Step3: paste it on your content HTML editor (blogger dashboard => new post => Edit HTML (blogger)/ Text (wordpress) )
Step4: Paste the code => go to content visual editor => Change the text as per your requirement
Step5: Change the answer number (which is marked in red color). This data is going to display when the user clicks the answer button
Step6: Save It => View it => You get exact quiz website
Step7: Adding multiple question: Now copy the same code using html editor. And paste the same code below First question.
Step8: This is most important change which you must have to be done. Now change the Second text as per your question in content visual editor (normal editor).
Step9: Go to html editor => in second question change all spoiler1 -> spoiler 2. This is important setting you have to do it, otherwise the code does not work. For going furthu spoiler2-> spoiler3
See the sample code:
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<h2 style=”text-align: left;”>
<span style=”font-size: small;”><u>Electronic Devices Objective MCQ Questions with Answers: Part-7</u></span></h2>
<span style=”color: red;”>(1) What is the capital of India</span><br />
<b>Options:</b><br />
[a] Dehi<br />
[b] Chennai<br />
[c] Kolkatha<br />
[d] Mumbai<br />
<b>Answers:</b><br />
1. Options B and C<br />
2. Option A only<br />
3. Option D only<br />
4. Option A and D only<br />
<div id=”spoiler1″ style=”display: none;”>
<span style=”text-align: left;”><span style=”color: green;”><b>Ans: 2 </b></span>
</span></div>
<span style=”text-align: left;”>
<button onclick=”if(document.getElementById(‘spoiler1′) .style.display==’none’)
{document.getElementById(‘spoiler1’) .style.display=”}
else{document.getElementById(‘spoiler1′) .style.display=’none’}
” style=”background-color: lightgreen;” title=”Click to Answer content” type=”button”>Answer</button> </span> <br />
<br />
<div dir=”ltr” style=”text-align: left;” trbidi=”on”>
<h4 style=”text-align: left;”>
(2) Who is chief minister of Tamilnadu</h4>
<b>Options:</b><br />
[a] JJ<br />
[b] Karnanathi<br />
[c] Do not know<br />
[d] Vijayakanth<br />
<b>Answers:</b><br />
1. Options B and C<br />
2. Option A only<br />
3. Option C only<br />
4. Option A and D only<br />
<div id=”spoiler2” style=”display: none;”>
<span style=”text-align: left;”><span style=”color: green;”><b>Ans: 3 </b></span>
</span></div>
<span style=”text-align: left;”>
<button onclick=”if(document.getElementById(‘spoiler2‘) .style.display==’none’)
{document.getElementById(‘spoiler2‘) .style.display=”}
else{document.getElementById(‘spoiler2‘) .style.display=’none’}
” style=”background-color: lightgreen;” title=”Click to Answer content” type=”button”>Answer</button> </span> <br />
<br /></div>
</div>
Also never forget to change the answer text also. Repeat the above procedure until your question reaches.
That’s all you have created a Quiz or Multiple Choice Website In Blogger/Wordpress.
