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:

  1. The webpage must contain at least ten simple questions as a quiz.
  2. 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.
  3. The questions must be such a way that some answer formats must cover all the following types:
    1. A number
    2. A string
    3. An expression (e.g. 2+3)
  4. 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.
  5. 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:

  1. Your HTML/CSS and JS documents must be properly commented.
  2. Use appropriate color combinations so that the user can read the page clearly.
  3. 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 11 months ago
Next > < Previous

Related Solutions

Write a simple javascript program using express and node.js to create a simple webpage that can...
Write a simple javascript program using express and node.js to create a simple webpage that can lead to other pages within the program. if possible, Comment everything out so I could understand how every things works.  But basically, server should be hosted on localhost:8000 and should have a simple starting page. Maybe a welcome message, with at least two "links" that goes to a "homepage" and then a "exit" page.
JavaScript Create a welcome message on your webpage using three variables At least two of the...
JavaScript Create a welcome message on your webpage using three variables At least two of the variables should be concatenated together Use document.write to add a statement about what is your favorite past time? Format the HTML document appropriately with a title, and the correct HTML structure to hold the JavaScript Create an array to share what your favorite color is. The array must have at least three values and be called via the index value Correctly link the JavaScript...
Create an ANOVA and regresion problem, must contain steps and answers.
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...
In a wood drier, the hot air must contain at least 2% by wt. water to prevent the wood from drying too rapidly and splitting or warping. The original fresh air feed contains 1% by wt. water. Wood is dried from 20% to 5% by wt. water. The wet air leaving the dried contains 4% by wt. water. Calculate the amount of wet air that must be returned to the drier if 1000 kg/hr of wet wood is dried.
Create java Class with name Conversion. Instructions for Conversion class: The Conversion class will contain methods...
Create java Class with name Conversion. Instructions for Conversion class: The Conversion class will contain methods designed to perform simple conversions. Specifically, you will be writing methods to convert temperature between Fahrenheit and Celsius and length between meters and inches and practicing overloading methods. See the API document for the Conversion class for a list of the methods you will write. Also, because all of the methods of the Conversion class will be static, you should ensure that it is...
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 form. • Submit form for processing. • Sanitize and validate form data. • Upload a profile image. • Add a record to a text file. • Display form results with content from another text file and the uploaded image. Description: This assignment deals with file management. It requires the use of 3 new files and 1 new directory. You will create the new file-uploads.php...
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 form. • Submit form for processing. • Sanitize and validate form data. • Upload a profile image. • Add a record to a text file. • Display form results with content from another text file and the uploaded image. Description: This assignment deals with file management. It requires the use of 3 new files and 1 new directory. You will create the new file-uploads.php...
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 6 letters. The first letter must be a vowel that is not an E or I. The second letter must be either a J, K, or L. The third letter must be a consonant that is not a G or R. The fourth letter must be a vowel that is not an I. The fifth letter must be a consonant. If repetition of letters are not allowed, how...
A person has to create a code. The code must contain exactly 7 letters. The first...
A person has to create a code. The code must contain exactly 7 letters. The first letter must either a N, P, R, or T. The second letter must be a vowel that is not I, O, or U. The third letter must be a consonant that is not a D, F, H, or J. The fourth letter must be a vowel that is not an O or U. The fifth letter must be a consonant that is not a...
Here, we will create a structure that resembles a university’s profile. The structure must contain 5...
Here, we will create a structure that resembles a university’s profile. The structure must contain 5 members: - One member for number of undergraduate students - One member for number of graduate students - One member for number of classrooms - One member for the name of the university (an array) - One member for the term (fall, summer or spring; also an array) Once you define a structure with these members (don’t forget to give your arrays a default...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT