gregorymacat / guitarquiz

Test your knowledge of notes on the guitar

Guitar Notes Quiz

Test your knowledge of notes on the guitar
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation & Setup
3. Usage & Demo
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

Built With

• 
• 
• 
• 

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

I am using:

• WSL 1
• Ubuntu 22.04.1 LTS (jammy)
• node v18.14.0 LTS (hydrogen)
• Visual Studio Code

• npm

  npm install npm@latest -g

Installation & Setup

1. Clone the repo

   git clone [email protected]:gregorymacat/guitarquiz.git

2. Install NPM packages

   npm install

3. Start the build

   npm run build

4. In separate terminal, start development server

   npm start

5. Navigate to http://localhost:3000

Usage & Demo

Ability to change settings letting the user choose:

• How many strings the guitar should have
• Which frets the notes will appear on/between
• How long to see feedback for correct answers

It is also possible to reset the counter with the "Reset Stats" button to get a fresh start. Otherwise, scores are tracked throughout sessions using cookies. These cookies will track settings and scores letting multiple sessions be counted together if so desired.

Make sure to save changes when finished changing settings.

Video Demonstrations

Example quiz and settings adjustments:

appdemo.small.mp4

Roadmap

See the open issues for a list of proposed features (and known issues).

Features:

• More Options
  • Tuning
  • Naturals/Accidentals Only
  • etc.
• Sounds
  • Note sound
  • Congratulatory Sound
  • etc.
• Add Bass Guitar (maybe other instruments, unlikely though)
• Timer
• Streaks
• User Accounts
  • Create user accounts
  • Save into database
  • Update stats/settings
  • Load account on login
  • Delete account if desired
• Online Competition Between Users (timed mode)
• Chord Quiz
• Probably many more!

Continuous Improvements:

• Refactor/remove redundancies, inefficiences, and nonnecessities
• Refine interface and visuals
• Increased documentation

Contributing

I would greatly appreciate any advice or criticism about this project. Feedback is welcome on any aspect of it and I appreciate anyone who took the time to read through this! I hope you have a wonderful day.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Gregory Macat - [email protected]

Project Link: https://github.com/gregorymacat/guitarquiz

Acknowledgements

• https://www.flaticon.com/ (Settings Icon)

guitarquiz's Issues

Include information icon in the navbar

The current tooltip for input validation mentions the information icon that hasn't been added yet. Include this to describe the application and basic of note types to the user.

Warning about slider default values

In reference to the Navbar's sliders and the settings prop/Navbar state.

Check/fix compatibility with larger resolutions

Mostly tested resolutions at or below 1920x1080. Need to do testing for ultrawide situations and other resolutions

Success sound for correct guess

When the user guesses the note correctly the app should play a congratulatory sound

Incorrect message appearing for validation on ##

This is an inaccurate warning for the situation occurring here

Note sound on appearance

Note should play a sound whenever it is first generated. The sound should be the same as the one on the guitar if possible

Change notes updating on correct count update

Having it set this way makes it difficult to update the count immediately after the user getting the question correct. Also risks possibility of closing before saving after note was correct which is not desired.

Change validation to be based on first and second positions

The following notes are possible:
A B C# Eb A# Bb G#

The first character should always be capitalized and between A-G
The second character should (if it exists at all) always be: b or #

The validation could be cleaned up based on this principle. Test for what it should be instead of things it shouldn't. This will reduce the specificity of some validation errors, but they can be assumed by an all encompassing message for each character position

It would still be good to include the special case of flats and sharps around BC and EF since they are such a unique case

Cleanup and Prettier

There are lots of comments leftover that are unnecessary and inconsistencies in my practices. Need to fix these

Initial testing needs to be added

Need to add jest testing for ensuring components functionality as development expands

Refactor navbar component

There is too much happening in this one component. It needs to be broken down into a couple more probably (changing settings and saving/clearing)