How to make Quiz using HTML, CSS, JS

How to make Quiz

Copy the code and add into your blog post.

Add your desired questions in it.

Here's the codes

<!--Quiz by theAShub-->
<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('wrongans'); $(this).addClass('wrongans'); }); });
</script>

<style>
.scp-quizzes-main{ width:100%; font-family:Verdana, Arial, Helvetica, sans-serif;}	 
.scp-quizzes-data{ 
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-radius:40px;
	border:1px solid #ddd;
	margin-bottom:10px;
	cursor:pointer;
}
input[type=radio] + label:hover{ border:1px solid #000000;}

input[type=radio]:checked + label { 
   border:3px 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;
}
.wrongans{border:3px solid #ed6f61 !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. Do you like theAShub?</h3><br/> 
<input name="question1" type="radio"/><label>1. Yes</label><br/> 
<input id="1" name="question1" type="radio"/><label for="1">2. Definitely yes</label><br/>
<input name="question1" type="radio"/><label>3. I do</label><br/> 
<input name="question1" type="radio"/><label>4. Why not, Yes I do</label>
</div>
			
<div class="scp-quizzes-data">
<h3>2. ?</h3><br/> 
<input id="2" name="question2" type="radio" /><label for="2">1.</label><br/> 
<input name="question2" type="radio"/><label>2.</label><br/> 
<input name="question2" type="radio"/><label>3.</label><br/>
<input name="question2" type="radio"/><label>4.</label>
</div>
								
<div class="scp-quizzes-data">
<h3>3. ?</h3> <br/> 
<input name="question3" type="radio"/><label>1.</label><br /> 
<input name="question3" type="radio"/><label>2.</label><br /> 
<input  id="3" name="question3" type="radio"/><label for="3">3.</label><br/> 
<input name="question3" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>4. ?</h3><br/> 
<input name="question4" type="radio"/><label>1.</label><br/> 
<input id="4" name="question4" type="radio"/><label for="4">2.</label><br/>
<input name="question4" type="radio"/><label>3.</label><br/> 
<input name="question4" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>5. ?</h3><br/> 
<input id="5" name="question5" type="radio"/><label for="5">1.</label><br/> 
<input name="question5" type="radio"/><label>2.</label><br/> 
<input name="question5" type="radio"/><label>3.</label><br/>
<input name="question5" type="radio"/><label>4.</label>
</div>


<div class="scp-quizzes-data">
<h3>6. ?</h3><br/> 
<input name="question6" type="radio"/><label>1.</label><br/> 
<input id="6" name="question6" type="radio"/><label for="6">2.</label><br/>
<input name="question6" type="radio"/><label>3.</label><br/> 
<input name="question6" type="radio"/><label>4.</label>
</div>


<div class="scp-quizzes-data">
<h3>7. ?</h3><br/> 
<input id="7" name="question7" type="radio"/><label for="7">1.</label><br/> 
<input name="question7" type="radio"/><label>2.</label><br/> 
<input name="question7" type="radio"/><label>3.</label><br/>
<input name="question7" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>8. ?</h3><br/> 
<input name="question8" type="radio"/><label>1.</label><br/> 
<input id="8" name="question8" type="radio"/><label for="8">2.</label><br/>
<input name="question8" type="radio"/><label>3.</label><br/> 
<input name="question8" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>9. ?</h3><br/> 
<input name="question9" type="radio"/><label>1.</label><br/> 
<input id="9" name="question9" type="radio"/><label for="9">2.</label><br/>
<input name="question9" type="radio"/><label>3.</label><br/> 
<input name="question9" type="radio"/><label>4.</label>
</div>
			
<div class="scp-quizzes-data">
<h3>10. ?</h3><br/> 
<input id="10" name="question10" type="radio"/><label for="10">1.</label><br/> 
<input name="question10" type="radio"/><label>2.</label><br/> 
<input name="question10" type="radio"/><label>3.</label><br/>
<input name="question10" type="radio"/><label>4.</label>
</div>
								
<div class="scp-quizzes-data">
<h3>11. ?</h3><br/> 
<input name="question11" type="radio"/><label>1.</label><br /> 
<input name="question11" type="radio"/><label>2.</label><br /> 
<input  id="11" name="question11" type="radio"/><label for="11">3.</label><br/> 
<input name="question11" type="radio" /><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>12. ?</h3><br/> 
<input name="question12" type="radio"/><label>1.</label><br/> 
<input id="12" name="question12" type="radio"/><label for="12">2.</label><br/>
<input name="question12" type="radio"/><label>3.</label><br/> 
<input name="question12" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>13. ?</h3><br/> 
<input id="13" name="question13" type="radio"/><label for="13">1.</label><br/> 
<input name="question13" type="radio"/><label>2.</label><br/> 
<input name="question13" type="radio"/><label>3.</label><br/>
<input name="question13" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>14. ?</h3><br/> 
<input name="question14" type="radio"/><label>1.</label><br/> 
<input id="14" name="question14" type="radio"/><label for="14">2.</label><br/>
<input name="question14" type="radio"/><label>3.</label><br/> 
<input name="question14" type="radio"/><label>4.</label>
</div>

<div class="scp-quizzes-data">
<h3>15. ?</h3><br/> 
<input name="question15" type="radio"/><label>1.</label><br/> 
<input id="15" name="question15" type="radio"/><label for="15">2.</label><br/>
<input name="question15" type="radio"/><label>3.</label><br/> 
<input name="question15" type="radio"/><label>4.</label>
</div>

<p style="text-align:center;font-size:10px">Powered by theAShub</p>

Thankyou,

---

Tutorials Point,

We appreciate your attention for this post and eagerly await your response. Thankyou