How to add mcq in blogger (quiz script for blogger) ?

Free Quiz Code Script Suitable for All Websites Even Blogger Website, Quiz Code is provided here with HTML Quiz Code Script. Create MCQs (Multiple Choice Questions) here Usually Blogger website supports only HTML, JavaScript, CSS code to display any information, this article provides HTML, JavaScript quiz code in script form.

Follow that rule

1 Select the correct answer
2 Green color will show for correct answer
3 red color will show if wrong answer is selected
4 After answering all your questions the result will be displayed automatically.

HTML Code:

     <form method="POST" id="Apu">
<fieldset><h3><span class="qnum">1 </span>Your quiz question number #1 ?</h3>
  <input type="radio" name="Aoption1" id="answer-1-1" required="required"><label for="answer-1-1" class="Aanswers ">option no. 1</label>
  
  <input type="radio" name="Aoption1" id="answer-1-2" required="required"><label for="answer-1-2" class="Aanswers Acorrect">option no. 2</label>
  
<input type="radio" name="Aoption1" id="answer-1-3" required="required"><label for="answer-1-3" class="Aanswers ">option no. 3</label>
  
<input type="radio" name="Aoption1" id="answer-1-4" required="required"><label for="answer-1-4" class="Aanswers ">option no. 4</label>
</fieldset>
  
<fieldset><h3><span class="qnum">2 </span>Your quiz question number #2</h3>
<input type="radio" name="Aoption2" id="answer-2-1" required="required"><label for="answer-2-1" class="Aanswers ">option no. 1</label>
  
<input type="radio" name="Aoption2" id="answer-2-2" required="required"><label for="answer-2-2" class="Aanswers ">option no. 2</label>
  
<input type="radio" name="Aoption2" id="answer-2-3" required="required"><label for="answer-2-3" class="Aanswers ">option no. 3</label>
  
<input type="radio" name="Aoption2" id="answer-2-4" required="required"><label for="answer-2-4" class="Aanswers Acorrect">option no. 4</label></fieldset>
  
</fieldset><fieldset><h3><span class="qnum">2 </span>Your quiz question number #3</h3>
<input type="radio" name="Aoption3" id="answer-3-1" required="required"><label for="answer-3-1" class="Aanswers Acorrect">option no. 1</label>
  
<input type="radio" name="Aoption3" id="answer-3-2" required="required"><label for="answer-3-2" class="Aanswers ">option no. 2</label>
  
<input type="radio" name="Aoption3" id="answer-3-3" required="required"><label for="answer-3-3" class="Aanswers ">option no. 3</label>
  
<input type="radio" name="Aoption3" id="answer-3-4" required="required"><label for="answer-3-4" class="Aanswers ">option no. 4</label>
</fieldset>  


<fieldset><h3><span class="qnum">4 </span>Your quiz question number #4</h3>
  <input type="radio" name="Aoption4" id="answer-4-1" required="required"><label for="answer-4-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption4" id="answer-4-2" required="required"><label for="answer-4-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption4" id="answer-4-3" required="required"><label for="answer-4-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption4" id="answer-4-4" required="required"><label for="answer-4-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">5 </span>Your quiz question number #5</h3>
<input type="radio" name="Aoption5" id="answer-5-1" required="required"><label for="answer-5-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption5" id="answer-5-2" required="required"><label for="answer-5-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption5" id="answer-5-3" required="required"><label for="answer-5-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption5" id="answer-5-4" required="required"><label for="answer-5-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">6 </span>Your quiz question number #6</h3>
<input type="radio" name="Aoption6" id="answer-6-1" required="required"><label for="answer-6-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption6" id="answer-6-2" required="required"><label for="answer-6-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption6" id="answer-6-3" required="required"><label for="answer-6-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption6" id="answer-6-4" required="required"><label for="answer-6-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">7 </span>Your quiz question number #7</h3>
<input type="radio" name="Aoption7" id="answer-7-1" required="required"><label for="answer-7-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption7" id="answer-7-2" required="required"><label for="answer-7-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption7" id="answer-7-3" required="required"><label for="answer-7-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption7" id="answer-7-4" required="required"><label for="answer-7-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">8 </span>Your quiz question number #8</h3>
<input type="radio" name="Aoption8" id="answer-8-1" required="required"><label for="answer-8-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption8" id="answer-8-2" required="required"><label for="answer-8-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption8" id="answer-8-3" required="required"><label for="answer-8-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption8" id="answer-8-4" required="required"><label for="answer-8-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">9 </span>Your quiz question number #9</h3>
<input type="radio" name="Aoption9" id="answer-9-1" required="required"><label for="answer-9-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption9" id="answer-9-2" required="required"><label for="answer-9-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption9" id="answer-9-3" required="required"><label for="answer-9-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption9" id="answer-9-4" required="required"><label for="answer-9-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">10 </span>Your quiz question number #10</h3>
<input type="radio" name="Aoption10" id="answer-10-1" required="required"><label for="answer-10-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption10" id="answer-10-2" required="required"><label for="answer-10-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption10" id="answer-10-3" required="required"><label for="answer-10-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption10" id="answer-10-4" required="required"><label for="answer-10-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">11</span>Your quiz question number #11</h3>
<input type="radio" name="Aoption11" id="answer-11-1" required="required"><label for="answer-11-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption11" id="answer-11-2" required="required"><label for="answer-11-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption11" id="answer-11-3" required="required"><label for="answer-11-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption11" id="answer-11-4" required="required"><label for="answer-11-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">12</span>Your quiz question number #12</h3>
<input type="radio" name="Aoption12" id="answer-12-1" required="required"><label for="answer-12-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption12" id="answer-12-2" required="required"><label for="answer-12-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption12" id="answer-12-3" required="required"><label for="answer-12-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption12" id="answer-12-4" required="required"><label for="answer-12-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">13 </span>Your quiz question number #13</h3>
<input type="radio" name="Aoption13" id="answer-13-1" required="required"><label for="answer-13-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption13" id="answer-13-2" required="required"><label for="answer-13-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption13" id="answer-13-3" required="required"><label for="answer-13-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption13" id="answer-13-4" required="required"><label for="answer-13-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">14 </span>Your quiz question number #14</h3>
<input type="radio" name="Aoption14" id="answer-14-1" required="required"><label for="answer-14-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption14" id="answer-14-2" required="required"><label for="answer-14-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption14" id="answer-14-3" required="required"><label for="answer-14-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption14" id="answer-14-4" required="required"><label for="answer-14-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">15</span>Your quiz question number #15</h3>
<input type="radio" name="Aoption15" id="answer-15-1" required="required"><label for="answer-15-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption15" id="answer-15-2" required="required"><label for="answer-15-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption15" id="answer-15-3" required="required"><label for="answer-15-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption15" id="answer-15-4" required="required"><label for="answer-15-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">16</span>Your quiz question number #16</h3>
<input type="radio" name="Aoption16" id="answer-16-1" required="required"><label for="answer-16-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption16" id="answer-16-2" required="required"><label for="answer-16-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption16" id="answer-16-3" required="required"><label for="answer-16-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption16" id="answer-16-4" required="required"><label for="answer-16-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">17 </span>Your quiz question number #17</h3>
<input type="radio" name="Aoption17" id="answer-17-1" required="required"><label for="answer-17-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption17" id="answer-17-2" required="required"><label for="answer-17-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption17" id="answer-17-3" required="required"><label for="answer-17-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption17" id="answer-17-4" required="required"><label for="answer-17-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">18</span>Your quiz question number #18</h3>
<input type="radio" name="Aoption18" id="answer-18-1" required="required"><label for="answer-18-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption18" id="answer-18-2" required="required"><label for="answer-18-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption18" id="answer-18-3" required="required"><label for="answer-18-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption18" id="answer-18-4" required="required"><label for="answer-18-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">19</span>Your quiz question number #19</h3>
<input type="radio" name="Aoption19" id="answer-19-1" required="required"><label for="answer-19-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption19" id="answer-19-2" required="required"><label for="answer-19-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption19" id="answer-19-3" required="required"><label for="answer-19-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption19" id="answer-19-4" required="required"><label for="answer-19-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">20</span>Your quiz question number #20</h3>
<input type="radio" name="Aoption20" id="answer-20-1" required="required"><label for="answer-20-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption20" id="answer-20-2" required="required"><label for="answer-20-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption20" id="answer-20-3" required="required"><label for="answer-20-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption20" id="answer-20-4" required="required"><label for="answer-20-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">21</span>Your quiz question number #21</h3>
<input type="radio" name="Aoption21" id="answer-21-1" required="required"><label for="answer-21-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption21" id="answer-21-2" required="required"><label for="answer-21-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption21" id="answer-21-3" required="required"><label for="answer-21-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption21" id="answer-21-4" required="required"><label for="answer-21-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">22 </span>Your quiz question number #22</h3>
<input type="radio" name="Aoption22" id="answer-22-1" required="required"><label for="answer-22-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption22" id="answer-22-2" required="required"><label for="answer-22-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption22" id="answer-22-3" required="required"><label for="answer-22-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption22" id="answer-22-4" required="required"><label for="answer-22-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">23 </span>Your quiz question number #23</h3>
<input type="radio" name="Aoption23" id="answer-23-1" required="required"><label for="answer-23-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption23" id="answer-23-2" required="required"><label for="answer-23-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption23" id="answer-23-3" required="required"><label for="answer-23-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption23" id="answer-23-4" required="required"><label for="answer-23-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">24 </span>Your quiz question number #24</h3>
<input type="radio" name="Aoption24" id="answer-24-1" required="required"><label for="answer-24-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption24" id="answer-24-2" required="required"><label for="answer-24-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption24" id="answer-24-3" required="required"><label for="answer-24-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption24" id="answer-24-4" required="required"><label for="answer-24-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">25</span>Your quiz question number #25</h3>
<input type="radio" name="Aoption25" id="answer-25-1" required="required"><label for="answer-25-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption25" id="answer-25-2" required="required"><label for="answer-25-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption25" id="answer-25-3" required="required"><label for="answer-25-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption25" id="answer-25-4" required="required"><label for="answer-25-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">26</span>Your quiz question number #26</h3>
<input type="radio" name="Aoption26" id="answer-26-1" required="required"><label for="answer-26-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption26" id="answer-26-2" required="required"><label for="answer-26-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption26" id="answer-26-3" required="required"><label for="answer-26-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption26" id="answer-26-4" required="required"><label for="answer-26-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">27</span>Your quiz question number #27</h3>
<input type="radio" name="Aoption27" id="answer-27-1" required="required"><label for="answer-27-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption27" id="answer-27-2" required="required"><label for="answer-27-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption27" id="answer-27-3" required="required"><label for="answer-27-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption27" id="answer-27-4" required="required"><label for="answer-27-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">28 </span>Your quiz question number #28</h3>
<input type="radio" name="Aoption28" id="answer-28-1" required="required"><label for="answer-28-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption28" id="answer-28-2" required="required"><label for="answer-28-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption28" id="answer-28-3" required="required"><label for="answer-28-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption28" id="answer-28-4" required="required"><label for="answer-28-4" class="Aanswers ">option no. 4</label>
</fieldset>


<fieldset><h3><span class="qnum">29</span>Your quiz question number #29</h3>
<input type="radio" name="Aoption29" id="answer-29-1" required="required"><label for="answer-29-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption29" id="answer-29-2" required="required"><label for="answer-29-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption29" id="answer-29-3" required="required"><label for="answer-29-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption29" id="answer-29-4" required="required"><label for="answer-29-4" class="Aanswers ">option no. 4</label>
</fieldset>



<fieldset><h3><span class="qnum">30 </span>Your quiz question number #30</h3>
<input type="radio" name="Aoption30" id="answer-30-1" required="required"><label for="answer-30-1" class="Aanswers ">option no. 1</label>

<input type="radio" name="Aoption30" id="answer-30-2" required="required"><label for="answer-30-2" class="Aanswers Acorrect">option no. 2</label>

<input type="radio" name="Aoption30" id="answer-30-3" required="required"><label for="answer-30-3" class="Aanswers ">option no. 3</label>

<input type="radio" name="Aoption30" id="answer-30-4" required="required"><label for="answer-30-4" class="Aanswers ">option no. 4</label>
</fieldset>



<button type="submit">Submit</button><div class="Apuresult"><p>Your score is <span class="score" data-question-count="30"></span></p></div></form>

CSS Code:

        <style>*{box-sizing:border-box;} #Apu>fieldset { border:1px solid #000000; border-radius:5px; margin:1rem auto;padding:7px 4px;background-color:#e9edf5; width:100%; }.qnum{color:#ff0000;} #Apu>fieldset>h3{ margin:0px; margin-bottom:17px; margin-top:6px; font-size:15px; padding:5px; color:#000000;} .Aanswers { background-color: #cccccc;color:#000000;border:1px solid #0000ff;border-radius:4px; display: block; position: relative; cursor: pointer; padding: 0.55rem 1.05rem; margin: 0.25rem 0.5rem; max-width:99%; } #Apu input[type="radio"],#Apu>button { display: none; }:valid .Acorrect { background-color: rgba(58, 171, 74, 0.9);animation:slide 1s linear;}:checked + .Aanswers { color: #ffffff;background-color:#ff0000;animation:wslide 1s linear;} :checked + .Acorrect { background-color: #3db540;animation:slide 1s linear;}@keyframes wslide{0%,30%,50%{transform: translateX(10px);}20%,40%{transform: translateX(-10px);}60%{transform: translateX(-7px);}70%{transform: translateX(7px);}80%{transform: translateX(-4px);}90%{transform: translateX(4px);}100%{transform: translateX(0px);}}@keyframes slide{0%{transform: scale(0.0);}100%{transform: scale(1);}} :valid { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } :valid + .Aanswers { pointer-events: none } #Apu{ counter-reset: quiz-score } :checked + .Acorrect { counter-increment: quiz-score } .score:after { content: counter(quiz-score) " out of " attr(data-question-count) "  !"} #Apu .Apuresult { display: none; } #Apu:valid .Apuresult { display: block;color:#0000ff;font-size:22px;margin-top:8px;text-align:center;}</style>

This code physicaly look like