How to Create a Quiz or Multiple Choice Website In Blogger/WordPress

0

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.

READ  How to Get ahref For Free

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&nbsp;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) )

READ  Call With Different Number From Your Phone Best App

Step4: Paste the code => go to content visual editor => Change the text as per your requirement

READ  Create Quiz on Blogger For Free.

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).


READ  True Caller Free Download For Android Apps

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&nbsp;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.

READ  Free Call Recording App for Your Android Smart Phone

That’s all you have created a Quiz or Multiple Choice Website In Blogger/Wordpress.

READ  Top 5 apps escape you from any tough situation

LEAVE A REPLY

Please enter your comment!
Please enter your name here