<!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>
Post a Comment