Question
Project 1For this project, you will create a 10 question quiz on the topic of your choice (e.g., a classyou've taken, your favorite band, yourself,
Project 1For this project, you will create a 10 question quiz on the topic of your choice (e.g., a classyou've taken, your favorite band, yourself, etc...) using HTML, CSS, and PHP. You will create adirectory called project1 inside of your public_html/3680_S21 directory, which should containthe following files: project1.php, project1.css, and answers.csv.
Requirements
With HTML, you will create the following:
A header across the top of the page with the title of the quiz
An HTML form of method POST containing the following:
A text input box for the user's first name
A text input box for the user's last name
5 true/false questions (use radios)
5 multiple choice questions (use radios or checkboxes)
A submit button to submit the quiz for validation and grading
With PHP, you will do the following:
Check if the form has been submitted. Once it has, perform the following validation:
Check that the user has entered a first name. If they left the field empty or it contains anything other than letters, give the box a red border and display an error message. If it is not empty, sanitize the data that they have entered. Make sure to retain values.
Check that the user has entered a last name. If they left the field empty or it contains anything other than letters, give the box a red border and display an error message. If it is not empty, sanitize the data that they have entered. Make sure to retain values.
Check that the user has answered each question. If they left any question unanswered, make the question text red and display an error message letting them know which question(s) they still need to answer. Sanitize each answer that they have submitted (if you want more security). Make sure to retain values.
Once you have ensured that all fields are nonempty and valid, open your file containing all of the correct answers and use it to grade your quiz. You should keep track of theuser's score and which questions they got correct/incorrect.
After you've finished grading, hide the content of the form and display the user's results .This should include their first and last name, score as a percentage, and which questions they got correct/incorrect.
With CSS, you must do the following:
Add a background color/image for the body.
Set the font family for the body.
Note: You may also use a CSS framework (e.g., Bootstrap, UIkit, Materialize).NotesThe format of answers.csv is up to you. I would recommend putting the answer to each question on a new line. If the answer has multiple questions, separate the answers by commas. Here is an example:
T
F
T
F
T
A
A,C
B
C,D
A,B,C
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started