Question
In: Computer Science
Objective: Create a webpage with a simple quiz. Instructions: The webpage must contain at least ten...
Objective: Create a webpage with a simple quiz.
Instructions:
- The webpage must contain at least ten simple questions as a quiz.
- The user must be able to answer the questions in the input boxes and finally click on a Submit button to get a final score.
- The questions must be such a way that some answer formats must
cover all the following types:
- A number
- A string
- An expression (e.g. 2+3)
- If the user does not answer a question and try to submit the quiz, the webpage must display a note saying, "Answer question [number]." The [number] should be replaced with the question number which is unanswered.
- Once the user answers ALL the questions, and upon clicking the Submit button, the webpage must display a message saying, Your score is [score] out of 10. [score] must be replaced with the number of of correct responses.
Bonus: [10 points]
Use your imagination and creativity to improve the webpage for a better quiz format and user experience.
Notes:
- Your HTML/CSS and JS documents must be properly commented.
- Use appropriate color combinations so that the user can read the page clearly.
- You can come up with your own quiz questions, however, make sure that the topics/questions are general.
Solutions
Expert Solution
<!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>
venereology answered 10 months agoRelated Solutions
Write a simple javascript program using express and node.js to create a simple webpage that can...
JavaScript Create a welcome message on your webpage using three variables At least two of the...
Create an ANOVA and regresion problem, must contain steps and answers.
In a wood drier, the hot air must contain at least 2% by wt. water to...
Create java Class with name Conversion. Instructions for Conversion class: The Conversion class will contain methods...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML...
PHP Question - Subject: PHP File Handling and Uploads INSTRUCTIONS: Objective: • Create a sticky HTML...
A person has to create a code. The code must contain exactly 6 letters. The first...
A person has to create a code. The code must contain exactly 7 letters. The first...
Instructions: Write a thread that discusses the situation. Your thread must consist of at least 3...
- The type of listening that involves trying to understand a situation from the speaker’s perspective is...
- Based on the loanable funds theory, explain how each of the following changes should impact interest...
- research paper: each student will be responsible for writing an argumentative research paper discussion a topic...
- In java based on the classes provided finish the program per the requirements: ----------------------------------------------Class1 package cardgame;...
- Identify two cultures and analyze the nurturing process within each culture and discuss the impact the...
- Digital security is an increasing concern is the Internet age. In order to protect sensitive information...
- the challenges experienced by companies considering full application of customer retention strategy in the face of...