In: Computer Science
Objective: Create a webpage with a simple quiz.
Instructions:
Bonus: [10 points]
Use your imagination and creativity to improve the webpage for a better quiz format and user experience.
Notes:
<!DOCTYPE html>
<html>
<head>
<title>Quiz!!</title>
</head>
<body>
<center>
<!-- call javascript function
upon submitting the forms -->
<form
onsubmit="result()">
<!-- questions from 1 to 10
-->
<label>1.
what is 1+2= ?</label><br><input type="number"
name="one"><br><br>
<label>2.
what is the full form of WHO ?</label><br><input
type="text" name="two"><br><br>
<label>3.Ronaldo plays which game
?</label><br><input type="text"
name="three"><br><br>
<label>4.How many rings are there in olympics logo
?</label><br><input type="number"
name="four"><br><br>
<label>5.Express the following sentence in mathmatical form
"subtract 2 from 5"</label><br><input type="text"
name="five"><br><br>
<label>6.Covid 19 orginated in which country
?</label><br><input type="text"
name="six"><br><br>
<label>7.How many continents are there on planet
earth?</label><br><input type="number"
name="seven"><br><br>
<label>8.who is the CEO of tesla
?</label><br><input type="text"
name="eight"><br><br>
<label>9.What is the question number of this question
?</label><br><input type="number"
name="nine"><br><br>
<label>10.This is the question number 10 (True/False)
?</label><br><input type="text"
name="ten"><br><br>
<!-- submit
button -->
<input
type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
// function to check whether question is answered or
not
function checkempty(quet) {
if(quet==null || quet == ""){
return
true;
}
}
// function to get and validate answer
function result() {
// getting answers for questions
submitted
var q1 =
document.getElementsByName("one")[0].value;
// conveting all lower cases
q1 = q1.toLowerCase();
var q2 =
document.getElementsByName("two")[0].value;
var q3 =
document.getElementsByName('three')[0].value;
var q4 =
document.getElementsByName('four')[0].value;
q4 = q4.toLowerCase();
var q5 =
document.getElementsByName('five')[0].value;
var q6 =
document.getElementsByName('six')[0].value;
var q7 =
document.getElementsByName('seven')[0].value;
q7 = q7.toLowerCase();
var q8 =
document.getElementsByName('eight')[0].value;
var q9 =
document.getElementsByName('nine')[0].value;
q9 = q9.toLowerCase();
var q10 =
document.getElementsByName('ten')[0].value;
var op="";
// making answers into array
questions =
[q1,q2,q3,q4,q5,q6,q7,q8,q9,q10];
// calling to check whether answer
is empty
for(var
i=0;i<questions.length;i++){
if(checkempty(questions[i])){
var temp=i+1;
op=op+""+temp+",";
}
}
var result = 0;
var total =10;
var answers = [3,"world health
organisation","football",5,"5-2","china",7,"elon
musk",9,"true"]
if(checkempty(op)){
// validating
answers
for(var
i=0;i<questions.length;i++){
if(questions[i]==answers[i]){
result+=1;
}
}
// output
results
alert("Your
score is "+result+" out of 10");
}else{
alert( "Answer
questions "+op);
}
}
</script>
</center>
</body>
</html>