How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz
ID: 3604546 • Letter: H
Question
How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of 20 questions ... How to use textbox, radio buttons, checkbox, and dropdown list to make up a quiz of 20 questions ONLY using JavaScript. No Jquery. When the quiz starts, the questions don't appear all at once, it will display one question at a time with a next button, until the last question with Submit button. Finally, when the quiz is finished, display the score and show all the input answers by the users whether correct or incorrect, then display the correct answers. If possible, make to button to allow users to take the quiz again.
Again: the 20 questions are a mixture of textbox, radio button, and dropdownlist type of questions. Not only radio button input type.
Explanation / Answer
<html>
<head>
<title>Online Quiz</title>
<script type="text/javascript">
function startQuiz(){
var name = document.getElementById("name").value;
var subject = document.getElementById("subject").value;
if(name==""){
alert("Please Enter Name");
}else if(subject==""){
alert("Please Select Subject");
}else{
document.getElementById("namediv").style.display="none";
document.getElementById("first1").style.display="block";
}
}
function showNext(val){
var question = "question"+val;
var question1 = document.getElementsByName(question);
var ischecked_method = false;
for ( var i = 0; i < question1.length; i++) {
if(question1[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method) {
alert("Please select "+question);
}else{
var n = parseInt(val)+1;
var newdiv = "first"+n;
var divid = "first"+val;
document.getElementById(divid).style.display="none";
document.getElementById(newdiv).style.display="block";
}
}
function result11(){
var question = "question5";
var question1 = document.getElementsByName(question);
var ischecked_method = false;
for ( var i = 0; i < question1.length; i++) {
if(question1[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method) {
alert("Please select "+question);
}else{
alert("Your score is "+ getScore() +" out of "+ tot);
var r = confirm("Do you want to take quiz again");
if (r == true) {
// txt = "You pressed OK!";
document.getElementById("first5").style.display="none";
var name = document.getElementById("name").value;
//var subject = document.getElementById("subject").value;
document.getElementById("quiz").reset();
document.getElementById("name").value = name;
document.getElementById("first1").style.display="block";
} else {
//txt = "You pressed Cancel!";
document.getElementById("first5").style.display="none";
document.getElementById("quiz").reset();
document.getElementById("namediv").style.display="block";
}
}
}
var answers = ["A","C","B","B","A"],
tot = answers.length;
function getCheckedValue( radioName ){
var radios = document.getElementsByName( radioName ); // Get radio group by-Name
for(var y=0; y<=radios.length; y++)
if(radios[y].checked) return radios[y].value; // return the checked value
}
function getScore(){
var score = 0;
for (var i=1; i<=tot; i++)
if(getCheckedValue("question"+i)===answers[i-1]) score += 1; // increment only
return score;
}
</script>
</head>
<body>
<form id="quiz">
<h2>Online Quiz</h2>
<div id="namediv">
Enter Your Name:<input type="text" id="name" /><br/><br/>
Select Subject:<select id="subject">
<option value="">Select</option>
<option value="Java script" selected>Java script</option>
</select>
<br/><br/>
<input type="checkbox" name="vehicle" checked value="Bike">I have a Knowledge on JavaScript<br>
<input type="checkbox" name="vehicle" value="Car">I have a Knowledge on Jquery<br/><br/>
<input type="button" name="startquiz" id="startquiz" value="startQuiz" />
</div>
<div id="first1">
<ul>
<li>
<h3>How many letters are there in "JS"?</h3>
<input type="radio" name="question1" value="A">2<br>
<input type="radio" name="question1" value="B">1<br>
<input type="radio" name="question1" value="C">3<br>
<input type="radio" name="question1" value="D">4<br>
</li>
</ul>
<input type="button" id="next1" name="next1" value="Next" />
</div>
<div id="first2">
<ul>
<li>
<h3>How many letters are there in "BMX"?</h3>
<input type="radio" name="question2" value="A">2<br>
<input type="radio" name="question2" value="B">1<br>
<input type="radio" name="question2" value="C">3<br>
<input type="radio" name="question2" value="D">4<br>
</li>
</ul>
<input type="button" id="next2" name="next2" value="Next" />
</div>
<div id="first3">
<ul>
<li>
<h3>How many letters are there in "A"?</h3>
<input type="radio" name="question3" value="A">2<br>
<input type="radio" name="question3" value="B">1<br>
<input type="radio" name="question3" value="C">3<br>
<input type="radio" name="question3" value="D">4<br>
</li>
</ul>
<input type="button" id="next3" name="next3" value="Next" />
</div>
<div id="first4">
<ul>
<li>
<h3>Inside which HTML element do we put the JavaScript?</h3>
<input type="radio" name="question4" value="A">scripting<br>
<input type="radio" name="question4" value="B">script<br>
<input type="radio" name="question4" value="C">javascript<br>
<input type="radio" name="question4" value="D">js<br>
</li>
</ul>
<input type="button" id="next4" name="next4" value="Next" />
</div>
<div id="first5">
<ul>
<li>
<h3>Where is the correct place to insert a JavaScript?</h3>
<input type="radio" name="question5" value="A">Both head and body section<br>
<input type="radio" name="question5" value="B">head<br>
<input type="radio" name="question5" value="C">body<br>
<input type="radio" name="question5" value="D">none of the above<br>
</li>
</ul>
<input type="button" id="result" name="result" value="Result" />
</div>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.