https://statecollegeguitarlessons.com/adb

Please Click "A" for #Aeolean mode (.webm)
Click "M" for Mode Views (SVG variants)

I'm looking for "mostly vanilla" code. I honestly don't think my vision necessitates the use of a full-on Vue/ React deploy

Otherwise, I need to find the correct library to work w/ SVG/ UI

I specify that because -- ULTIMATELY-- the #utility is greater if the user is able to click-on/ click-off the "missing" tones.

# Objective
make an #interactive html page with SVG to capture User input (e.g. assessments) much like what is shown here.
https://statecollegeguitarlessons.com/adb/aeolean.webm
#training

## Detail
The images depict dots representing positions of tones of the Aeolean mode (relative minor) of a #Major #Scale as appears on a standard #guitar #fretboard

The various SVG's show what is meant to be perceived as "the same mode", with select tones missing. It's a basic, "locate what's missing" #Puzzles

### Deficit

I know how to make the SVG "look how" i want enough to satisfy me.
I know what I want for the function of the user interaction.

I don't know efficient JavaScript/ #HTML5 to do it

Any libraries that are meant specifically to assist w/ this type of project?
There's jQuery UI for example, but I've never messed with it deeply.

What is your suggestion?
#guitarteacher #css #javascript #jquery #guitarlessons