Add support for the expanded set of black chords

[pganssle]

I finished #8 by just adding the basic black chords, and I have put off the expansion to include the full set of 15 "black chords" (including 10 inversions of the original 5 chords):

Trainers should add black-key chords to the previously learned nine white chords one at a time, with the method being identical to that employed during the period in which the nine white chords are learned. Therefore, first, trainers add five black chords in without any inversions. When the children can identify 14 chords (i.e., nine white chords plus five black chords) accurately, trainers do not need to add additional chords. Only when a child cannot achieve identification of these 14 chords does a trainer need to add inversions of a chord that a child has trouble identifying. The 15 black chords are the sum of the five black chords and their inversions. For example, if a child cannot identify ‘AC#E,’ the trainer would add ‘C#EA’ and ‘EAC#.’ In this way, the number of chords, or the order of presentation of these 15 black chords, varies with each individual, and trainers must present all the chords appropriate to the needs of a particular child. Perfect identification in the period for black-
key notes, defined by 100% accuracy across all essential chords, ensures acquisition of AP for black-key notes.

The full expanded set of chords is:

1. A major (Gray):
   • A: A3 C#4 E4
   • A/C#: C#4 E4 A4
   • A/E: E4 A4 C#5
2. D major (Tan):
   • D: D4 F#4 A4
   • D/F#: F#4 A4 D5
   • D/A: A4 D5 F#5
3. E major (Light Green):
   - E: E4 G#4 B4
   - E/G#: G#4 B4 E5
   - E/B: B3 E4 G#4
4. B♭ Major (Light Purple):
   - B♭: Bb3 D4 F4
   - B♭/D: D4 F4 Bb4
   - B♭/F: F4 Bb4 D5
5. E♭ Major (Sky Blue):
   - E♭: Eb4 G4 Bb4
   - E♭/G: G4 Bb4 Eb5
   - E♭/B♭: Bb3 Eb4 G4

According to the book, they chose not to assign distinct colors to each of these flags because it would be too tedious to make so many physical flags. Considering this is the web, it should be trivial to assign unique colors to them. The other option I thought would be to treat them as "rainbow" flags, where we assign a stripe pattern based on the notes involved. A quick mock-up of the idea:

One problem here might be that it would be a little hard to distinguish between the different inversions, since they would all be just permutations of one another, but maybe that's a good thing? The kids are supposed to be calling out chord names at this point anyway.

I think the best way to implement these would be to implement #12, where you would have a checkbox of which chords you want to study and you get to choose how many flags you'd like to see, then it pulls out a random subset of all the chords you want to study and plays one of those chords (so e.g. if you chose to study just the black chords with all their inversions, and asked for 9 options, it would pick a set of 9 chords out of the possible 15, play one of those, then when you click "next" it would choose a different 9 random chords and show you those, then play one of them).

The JSfiddle for the mockup is here, with the code saved for posterity below:

<div class="flag-holder">
    <div class="flag-spacer"></div>
    <div class="flag-wrapper">
        <div class="flag tan">
            <div class="chord-notes-container chord-tan">
                <div class="note-color note-F-sharp">
                    <div class="note-wrapper note-F-sharp note-F-sharp4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">F♯</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-A">
                    <div class="note-wrapper note-A-sharp note-A4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">A</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-D">
                    <div class="note-wrapper note-D note-D5">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">D</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flag-wrapper">
        <div class="flag gray">
            <div class="chord-notes-container chord-gray">
                <div class="note-color note-C-sharp">
                    <div class="note-wrapper note-C-sharp note-C-sharp4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">C♯</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-E">
                    <div class="note-wrapper note-C-sharp note-E4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">E</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-A">
                    <div class="note-wrapper note-A note-A4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">A</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flag-wrapper">
        <div class="flag tan">
            <div class="chord-notes-container chord-tan">
                <div class="note-color note-A">
                    <div class="note-wrapper note-A-sharp note-A4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">A</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-D">
                    <div class="note-wrapper note-D note-D5">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">D</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-F-sharp">
                    <div class="note-wrapper note-F-sharp note-F-sharp5">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">F♯</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flag-spacer"></div>
</div>

body {
    background-color: #212121;
}

div.flag-spacer {
    width: 100%;
    flex-grow: 1;
}

div.flag-holder {
    width: 80dvw;
    height: 80dvh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

div.flag-wrapper {
    width: calc(33% - 0.6em);
    margin-left: 0.25em;
    margin-right: 0.25em;
    display: flex;
    max-height: 40vh;
}

div.flag {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    border: 1px solid black;
}

div.flag.gray {
    background: gray;
}

div.flag.tan {
    background: #F0E68C;
}

div.chord-notes-container {
    color: #000;
    font-weight: bold;
    justify-content: space-around;
    align-items: center;
    width: calc(min(100%, 15em));
    height: calc(min(10rem, 95%));
}

div.chord-notes-container {
    display: flex;
    user-select: none;

    div.note-color {
        width: 2em;
        height: 100%;
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        border-top: 1px solid;
        border-bottom: 1px solid;

        &.note-A {
            background-color: pink;
        }

        &.note-B {
            background-color: purple;
        }

        &.note-C {
            background-color: red;
        }

        &.note-C-sharp {
            background-color: brown;
        }

        &.note-D {
            background-color: orange;
        }

        &.note-E {
            background-color: yellow;
        }

        &.note-F {
            background-color: green;
        }

        &.note-F-sharp {
            background-color: #87CEFA;
        }

        &.note-G {
            background-color: blue;
        }


        // This makes the notes appear diagonal, from bottom left to top right
        &:nth-child(1) {
            align-items: flex-end;
            border-left: 1px solid;
        }

        &:nth-child(2) {
            align-items: center;
        }

        &:nth-child(3) {
            align-items: flex-start;
            border-right: 1px solid;
        }

        div.note {
            width: 100%;
            height: 100%;
            background-color: #333;
            clip-path: circle(50%);
            opacity: 0.95;
        }

        div.note-text {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 10;
            font-size: 1.2em;
        }
    }
}

div.chord-notes-container div.note-wrapper {
    width: 2em;
    height: 2em;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    user-select: none;
    position: relative;
}

[samspineai]

"I think the best way to implement these would be to implement #12, where you would have a checkbox of which chords you want to study"

I want to add a vote for the chord selection option as it would be nice to focus on the chords in progress vs maintenance (e.g. just the black chords).