How to make Quiz using HTML, CSS, JS - Gujarat Updates

750x300

con1

h2

h1

Wednesday, 11 January 2023

How to make Quiz using HTML, CSS, JS

How to make Quiz using HTML, CSS, JS


How to make Quiz using HTML, CSS, JS by thAShub
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,

No comments:

Post a Comment

Thank you for interact with us. We very much appreciate the time you spent for reading blog. Waiting for your feedback !