👂 Listening App 👂

This app provides basic ear-based music theory exercises.

It is a client side only act built with React

Development

This project was bootstrapped with Create React App.

Requirements

We suggest developing this project using Node >= v14.4.0 and npm >= 6.14.4.

Running the App

To set up your development environment, run: npm install

To run the app in the development mode, run: npm start, and open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Deploying

Run npm run deploy to trigger the github pages build/deploy. Changes may take a few minutes to propagate.

Creating a new exercise

• Create a new file with the exercise name, e.g. MyNewExircise.js.
• In that file add a function, e.g. generateMyNewExercise, that returns an object with an answer key and any other information needed to reproduce the exercise
• Also in that file, add a react component that displays the exercise and any answer buttons. That react class should have the following properties:
  • answer -- a string representing the correct answer
  • exerciseInfo -- the object generated by your generating function
  • submittedAnswers -- list of strings representing guesses the user has made
  • onAnswerClick -- function provided by the Quiz class that handles answer clicks
• In App.js, import you new file and add a new route
• In Home.js, add a button linking to the route you just created

Configuration

Default development and production configurations are in .env.development and .env.production.

REACT_APP_NUM_QUESTIONS_IN_QUIZ -- number of questions in each quiz. I usually develop with two questions, but have more in production.