Make a Quiz By Using Simple Java Script Code


<!doctype html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.scp-quizzes-main{ width:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}     
.scp-quizzes-data{
box-shadow: 0px 1px 3px -1px #DCDCDC;
padding:10px;
margin-top:15px;
}
pre{ border:2px solid #f5f5f5; padding:10px; overflow-x:scroll;}
 input[type=radio] {
    display:none;
}
input[type=radio] + label {
    display:inline-block;
    width:95%;
    padding:10px;
    border:1px solid #ddd;
    margin-bottom:10px;
    cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}
input[type=radio]:checked + label {
   background-image: none;
   background-color:#0C0;
    color:#fff;
    border:1px solid #0C0 !important;
    -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.worngans{ background-color:#F36;color:#fff; border:1px solid #F36 !important;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
</style>
   
   
<div class="scp-quizzes-main">
<div class="scp-quizzes-data">
  <h3>1. What is the capital of bangladesh ?</h3>
<br/>
<input type="radio" name="question1" /><label>1. khulna</label><br/>
<input type="radio" name="question1" /><label>2. rajshahi</label><br/>
<input type="radio" id="dhaka" name="question1" /><label for="dhaka">3.dhaka</label> <br/>
<input type="radio" name="question1" /><label>4. pubna</label>
 </div>
 
 <div class="scp-quizzes-data">
  <h3>2. what is your old ?</h3>
<br/>
<input type="radio" name="question2" /><label>1. 6</label><br/>
<input type="radio" name="question2" /><label>2. 12</label><br/>
<input type="radio" name="question2" id="25" /><label for="25">3. 25</label> <br/>
<input type="radio" name="question2" /><label>4. 35</label>
 </div>

<div class="scp-quizzes-data">
  <h3>3. what is your old ?</h3>
<br/>
<input type="radio" name="question3" /><label>1. 6</label><br/>
<input type="radio" name="question3" /><label>2. 12</label><br/>
<input type="radio" name="question3" id="correct3" /><label for="correct3">3. 25</label> <br/>
<input type="radio" name="question3" /><label>4. 35</label>
 </div>
 
 <div class="scp-quizzes-data">
  <h3>4. what is your old ?</h3>
<br/>
<input type="radio" name="question4" /><label>1. 6</label><br/>
<input type="radio" name="question4" /><label>2. 12</label><br/>
<input type="radio" name="question4" id="correct4" /><label for="correct4">3. 25</label> <br/>
<input type="radio" name="question4" /><label>4. 35</label>
 </div>

</div>


     <script type="text/javascript">
    $(document).ready(function() {
    $('label').click(function() {
        $('label').removeClass('worngans');
        $(this).addClass('worngans');
    });
});
    </script>
</!doctype>

Live Preview