Note Math: add accidentals, randomized spellings, interval accidentals, and virtual MIDI keyboard

[Naphier]

Motivation

• Expand the Note Math flash cards beyond the seven diatonic letters so users can practice chromatic pitch classes (C#/Db, D#/Eb, F#/Gb, G#/Ab, A#/Bb).
• Provide a per-turn mixed spelling mode so answers and input labels can randomly alternate between flats and sharps for better real-world enharmonic fluency.
• Offer a virtual MIDI keyboard input option and interval-accidental cards so users can play answers on an on-screen piano and practice accidented intervals (minor/augmented/diminished, double-flat seventh, etc.).

Description

• Added a rewritten Note Math exercise component at static/js/st/components/flash_cards/note_math_exercise.jsx that introduces settings for incidentals, randomizeAccidentals (b/#), intervalAccidentals, and virtualMidiKeyboard, and retains the original natural-only behavior when incidentals is off.
• Implemented per-turn accidental spelling logic that builds the input row and card labels from either natural names, fixed-sharp names, or a randomized mix of sharps/flats while ensuring visible mixing of both spellings each turn.
• Integrated the existing Keyboard component as an optional virtual piano that replaces the note-button row when virtualMidiKeyboard is enabled and maps piano key presses to enharmonic pitch-class answers.
• Small CSS updates in static/js/st/components/flash_cards/flash_cards.module.css to support disabled toggle styling and fixed-bottom keyboard layout.

Testing

• npx eslint static/js/st/components/flash_cards/note_math_exercise.jsx — succeeded.
• mkdir -p dev/out && npm run --silent note_math_csv > dev/out/note-math.csv - verification:

Root	min 2	2	aug 2	# 9	min 3	3	4	dim 5	5	aug 5	min 5	6	bb7	dim 7	min 7	7
C	C#/Db	D	D#/Eb	D#/Eb	D#/Eb	E	F	F#/Gb	G	G#/Ab	F#/Gb	A	A	A	A#/Bb	B
C#/Db	D	D#/Eb	E	E	E	F	F#/Gb	G	G#/Ab	A	G	A#/Bb	A#/Bb	A#/Bb	B	C
D	D#/Eb	E	F	F	F	F#/Gb	G	G#/Ab	A	A#/Bb	G#/Ab	B	B	B	C	C#/Db
D#/Eb	E	F	F#/Gb	F#/Gb	F#/Gb	G	G#/Ab	A	A#/Bb	B	A	C	C	C	C#/Db	D
E	F	F#/Gb	G	G	G	G#/Ab	A	A#/Bb	B	C	A#/Bb	C#/Db	C#/Db	C#/Db	D	D#/Eb
F	F#/Gb	G	G#/Ab	G#/Ab	G#/Ab	A	A#/Bb	B	C	C#/Db	B	D	D	D	D#/Eb	E
F#/Gb	G	G#/Ab	A	A	A	A#/Bb	B	C	C#/Db	D	C	D#/Eb	D#/Eb	D#/Eb	E	F
G	G#/Ab	A	A#/Bb	A#/Bb	A#/Bb	B	C	C#/Db	D	D#/Eb	C#/Db	E	E	E	F	F#/Gb
G#/Ab	A	A#/Bb	B	B	B	C	C#/Db	D	D#/Eb	E	D	F	F	F	F#/Gb	G
A	A#/Bb	B	C	C	C	C#/Db	D	D#/Eb	E	F	D#/Eb	F#/Gb	F#/Gb	F#/Gb	G	G#/Ab
A#/Bb	B	C	C#/Db	C#/Db	C#/Db	D	D#/Eb	E	F	F#/Gb	E	G	G	G	G#/Ab	A
B	C	C#/Db	D	D	D	D#/Eb	E	F	F#/Gb	G	F	G#/Ab	G#/Ab	G#/Ab	A	A#/Bb

• npm run build_assets — succeeded and generated the frontend assets used by the dev server.
• git diff --check — succeeded with no trailing whitespace or conflict markers.
• Started the dev server and verified the page rendered by requesting http://127.0.0.1:3000/flash-cards/note-math which returned HTML successfully.

---

Codex Task