Question and Answer check script

Online immediate check of Question and Answers script

In this article , we provide complete information about of Question and answer script , to check immediate answer , when click any one radio button. And also show correct answer and Explanation boxes shown , when click one button (Show Answer/Explanation).

     Here script code explains the, first display question with answers(4 or 5) as radio button options at front end. When visitors check his knowledge about the question, then click one radio button answer, then immediate show that answer correct or wrong answer. 

    Following information shown as HTML, CSS, jQuery code for Question and Answer check script.

HTML code for Question and Answer check Script

See below code

 
<h5> <!--Type your Question Here --></h5>
<div class="col-md-4"><div id="t1" style="position: absolute;"></div></div><br />
A <input name="q1" type="radio" value="Wrong Answer" /> Option 1<br />
B <input name="q1" type="radio" value="Wrong Answer" /> Option 2<br />
C <input name="q1" type="radio" value="Wrong Answer" /> Option 3 <br />
D <input name="q1" type="radio" value="Correct Answer" /> Option 4<br />
E <input name="q1" type="radio" value="Wrong Answer" /> Option 5<br />
<button id="show1">View Answer</button>
<button id="hint1">Hint Message</button>
<button id="hide1">Hide Hint/Answer</button><br />
<div id="aq1" style="background-color: #ccffcc; border: 1px solid green; padding: 10px;">
 Answer: <font color="blue"> D </font></div>
<div id="hq1" style="background-color: #ccffcc; border: 1px solid green; padding: 10px;">
<font color="blue"><u> Hint or Explanation</u></font>
 <!-- Give complete Answer Explanation type here -->
</div>


Question 2 model


<h5> <!--Type your Question Here --></h5>
<div class="col-md-4"><div id="t2" style="position: absolute;"></div></div><br />
A <input name="q2" type="radio" value="Wrong Answer" /> Option 1<br />
B <input name="q2" type="radio" value="Wrong Answer" /> Option 2<br />
C <input name="q2" type="radio" value="Wrong Answer" /> Option 3 <br />
D <input name="q2" type="radio" value="Correct Answer" /> Option 4<br />
E <input name="q2" type="radio" value="Wrong Answer" /> Option 5<br />
<button id="show2">View Answer</button>
<button id="hint2">Hint Message</button>
<button id="hide2">Hide Hint/Answer</button><br />
<div id="aq2" style="background-color: #ccffcc; border: 1px solid green; padding: 10px;">
 Answer: <font color="blue"> D </font></div>
<div id="hq2" style="background-color: #ccffcc; border: 1px solid green; padding: 10px;">
<font color="blue"><u> Hint or Explanation</u></font>
 <!-- Give complete Answer Explanation type here -->
</div>

In the above example , change red color code to your Question and answer requirements.

Normally

• Type Question Here  to of your Question.
• Next change Wrong Answer and Correct answer of your option base.
• Change number of option 4 or 5 or any one to your require.
• Change correct answer (A/B/C/D/E)
• Type complete Answer Explanation information here.

jQuery code for Question and Answer check script

<script>
$(document).ready(function(){
  $("#aq1").hide();
  $("#aq2").hide();
  $("#hq1").hide();
  $("#hq2").hide();
  $("#aq3").hide();
  $("#hq3").hide();
  $("#aq4").hide();
  $("#hq4").hide();
  $("#aq5").hide();
  $("#hq5").hide();
  $("#aq6").hide();
  $("#hq6").hide();
  $("#aq7").hide();
  $("#hq7").hide();
  $("#aq8").hide();
  $("#hq8").hide();
  $("#aq9").hide();
  $("#hq9").hide();
  $("#aq10").hide();
  $("#hq10").hide();
  $("#hide1").click(function(){
    $("#aq1").hide();
    $("#hq1").hide();
  });
  $("#show1").click(function(){
    $("#aq1").show();
  });
  $("#hint1").click(function(){
    $("#hq1").show();
  });
   $("#hint2").click(function(){
    $("#hq2").show();
  });
  $("#hide2").click(function(){
    $("#aq2").hide();
    $("#hq2").hide();
  });
  $("#show2").click(function(){
    $("#aq2").show();
  });
$("#show3").click(function(){
    $("#aq3").show();
  });
  $("#hint3").click(function(){
    $("#hq3").show();
  });
 $("#show4").click(function(){
    $("#aq4").show();
  });
  $("#hint4").click(function(){
    $("#hq4").show();
  });
  $("#hide3").click(function(){
    $("#aq3").hide();
    $("#hq3").hide();
  });
  $("#hide4").click(function(){
    $("#aq4").hide();
    $("#hq4").hide();
  });
$("#show5").click(function(){
    $("#aq5").show();
  });
  $("#hint5").click(function(){
    $("#hq5").show();
  });
$("#hide5").click(function(){
    $("#aq5").hide();
    $("#hq5").hide();
  });
$("#show6").click(function(){
    $("#aq6").show();
  });
  $("#hint6").click(function(){
    $("#hq6").show();
  });
$("#hide6").click(function(){
    $("#aq6").hide();
    $("#hq6").hide();
  });
$("#show7").click(function(){
    $("#aq7").show();
  });
  $("#hint7").click(function(){
    $("#hq7").show();
  });
$("#hide7").click(function(){
    $("#aq7").hide();
    $("#hq7").hide();
  });

 $("#show8").click(function(){
    $("#aq8").show();
  });
  $("#hint8").click(function(){
    $("#hq8").show();
  });
$("#hide8").click(function(){
    $("#aq8").hide();
    $("#hq8").hide();
  });
 
 $("#show9").click(function(){
    $("#aq9").show();
  });
  $("#hint9").click(function(){
    $("#hq9").show();
  });
$("#hide9").click(function(){
    $("#aq9").hide();
    $("#hq9").hide();
  });
 
$("#show10").click(function(){
    $("#aq10").show();
  });
  $("#hint10").click(function(){
    $("#hq10").show();
  });
$("#hide10").click(function(){
    $("#aq10").hide();
    $("#hq10").hide();
  });
  
$("input:radio[name=q1]").click(function() {
$("#t1").css("background-color", "yellow");
$('#t1').html($(this).val());
})
$("input:radio[name=q2]").click(function() {
$("#t2").css("background-color", "yellow");
$('#t2').html($(this).val());
})
$("input:radio[name=q3]").click(function() {
$("#t3").css("background-color", "yellow");
$('#t3').html($(this).val());
})
$("input:radio[name=q4]").click(function() {
$("#t4").css("background-color", "yellow");
$('#t4').html($(this).val());
})
$("input:radio[name=q5]").click(function() {
$("#t5").css("background-color", "yellow");
$('#t5').html($(this).val());
})
$("input:radio[name=q6]").click(function() {
$("#t6").css("background-color", "yellow");
$('#t6').html($(this).val());
})
$("input:radio[name=q7]").click(function() {
$("#t7").css("background-color", "yellow");
$('#t7').html($(this).val());
})
$("input:radio[name=q8]").click(function() {
$("#t8").css("background-color", "yellow");
$('#t8').html($(this).val());
})
$("input:radio[name=q9]").click(function() {
$("#t9").css("background-color", "yellow");
$('#t9').html($(this).val());
})
$("input:radio[name=q10]").click(function() {
$("#t10").css("background-color", "yellow");
$('#t10').html($(this).val());
})


});
</script>

Above Code shown to 10 Questions with Answers, use of your requirements.

Output of one Question and Answer check script

• Also read as Php interview Questions with answers
• C# interview Questions with answers