In this article i will share a blogger quiz script from which you can create Free HTML quiz code script for your blog articles that is suited for any websites, including blogger websites, is presented here. Create MCQs for Blogger (with show answer button)
Normally, only HTML, JavaScript, and CSS code is supported by Blogger websites for the presentation of any information. This post uses HTML, JavaScript quiz code script.
Advantages of Quiz Code Script
With the help of this quiz code script, it is possible to construct multiple choice questions and answers with immediate correct answer as click on show answer button. Simply, it offers the SHOW/HIDE answer response with description benefit.
Here are some screenshots where you can see this blogger simple quiz interface.
Run this code on any website, including blogs.
This code is supported by all Blogger themes.
No need for a database or server
Quick check Answer
How many Questions added in one page ?
A: There is no restriction, however you may use n questions with n lines of jQuery code in model 1 and n questions with no jQuery in model 2 to utilise more questions.
Blogger Quiz Demo
1➤ This_is_question_1 Option_1Option_2Option_3Option_4
2➤ This_is_question_2
3➤ This_is_question_3
Html Quiz Script Code For Blogger
The following code is used to create multiple question with show answer button for a blog post.
Copy/Download below html script code and paste it into your blogger post or page and you can get the same result as in above preview.
<style>.trickpkQ{color:#ff0000;}.trickpkAns{text-align:left;color:#0000ff;}.trickpkQS{background-color:#e68a00; border-radius:25px;outline: none;border:none;box-shadow:2px 2px 3px #000;color:#ffffff;cursor: pointer;padding:3px 8px}.trickpkQS:hover{background-color:#e6b800;}.msquizhr{border-top:1px dashed #0000ff;}</style> <!-- (TrickPk Blogger Quiz Question Code) --> <span><span class="trickpkQ">1➤ </span><b>This_is_question_1</b></span> <div>Option_1</div><div>Option_2</div><div>Option_3</div><div>Option_4</div><br /><div id="TrickPk-Quiz1" style="display: none;"> <!-- (TrickPk Blogger Quiz Ans Code) --> <span class="trickpkAns">=> Answer_1<br /></span></div><button onclick="TrickPkquiz1()" class="trickpkQS">Show Answer</button><script>function TrickPkquiz1(){if(document.getElementById("TrickPk-Quiz1").style.display=="none"){document.getElementById("TrickPk-Quiz1").style.display=""}else{document.getElementById("TrickPk-Quiz1").style.display="none"}}</script><hr class="msquizhr"/><b> <!-- (TrickPk Blogger Quiz Question Code) --> <span><span class="trickpkQ">2➤ </span><b>This_is_question_2</b></span><br/><div id="TrickPk-Quiz2" style="display: none;"> <!-- (TrickPk Blogger Quiz Ans Code) --> <span class="trickpkAns">=> Answer_2<br /></span></div><button onclick="TrickPkquiz2()" class="trickpkQS">Show Answer</button><script>function TrickPkquiz2(){if(document.getElementById("TrickPk-Quiz2").style.display=="none"){document.getElementById("TrickPk-Quiz2").style.display=""}else{document.getElementById("TrickPk-Quiz2").style.display="none"}}</script><hr class="msquizhr"/> <!-- (TrickPk Blogger Quiz Question Code) --> <b><span><span class="trickpkQ">3➤ </span><b>This_is_question_3</b></span><br/><div id="TrickPk-Quiz3" style="display: none;"> <!-- (TrickPk Blogger Quiz Ans Code) --> <span class="trickpkAns">=> Answer 3<br /></span></div><button onclick="TrickPkquiz3()" class="trickpkQS">Show Answer</button><script>function TrickPkquiz3(){if(document.getElementById("TrickPk-Quiz3").style.display=="none"){document.getElementById("TrickPk-Quiz3").style.display=""}else{document.getElementById("TrickPk-Quiz3").style.display="none"}}</script><hr class="msquizhr"/><b>
Change the code in the sample above to suit your questions and answers.
Typically, you would type your question here.