Creating a Simple Quiz - Exercise

Contact Us or call 1-877-932-8228
Creating a Simple Quiz - Exercise

Creating a Simple Quiz

Duration: 15 to 25 minutes.

In this exercise, you will create a simple quiz that asks one question per page and does not allow the user to navigate back to past questions.

  1. Open NavigatorHistoryLocation/Exercises/question1.html for editing.
    1. Add code so that the page tries to navigate forward.
  2. Open NavigatorHistoryLocation/Exercises/question2.html for editing.
    1. Again, add code so that the page tries to navigate forward.
    2. Add code to determine if the user chose the correct answer ("Washington") and report the answer.
    3. Add a button to the end of the form that, when clicked, takes the user back to start-quiz.html. If the user answers correctly, the page should look like this:
  3. Make the same modifications to question3.html and end-quiz.html.
  4. Test your solution in a browser by opening NavigatorHistoryLocation/Exercises/start-quiz.html and working through the quiz. You should not be able to go back to a previous question without starting the whole quiz over.

Solution:

NavigatorHistoryLocation/Solutions/question1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>History Test: Question 1</title>
<script type="text/javascript">
	history.go(1);
</script>
</head>
<body>
<form action="question2.html">
	Who was the first president of the United States?<br>
	<input type="radio" name="answer" value="Lincoln">Abraham Lincoln<br>
	<input type="radio" name="answer" value="McKinley">William McKinley<br>
	<input type="radio" name="answer" value="Washington">George Washington<br>
	<input type="radio" name="answer" value="Kennedy">John F. Kennedy<br>
	<input type="submit" value="Answer">
</form>
</body>
</html>

Solution:

NavigatorHistoryLocation/Solutions/question2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>History Test: Question 2</title>
<script type="text/javascript">
	history.go(1);
	var s = location.search;
 	var start = s.indexOf("=")+1;
	var answer = s.substring(start);
	var response = (answer == "Washington") ? "Right!" : "Wrong!";
</script>
</head>
<body>
<p style="font-weight:bold;">
	<script type="text/javascript">
		document.write("Your answer was: " + answer + ". " + response);
	</script>
</p>
<form action="question3.html">
	Which of the presidents below was not assassinated?<br>
	<input type="radio" name="answer" value="Lincoln">Abraham Lincoln<br>
	<input type="radio" name="answer" value="McKinley">William McKinley<br>
	<input type="radio" name="answer" value="Washington">George Washington<br>
	<input type="radio" name="answer" value="Kennedy">John F. Kennedy<br>
	<input type="submit" value="Answer"><br>
	<input type="button" onclick="location.href='start-quiz.html';" value="Start Over">
</form>
</body>
</html>

Solution:

NavigatorHistoryLocation/Solutions/question3.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>History Test: Question 3</title>
<script type="text/javascript">
	history.go(1);
	var s = location.search;
 	var start = s.indexOf("=")+1;
	var answer = s.substring(start);
	var response = (answer == "Washington") ? "Right!" : "Wrong!";
</script>
</head>
<body>
<p style="font-weight:bold;">
	<script type="text/javascript">
		document.write("Your answer was: " + answer + ". " + response);
	</script>
</p>
<form action="end-quiz.html">
	Which president was known as "His Excellency?"<br>
	<input type="radio" name="answer" value="Lincoln">Abraham Lincoln<br>
	<input type="radio" name="answer" value="McKinley">William McKinley<br>
	<input type="radio" name="answer" value="Washington">George Washington<br>
	<input type="radio" name="answer" value="Kennedy">John F. Kennedy<br>
	<input type="submit" value="Answer"><br>
	<input type="button" onclick="location.href='start-quiz.html';" value="Start Over">
</form>
</body>
</html>

Solution:

NavigatorHistoryLocation/Solutions/end-quiz.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>History Test: End</title>
<script type="text/javascript">
	var s = location.search;
 	var start = s.indexOf("=")+1;
	var answer = s.substring(start);
	var response = (answer == "Washington") ? "Right!" : "Wrong!";
	history.go(1);
</script>
</head>
<body>
<p style="font-weight:bold;">
	<script type="text/javascript">
		document.write("Your answer was: " + answer + ". " + response);
	</script>
</p>
<p>You're done.</p>
<input type="button" onclick="location.href='start-quiz.html';" value="Start Over">
</body>
</html>