Quiz Create a 5 question quiz about a topic of your choice A

Quiz

Create a 5 question quiz about a topic of your choice. Ask for the user’s name (use an input field) and use drop downs, checkboxes, and radio buttons for the quiz. You must use each of those three form element types at least once.

Your assignment should have three total pages: The quiz page, the results page, and a history page.

The quiz page will display the 5 questions for the quiz (use an HTML form).

The results page will display the results of the quiz – which questions were correct/incorrect and the user’s score. This page will also save the results to a text file. You should save the username, their answers to each question, their overall score, and a timestamp of when the quiz was taken.

The history page will display all of the past results by reading the saved results text file.

You do not need to do any form validation for this assignment. If a question is left blank, count it as wrong. For the name field, use HTML required attribute to ensure the user inputs something.

**You can use PHP**

Solution

<p class=\"question\">1. What is the answer to this question?</p>
<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">Answer 4</label><br/>
</ul>

<p class=\"question\">2. What is the answer to this question?</p>
<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">Answer 4</label><br/>
</ul>

<p class=\"question\">3. What is the answer to this question?</p>
<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">Answer 4</label><br/>
</ul>

<p class=\"question\">4. What is the answer to this question?</p>
<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">Answer 4</label><br/>
</ul>

<p class=\"question\">5. What is the answer to this question?</p>
<ul class=\"answers\">
<input type=\"radio\" name=\"q1\" value=\"a\" id=\"q1a\"><label for=\"q1a\">Answer 1</label><br/>
<input type=\"radio\" name=\"q1\" value=\"b\" id=\"q1b\"><label for=\"q1b\">Answer 2</label><br/>
<input type=\"radio\" name=\"q1\" value=\"c\" id=\"q1c\"><label for=\"q1c\">Answer 3</label><br/>
<input type=\"radio\" name=\"q1\" value=\"d\" id=\"q1d\"><label for=\"q1d\">Answer 4</label><br/>
</ul>

This javascript code is for checking the answers.

var cat1 = ($(\"input[@name=q1]:checked\").val() != \"a\");

You can also use this CSS code for choosing a good style and make your questions and asnwers page look good.

ist-style: upper-alpha;
}

label {
margin-left: 0.5em;
cursor: pointer;
}

#results {
background: #dddada;
color: 000000;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#results:hover {
background: #3d91b8;
color: #ffffff;
padding: 3px;
text-align: center;
width: 200px;
cursor: pointer;
border: 1px solid gray;
}

#categorylist {
margin-top: 6px;
display: none;
}

#category1, #category2, #category3, #category4, #category5, #category6, #category7, #category8, #category9, #category10, #category11 {
display: none;
}

#closing {
display: none;
font-style: italic;
}
var cat2 = ($(\"input[@name=q2]:checked\").val() != \"b\");