An HTML5 Quiz - Exercise

Contact Us or call 1-877-932-8228
An HTML5 Quiz - Exercise

An HTML5 Quiz

Duration: 30 to 45 minutes.

In this exercise, you will create an HTML5 quiz that validates form entries and reports the percentage of both the valid (but not necessarily correct) answers and the percentage of correct answers.

  1. Open html5-forms/Exercises/quiz.html in your editor.
  2. Make the following changes to the form:
    1. Add placeholders to all questions.
    2. Make all questions required.
    3. Question 1 should only accept valid colors.
      1. You'll need to use a browser that supports the color input type (i.e. FireFox, Google Chrome). For a complete list of supporting browsers, go to http://caniuse.com/#feat=input-color.
    4. Question 2 should only accept integers greater than or equal to 20.
    5. Question 3 should only accept the pattern shown in the footnote below (don't look if you want to figure out the pattern yourself).
    6. Question 4 should only accept valid dates.
    7. Question 5 should only accept valid URLs and should provide a list of common search engines to choose from, but should not limit the answer to those shown in the list.
  3. At the bottom of the form:
    1. Add a bar showing the percentage of valid (but not necessarily correct) answers answered. Give it an id of "quiz-progress".
    2. Add a bar showing the percentage of correct answers answered. Give it an id of "quiz-success".
  4. Finish the updateMeasures() function so that it correctly updates the two bars added above on every form change. Hint: one way to do this is to loop through the input fields stored in the questions variables.

Code Sample:

html5-forms/Exercises/quiz.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Quiz</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
	if (window.addEventListener) {
		window.addEventListener("load", addLoadEvents, false);
	}
	function addLoadEvents() {
		document.getElementById('quiz').addEventListener("change",function() {
			updateMeasures();
		}, false);
	}
	
	function updateMeasures() {
		var questions = document.getElementsByTagName("input");
		var numQuestions = questions.length;
		var numAnswers = 0;
		var numCorrectAnswers = 0;
		var answers = ["orange","23","99+9/9","1963-11-22","http://www.google.com"];
		//finish this function
	}
</script>
</head>
<body>
<h1>Quiz</h1>
<form method="post" action="process.xyz" id="quiz">
	<ol>
		<li>
			<label for="q1">What color do you get when you mix red and yellow?</label>
			<input type="text" name="q1" id="q1">
		</li>
		<li>
			<label for="q2">What is the first primary number greater than 20?</label>
			<input type="text" name="q2" id="q2">
		</li>
		<li>
			<label for="q3">Using exactly four 9s and no other digits, write an equation which evaluates to 100. You may use addition (+), subtraction (-), multiplication (*), and division (/). Do not include spaces.</label>
			<input type="text" name="q3" id="q3">
		</li>
		<li>
			<label for="q4">What date was John F. Kennedy assassinated?</label>
			<input type="text" name="q4" id="q4">
		</li>
		<li>
			<label for="q5">What is the world's most popular search engine?</label>
			<input type="text" name="q5" id="q5">
		</li>
	</ol>
	<!--add bar showing percentage of valid (but not necessarily correct) answers-->
	<!--add bar showing percentage of correct answers-->
</form>
</body>
</html>

Challenge

  1. Add code so that the result of the formula the user enters in question 3 is displayed next to the input field like this:
  2. Fix the two bars at the bottom of the form so that they present as follows in Opera and other browsers that do not support the progress and meter elements: You'll need to change both your HTML and JavaScript to make this work.

Solution:

html5-forms/Solutions/quiz.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	function updateMeasures() {
		var questions = document.getElementsByTagName("input");
		var numQuestions = questions.length;
		var numAnswers = 0;
		var numCorrectAnswers = 0;
		var answers = ["orange","23","99+9/9","1963-11-22","http://www.google.com"];
		for (var i=0; i<numQuestions; i++) {
			if (questions[i].validity.valid && questions[i].value.length>0) {
				numAnswers++;
			}
			if (questions[i].value==answers[i]) {
				numCorrectAnswers++;	
			}
		}
		var progress=Math.round(numAnswers/numQuestions * 100);
		var score=Math.round(numCorrectAnswers/numQuestions * 100);
		document.getElementById("quiz-progress").value=progress;
		document.getElementById("quiz-success").value=score;
	}
</script>
</head>
<body>
<h1>Quiz</h1>
<form method="post" action="process.xyz" id="quiz">
	<ol>
		<li>
			<label for="q1">What color do you get when you mix red and yellow?</label>
			<input type="color" name="q1" id="q1" required placeholder="Enter Color">
		</li>
		<li>
			<label for="q2">What is the first primary number greater than 20?</label>
			<input type="number" name="q2" id="q2" min="20" step="1" required placeholder="Enter Number">
		</li>
		<li>
			<label for="q3">Using exactly four 9s and no other digits, write an equation which evaluates to 100. You may use addition (+), subtraction (-), multiplication (*), and division (/). Do not include spaces.</label>
			<input type="text" name="q3" id="q3" required placeholder="Enter Equation" pattern="[9\+\-\*/]{4,7}">
		</li>
		<li>
			<label for="q4">What date was John F. Kennedy assassinated?</label>
			<input type="date" name="q4" id="q4" required placeholder="Enter Date">
		</li>
		<li>
			<label for="q5">What is the world's most popular search engine?</label>
			<input type="url" name="q5" id="q5" required placeholder="Enter URL" list="q5list">
			<datalist id="q5list">
				<option value="http://www.yahoo.com">
				<option value="http://www.google.com">
				<option value="http://www.excite.com">
				<option value="http://www.dogpile.com">
			</datalist>
		</li>
	</ol>
	<strong>Progress:</strong>
	<progress id="quiz-progress" min="0" max="100" title="Shows percentage of valid answers"></progress>
	<strong>Success:</strong>
	<meter id="quiz-success" min="0" max="100" title="Shows percentage of correct answers"></meter>
</form>
</body>
</html>

Challenge Solution:

html5-forms/Solutions/quiz-challenge.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	function addLoadEvents() {
		document.getElementById('q3').addEventListener("change",function() {
			document.getElementById('q3output').innerHTML = eval(this.value);
		}, false);
		document.getElementById('quiz').addEventListener("change",function() {
			updateMeasures();
		}, false);
	}
	
	function updateMeasures() {
---- C O D E   O M I T T E D ----

		document.getElementById("quiz-progress").value=progress;
		document.getElementById("quiz-progress").getElementsByTagName("span")[0].innerHTML=progress;
		document.getElementById("quiz-success").value=score;
		document.getElementById("quiz-success").getElementsByTagName("span")[0].innerHTML=score;
	}
---- C O D E   O M I T T E D ----
			<input type="text" name="q3" id="q3" required placeholder="Enter Equation" pattern="[9\+\-\*/]{4,7}">
			<output id="q3output"></output>
		</li>
		<li>

---- C O D E   O M I T T E D ----
	<strong>Progress:</strong>
	<progress id="quiz-progress" min="0" max="100" title="Shows percentage of valid answers"><span>0</span>%</progress>
	<strong>Success:</strong>
	<meter id="quiz-success" min="0" max="100" title="Shows percentage of correct answers"><span>0</span>%</meter>
---- C O D E   O M I T T E D ----

Next