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