Create Blogger Quiz with Show Answer Button Code Script

Create Blogger Quiz with Show Answer Button Code Script

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.

Blogger Quiz Generator Script with Show Answer Button

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.

Create Blogger Quiz with Show Answer Button
Blogger Quiz Free Code with Show Answer Button

Blogger online html quiz generater
  1. Run this code on any website, including blogs.

  2. This code is supported by all Blogger themes.

  3. No need for a database or server

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

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&#10148; </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&#10148; </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&#10148; </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.

Related Post

No comments