Due: 11:59pm on 5/15 (Mon)
50 points (5% of your total grade) -- 230 points will be scaled to 50 points
Intro
In the last assignment, our capital game had a few interactive features like autocomplete, grading, and filtering. In this assignment, we will make our capital game communicate with the web, as well as make it safer from errors.
Where to start from?
We will provide you with the starter kit, pr3.zip. It includes
jquery/
: the code for jQuery and jQuery UI: these are JavaScript libraries you will be using for this assignment.
capital_game.css
: skeleton CSS code.
capital_game.js
: skeleton JavaScript code.
index.html
: skeleton HTML code.
How to submit?
- Compress your code into
studentnumber_pr3.zip
. Please do not create any subfolders.
- Then upload the zip file to the course KLMS until the due date stated above.
- Late policy will be applied.
How to test my code before submitting it?
- TAs will evaluate your code on the latest stable version(57) of Chrome for macOS. We expect no browser compatibility issue in this assignment (we're not making a cutting-edge web application), but please test your code in your platform's Chrome before submission.
- If there is a browser issue between Chrome versions in different OS, TAs will follow the behavior in the student’s OS. However, please make sure that you are not using any custom stylesheet in your Chrome.
- There were many questions about using the latest features of JavaScript / CSS in programming assignments. It’s okay to use those cool features if they are supported by Chrome 57. If you are not sure about the support status of the feature you wish to use, check http://caniuse.com/.
Where to ask questions?
- If you have questions about this assignment, please post it on Piazza (in 'pr3' folder as ‘question’). TA will answer within a day.
- If you believe your question should be kept private, please send email to hyeungshik.jung@kaist.ac.kr.
OK, what should I do?
Step1: Load country and capital data from the web (30pt)
In the last assignment, the list of countries and their capitals was provided in country_capital_pairs.js
, a JavaScript file which stored the list in a pairs
variable. In this assignment, let's load the list from the csv file on the web. In other words, instead of loading from a file, load it from the web.
- Retrieve the csv file from the link by making a request using jQuery.ajax and you should get a response.
- Parse the response and save the parsed data to the
window.pairs
variable. The result should be in the same format as the pairs
variable from the last assignment - a JavaScript array with objects including two keys (country, capital).
- TAs will evaluate the parsed result by inspecting the
window.pairs
variable in the browser console.
Step2: Store history using Firebase (50pt)
Build every component of PR2 - autocomplete, grading, filter, etc. However, for this time, store past entries to Firebase so they are not lost even when the user refreshes the webpage.
- (40pt) Please follow every specification of PR2 for implementation, including elements'
id
s like pr2__submit .
- (10pt) Add a Clear button on the row below option elements. Set its
id
to pr3__clear . When the ‘clear’ button is clicked, all the past entries are deleted.
- It’s optional to store the current question in Firebase, meaning that it can be changed when the page is refreshed.
Step3: Show the location of countries (50pt)
How about adding a map showing the location of countries?
- (10pt) Add a map above the table using Google Maps Embed API. Please read instructions and acquire your API key.
- (5pt) Set the
width
to 100% and height
to 400px .
- (5pt) Set the
maptype
to satellite by referring to the Devloper Guide.
- (10pt) Show the location of the country in the current question using the
q
parameter in the iframe
's src
. If the game is asking the capital of Easter Island, include q=Easter Island
in the src
.
- (10pt) When the user clicks on any country name in past entries or the question, update the map accordingly.
- (10pt) When the user hovers on any country name, change the style of mouse
cursor
to pointer to provide clicking affordance.
Step4: Add Undo / Redo (100pt)
Let's add the Undo / Redo feature to provide better Safety in our capital game. The history for Undo / Redo should be stored in the Firebase database, too. The history for Undo / Redo is reset after the page is refreshed (Updated in May 11).
The history for Undo / Redo should be stored in the Firebase database, and they should be remaining after the page is refreshed. Please empty Question/Answer history and Undo/Redo history before submission so Undo / Redo buttons are disabled when we start grading (Updated in May 12)
Undo (40pt)
- (20pt) Add an Undo button that, each time it is pressed, goes one step backwards in history. For example, if the user clicks Undo after entering an answer, the answer should be deleted.
- (10pt) The Undo button should have an
id
of pr3__undo.
- (10pt) The Undo button should only be enabled when that action is possible. For example, Undo should be disabled when you start the game. Use
disabled
attribute to disable button.
- The Undo button can also undo the ‘clear’ action.
Redo (40pt)
- (20pt) Add a Redo button that plays the undo stack forward.
- (10pt) The Redo button should have an
id
of pr3__redo.
- (10pt) The Redo button should only be enabled when that action is possible. For example, Redo should be disabled when you start the game. Use
disabled
attribute to disable button.
Keyboard shortcuts for Undo and Redo (20pt)
- (10pt) When the user presses
Ctrl + Z
, the game should behave the same as the Undo button click.
- (10pt) When the user presses
Ctrl + Y
, the game should behave the same as the Redo button click.