Create a Web page named quiz.html that can be used to conduct multiple choice qu
ID: 3665711 • Letter: C
Question
Create a Web page named quiz.html that can be used to conduct multiple choice quizzes over the Web. The page should contain at least 10 potential quiz questions, each with three possible answers (A, B, and C). When loaded, the page should first prompt the person for the number of desired questions in the quiz, with a default of 3 questions. The page should then randomly select questions and prompt the user with each question and possible answers. Each answer entered by the user should be compared with the correct answer, and the result displayed within the page (either CORRECT or INCORRECT). At the end, the number and percentage of correct guesses should be displayed in the page.
Your page must be clear and understandable to the user, and support the following:
It must be straightforward to add or remove potential questions, with a minimal amount of editing.
It must display each question and all three potential answers as part of the prompt, and make it clear to the user how their answer should be formatted.
The question, user's answer, and correctness of that answer must be displayed in the page. In the case of an incorrect answer, the correct answer must be identified.
The number of correct answers, total number of questions, and correctness percentage must be displayed in a readable format.
Ensure that no question appears more than once in a specific quiz. Of course, this requires enough potential questions to complete the quiz.
For example, the page might contain the following as a result of a 5-question quiz:
Explanation / Answer
1) Include these codes in the body of the html tages
<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="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>
<div id="results">
Show me the answers!
</div>
<div id="category1">
<p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>
2) Inorder to make this quiz work Javasript is needed The file is named quiz-1.js. It's not important for you to understand how the javascript code is working. All you really need to know is that the correct answers are entered in the lines that look like this:
int mark = 0;
var cat1 = ($("input[@name=q1]:checked").val() != "a");
if ($("input[@name=q1]:checked").val() != "a")
mark++
var cat2 = ($("input[@name=q2]:checked").val() != "b");
if ($("input[@name=q2]:checked").val() != "b")
mark++
int percentage = mark* 10;
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/quiz-1.js"></script>
4) Finally, you'll need to add a little bit of code to your style.css file in order to formate your questions and answers, and to hide the content that appears after the quiz is finished.
.answers li {
list-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;
}