HSKone

Introducing HSKone, your solution to mastering Mandarin Chinese HSK1 vocabulary. HSKone is a user-friendly website designed to help learn Mandarin Chinese vocabulary through interactive exercises. Our platform is specifically tailored for individuals who are seeking to learn the basics of the Chinese language, particularly HSK1 vocabulary.

Features

Existing Features

• HSKone Logo

  • The HSKOne logo is clearly visible at the top of the page.

• Game Menu

  • The games starting menu that allows the user to start the game using the "play" button.
  • Includes instructions on how the game is played.

• Game Area

  • All gameplay related elements and interactions are contained in this area.
  • The user will be given 4 options to choose from and has to correctly choose which one is the correct translation of the symbol in the middle / word card.

• Progress Bar

  • The progress reflects information about how many rounds the user played and what their outcome was.
  • It displays each round as a segment where a filled in segment is the current round being played and a empty ones are rounds left to play.
  • Rounds where finished will have either a green or a red color depending on wheter the user answered correctly or not.

• Word Card

  • The word card contains both the hanzi and the pinyin of the character being tested.
  • It is placed in the middle of the screen and enlarged to make sure it stands out and is readable.
  • When a answer is submited the card border will change color to either red or green to make the result clearer.

• Answer Buttons

  • The answer buttons area is where the user interacts with the game to answer the question.
  • It offers 4 buttons with pregenerated answers where 1 is correct and 3 are random.
  • After clicking one of the buttons the user will recieve feedback in form of the correct button turning green and the rest red.
  • The buttons are in a state of "inactive" until the game starts which blocks the user from interacting with them and grays them out.

Features Left to Implement

• Tutorial

  • A prompt that asks first time visiters if they want a tutorial.
  • If the user agrees to a tutorials then the prompt changes to a tooltip that explains certain features.
  • If the user declines it will simply hide the prompt.

Testing

Validator Testing

• HTML
  • There were no errors found using the offical W3C validator.
• CSS
  • There were no errors found using the offical Jigsaw validator.
• JavaScript
  • There were no errors found using the offical Jshint validator.

Unfixed Bugs

• Touchscreens cause border on answer buttons to have hover styling when it should have either "correct" or "incorrect" styling.
• Anwser buttons resolve with 2 green buttons instead of only 1 like it should normaly. Couldn't replicate bug.

Deployment

• The site was deployed to Github pages. The steps to deplay are as follows:
  • In the Github repository, navigate to the Settings tab
  • From the source section drop-down menu, select the master / main branch
  • Once the desired branch has been selected, the page will be automatically refreshed with a detailed ribbon to indicate the successful deployment.

Live link can be found here: https://debuggedmoon.github.io/hsk-one/

Credits

Content

• HSK1 Wordlist that was used and modified was taken from digmandarin.

Media

• Flower used as logo was found on vecteezy.
• Emojies used in commit messages are inspired by gitmoji :D