Quiz Code Script

Free Quiz code script suitable for all websites, even suitable for blogger website, here Quiz code given with HTML Quiz code Script. Here to create MCQ (Multiple Choice Questions)

Normally Blogger websites only support HTML, JavaScript , CSS code accepted to display any information, in this article given as HTML, JavaScript Quiz Code Script.

Advantages of Quiz Code Script

With this Quiz Code Script, we can create multiple Choice Questions/Answers, each Questions immediate check of Correct / Wrong answers immediately without any page refresh. And also has advantage of SHOW / HIDE answer with description.

Run this code any website even blogger websites also
All Blogger themes supports this code
No database or server requirements
Immediate check and Show Correct / Wrong Answers
Show Correct Answer and Explanations.

Model 1: Quiz code or MCQ Question Preparation

Sample one Question

Q1.Which of the following is the default page setup orientation for notes pages, outline and handouts?

A Vertical
B Landscape
C Portrait
D multiple
E All of above

Answer: C

Hint or Explanation PowerPoint slides are automatically set up in landscape (horizontal) layout Landscape slide orientation , but you can change the slide orientation to portrait (vertical) layout. More info see here

Html Quiz Script

Following code for Quiz making of one Question given below

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

In the above example, change following 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 Give complete Answer Explanation information here.

JavaScript code for Quiz making

 
  <script>
$(document).ready(function(){
  $("#aq1").hide();
  $("#hq1").hide();
  $("#hide1").click(function(){
    $("#aq1").hide();
    $("#hq1").hide();
  });
  $("#show1").click(function(){
    $("#aq1").show();
  });
  $("#hint1").click(function(){
    $("#hq1").show();
  });
  $("input:radio[name=q1]").click(function() {
      $("#t1").css("background-color", "yellow");
     $('#t1').html($(this).val());
  })
});
</script>

Output of one Question With Answer Quiz

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

Model 2 : Quiz code for blogger or website (MCQ Questions Test)

HTML code for MCQ Quiz code for blogger or website

See the following code you just copy that

 
  <link href="https://sharecodepoint.in/sharecodepoint-website-data/quizze-files/sharecodepoint.css" rel="stylesheet" type="text/css" />
<script src="https://sharecodepoint.in/sharecodepoint-website-data/quizze-files/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$('label').click(function() {

$('label').removeClass('worngans');

$(this).addClass('worngans');

});

});

</script>


<div class="scp-quizzes-main">

  <div class="scp-quizzes-data">
 
    <h2>Q1. What is ROM?</h2> <br />

     <input name="question1" type="radio" />

     <label>A. Random Only Memory </label><br />

     <input id="Q1" name="question1" type="radio" />

     <label for="Q1">B. Read Only memory</label><br />

     <input name="question1" type="radio" />

     <label>C. Random another memory</label> <br />

     <input name="question1" type="radio" />

     <label>D. Read another memory</label> 

  </div>

   <div class="scp-quizzes-data">

    <h2>Q2. What is the Brain of a Computer?</h2><br />

       <input name="question2" type="radio" />

         <label>A. ALU</label><br />

         <input name="question2" type="radio" />

         <label>B. Chip</label><br />

         <input id="Q2" name="question2" type="radio" />

         <label for="Q2">C. CPU</label> <br />

         <input name="question2" type="radio" />

         <label>D. RAM</label> 

     </div>


  <div class="scp-quizzes-data">

   <h2>Q3. What is the Brain of a human?</h2> <br />

     <input name="question3" type="radio" />

     <label>A. secibrum</label><br />

      <input name="question3" type="radio" />

       <label>B. cerebelam</label><br />

       <input id="Q3" name="question3" type="radio" />

        <label for="Q3">C. pitutary</label> <br />

        <input name="question3" type="radio" />

        <label>D. All</label> 


   </div>
 </div>

In the above example we observe

Observation 1. <div class="scp-quizzes-main">

Above code use only one time for entire all questions, this class code are pre-defined., finally end with </div>

Observation 2: <div class="scp-quizzes-data">

Above code use every question you start and end with </div>

Observation 3: <input id="Q1" name="question1" type="radio" />

<label for="Q1">B. Read Only memory</label><br /

In the above code shows that among option A/B/C/D/E one option is Correct answer reaming options wrong so Right option one only use <input id="" ..> and <label for=" " > and all wrong answers no use id and for properties.

Note: for <input id ="name"..> and <label for="name"> , Here name should be same on that question, use any name but every question has unique name should maintain.

The output of above code as

From the above output shows Right answers gives Green color , Wrong answers click shows Red color.

Model 3: Free Online Exam Test Script with Marks Score for blogger or any website

Free online mock test html code useful to any blog developers like blogspot users and also useful to any website, because this script contains HTML code and JavaScript code only, it suitable to all websites. This script contains normal html tags and JavaScript business logic. So easy to add in your website also.

Features of Free Online Exam Test Script for blogger or any website

Immediate check answer whether it is wrong selection or right selection.
After select one answer for every question immediate display one popup dialog box to display information as its correct or wrong selection and what right answer and any message to that question is possible.
At finally have one Check Score button will be there, if click one that button, get how many score you got it.
Finally gives user messages as well done, Good, work hard based on marks secured points.
One more advantage for this code as if you select one radio button, next cannot change, first attempt final for that question, then display message as -"you already attempt this question"

HTML code for Free Online Exam Test Script

see below code as html add at body of your website or blogger.

<h2><u>MS Power Point Online Exam</u></h2>
<form>
<div align="justify">
<b>1.What are file formats supports for Power point show?</b></div>
A.<input onclick="CheckAns(1, this.value)" type="radio" value="A" />.jpg<br />
B.<input onclick="CheckAns(1, this.value)" type="radio" value="B" />.gif<br />
C.<input onclick="CheckAns(1, this.value)" type="radio" value="C" />.wav<br />
D.<input onclick="CheckAns(1, this.value)" type="radio" value="D" />All of above<br />
E.<input onclick="CheckAns(1, this.value)" type="radio" value="E" />None of these<br />
<br />
<div align="justify">
<b>2.Which of the following options does not exist in a slide layout?</b></div>
A.<input onclick="CheckAns(2, this.value)" type="radio" value="A" />Titles<br />
B.<input onclick="CheckAns(2, this.value)" type="radio" value="B" />Lists<br />
C.<input onclick="CheckAns(2, this.value)" type="radio" value="C" />Charts<br />
D.<input onclick="CheckAns(2, this.value)" type="radio" value="D" />Animations<br />
E.<input onclick="CheckAns(2, this.value)" type="radio" value="E" />Pictures<br />
<br />
<div align="justify">
<b>3.In slide layout panel how many layouts are available for text layout by default?</b></div>
A.<input onclick="CheckAns(3, this.value)" type="radio" value="A" />3<br />
B.<input onclick="CheckAns(3, this.value)" type="radio" value="B" />4<br />
C.<input onclick="CheckAns(3, this.value)" type="radio" value="C" />5<br />
D.<input onclick="CheckAns(3, this.value)" type="radio" value="D" />7<br />
E.<input onclick="CheckAns(3, this.value)" type="radio" value="E" />10<br />
<br />

<left>
<input onclick="Test_result()" type="button" value="Check Score" />
</left>
<br />
</form>

You observe above code contains 3 Questions, if you need more number of questions easy to add like above

JavaScript code for Free Online Exam Test Script

see below code

  
<link href='https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.15.1/sweetalert2.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.15.1/sweetalert2.all.js' type='text/javascript'></script>
<script language="JavaScript">
 
var ans = new Array
var exp= new Array
var done = new Array
var score = 0
var tot_ques=3;
ans[1]='D';
exp[1]='MS power point supports .gif, .jpg, and .wav files';
ans[2]='D';
exp[2]='Basically Animation not supported';
ans[3]='B';
exp[3]='In MS Powerpoint 2003 and earlier versions, there are 4 Layouts are available by default for text layout.';

function CheckAns(question, answer) {
        if (answer != ans[question]) {
                if (!done[question]) {
                       done[question] = -1;
                       swal({
  title: 'You got it wrong!',
  type: 'error',
  html:
    'Right answer is: <span style="color:#F8BB86">'+ ans[question] + '</span> <br><b><u>Info:</u></b> ' + exp[question] + '.',
  showCloseButton: true,
  showCancelButton: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> OK!',
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>'
})
                       }
               else {
                       swal("Sorry!", "You have already attempted this question!", "error");
                       }
               }
       else {
               if (!done[question]) {
                       done[question] = -1;
                       score++;
                                           swal({
  title: 'Well done!',
  type: 'success',
  html:
    'Right answer: <span style="color:#F8BB86">'+ ans[question] + '</span> <br><b><u>Info:</u></b> ' + exp[question] + '.',
  showCloseButton: true,
  showCancelButton: false,
  confirmButtonText:
    '<i class="fa fa-thumbs-up"></i> OK!',
  cancelButtonText:
    '<i class="fa fa-thumbs-down"></i>'
})
                       }
               else {
                      swal("Sorry!", "You have already attempted this question!", "error");
                       }
               }
}
function Test_result() {
        if (score == tot_ques) {
                swal("Outstanding!", "You have scored 100%!\n Thank you for visiting us. Hope you have enjoyed it.\n Visit again for more quizzes updated regularly", "success");
                }
else if (score >=2) {
swal("Good!", "You have scored " + score + " out of " + tot_ques + "\n Thank you for visiting us. Hope you have enjoyed it. \n Visit again for more quizzes updated regularly", "success");                

                }
        else if (score <=1) {
swal("Work Hard!", "You have scored " + score + " out of " + tot_ques + "\n Thank you for visiting us. Hope you have enjoyed it. \n Visit again for more quizzes updated regularly", "success");                

                }
}

</script>

See in the above code , the red color indicates

var tot_ques=3;

From the above line , you can change total Questions given in this page

next, you can change: these 2 lines else if (score >=2) and if (score <=1)

of your requirements for the score point of view.

Output of the above model check it

MS Power Point Online Exam

MCQ Quiz Script FAQs

Q: How many Questions added in one page ?

A: There is no limit, but you can add in model 1, use n number of questions with n number of jQuery code, in model 2 have no jQuery so use more number of questions.

Q: How to immediate check right or wrong question?

A: Both model 1 , model 2 and model 3 MCQ Quiz scripts , have immediate check right or wrong questions click message, in model 1 shows message display (Correct/Wrong answer) , in model 2 shows green color gives correct answer meaning , where as red color shows wrong answer selection

Q: How to get score ?

A: This facility available in model 3

Q: Give online Demo models for Quiz scripts?

A: See this link: Demo for model 1

Still have Question : Contact Me

Best We Want

Best Useful Information

Free Quiz code script for your blogger or website