JavaScript辅导 | PROG 1700 JavaScript – Final Project


Assignment Value: 15% of overall course mark.

Due Date: See due date designated on the Final Project dropbox on D2L.

Late submissions will receive the standard late submission penalty as stated in the course outline.

(5% overall deduction per day late, and 0% after assignment handed back to the class.)

In no way, shape, or form should this project be attempted in its entirety the day before it is due. If attempted, this will lead to the Earth spinning off of its axis, the complete breakdown of society, and the abolishment of many popular flavours of ice cream, including moon mist. Seriously, this project is not designed to be done in one sitting. The following phases of delivery will be followed, each with their own due dates in subsequent classes:

Phase 1: Wireframe and storyboard designs for the main web page, plus necessary page for the Wikipedia lookup of each country.

Phase 2: Basic web page design implemented to the point that the main web page with the country form launches and the other page (wiki) can be launched by clicking on the appropriate item on the main page. Demonstrate pseudocode for handling data flow between JSON file and application to support phase 3 functionality.

Phase 3: The major functionality of the Countries of the World web page completed, including: the loading of the list of countries, the appropriate information shown when selecting a country including its flag image, and the ability to switch the output between kilometres and miles. The Wikipedia lookup page completely working.

Bonus Phase 4:  Wireframe and storyboard designs for the quiz web page. Demonstrate pseudocode for quiz and high score to support bonus functionality. The complete functionality of the Flags of the World Quiz web page working along with high scores.

You will submit your work for this assignment via GitHub. While you will have frequent commits/pushes of your assignment code to GitHub as your work on it, the instructor needs to know which version to mark and when it was committed. So, when you have completed all assignment work, put a “Ready for Marking” comment on the last code committed into GitHub. Then, submit a simple text document to the Brightspace Dropbox that contains the git commit number/hash string (e.g. “b180b37”) that identifies that commit. It is this Dropbox submission that will be used to determine late penalties, so make sure to do so prior to the assignment deadline.

Once you have committed the code, make sure to visit the repository page on GitHub’s website to verify that the final version has been pushed to GitHub as that is where the instructor will go to get your code.

To insure the greatest chance of success on this assignment, be sure to check the marking rubric contained at the end of this document or in D2L. The rubric contains the criteria your instructor will be assessing when marking your assignment.

Required Resources – Provided by the instructor

Create a dynamic HTML5 website that displays information about any country the user selects from a list.

For any country selected, the application will display the following data:

The country data being displayed will change automatically whenever a new country is selected from the list.

On the display for each country a button will be presented to launch a second web page, which will load the Wikipedia entry for the selected country.


Another dialog window can be launched via another button/link, which will present a Countries of the World flag quiz in a new web page. This quiz will randomly show a country’s flag, present a drop-down with the correct country and three other random country choices, and allow the user to proceed through a quiz of 10 questions. Once complete, the user will be shown their quiz score. If it qualifies as a top-5 high score, they will be prompted for a high score username to be recorded. Finally, the all-time high scores list will be shown.

When the application starts, the main form of the web page will be mostly blank. To start, the user will be shown only a list of the country names in a select box populated from the countries.json file. Once the user selects any country from the list, the main form display area will show information specific to the selected country, as detailed above.

In addition to displaying the country’s flag and basic demographics, the webpage should include a dropdown list to allow users to change the Total Area display from its default setting of square miles to square kilometres. When this occurs, the “Population Density per” output should be updated to show the current user preference, and the country’s population density should change to reflect the value in the chosen unit of measure.

Users will be able to press a “Wiki Country” button at the bottom of each country’s display that will launch a new webpage that will load and display the Wikipedia page for that particular country. This should open in a new tab so that the user can easily return to the main web page.


The user will be allowed to launch another web page via a link or button on the main page, which will present a Flags quiz in the same tab as the original page. This quiz will randomly show a country’s flag, present a drop-down with the correct country and three other random country names, shown in random order, and allow the user to submit their choice. The user will be immediately informed of their updated score after each guess via a score progress output on the page. The user will be taken through a quiz of 10 questions, and will have buttons to cancel (and close) or restart the quiz at any time.

Once the last quiz question is answered, the user’s final quiz score will be calculated and displayed on screen. Their score will be evaluated to see if it is a new high score, through a comparison to values originally loaded from the high-scores.json file, but later updated and maintained in HTML5 local storage in the web browser. If the final score qualifies as a top-5 high score, the user will be prompted to enter their three-letter (e.g. MHC) username, which will be saved as a new high score in local storage. Only the five highest scores are saved, so a new entry will effectively bump the lowest off of the list. The score must be higher than one of the previous entries, so earlier scores “win” in case of a tie (ie. the first 10/10 will be the highest score forever). The username, score, and timestamp will be saved to local storage in the format indicated in the high_scores.json file. Do not forget to drop the lowest score if there is a new entry as we only store 5 highest scores. Regardless of whether there is a new entry or not, the highest scores will then be displayed to the user in a well formatted way, in the area of the web page near the section for guessing a country. The user will still have buttons at the bottom of the page to either cancel (ie. Close) the web page and return to the main page or restart the quiz.

The JavaScript code should be structured to organize the code into appropriate units of related logic, with an effort to avoid duplication of code and other programming inefficiencies.

To help code’s organizational structure, the following functions/methods are required in your solution:

function DisplayCountryData()

function DisplayPopulationData()

function CalculateTotalWorldPopulation() ß Returns a float

function CalculateAreaInKM(countryAreaInMiles) ß Returns a float

Please note: Your final solution will absolutely need more functions than just those listed above, these requirements are intended as a starting point only.

Your solution should meet standards most modern users expect from a quality, responsive web application.

The following screenshots are meant as a simple guide, but you may pursue your own design for the web pages.

Efforts should be made to:

Sample Screenshots

Selecting a country from the select box

After a country has been selected from the select box

After Wiki Country Button Press

BONUS: After Quiz Launch

BONUS: After first Quiz Question Successful

BONUS: Prompt for High Score Name Entry

BONUS: High Score Report

Each phase of this project (except for the last) will be marked in person, in class with the instructor, during the last classes of the semester. As each phase comes due, your solution to that point will be marked, according to the phased schedule/items listed in the project document.

During each marking phase, you may have the opportunity to improve the marks you received on items from the prior phase. If you passed (60%) the previous phase, you can “make up” points you missed on the previous phase by showing the fixes/improvements you made to correct those errors or omissions. Tracking any prior-phase changes and asking for them to be re-marked is entirely your own responsibility. This mark improvement scheme will ONLY apply to items from the previous phase. In other words, if you fix a phase 2 bug, the only time you can get it re-marked is during marking for phase 3. Phase 4 is too late.

The phased delivery schedule for this project has been implemented to help students plan and manage their time working on the final project. As such, late penalties will be assessed for each marking phase, and will applied cumulatively to the final project mark. (Ex. A student who was 2 days late for Phase 2, 1 day late for Phase 4, and 1 day late for Phase 5, would incur an overall late penalty of 20% on the final project mark.)

Too many errors in the layout exist

–         Random flag image displays

–         Random country name options shown, with no duplicates

–         Quiz progress/score tracked

–         Quiz can be reset or cancelled


–         When high score achieved, user prompted to enter initials.

–         New high score saved appropriately.

–         New high score bumps lowest score (only ever save 5 scores).

–         High score summary displayed at end of quiz, whether or not a new high score was achieved.

(At least 60% of the functional requirements must be complete)

No apparent naming convention was followed or was inconsistently applied. Source code was poorly formatted.