How to Create A Online Quiz Web Application Using HTML, CSS & JavaScript
byManoj Kumawat•
0
In this tutorial, I will create a simple quiz web application using HTML, CSS & JavaScript. You can use this web application with your Blogger, WordPress and with your custom website. If you are new to programming then you can also understand very easily and don't skip a single line for better understanding.
Designing Front end using HTML and CSS
First of all, I will design the front part of the quiz application using HTML and CSS. Here I will use the Bootstrap front end framework to design HTML, CSS.
Step 1: Import the Bootstrap CDNin between <head> </head> tag.
<div class="card"> <div class="card-header" style="text-align: center; background-color: aquamarine; font-weight: bold;"> Quiz App </div> <div class="card-body"> <form name="test"> <div class="q"> <label for="">Q.1 </label><br> <blockquote> <input type="radio" name="q1" value="Logical, port"> Logical, port<br> <input type="radio" name="q1" value="Logical, network"> Logical, network<br> <input type="radio" name="q1" value="Logical, physical"> Logical, physical<br> <input type="radio" name="q1" value="Physical, logical"> Physical, logical<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.2 </label><br> <blockquote> <input type="radio" name="q2" value="800"> 800 bits<br> <input type="radio" name="q2" value="1000"> 1000 bits<br> <input type="radio" name="q2" value="20000"> 20000 bits<br> <input type="radio" name="q2" value="10000"> 10000 bits<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.3 </label><br> <blockquote> <input type="radio" name="q3" value="Transport layer"> Transport layer<br> <input type="radio" name="q3" value="Network layer"> Network layer<br> <input type="radio" name="q3" value="Network layer"> Data link layer<br> <input type="radio" name="q3" value="Physical layer"> Physical layer<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.4 </label><br> <blockquote> <input type="radio" name="q4" value="Data link layer"> Data link layer<br> <input type="radio" name="q4" value="Transport layer"> Transport layer<br> <input type="radio" name="q4" value="Network layer"> Network layer<br> <input type="radio" name="q4" value="None of these"> None of these<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.5 </label><br> <blockquote> <input type="radio" name="q5" value="10101011"> 10101011<br> <input type="radio" name="q5" value="10101010"> 10101010<br> <input type="radio" name="q5" value="01001010"> 01001010<br> <input type="radio" name="q5" value="10010010"> 10010010<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.6 </label><br> <blockquote> <input type="radio" name="q6" value="Combines the features of both bridges & routers"> Combines the features of both bridges & routers<br> <input type="radio" name="q6" value="It is a type of bridge"> It is a type of bridge<br> <input type="radio" name="q6" value="It is a type of router"> It is a type of router<br> <input type="radio" name="q6" value="None of the above"> None of the above<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.7 </label><br> <blockquote> <input type="radio" name="q7" value="Number of bits transmitted per unit time"> Number of bits transmitted per unit time<br> <input type="radio" name="q7" value="Number of signal unit per second to represent bits"> Number of signal unit per second to represent bits<br> <input type="radio" name="q7" value="Number of pulse transmitted per unit time"> Number of pulse transmitted per unit time<br> <input type="radio" name="q7" value="Number of bits received per unit time"> Number of bits received per unit time<br> </blockquote> </div><hr> <div class="q"> <label for="">Q.8 </label><br> <blockquote> <input type="radio" name="q8" value="Process number"> Process number<br> <input type="radio" name="q8" value="Computer address"> Computer address<br> <input type="radio" name="q8" value="Both A and B"> Both A and B<br> <input type="radio" name="q8" value="None of the above"> None of the above<br> </blockquote> </div><hr> <hr> <input class="btn btn-primary" type="button" value="Grade Me" onClick="getScore(this.form);"> <hr> Number of score out of 8 = <input type= text size 15 name= "mark"> <br> <br> Score in percentage = <input type=text size=15 name="percentage"><br> </form> <form action="" method="post" onsubmit="" name="Form"></form> </div> </div>
Result Show Using JavaScript
<script>
var numQues = 8;
var numChoi = 4;
var answers = new Array(15);
answers[0] = "Logical, physical";
answers[1] = "20000";
answers[2] = "Transport layer";
answers[3] = "None of these";
answers[4] = "10101010";
answers[5] = "Combines the features of both bridges & routers";
answers[6] = "Number of signal unit per second to represent bits"; answer[7] = "Process number";
function getScore(form) {
var score = 0;
var currElt;
var currSelection;
for (i=0; i<numQues; i++) {
currElt = i*numChoi;
answered=false;
for (j=0; j<numChoi; j++) {
currSel = form.elements[currElt + j];
if (currSel.checked) {
answered=true;
if (currSel.value == answers[i]) {
score++;
break;
}
}
}
if (answered ===false){alert("Do answer all the questions, Please") ;return false;}
}
var scoreper = Math.round(score/numQues*100);
form.percentage.value = scoreper + "%";
form.mark.value=score;
}
</script>
Congratulation! Your web-based quiz application is ready to use now. Thanks for reading this article.
