The capitals quiz assignment

In the next assignment you will construct a web page that implements a capital cities quiz. You will be using a back end server application I provide to serve up questions for the quiz. The quiz consists of five questions. For each question you will show the user the name of a capital city and ask them to pick out the country that city is in from a list of six options. As the user answers each of the five questions your page will be posting their responses to the back end server where they will be tabulated. When the quiz ends you will ask the server to send you the current quiz leaderboard for you to display.

The details

Here now are some more specific requirements for the assignment.

• You will construct a web page with three divs. At start the first div will be visible and the other two will be hidden.
• The first div will display a text field where the user can enter their LU ID number along with a button to start the quiz. Only students who are registered for this class will be able to take the quiz.
• When the user clicks the button to start the quiz you should save their ID number in a global variable and then send a request to the server to GET the first question.
• When the first question comes back from the server you should hide the first div and show the second div.
• The second div will show the name of the city the server you sent you along with six buttons. The buttons will display the names of the six countries the server sent you.
• To answer a question the user will click on of the six country buttons. When they click a button you should POST their response back to the server and GET the next question.
• Once the user has answered five questions you should GET the leaderboard from server, hide the second div, and display the third div.
• The third div will show the current leaderboard for the quiz.

Server interactions

To fetch a question from the server you should send a GET request to the URL

http://cmsc106.net/capitals/questions

You can enter this URL in a browser to see the structure of the object the server will send you in response.

To send a user's answer back to the server you need to send a POST request to the URL

http://cmsc106.net/capitals/responses

The POST should include a single object with these properties:

Property	Description
student	The LU ID of the person taking the quiz
city	The name of the capital city they were given in the question
country	The name of the country they guessed

To fetch the leaderboard for the quiz you should send a GET request to the URL

http://cmsc106.net/capitals/leaders

This GET request will return an array of objects. These objects will have the following three properties:

Property	Description
name	Name of the student
answered	How many quiz questions they have answered
score	What percentage of questions they got right

Due date

This assignment is due by the start of class on Wednesday, May 8.