Skip to content
/ ms2-speed-typing-game Public

Milestone Project 2: Interactive Frontend Development in Code Institute, Ireland (23 Jan 2021)

toto-kotaro-tanaka.github.io/ms2-speed-typing-game/
1 star 1 fork Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Toto-Kotaro-Tanaka/ms2-speed-typing-game

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

151 Commits
assets
assets
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
countries.html
countries.html
 
 
favicon.ico
favicon.ico
 
 
index.html
index.html
 
 

Repository files navigation

image

SPEED TYPING GAME

This is a website of a speed typing game with an additional function that users can learn about all the countries in the world. I create this for Milestone Project 2 (Interactive Frontend Development), Full Stack Software Development in Code Institute, Ireland.

It is a mobile responsive website, however, the speed typing game can be played on a laptop or desktop only as a keyboard is required. The link to the website is available HERE.

image

TABLE OF CONTENTS

WHO'S THIS WEBSITE FOR?

People who would like to practice typing by playing a game. Country names in the world are being used as text for typing so they might come across the countries that they are interested in or never heard of in the game. In case they would like to check what those countries are like, there is a "Country Info" (countries.html) page to provide information of each country, such as a flag, region, capital city, population, language(s), a location on google maps and a link to the Wikipedia* page, if users would like to know more details about the countries.

Note:
> *During the process of creating the website, an idea of adding the link of Wikipedia with REST Countries API, which gives users more details about the countries, comes up as better user experiences. This is implemented in the project now, although it is not written on the initial project plan

WHO IS THE OWNER?

I am the owner of the website. My goals for this website are to provide a speed typing game that users can practice typing with fun as well as to provide information of countries that they come across in the game. The website is built with a “User First” concept. As the typing game is only playable with a keyboard (which is usually a laptop or desktop computer), there is a clear alert for users on the mobile and tablet sizes to inform this. The alert can be hidden by users once they get the message so it does not interrupt users all the time. Some text and buttons are hidden on the mobile and tablet sizes so that it prevents users from accidentally starting the game. Even though the game itself is not playable on the mobile and tablet sizes, users can still see what the game is like so the game instructions button and other elements of the game (e.g. timer, input box, score, and high score) remain on the page.

There are very clear and enough buttons and links to go from the "Speed Typing" (index.html) page to the "Country Info" (countries.html) page, and vice versa so users have no issue of accessing both pages whenever they would like to do. Very simply written game instructions give users clear information on how to play the game and what is involved in the game. The game instructions modal is set up as one of the menus so it is accessible from both pages. There is an additional button, which is coloured in Bittersweet (#ff6565) on the Speed Typing page. The instructions open on a modal so users remain on the page and once they read and understand it, they can close the instructions and play the game immediately.

Once the game starts, the play button is disabled. This is to prevent users from clicking it again during the game as it causes some system errors. When the game is over, the input box is disabled for the same reason as the play button. The website is kept very simple as there should not be so many things for such a simple game, however, by using nicely contrasting colours and plenty of icons, the game does not look too plain.

Keeping the high score in the game gives users a very good motivation to keep playing the game to get a higher score. When the game is over, users get a medal depending on the score and this also gives users motivation to try it again and again. There is a secret crown for someone who achieves better than a gold medal. This is not written on the instructions, however, users are notified once they reach a gold medal to continue the game so this is not just a hidden item.

To provide information of the countries, the display is kept very neat and tidy so that they can see the basic information of the countries easily. If users would like to know more details about the countries, a link to the Wikipedia, that automatically goes to the page of the country, is also available. (implemented this during the process)

UX 5 PLANES

Strategy Plane

Users are people who would like to practice speed typing. By creating a gaming type of website, users can practice it while they are having fun. By setting a time (60 seconds per game), scores, which increments by 10 points rather than 1 point so that they feel they achieve better (e.g. 20 correct typing is 200 points instead of 20 points), and a medal depending on the score, users know what their current typing skill is and can compare it to the scores in 1 week - 1 month time to see how they improve. A high score remains after the game finishes and even the browser is closed so it remains as a target to beat during their practice. Country names are used as text and they come up randomly so that different combinations of text appear on each game. Country names come from REST Countries API and there are 250 countries listed in the API, as of 3 Jan 2021. Users may know some countries quite well, some only little and some not at all. In case users come across the countries that they are interested in, there is a "Country Info" (countries.html) page that provides information of each country, such as a flag, region, capital city, population, language(s), a location on google maps, and link to the Wikipedia page (implemented this during the process) as an additional function to the speed typing game.

The main aims for this website are;

  • Giving users opportunities to practice speed typing with fun: In order to achieve this, the visual and functions are kept simple. There is a logo with the title, a navigation bar to lead to Speed Typing (Home), Game Instructions, and Country Info on the header. For the screen size below 62rem / 992px, there is an alert that tells users that the game is playable on a laptop or desktop only as a keyboard is required to play it. In the main section of the page, there is a welcome message, a game instructions button, a 60-second timer, a button to a "Country Info" page, a letter display, an input box, a game start button, a scoreboard, a medal display, a high scoreboard. To give users more motivation, each correct point is set to 10 instead of 1 so that they feel they achieve better. There are 3 different medals at the end of the game depending on the score. A Gold medal for 230 points or higher, a Silver medal for 180 - 220 points, and a Bronze medal for 170 points or below. There is a special secret crown for those who achieve a very high score. This is not written on the instructions as it is a secret item, however, once you get a gold medal, you get a message to achieve 250 points

  • Providing information of the countries in the world: In order to achieve this, there is a dropdown menu that users can select a country. REST Countries API is linked with the website to show a flag, region, capital city, population, and language(s). Google Maps API is used for a location display and Wikipedia is used for more details of the countries, and both are also linked with REST Countries API

All the functions on the tables below are minimum that must be implemented on the website to achieve the current user's and owner's goals.

Opportunity Importance Viability / Feasibility
Game Instructions on Modal 5 5
A Timer 5 5
Random Text 5 5
Score Board 5 5
Countries API with Google Maps* 5 5 3
Google Maps 5 5
Info Display for Countries 5 5
High Score Board 4 5
Fancy Welcome Message 3 4
Responsiveness 3 4

Note:
> *Countries API with Google Maps - At the planning stage, understand it is not difficult to implement but realise it is, so amend Viability / Feasibility to 3

Below are the additional functions that can improve the website, however, these are not mandatory to achieve the current user's and owner's goals. Some are not implemented due to a lack of my current skills & knowledge and some due to a lack of time.

Opportunity Importance Viability / Feasibility
Different Levels (e.g. length of letters) 3 2
Keeping High Score Even Game Disconnected* 3 2
Username Input 2 4
Highlighting Letters When Correct / Incorrect 2 2
Counting Down Last 10 Seconds 2 1

Note:
> *Keeping High Score Even Game Disconnected - During the review of materials in Code Institute, realise that this is not a difficult thing to achieve so it is implemented in the game

Scope Plane

Features to be included in this project are;

  • Game instructions on modal (a modal is used to keep the number of pages minimum)
  • A Timer
  • Randomly selected letters (country names) during the game
  • Counting a score
  • Keeping a high score
  • Displaying customised and interactive messages (e.g. the results of the game, details of the countries etc)
  • Google Maps with API
  • Country information with API
  • Caution message* on a modal when the size goes below 62rem / 992px as the game is playable on a laptop or desktop only

Note:
> *Realise that caution message does not need to be a modal so set it up as an alert, which is neater than using a modal

Structure Plane

The website consists of 2 pages and a modal

  • index.html is "Speed Typing" game page with a logo, a navigation bar, an alert (for table & mobile screen sizes), a welcome message, a game instructions button, a timer, a button to Country Info page, a letter display, an input box, a start button, a reset button, a scoreboard, a medal display, a high scoreboard
  • countries.html is “Country Info” page. The same header as the first page 26 alphabets with a list of countries for country information and a simple display of country information with a dropdown menu. A location displays on Google Maps and more details about the countries on Wikipedia
  • Modal is used for "Game Instructions", which have very simple and clear instructions of the game

Skeleton Plane

Although Bootstrap4, which is CSS framework for mobile first design, is used for the website, it is designed as Laptop / Desktop First because the main purpose of the website is for the typing practicing game that is playable only on a laptop or desktop with a keyboard. It is still a mobile responsive website and contents are visible on the mobile and tablet sizes. Country information is available on both desktop and mobile sizes. There are wireframes of "Speed Typing" (index.html) page and "Country Info" (countries.html) page for desktop and mobile sizes.

Note:
> *This is the revised version after looking for some better ideas showing the country info

Surface Plane

--- Colour ---
On the "Speed Typing" (index.html) page, a page that looks similar to Visual Studio Code is considered because the main purpose of the website is for typing and Visual Studio Code also has a user friendly typing environment element. Eerie Black (#1e1e1e) is used for the background colour and Bright Navy Blue (#007acc) is used for the logo and menu. The main text colour is Light Grey (#d4d4d4) so that it does not give users too much contrast between the text and background colours. Canary (#ffff98) is used for a score to stands out the score and stronger colour than Canary, which is Maximum Yellow (#fdf838) for a high score. Bittersweet (#ff6565) is used for a timer, a game instructions button and an alert because they are very important information for the website and must be noticeable easily.

On the "Country Info" (countries.html) page, Bright Navy Blue (#007acc) is used for the background for information and Google Maps display as it links to an image of the earth and is presented well. The main text colour is Eerie (#1e1e1e) so the page looks like the reversible version of index.html Light Grey (#d4d4d4) as it matches Bright Navy Blue well. (Eerie and Bright Navy Blue do not match well)

image

--- Typography ---
Courgette which is a similar type font of the logo (Lobster) is used for the menu to show the image of "Speed". Bebas Neue is used for headings to stand out the headings and Montserrat is used for main contents to make the fonts readability maximum especially for the typing game.

image

FEATURES

Existing Features

  • Created with HTML5, CSS3 (with Bootstrap4 framework) and JavaScript (with jQuery library)
  • It consists of 2 individual pages, one is for "Speed Typing" game and one is for "Country Info" display
  • Modal for game instructions
  • Text for typing and country information are from REST Countries API
  • Google Maps API for location display
  • Wikipedia to show more details of selected countries
  • All the features planned on scope plane

Features Left To Implement

  • Setting different levels: Think this could be implemented by setting a length of text (e.g. easy for text length up to 10 characters), however, currently do not have enough time to do this and as it is not essential to achieve current user's goals, I leave this out
  • Having a username: This would give users a more customised game, however, currently do not have enough time to implement this. Also from the design's point of view, it may look too much to have user's name on the speed typing game page and defeats the purpose of a simple design page, I leave this out
  • Highlighting letters when correct / incorrect: Identifying correct / incorrect letters by colour as users type would be helpful especially when letters are quite long. Currently do not have the skills to implement this and not essential for the game so I leave this out
  • Counting down last 10 seconds: This would also be useful as users may not be able to take their eyes off during the game, although, a timer is relatively close to the text display & input box so should be visible. Giving a warning by sound would be a nice function to have, however, currently do not have the skills and time. In addition to it, the game has no sound at all so it might be a bit disrupting if users hear a counting sound suddenly so decide to leave it out this time

TECHNOLOGIES USED

RESOURCES

General Resources

Tools

TESTING

Html

--- Code Validation ---
When the core HTML code is completed, a code validation test is carried out by using W3C Markup Validation Service, which is a validator by the World Wide Web Consortium that allows checking HTML and XHTML documents for well-formed markup, to check any warnings and errors.

index.html: 2 Warnings and 3 Errors

  1. Warning: Empty heading
    This is caused by not having any text in <h3> tag. As this heading is for the "Time is Up!" message, which is generated by JavaScript at the end of the game, no text is required in it and according to the Stack Overflow post, having no text in <hN> tag is still valid HTML and passes the validation. However, decide to fix the issue so put the message in <h3> tag and to use show() method on JavaScript instead of html() method, which works out better coding as a result

  2. Warning: Empty heading
    Very similar issue as the first warning. A country name that is randomly generated from the API goes into <h2> tag for the game. "Ireland" should show as the first country and it is set up by JavaScript. Put "Ireland" as a text in <h2> to remove the warning. The code on JavaScript still remains the same because a randomly selected country shows on <h2> without having the code on JavaScript

  3. Error: Element ul not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
    ul is not properly nested in ol according to Nested HTML List on W3Schools. Put ul inside <li></li> to solve the issue

Note:
FYI - since the test, swap ul and ol on html files

  1. Error: The aria-describedby attribute must point to an element in the same document.
    Refer to the MDN page regarding the issue and fix it by putting text-input which is the id name of the element

  2. Error: The aria-labelledby attribute must point to an element in the same document.
    Refer to the MDN page regarding the issue and fix it by putting game-instructions which is the id name of the element

- Conclusion -
Put the code in the validator after fixing these and receive no warnings or errors
There is a message about Images with textual alternative which is a reminder about images and alt. Refer to the sitepoint post and also WebAIM website to understand the message. As this is not an error, no further action is taken

countries.html: 1 Warning and 3 Errors

  1. Warning: Empty heading
    The same type of issue as No 2 on index.html (not the same issue as this occurs in the different section) and solve the error in the same way

  2. Error: Bad value for attribute src on element img: Must be non-empty.
    In order to solve the issue, put the URL of the flag of Ireland in REST Countries API that should show first when the page is loaded

  3. Error: Element ul not allowed as child of element ol in this context. (Suppressing further errors from this subtree.)
    The same issue as No 3 on index.html and solve the error in the same way

  4. Error: The aria-labelledby attribute must point to an element in the same document.
    The same issue as No 4 on index.html and solve the error in the same way

- Conclusion -
Put the code in the validator after fixing these and receive no warnings or errors
There is a message about Images with textual alternative which is a reminder about images and alt. Refer to the sitepoint post and also WebAIM website to understand the message. As this is not an error, no further action is taken

--- Quality ---
When the core HTML code is completed, a quality check test is carried out by using Lighthouse, which is an open-source and one of the automated DevTools for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO. Anything 89 or below are looked at to improve the quality of the website.

index.html Mobile Size
Before - Performance: 85 / Accessibility: 97 / Best Practices: 93 / SEO: 83
After - Performance: 92 / Accessibility: 97 / Best Practices: 93 / SEO: 92

  • Issues on Performance and SEO are addressed and solved with suggestions by Lighthouse. The issues on Performance are fixed by reducing the size of the logo and removing one of Bootstrap JavaScript scripts, which is not necessary to be on index.html. The issue on SEO is fixed by adding <meta name="description"/> tag.

Note:
Score of Performance varies. It may depend on internet speed(?)

index.html Desktop Size
Before - Performance: 95 / Accessibility: 88 / Best Practices: 93 / SEO: 90
After - Performance: 95 / Accessibility: 96 / Best Practices: 93 / SEO: 90

  • Issues on Accessibility are addressed and solved with suggestions by Lighthouse. The issues are fixed by adding aria-label="Play game button" attribute on two buttons that have no label. This is important for screen readers. Also, there is <h3>(Time is Up message) after <h4> which causes heading elements not being a sequentially-descending order so <h3> is changed to <h4>

countries.html Mobile Size
Before - Performance: 72 / Accessibility: 91 / Best Practices: 100 / SEO: 90
After - Performance: 67 / Accessibility: 91 / Best Practices: 100 / SEO: 90

  • The main reason of low Performance is caused by Eliminate render-blocking resources that jQuery and Bootstrap files are rendered but not being used sufficiently. This is confirmed by the coverage on Chrome DevTools. Talk to my mentor about the issue and he suggests to use minified jQuery code as jquery.js file and use it instead of linking to jQuery CDN. This does not improve the Performance. Discuss the issue in the final meeting with mentor. His suggestion is to leave as it is, because this is not an error to cause issues on the website and the main purpose of the website is for speed typing game that targets laptop and desktop users more. Check the performance of the page on an actual mobile phone by trying to change the countries on the dropdown menu. Information and maps are displayed fairly quickly so there is no obvious or significant delay of the performance by the manual check.

countries.html Desktop Size
Before - Performance: 94 / Accessibility: 91 / Best Practices: 93 / SEO: 90

  • All ok and no further actions required

- Conclusion -
All the scores, except mobile size on countries.html, are 90 or higher so majority of the website meets the quality by Lighthouse. The performance of mobile size on countries.html is below 90 but everything is working fine on the page and there is no obvious or significant delay of the performance

Css

--- Code Validation ---
When the core CSS code is completed, a code validation test is carried out by using W3C CSS Validation Service, which is a validator by the World Wide Web Consortium that allows checking Cascading Style Sheets, to make sure that CSS complies with the standards set by the World Wide Web Consortium

styles.css: 0 Error / 16 Warnings

- Conclusion -
CSS code meets the standard by the World Wide Web Consortium as no errors found

JavaScript

--- Code Validation ---
When the core JavaScript code is completed, a code validation test is carried out by using JSHint, which is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules

main.js: 25 Warning / 6 Undefined Variables / 1 Unused Variable

  • 25 Warnings
    Most of them are expressions being used in ES6. (e.g. arrow function and let / const etc) Fixed them by putting /*jshint esversion: 6 */ on main.js as suggested. There are 2 that semicolon is missing so solve the issues by putting semicolon on them. My understanding is not to use semicolon for curly braces, however, it is required for statements according to the Stack Overflow post

  • 6 Undefined Variables
    These are $, Anime, transferData, lat, lng and google. $ is jQuery symbol so it can be ignored. transferData, lat and lng are solved by creating a global variable for them. Anime and Google are declared in their CDN.

  • 1 Unused Variable
    new google.maps.Marker is declared as marker but it does not need to be, so solve the issue by removing let marker. There is a new unused variable on JSHint since the first test. It is initMap that is actually used on Google Maps API script.

- Conclusion -
No errors, undefined or unused variables so JavaScript code complies with coding rules by JSHint

--- Functions ---
When the core JavaScript code is completed, test for some functions are carried out by using Jasmine which is a framework for testing JavaScript code to see if they are properly functioned.

Below are the steps of the set up for the testing.

  1. Create a testing folder called speed-typing-jasmine on my desktop
    image

  2. Open the file with Visual Studio Code which is my Integrated Development Environment (IDE)
    image

  3. Create index.html, which is an HTML document for testing, script and spec folders in speed-typing-jasmine folder. Then, create speed-typing.js, which is main JavaScript script in script folder, and speed-typing-spec.js which is testing JavaScript script in spec folder
    image

  4. Create a boilerplate on index.html
    Screenshot

  5. Add Jasmine CDNs on index.html. CDNs are from cdnsjs. They must be added inside <head> and the order of CDN is very important. It must be jasmine.js --> jasmine-html.js --> boot.js --> jasmine.css in order to make testing work correctly
    Screenshot

  6. Add script of speed-typing.js and speed-typing-spec.js on index.html. They can be inside <head> unlike usual JavaScript scripts (usually, JavaScript scripts are located at the bottom of <body>). As the boilerplate creates <body> tag, put them in there. The order of JavaScript script is very important and it must be speed-typing.js (main JavaScript) --> speed-typing-spec.js (testing JavaScript) to load the files correctly
    image

To test the functions with Jasmine, "Red Green Refactor" method, which purposely fails it first and makes it pass writing just enough code to pass afterward, is used. The reason for this is because the test could be passed even code does not work so it is important to do the test from different angles.
2 tests are carried out in this section. One is showCountries() function which takes a country name as an argument from a list of countries and another one is a function which contains if else statement.

Testing showCountries Function

  1. Write a description code of clickButton with showCountries(countries) function in it on speed-typing-spec.js and run it expecting to be failed as there is no showCountries() function defined

  2. Create showCountries() function on speed-typing.js but still expecting to be failed as there is no country defined

  3. Create a valuable called let country = "Ireland" on speed-typing.js and returning a value of "country" expecting to be passed

  4. This function should have country as a parameter and take it as an argument so add expect(showCountries(country)).toBe(country); on speed-typing-spec.js. Run the test expecting that should show Ireland to be failed but should show countries to be passed

  5. Remove should show Ireland as showCountries() function should be used taking country as an argument and show names of countries from the list and expecting to be passed

- Conclusion -
showCountries() function works as expected

Testing Function With If Else Statement
This function should show a correct medal depending on the score with if else statement. Below is the category of each medal.

  • Bronze: score <= 240
  • Silver: score >= 250 && score <= 290
  • Gold: score >= 300 && score <= 340
  • Special Crown: score >= 350

  1. Write description code of scoreCategory with getMedal() function with Bronze Medal category, which has a value of 240 in it on speed-typing-spec.js and run it expecting to be failed as there is no getMedal() function defined

  2. Create getMedal() function on speed-typing.js but still expecting to be failed as there is no score defined

  3. Set a parameter of score to take an argument, expecting to be passed

  4. Change the value to 250 expecting to be failed. This is just to see if the value is effecting correctly

  5. Add Silver Medal category which has a value of 250 on speed-typing-spec.js expecting to be failed as there is no if statement defined for this yet

  6. Add else if statement of (score >= 250 && score <= 290) on speed-typing.js returning a value of "Silver" expecting to be passed

  7. Add Gold Medal category which has a value of 300 on speed-typing-spec.js and add else if statement of (score >=300 && score <= 340) on speed-typing.js returning a value of "Gold" expecting to be passed

  8. Add Special Crown category which has a value of 350 on speed-typing-spec.js, and add else statement on speed-typing.js returning a value of "Crown" expecting to be passed

  9. Add a value in String on speed-typing-spec.js expecting to be failed

  10. Add additional if else statement on speed-typing.js and define only if the type of score is number, then go to next if else statement, expecting to be passed

- Conclusion -
Function with if else statement works as expected

Note:
Actual code on main.js, No 9 (if for string) is not implemented because the score is declared as number and the value does not come from user input, so there will not be any string being put by mistake

Web Browser

--- Visibilities, Functions and Interactions ---
The website is available on the major web browsers, such as Chrome, Safari, Firefox, Opera and Microsoft Edge. To make sure all the functions work and visual contents are shown properly on those browsers, the below manual testing is carried out on all of them.

  1. Open the website on the browser to do a visual test. Look at all the pages including the modal (game instructions) to see if everything appears as expected
    (Chrome / Safari / Firefox / Opera / Microsoft Edge)

  2. Click all the buttons and links to see if they link to the place supposed to go. And for external links to be open in the separate page

  3. Play the game to see if interactive messages during the game (timer, score, country text) and after the game work properly (time is up, medal, medal message, high score, reset button and message)
    (Chrome During The Game / Chrome After The Game)
    (Safari During The Game / Safari After The Game)
    (Firefox During The Game / Firefox After The Game)
    (Opera During The Game / Opera After The Game)
    (Microsoft Edge During The Game / Microsoft Edge After The Game)

  4. Change a country randomly to see if all the information comes up correctly, including a link to the Wikipedia page
    (Chrome Country Info / Chrome Wikipedia)
    (Safari Country Info / Safari Wikipedia)
    (Firefox Country Info / Firefox Wikipedia)
    (Opera Country Info / Opera Wikipedia)
    (Microsoft Edge Country Info / Microsoft Edge Wikipedia)

- Conclusion -
The website works on all the major web browsers

Note:
The quality of Firefox, Opera and Microsoft Edge images are not great because they are tested in another computer and screenshots are taken there. Then, a smaller size of images are transferred to my main computer. To have a consistent size of images, images of Chrome and Safari are adjusted so their qualities are not great either but all still visible

UX

--- Evidence Of Achieving The Website From UX Point Of View ---
There are some essential elements to achieve good user experiences on the website and this is to test and confirm that all the elements required for good user experiences are implemented on the website.

Header
The logo of the website has a clear meaning and can be easily identified what the website is for. The menu is well displayed and there is an icon of a person to show the current location of the page. The game is playable on a laptop or desktop size only, so once the screen size goes below 62rem / 992px, an alert comes up to inform users clearly that the game is not playable without a keyboard. The alert can be closed by users once they get the message.

Heading
The display of fancy headings (Welcome To Speed Typing Game! / Let's Learn About The Countries!), which appear very smoothly, gives users an impression of "speed" and it can be easily linked with the main purpose of the website that is to practice speed typing. There is a short paragraph to explain what you can do on the page and there is a link to another page in the paragraph. On the speed typing page, there is a game instructions button with standing out colour, positioned above the game section so that it cannot be missed. This is not a complicated game so users could easily figure out how to play the game, however, there are some important notes on the instructions that users need to look at before the game and this is to make sure that happens. (e.g. letter cases and space matter, points for each medal etc) Instructions are written clearly with minimum words, and on a modal so that users can stay on the game page.

Speed Typing - index.html
Very simple display not to disturb users for typing, but all necessary elements such as a timer, text for typing, play button, scoreboard, medal, high scoreboard are included. Plenty of icons are used to make the website more for gaming. When users click the play button, it automatically focuses the input box so that users do not need to click it. This is written on the instructions as well as there is a very small but enough action (box shadowing) when the input box is selected so users notice it.

When the game starts, colour of the play button is changed and deactivated. This is to prevent users from clicking it again as it causes issues. The message for the play button disappears so that users can focus on the main text just for typing, which is bigger and different from other fonts. The score increments by 10 points as users get correct typing. This is to give users a better feeling that they achieve more. (e.g. 20 correct typing, 20 points vs 200 points)

Once the game is over, there is a message of "Time is Up!" to let users know it is finished. The input box is disabled to avoid users still typing words and getting scores. There is a medal (with a message) that comes up a second later when the game is finished, then there is a message of "Try Again!" to encourage users to play the game again a second later with the reset button. The purpose of this is by showing the message individually with some delay, users can easily see what the new messages are. If users achieve the highest points, the high score is automatically updated. It remains after the game and even the web browser is closed so users can always go back to play the game targeting the high score. There is a button to "Country Info"(countries.html) page so users can access the page immediately after the game, if there are any countries that they would like to look up.

On the mobile and tablet size that the game is not playable, the play button is hidden so that users will not be able to play the game but users can see the most of elements of the game, including the instructions so that they can still get ideas of the game.

The scores for the medals are considered by some factors. First, look up google to see what the average speed typing for ordinary people is. It says 40 words per minute (1.5 seconds per word for 60 seconds) so set up around 350 points (1.7 seconds per word) for a gold medal considering it would slightly take a longer time to type country names than words because country names are simply longer than words. (e.g. “I will go to your house” have 6 words / 16 letters compare to "Antigua and Barbuda" is a country name, which has 17 letters). When the game is completed, I, who can reasonably type well, try the game numerous times and discover that level of the game is underestimated as my scores are always around 150 - 220 points. Ask a few other people to try the game to get feedback for analysis. My colleague who uses a computer on a daily basis gets 150 points average and a friend of mine who also uses a computer often gets scores between 130 - 200 points, which are very similar scores as mine. To practice speed typing game and achieve reasonable speed, you are required to get 150 - 220 so set up medal categories in those scores. A gold medal and special crown are achievable for any users once users have reasonable typing skills (and with luck as well) and for those who achieve special crown, it proves that they will not require speed typing practice anymore.

To make sure the correct medals show up depending on the scores, test it by changing the increment value of score on main.js and check the scores especially between medals.

The function to keep the high score is also tested with this. After 220 points, put 250 points to see if the high score remains the same when 230 points are achieved. Also, there is a message to indicate there is something more once you get a gold medal so the secret crown is noticeable in the game.

In REST Countries API, there are some countries that have special letters other than the alphabet (e.g. Åland Islands, Côte d'Ivoire etc). Those countries cannot be used as text for typing so it is made sure to exclude them by setting if else statement. This is checked by putting console.log() function in showCountries() function and check on a console of Chrome DevTools and confirm that any countries with special letters do not appear as text. (Non-alp excluded 2nd Test)

Country Info - countries.html
Blue background, which gives users an image of the world, is used. The colour is nicely contrasted with the main background colour as well. Country information display is kept simple for good readability and icons are used to keep the design of the website consistent. The section of County information and Google Maps are split into 4 : 8 to give maps enough size. If users wonder where the information comes from, there is an info icon beside the dropdown menu that they can control open and hide and there is a link, which opens in a different page, for REST Countries API. For those who would like to know more about the countries, there is a link to the Wikipedia page, which also opens on a different page so that users do not leave the page. There is a button to "Speed Typing" page so users can access the page easily whenever they would like to play the game.

To check if the information of each country corresponds properly from the API and the Wikipedia links work, 4 different types of countries are selected for testing. Below are the countries and check the country information against Wikipedia that is opened from the link on this page

  • A county with a single word: Angola (Map / Wikipedia)
  • A county with special letters: Curaçao (Map / Wikipedia)
  • A country with multiple words: Lao People's Democratic Republic (Map / Wikipedia)
  • A country with brackets: Korea (Republic of) (Map / Wikipedia)

Note:
There are 2 minor issues found during randomly looking at the country info. These are very minor issues and not worth mentioning on the website so no further action is taken and left as they are

Feedback From A User
When the speed typing game is provisionally completed, request in Code Institute Slack to play it to get some feedback about the game. One of the users mentions that he comes across the same countries 3 times during the game and suggests to prevent it from happening. My initial understanding is that as there are 250 countries in the API, chances of getting the same country during the game are quite low but this is an incorrect estimate and as a matter of fact, I come across the same countries during the game on a few occasions so decide to implement this, which improves the website from UX point of view. To achieve this, create an empty array and put the randomly selected countries in it. Then, use include() method that if the randomly selected country is NOT included in the array, then show the country name, otherwise to run showCountries() function again. To test this, modify if else statement in showCountries() function to select countries with 4 or fewer letters so that there are only a limited number of countries to be tested. Then, get a list of countries, which match the criteria, by using for loop and if statement from the API and show these on a console on Chrome DevTools. There are 10 countries that match the criteria, start the game by showing the countries in the array on a console. No countries are repeated and once those 10 countries are selected within the time, the system gives an error saying all the countries are selected and no more to be selected. By looking at the countries in the array and receiving the error message, it is confirmed that the setting is properly done and no countries are repeated during the game.

- Conclusion -
The website meets all the necessary elements to achieve good user experiences

Unsolved Issues

There are two unsolved issues in the project. One is the performance of mobile size on countries.html by Lighthouse. Other one is Uncaught Reference Error on index.html. (Refer to the next section) Try my best to solve those issues by looking up google, talking to mentor and tutors, however, unable to solve the issues so have to leave them as they are. They are not causing any issues of the functions or usability of the website.

Note For Testing Section:
Since the first code validation test for HTML, CSS and JavaScript, there are some changes on the files so test them again by the validators before the submission and confirm there are still no errors. Test the quality of the website by Lighthouse before the submissions and confirm that the scores are still the same / similar as the first test

PROJECT BARRIERS & SOLUTIONS

--- Disabling Play Button ---
Once the basic functions of the game are completed, test them by playing the game. During the game, notice that the play button is still active and by clicking it during the game, it causes some issues such as reducing the time in the timer and even the time becomes 0, it continues to count with minus time and also replaces a text for typing. Look for a solution and discover that buttons can be disabled so implement this once the game starts to prevent the issues.

--- Disabling Input Box ---
This is a similar issue as the play button. As long as the input box is active, scores increment by 10 points even after the game so uses the same method to prevent the issue.

--- Hiding Elements By JavaScript ---
To achieve good UX experiences for the website, there are some messages and buttons set to be hidden and shown. The reset button and its message only appear after the game, so class="d-none d-lg-block" Bootstrap class is used to hide the elements on mobile / tablet size and css display: none; method to hide them on a laptop and desktop size. When setting this up to show after the game using JavaScript, it does not work because of class="d-none d-lg-block" class so solve the issue by putting these elements in a div and putting class="d-none d-lg-block" class on the div.

--- Linking APIs ---
Set up REST Countries API by looking at Code Institute lesson and YouTube tutorial(Coding Journey), set up Google Maps API by looking at Code Institute lesson but cannot link both of them together to show a selected country on Google Maps. Look for guidance on google, however, cannot find anything to achieve this so try to move code around thinking of the logic of how REST Countries API and Google Maps API work and manage to link them up together by putting showCountryOnGoogleMaps(lat, lng) function with two parameters to locate a selected country on Google Maps inside displayCountryInfo function to show country information of the selected country.

Note:
Initially, initMap() is used for this. Then, discover an issue using intiMap() so a new function, showCountryOnGoogleMaps(), is created and used for this. Refer to “Invalid Value” in this section

--- Showing Country Names As Text ---
Text (country names) for typing come from REST Countries API. When working on this function using the local server, use only necessary functions and elements. During the test, everything works fine but when these are transferred to main.js, which has other codes, showCountries() function to show country name as texts does not work for some reason. To check where the issues come from, compare the code on test.js and main.js and discover that google with initMap() function is causing the issue. This is discovered by making the function inactive. Think this is caused by intiMap() function loading before Google Maps API loads. To solve the issue, create another function to retrieve data from REST Countries API first, which works fine, however, does not look like the most efficient way of solving the issue so try a few different ways and come up with an idea to delay initMap() function in displayCountryInfo() function by using setTimeout() method. Delay initMap() function by 3000 ms first and work fine, then try 1000 ms and work fine so put 0 ms just to see if that still works and for some reason, it works fine too so decided to use this method to solve the issue.

Note:
The issue is solved without me understanding the logic of it very well. Try a few different methods and somehow it works even with 0 ms delay

--- Invalid Value ---
lat and lng are two parameters to take selected country’s latitude and longitude for the function to show a country on Google Maps. Initially, these two parameters are used for initMap() function inside displayCountryInfo() function to show a selected country on Google Maps. There are errors on console on Chrome DevTools that lat and lng are invalid values because they are undefined valuables, instead of number when the page loads. To solve the issue, try to change lat and lng to number with Number() function, which does not work, so come up with an idea to create another function to show a selected country on Google Maps and set default latitude and longitude with initMap() function so that no parameters are required and when lat and lng are used for a newly created showCountryOnGoogleMaps() function, lat and lng are defined as the number and can be taken as arguments.

--- Preventing Repeat Of Country ---
Not repeating a county name during the typing game is requested by a user and decides to implement it, as described in the testing section. Not sure how to achieve this so first think about getting a non-repeatable random number. When looking at some posts on the internet, it looks far more complicated so look for other options. Then, come up with an idea to keep the used county in an array and when showCountries function is run, check to see if the country is already used or not. To test it, create a valuable with an empty array INSIDE showCountries() function and check to see if countries are put in an array with push() method. Countries are pushed into an array but it is in an individual array so presume this is not the way to achieve this. Look on the internet to get other ideas but cannot find anything. Coincidentally, the first tutor who I contact about “Uncaught Reference Error” is the user who suggests this so ask him how to achieve this by mentioning what I think and try. He answers to put them in an array, which is one of the initial ideas, so try one more time with it. While looking at code on main.js, realise some valuables are created as global valuables so try it for this and test it on a console. Used countries are now put in an array so by putting a condition of if the county is NOT in the array using includes() method, successfully set it up.

--- Uncaught Reference Error ---
The most difficult issue in this project and spend days to come to a conclusion. There is an error message saying "Uncaught ReferenceError: google is not defined at showCountryOnGoogleMaps" (previously shown at initMap instead of showCountryOnGoogleMaps) on index.html where Google Maps API is NOT used. Not sure what the exact reason for the error, though understand this is something to do with Google Maps. First, delay the function which has map = new google.maps.Map() to see if this solves the issue but it does not. Then put the script of Google Maps API on index.html to see if something happens. It clears the error on console but brings a new error that says “Uncaught (in promise)” on a console instead. By reading the error message, understand that there must be an element with id=“map” so create a div with id=“map” and as expected, no error messages on a console. However, this does not look like a proper solution because there should not be a div with id=“map” on index.html where Google Maps are NOT used. Look for a solution on google, try to move code around again but cannot solve it by myself so finally decide to contact tutor assistance in Code Institute. The tutor recognises the error happening because no Google Maps being used on index.html so suggests using if else statement for the function. Only if there is an element with id=“map”, the function is run. That sounds a correct way of solving the issue, so put if statement, check a console and it has no error so presume the issue is solved. However, realise on the following day that Google Maps are NOT functioning at all on countries.html, which is caused by incorrect if statement syntax so fix it with correct if statement syntax first and load a page hoping both Google Maps work and no error message on a console. Google Maps work fine but the error message is still there. The strange thing is if there is no id=“map”, there is no error message but, of course, showCountriesOnGoogleMaps() function does not work on countries.html. Contact tutor assistance second time looking for a solution for this. A different tutor this time, he is not sure the exact reason for it but suggests creating two separate JavaScript files if Google Maps are not used on index.html. There are some code on the current main.js being shared in both index.html and countries.html (e.g. Hiding Alert, Fancy Heading, REST Countries API) so question to the tutor if that would be ok and having two JavaScript files, which contains some duplicated code, would be a better practice in such a case. The tutor checks this with someone and comes back with a suggestion that keeping one JavaScript file and leave the error on console, as long as all the functions are working fine, is a better practice. All the functions are working fine as far as I am concerned so decide to keep one JavaScript file and leave the error on a console as an unsolved error.

VERSION CONTROL

Git as a local repository and GitHub as a remote repository are used for the project. The process of the version control is;

  1. Create a remote repository in GitHub by clicking "New repository" on the main page
    image

  2. Create a folder called ms2-speed-typing-game on my computer (e.g. Desktop)
    image

  3. Open the folder with Visual Studio Code which is my Integrated Development Environment (IDE)
    image

  4. Create a README.md file
    image

  5. Create a local repository by using command line with git init command on a terminal
    image

  6. First commit in git repository and first push to GitHub by using the below commands on a terminal by GitHub’s instructions

* git add README.md
* git commit -m "Initial commit"
* git branch -M main
* git remote add origin https://github.com/Toto-Kotaro-Tanaka/ms2-speed-typing-game.git
* git push -u origin main
  1. From the second commit, the below process and commands are used. Whenever a section or even a group of work are completed, they are committed in git and pushed into GitHub, in order to make sure to keep the history of the work logged properly and not to lose the work in unexpected situations
* git status | To check the status of new / modified folders, files, and documents
* git add . | To put all new and updated work on the stage in git
* git commit -m "Example commit" | To commit the work on the stage in git before pushing it to GitHub
* git push | To update the repository in GitHub

DEPLOYMENT

The website is deployed in GitHub as it can host open-source projects of HTML, CSS, and JavaScript. To deploy the website, follow the below process once login GitHub.

  1. Go to repositories that can be accessed from 1 or 1 - 1
    image

  2. Open the repository
    image

  3. Go to Setting
    image

  4. Go to GitHub Pages section, select main as the branch and click save
    image

  5. Once the website is successfully deployed, a link to the website appears and the website is now available to the public (It may take some time the website actually appears in public) image

Note:
URL of the repository in GitHub is "https:// + your GitHub username + .github.io/ + your repository name + /"
(e.g. https://toto-kotaro-tanaka.github.io/ms2-speed-typing-game/)

CREDITS

Code

--- HTML5 ---

--- CSS3 ---

--- JavaScript ---

  • Tobias Ahlin Bjerrome for fancy heading display
  • Traversy Media Refer to this YouTube tutorial to get an idea of how to build a speed typing game. The code written on my JavaScript file is based on this with my customisation. Below is the link to the original code of the tutorial, to prove that customisation is done instead of just copying and pasting the code from the tutorial on the JavaScript file (Original Code)
  • Coding Journey Refer to this YouTube tutorial to get an idea of how to show country information from the API. The code written on my JavaScript file is based on this with my customisation. Below is the link to the original code of the tutorial, to prove that customisation is done instead of just copying and pasting the code from the tutorial on the JavaScript file (Original Code)
  • Net-informations.com for preventing users from pasting text in input box

Note:
All credited codes are also mentioned on html, css and JavaScript files

Contents

  • All the contents are written by me

Media

--- Logo & Favicon ---

  • Created by me using canva

ACKNOWLEDGEMENTS

I would like to thank ;

  • My mentor, Spencer Barriball, who go through the project with me and give some valuable ideas to achieve the project
  • Code Institute Tutor Tim to help me out with the issue and also play the game and gives me feedback to improve the website
  • Code Institute Tutor Johann to assist on the most difficult issue I have during the project
  • Code Institute Slack Members who give me feedback to improve the website .

About

Milestone Project 2: Interactive Frontend Development in Code Institute, Ireland (23 Jan 2021)

toto-kotaro-tanaka.github.io/ms2-speed-typing-game/

Topics

game api typing-game countries-information

Resources

Readme
Activity

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages