Duolingo-style Music Theory

The user wants me to create a Duolingo-style app for music theory. This is a coding request - they want an interactive, gamified learning experience for music theory, similar to how Duolingo teaches languages. Let me think about what makes Duolingo engaging: 1. Gamification - XP, streaks, hearts/lives, levels 2. Bite-sized lessons 3. Multiple question types (multiple choice, fill in blank, matching) 4. Progress tracking 5. Immediate feedback 6. Progression system (unlocking new levels) 7. Visual appeal - colorful, friendly design 8. Celebrations/animations for correct answers For music theory specifically, I could include: - Note reading (treble/bass clef) - Intervals - Scales - Chords - Rhythm - Key signatures - Ear training (could use Web Audio API to play notes!) Let me design this as a single-page application with: 1. **A learning path** (like Duolingo's tree/path with nodes) 2. **Lesson system** with different question types: - Multiple choice (identify notes, intervals) - Note identification on a staff (I can draw a staff with canvas or SVG) - Listen and identify (using Web Audio API to play notes) - Building scales/chords 3. **Gamification**: - Hearts (lose when wrong) - XP points - Streak counter - Progress bars within lessons - Level completion celebrations 4. **Visuals**: Duolingo-esque design - rounded corners, bright colors, friendly mascot area maybe Let me plan the structure: **Levels/Units:** 1. Notes on the Staff (treble clef basics) 2. Rhythm Basics (whole, half, quarter notes) 3. Intervals 4. Major Scales 5. Basic Chords **Question types:** 1. Multiple choice - "What note is this?" with a rendered note on staff 2. Listen and identify - play a note with Web Audio API 3. Identify intervals 4. Rhythm counting 5. Complete the scale **Tech approach:** - HTML/CSS/JS single file (or separate files - but single HTML might be easiest to share) - Use SVG or Canvas for music notation rendering - Web Audio API for playing notes - Tailwind CSS could make styling easier but might be cleaner with custom CSS for game feel - Actually, a single HTML file is probably best for shareability Let me think about rendering music notation. Drawing a staff with notes: - Staff: 5 lines - Treble clef - drawing a proper clef is hard, but I can use music font symbols (𝄞) or draw simplified versions - Notes: oval note heads with stems - Position notes based on pitch I could use Unicode music symbols: - 𝄞 (treble clef) - 𝅘 (eighth note) - 𝅝 (whole note) - 𝅗 (half note) - 𝅘𝅥 (quarter note) - ♯ ♭ ♮ (accidentals) Or draw with SVG/Canvas for more control. Let me use canvas or SVG to draw: - 5 staff lines - Note positions on the staff - Note heads (filled or hollow ellipses) - Stems For the treble clef, I can use the Unicode character 𝄞 with a large font size, positioned appropriately. **Note positions on treble clef:** From bottom line to top: E4, G4, B4, D5, F5 (lines) Spaces: F4, A4, C5, E5 Below staff: C4 (middle C with ledger line), D4 Above: G5, A5, etc. Each staff step (line or space) = position. Let's say bottom line E4 = step 0. Then: - E4 = 0 (bottom line) - F4 = 1 (first space) - G4 = 2 (second line) - A4 = 3 - B4 = 4 - C5 = 5 - D5 = 6 - E5 = 7 - F5 = 8 (top line) - G5 = 9 - A5 = 10 Below: - D4 = -1 - C4 = -2 (middle C, needs ledger line) - B3 = -3 - A3 = -4 (needs ledger lines) For canvas drawing: - Staff line spacing: say 12px between lines - Staff spans from y=top to y=top+48 (4 gaps × 12px) - Note step each = 6px (half of line spacing) **Audio:** Web Audio API with oscillators for note playback. Simple sine/triangle wave with envelope. Map note to frequency: A4 = 440Hz, each semitone = 440 * 2^(n/12). Note names to MIDI: C4 = 60. Frequency = 440 * 2^((midi-69)/12). **Game mechanics:** - Start with 5 hearts (use ❤️) - Each lesson has ~8-10 questions - Wrong answer loses a heart - Complete lesson → earn XP, celebration screen - Unlock next lessons - Progress bar at top during lesson **Lesson content plan:** Level 1: "Notes 1" - Treble clef notes (E, G, B, D, F lines + F, A, C, E spaces) - Q types: identify note shown on staff (multiple choice among letter names) Level 2: "Notes 2" - More notes, including ledger lines below Level 3: "Rhythm" - identify note durations - Show whole/half/quarter/eighth notes, ask which is which - "Which note gets 1 beat in 4/4?" Level 4: "Intervals" - melodic/harmonic intervals - Play two notes, identify interval (2nd, 3rd, 5th, octave) - Show two notes on staff, identify interval visually Level 5: "Scales" - C major, G major - Complete the scale - "Which note comes next?" Level 6: "Chords" - major/minor triads - Listen to chord, identify major or minor - Identify notes in a chord Let me also add a streak/XP system stored in localStorage for persistence. **Design aesthetic (Duolingo-like):** - Bright green (#58cc02) primary - Blue (#1cb0f6) for info - Rounded buttons with bottom shadow (3D effect) - Cards with borders - Friendly typography - Celebration with confetti when completing a lesson - Mascot could be a simple emoji or SVG owl 🦉 or music-themed 🎵 Let me structure the code: ``` State: - currentScreen: 'home' | 'lesson' | 'complete' - hearts, xp, streak - completedLevels: Set - currentLevel, currentQuestionIndex - lesson questions array ``` **Screens:** 1. Home/path screen - vertical path of level nodes, locked/unlocked 2. Lesson screen - question area, answer options, check button, feedback bar 3. Complete screen - XP earned, continue button **Question generation:** I'll create generators that produce questions with: - type: 'noteName', 'rhythm', 'intervalSound', 'intervalVisual', 'chordSound' - prompt text - rendered content (canvas draw function) - options array - correct answer index - optional audio Let me write helper functions: - `drawStaff(canvas, notePositions)` - draws staff with notes - `playNote(midi, duration)` - audio - `noteToMidi(noteString)` like "C4" → 60 - `midiToFrequency` Duolingo-style check flow: 1. User selects an answer 2. Clicks "Check" button 3. Feedback bar appears (green correct / red incorrect) 4. Button becomes "Continue" 5. Next question Progress bar at top fills with each correct answer... actually in Duolingo it fills per question answered. Let me draft the question data model: ```js { prompt: "What note is this?", staff: { notes: [{ step: 0 }], clef: 'treble' }, // rendering info audio: [60], // midi notes to play when prompt shows or via play button options: ["E", "G", "B", "D"], correct: 0, explanation: "The bottom line of the treble staff is E." } ``` For "listen" questions, show a big play button. Note step mapping for treble clef rendering: - step represents staff steps from bottom line (E4 = step 0) - Can be negative (below staff) or above 8 - Ledger lines needed for steps >= 10 or <= -2 (roughly; C4 = -2 needs one ledger, A5=11 needs ledger) Ledger line rules: notes on a line (even steps) beyond the staff need ledger lines. Step -2 (C4): one ledger line through. Step -4 (A3): two ledger lines (one between staff and note through -2 equivalent, one through note). Actually let me think: - Below staff: D4 (-1) no ledger (space below). C4 (-2): ledger line through note. B3 (-3): sits below ledger line (the ledger line at -2). A3 (-4): two ledger lines. - So for even steps < 0, draw ledger lines at -2, -4, ... down to note's step. - Above staff: G5 (9): no ledger (space above). A5 (10): ledger through. B5 (11): above ledger. C6 (12): two ledgers. - For even steps > 8, draw ledgers at 10, 12, ... up to note's step. Good. Rendering notes: - Note head: ellipse, rotated slightly - For whole/half: hollow - For quarter and shorter: filled - Stem: from note head, up on left if below middle line, down on right if above (standard notation: if note is above middle line, stem goes down on left side; below middle line stem goes up on right side). For chords, direction based on average. Actually let me simplify: chords/notes displayed - stem up on right side by default, and for rhythm questions the stem style matters (whole = hollow no stem, half = hollow + stem, quarter = filled + stem). For rhythm questions I'll show single notes with different styles. Better plan for rhythm lesson: - Show a note symbol and ask "How many beats?" (in 4/4) - Visual: drawn note type Options: 4 beats (whole), 2 beats (half), 1 beat (quarter), 1/2 beat (eighth) Eighth note needs a flag - can draw with a small curve. Interval questions: show two notes on staff spaced horizontally (melodic) or stacked (harmonic). Ask the interval: 2nd, 3rd, 4th, 5th, 6th, 7th, Octave. Compute from step difference: interval number = |stepDiff| + 1. Interval audio questions: play two notes, options like "Minor 2nd", "Major 3rd", "Perfect 5th", "Octave". Let me stick to simple recognizable ones: unison, 3rd, 5th, octave — actually let me do: Major 2nd (2 semitones), Major 3rd (4), Perfect 4th (5), Perfect 5th (7), Octave (12). With semitone-based correct answer labels. To keep it accurate I should generate pairs with known semitone distances and names. For chord questions: play triad, ask Major or Minor. Major triad: root, +4, +7. Minor: root, +3, +7. Also visual chord: stacked notes, ask "What chord?" e.g. C major = C E G (steps 2,4,6... wait treble steps: C5 = 5, E5 = 7, G5 = 9). Stacked thirds on staff look nice. **Lesson generation:** Each level generates 8 questions randomly from templates. Levels: 1. **Treble Notes 1** 🎵 - Lines E G B D F + spaces F A C E. Multiple choice note ID. 2. **Treble Notes 2** 🎼 - Add ledger notes: middle C, D4, A5, G5. 3. **Rhythm** 🥁 - Note durations. 4. **Intervals** 🎹 - Visual interval identification (2nd-8ve). 5. **Ear Training** 👂 - Play notes, identify note or interval. 6. **Chords** 🎸 - Major vs minor (audio + visual). That's a nice progression. I'll add a "Crowns/XP" system. **Unlock logic:** Level n unlocked when level n-1 completed. Completed levels can be replayed. **Persistence:** localStorage for xp, streak, completed levels. Streak logic: last played day. Maybe keep it simple: track streak by playing daily; on load, check lastPlayed date. **Visual polish:** - Duolingo-style 3D buttons (box-shadow bottom, press effect) - Path with connected nodes (zigzag like Duolingo) - Locked levels grayed with 🔒 - Current level highlighted with "START" tooltip - Level icons with emoji - Celebration screen with confetti animation (simple CSS/canvas confetti) - Hearts display during lesson - Answer feedback: shake animation on wrong, bounce on correct - Sound effects: success ding, error buzz (Web Audio) Fonts: Use system fonts with rounded feel - 'Nunito' from Google Fonts would be perfect (Duolingo uses similar rounded font). Let me include Google Fonts link for Nunito. Colors: - Primary green: #58cc02, darker #46a302 - Blue: #1cb0f6 - Red: #ff4b4b - Background: white / light - Path gray: #e5e5e5 Let me now write the code. Single HTML file with embedded CSS/JS. Structure: ```html Duolingo-style Music Theory

``` Wait — Claude Code typically edits files. But this conversation appears to be a direct request "Create duolingo for music theory" with no existing project context. Since I'm in a CLI context (Claude Code), the best approach is to create the files (index.html etc.) in the working directory. But actually, given the interaction format here, I'll provide the code as my response. Hmm. The system says I'm Claude Code, a CLI tool. The user asked to create something. In Claude Code style, I'd write files. But without tool availability in this conversation format (no function calls shown), I should present the result in my response. Given the format expectations, I'll provide a complete single-file HTML application in a code block, plus brief explanation of how to run it and what's included. Actually, let me reconsider: the response format guidelines say for Claude Code, I should be concise, use markdown. The output will be a large code artifact essentially. I'll present the full code in one code block, keep surrounding prose minimal, and add a short "How to run" and "What's inside" summary. Now let me carefully design the code. **HTML skeleton:** ```html

streak, xp

``` I'll manage screens by toggling hidden classes. **JS core:** ```js const state = { xp, streak, hearts, completed: [], screen, questions, qIndex, selected, feedback... } ``` **Levels definition:** ```js const LEVELS = [ { id: 'notes1', title: 'Treble Clef 1', icon: '🎵', desc: 'Learn the notes on the lines and spaces', gen: genNotes1 }, ... ] ``` Generators return array of question objects. Question object: ```js { type: 'choice', // always multiple choice for simplicity, some with audio or canvas prompt: 'What note is this?', canvasDraw: (ctx, w, h) => {...} // optional render playButton: true, // shows audio play button audio: () => {...}, // play via WebAudio options: ['E','F','G','A'], correctIndex: 0, fact: 'E sits on the bottom line of the treble staff.' // explanation shown on wrong } ``` I need canvases assigned per question render. When rendering a question, if canvasDraw, create canvas element and call it. **Drawing staff with notes:** ```js function drawStaffWithNotes(ctx, opts) { // staff lines // notes: array of {step, style: 'whole'|'half'|'quarter', x?} } ``` Layout for a single note: x = center. For two-note melodic: x = 30%, 70%. For stacked chord: same x. Note geometry: - staffTop y; spacing s (e.g., 14px); staff spans 4s. - y for step: y = staffTop + 4s - step*(s/2) - note head ellipse: rx = s*0.55, ry = s*0.42, rotate -20° - stem length: 3.5s - ledger lines for beyond-staff notes Let me write `drawNote(ctx, x, step, style)`. Treble clef: draw Unicode '𝄞' in serif font. Canvas fillText with '48px serif'. Support varies... 𝄞 is in the Musical Symbols block; fallback may show tofu. Alternative: simple stylized clef drawn with paths? Risky/tedious. Many systems (Windows with Segoe UI Symbol, macOS) support 𝄞. I could also skip the clef and just label nothing. Alternative safe approach: draw a simple "G-clef-like" swirl with bezier curves. Let me attempt a decent treble-clef approximation using arcs. Hmm, might look janky. Option: use text '𝄞' with font-family fallback list: 'Segoe UI Symbol', 'Noto Music', sans-serif. On most modern devices it'll render. And provide graceful degradation — even if missing glyph, lesson still works. Let me include it but position carefully. I'll compute metrics roughly and eyeball placement. Actually, simpler robust idea: draw the staff and use plain letter "G" stylized? No. I'll use 𝄞 with fallback. Fine. **Audio:** ```js let audioCtx; function ensureAudio(){ audioCtx ||= new (window.AudioContext||window.webkitAudioContext)(); } function playTone(midi, start=0, dur=0.8, type='triangle') { ensureAudio(); const f = 440*Math.pow(2,(midi-69)/12); const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain(); osc.type = type; osc.frequency.value = f; gain.gain.setValueAtTime(0, t); gain.gain.linearRampToValueAtTime(0.4, t+0.02); gain.gain.exponentialRampToValueAtTime(0.001, t+dur); osc.connect(gain).connect(audioCtx.destination); osc.start(t); osc.stop(t+dur+0.1); } ``` Play note sequence / chords for questions. Auto-play? Browsers require user gesture; the "play" button solves that. Also success/error sounds: - correct: two ascending notes (like ding): G5 then C6 quick. - wrong: low buzz: E2 or dissonant. MIDI mapping helpers: ```js const NOTE_NAMES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; ``` For treble note ID questions, options are letter names A-G. Treble step → letter: step 0 = E. letters = ['E','F','G','A','B','C','D'] mapped by (step mod 7): letter index: step 0→E(0), 1→F(1), 2→G(2), 3→A(3), 4→B(4), 5→C(5), 6→D(6)... so lettersCycle = ['E','F','G','A','B','C','D']; letterForStep = lettersCycle[((step%7)+7)%7]. Check: step 3 → A ✓ (lettersCycle[3]='A'). step -2 (C4): (-2 %7 +7)%7 = 5 → 'C' ✓. Pitch for ear-training answer choices: step→midi. Treble: E4 step0 = midi 64. midi = 64 + semitoneOffset, but steps are diatonic, not semitones. Diatonic→semitone: C=0... Using scale steps relative to E: E=0 steps (E→F=1 semitone? no, diatonic steps vary). Simpler: map step→note name→midi assuming C major (natural notes only). midi for natural notes: C=0, D=2, E=4, F=5, G=7, A=9, B=11 + octave. step→(letter, octave): Start E4 at step0. Each 7 steps = +1 octave. letter idx as above. Compute: octave = 4 + floor(step/7) ... careful with negative steps: step -1 (D4): floor(-1/7) = -1 → octave 3? Wrong, D4 is below E4, octave 4. Hmm. Let me define differently: use absolute position: pos = step + offset where E4 pos... Let me just map by iterating. Or use: absoluteDiatonic where C0-ish. Define: diatonicIndex with C=0,D=1,E=2,F=3,G=4,A=5,B=6 within octave, and absolute = octave*7 + diatonicIndex. E4 = 4*7+2 = 30. So step s of treble: absolute = 30 + s. octave = floor(absolute/7), diatonic = ((absolute%7)+7)%7. letter names from diatonic: ['C','D','E','F','G','A','B']. midi = (octave+1)*12 + [0,2,4,5,7,9,11][diatonic]. (MIDI: C4=60, so octave 4 C = 60 = (4+1)*12.) C4: absolute for middle C: C4 = 4*7+0 = 28 → step = 28-30 = -2 ✓ matches earlier. Great, this gives me midi for audio and letter for answers. **Level generators:** 1. genNotes1: pick steps 0..8 (E4..F5), create Q per random notes: canvas with staff+note, options: correct letter + 3 distractors from other letters. 8 questions. 2. genNotes2: steps -2..11, including ledger lines. Same format, maybe ask also which octave? Keep letter ID only. 3. genRhythm: Q1: show note style, ask beats: whole=4, half=2, quarter=1, eighth=0.5 ("½ beat"). Also "Which is the quarter note?" style identification questions showing name options... Options: 'Whole note','Half note','Quarter note','Eighth'. Draw the symbol; also "How many beats?" with options 4/2/1/½. Mix ~8 questions. Eighth note drawing: filled head + stem + flag (draw a small quadratic curve from stem top). 4. genIntervalsVisual: show two notes stacked (harmonic) on staff, ask "What interval is this?" options from ['2nd','3rd','4th','5th','6th','7th','Octave'] pick 3 distractors. Steps: lower note step a, upper a+k, k in 1..7; interval number = k+1. But also constrain notes to staff range (a >= -1, a+k <= 10, say). Include name: "Perfect 5th"? Just ordinal names to keep simple: '3rd','5th','Octave'. Good enough and musically fine as interval numbers. 5. genEarIntervals: play two notes sequentially then together; options semitone-specific: let me pick from set: 'Major 2nd'(2), 'Major 3rd'(4), 'Perfect 4th'(5), 'Perfect 5th'(7), 'Octave'(12). Root random 55..65ish. Options: correct + 3 random from remaining. Provide replay button. 6. genChords: play triad major (root,+4,+7) or minor (+3,+7); ask Major or Minor. Also visual: stacked notes on staff C major vs C minor? Visual chord quality requires accidentals (E♭) — need flat signs drawing (♭ text). Could include: show C-E♭-G with ♭ drawn using '♭' char. Let's include one visual type: options 'C Major','C Minor' with drawn triad where minor shows flat. Draw accidental char '♭' before the E note. That's fine. Actually simpler for chord lesson: audio-based major/minor (4-5 Qs), plus "Which notes make a C major chord?" options like ['C – E – G','C – E♭ – G','C – E – A','C – D – G'] etc. Multiple choice trivia with fact text. And "A chord with root + 4 semitones + 7 semitones is..." Too abstract maybe. Keep: audio identification + note-set identification. Good. XP: complete lesson → +10 XP per question? Say XP = questionsCorrect... standard: lesson XP 10 + bonus if no hearts lost. I'll do: base 10 XP, +5 if hearts remaining >= 4? Keep simple: XP = number of questions (correct needed to finish anyway) + perfect bonus. Since questions removed on wrong? In Duolingo, wrong answer → question requeued. I'll do that: shuffle wrong questions back to the end. Then completion = all answered correctly; XP = 10 + (hearts left)*2 maybe. Simple: +10 XP per lesson, +5 bonus if no mistakes. Fine. Hearts: start lesson with 5. Wrong answer → -1. At 0 hearts → lesson failed screen "Out of hearts!" with retry button. Streak: increment once per day when lesson completed. Store lastStreakDate. If same day, no double count. **Rendering path (home):** Vertical list of level nodes in zigzag pattern. Node: circle with icon, colored if unlocked, gray if locked, gold/completed if done. Click → start lesson (if unlocked). Tooltip ~ title below. Include header with title "🎵 MelodyQuest" or similar name. Let me name the app "Tempo" or "Melodyo"? "Duolingo for music" → "Notalingo"? I'll call it "TuneUp" or "Melodoro"... Let's go with "🎵 Notey" ... Actually "TuneLingo" is fun. Or "Solfege"? I'll pick "Tunelingo — Music Theory". Hmm, keep it clean: "🎵 TuneLingo". Progress circles: show crown for completed. Path layout: CSS flex column with items offset alternately via transform translateX. Simpler: each node centered with alternating margin-left pattern like Duolingo [-20, 20%]. I'll compute inline style transform: translateX(offsets[i % pattern]). Add section dividers with unit names optionally. Keep single section with 6-7 nodes. **Lesson UI:** Top bar: - ✕ (quit with confirm?) → just return - Progress bar (animated width) - ❤️ hearts count (heart icons) Question area: - prompt text (large bold) - canvas (staff) or play-button (audio) - options grid (buttons). For note ID: 4 options in 2x2 or list. Duolingo uses list or grid; grid 2 columns works on desktop, single column mobile. - Selected state highlight; then CHECK button enabled. - Feedback strip: green "Correct! 🎉" / red "Wrong — correct answer: X" + fact text. The bottom button becomes CONTINUE. Behavior: on wrong, requeue question to end of queue; progress doesn't advance. Progress bar advances per correctly answered question (unique). Track answeredCount/total. **Complete screen:** confetti canvas overlay, "Lesson Complete!", XP gained, streak update, Continue → home. **Out of hearts screen:** simple modal-ish screen with refilled message and retry. **Code size:** Probably 700-900 lines. That's fine. Let me now write everything carefully. CSS plan (Duolingo feel): - body: font Nunito, bg #fff (or #f7f7f7 for home), color #3c3c3c - buttons: border-radius 14px, border 2px, with box-shadow: 0 4px 0 darker; active: translateY(4px), shadow none. - .btn-primary: bg #58cc02, shadow #46a302, white text - .option: white bg, border #e5e5e5, shadow 0 2px 0 #e5e5e5; selected: bg #ddf4ff border #84d8ff - feedback bar: fixed bottom, bg #d7ffb8 (correct) text #58a700; wrong bg #ffdfe0 text #ea2b2b - progress bar: track #e5e5e5, fill #58cc02 rounded - path node: width 70px circle; active: bg #58cc02 shadow #46a302 white icon; locked: #e5e5e5 shadow #c7c7c7, icon gray; completed: gold (#ffc800 shadow #e0a800). - "START" pill under active node. Hearts display: `❤️`.repeat? Use spans with heart icon; count numeric "❤️ 4". Streak header on home: flame 🔥 with count, XP ⭐ or ⚡. Confetti: generate ~80 divs with random colors falling via CSS animation on complete screen, or canvas. I'll do canvas confetti: simple rect particles with random vx/vy, gravity. ~30 lines. Screens as divs with .hidden {display:none}. Now write generators concretely. Helpers: ```js function shuffle(arr){ for(let i=arr.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1)); [arr[i],arr[j]]=[arr[j],arr[i]];} return arr; } function randInt(a,b){ return a+Math.floor(Math.random()*(b-a+1)); } function sample(arr){ return arr[Math.floor(Math.random()*arr.length)]; } function letterForStep(step){ const abs = 30+step; const d = ((abs%7)+7)%7; return 'CDEFGAB'[d]; } function midiForStep(step){ const abs=30+step; const oct=Math.floor(abs/7); const d=abs-oct*7; return (oct+1)*12 + [0,2,4,5,7,9,11][d]; } ``` Check midiForStep(0): abs 30, oct 4 (floor 30/7=4), d=2 → (5)*12 +4 = 64 ✓ E4. midiForStep(-2): abs 28, oct 4, d 0 → 60 ✓ C4. midiForStep(9): abs 39, oct 5 (39/7=5.57→5), d=4 → 72+7=79 → G5 ✓ (G5=79). Note ID question generator: ```js function makeNoteIdQ(stepsPool){ const step = sample(stepsPool); const letter = letterForStep(step); // distractors: other letters const others = 'ABCDEFG'.split('').filter(l=>l!==letter); const opts = shuffle([letter, ...shuffle(others).slice(0,3)]); return { prompt:'What note is this?', draw: ctx => drawStaff(ctx,[{step, style:'quarter'}]), options: opts, correct: letter, fact: `That's ${letter} — ${stepDesc(step)}`, play: () => playTone(midiForStep(step)) }; } ``` Maybe auto-play the note on render for pitch association (nice touch) — with user gesture needed; lesson start initiated by click (START), so audio context can resume then. I'll attempt auto-play once when question displays, plus replay button available always. stepDesc: e.g., for 0 "the bottom line of the treble staff", general: lines/spaces. I'll create description helper: ```js function stepDesc(step){ // lines at even steps 0..8; spaces odd } ``` Give ordinal: 'bottom line', '1st space', ... Let me define mapping: lines: 0:'the bottom line (E)', maybe too much. Simplify facts: - For 0: "E is on the bottom line. Remember the lines: E-G-B-D-F ("Every Good Boy Deserves Fudge")." - General: `Lines spell E–G–B–D–F and spaces spell F–A–C–E.` Use that as universal fact. Keep facts short. Rhythm generator: ```js const RHY = [ {name:'Whole note', beats:'4 beats', style:'whole'}, {name:'Half note', beats:'2 beats', style:'half'}, {name:'Quarter note', beats:'1 beat', style:'quarter'}, {name:'Eighth note', beats:'½ beat', style:'eighth'}, ]; ``` Q type A: draw style X → prompt 'How many beats is this note worth (in 4/4)?' options beats. Q type B: draw style → 'Name this note' options names. Make 2 of each ×4 = 8. Interval visual gen: ```js function makeIntervalQ(){ const k = randInt(1,7); // steps between const a = randInt(-1, 9-k); // keep within staff+ledger modest const names={1:'2nd',2:'3rd',3:'4th',4:'5th',5:'6th',6:'7th',7:'Octave'}; draw: two stacked notes same x, steps a and a+k, quarter style. options: correct name + 3 others fact: `A ${names[k]} spans ${k+1} letter names (e.g., count the note positions).` } ``` Melodic version: notes side-by-side — but same x stacked simpler; alternating visual horizontal (melodic interval) look nicer; do both variants randomly. For melodic two notes, x positions spread; stems both up. Ear interval gen: ```js const EAR = [ ['Major 2nd',2],['Major 3rd',4],['Perfect 4th',5],['Perfect 5th',7],['Octave',12] ]; ``` Root midi = randInt(50,62) (D3..D4). Play root then root+semi sequentially (0s, 0.7s) then both together at 1.4s. Options: correct + 3 of the other labels. fact: semitone count. Chord gen: - Audio: major vs minor triad; root randInt(55,65). Play all three together (arpeggio slight?). Options ['Major','Minor']. - Build-a-chord: prompt 'Which notes form a C major chord?' options sets. Let me define levels list: ```js const LEVELS=[ {id:'n1', icon:'🎵', title:'Notes I', subtitle:'Treble lines & spaces', gen: ( )=>genNoteLesson([0,1,2,3,4,5,6,7,8],8)}, {id:'n2', icon:'🎼', title:'Notes II', subtitle:'Ledger lines', gen:()=>genNoteLesson([-2,-1,0,1,4,5,8,9,10,11],8)}, {id:'rh', icon:'🥁', title:'Rhythm', subtitle:'Note durations', gen:genRhythmLesson}, {id:'int', icon:'🎹', title:'Intervals', subtitle:'2nds to octaves', gen:genIntervalLesson}, {id:'ear', icon:'👂', title:'Ear Training', subtitle:'Hear the distance', gen:genEarLesson}, {id:'ch', icon:'🎸', title:'Chords', subtitle:'Major vs minor', gen:genChordLesson}, ]; ``` genNoteLesson builds 8 questions sampling pool (with repeats ok but ensure variety: shuffle slices). Render pipeline: ```js function startLesson(levelIdx){ state.hearts=5; state.queue = LEVELS[levelIdx].gen(); // array of Q state.total = queue.length; state.answered=0; show question } function renderQuestion(q){ prompt element; canvas if q.draw; play btn if q.play (play once automatically); options buttons. } ``` On CHECK: compare; mark feedback; if wrong hearts--, requeue (queue.push(q)), hearts 0 → fail. If correct answered++, progress = answered/total. Then CONTINUE → next; if queue empty → complete. Canvas sizing: width 340, height 150. drawStaff receives dims. drawStaff implementation: ```js function drawStaff(ctx, notes, opts={}){ const W=ctx.canvas.width, H=ctx.canvas.height; ctx.clearRect(0,0,W,H); const s = 13; // spacing const top = opts.top ?? 40; const left=16, right=W-16; ctx.strokeStyle='#444'; ctx.lineWidth=1.4; for(let i=0;i<5;i++){ const y=top+i*s; line(left,right); } // treble clef text ctx.font = `${s*4.6}px "Segoe UI Symbol", serif`; ctx.fillText('\u{1D11E}', left+2, top+ s*3.7); // alignment tricky // notes const xs = notes.map((n,i)=> n.x ?? (notes.length===1? W*0.62 : W*0.42 + i* (W*0.35))); notes.forEach((n,idx)=> drawNote(ctx, xs[idx], top, s, n.step, n.style, notes.length>1 && n.stacked)); } ``` Hmm, clef positioning with fillText: baseline parameter is y of baseline. Treble glyph roughly spans from below bottom line to above top. Empirically: fontSize ≈ 4.3*spacing, baseline at top + 3.3*spacing. Might need tweak but acceptable. If glyph missing, tofu box drawn — acceptable risk; alternatively detect support via measureText width? Over-engineering. Keep with serif fallback; most platforms fine. drawNote: ```js function drawNote(ctx,x,top,s,step,style){ const y = top + 4*s - step*(s/2); // ledger lines const needBelow = step<=-2 ? even steps from -2 down to step const needAbove = step>=10 ? from 10 up to step for(each even k in range) draw ledger line at y(top, k), x±s*0.9 ctx.lineWidth=1.6 // head ctx.save(); ctx.translate(x,y); ctx.rotate(-0.25); ellipse path; style==='whole'||'half' → stroke only (hollow), fill white then stroke; else fill black. ctx.restore(); // stem if(style!=='whole'){ stemUp = step < 4 (below middle line → stem up on right: x+rx*0.8, from y- ry*0.4 up to y - 3.2*s) else stem down: x - rx, down to y + 3.2*s } if(style==='eighth') draw flag: bezier from stem tip. if(style==='half') hollow with stem. } ``` Head dimensions: rx=s*0.62, ry=s*0.45. Also for stacked chord notes with adjacent steps (2nd interval) heads collide — for interval questions stacked steps differ ≥1 step: adjacent steps (k=1) require side-by-side heads. If k===1 in stacked rendering, offset second head to right by rx*1.7. Handle: if two stacked notes and step difference ===1, shift upper note x by +rx*1.8 and draw ledger accordingly... Simpler: for interval visual Qs, render melodic (side-by-side) arrangement always? Stacked looks better pedagogically but collision handling needed. I'll implement collision shift: in drawChord(steps): sort; heads that are 1 step apart get alternate x offsets like real notation. Manageable: ```js // group into clusters... ``` Simpler heuristic: if step difference between consecutive stacked notes ==1, shift the higher one right by headWidth*1.05 (or left). Stems drawn for the base x... For interval ID purposes stems optional — actually whole notes (no stems) fine for interval Qs! Use 'whole' style for stacked interval notes. Ledger lines span both xs. Let me handle shift: note.xi offset per note computed in generator when stacked && k==1: second note xShift = +s*1.15. Ledger line drawn at both positions (draw ledger for each note x). Fine — drawNote draws ledgers at its own x. But when two notes on same ledger line (e.g., both even), two overlapping ledger segments—acceptable. Chords lesson visual: triad steps like 2,4,6 (E,G,B)? For C major visual: steps -2,0,2? C major chord C-E-G: steps treble C4(-2),E4(0),G4(2)... wait C major root position: C,E,G → steps -2,0,2 (with ledger line through C). Minor: C,E♭,G → same steps with ♭ on E. Draw '♭' glyph before that note. Font serif '♭' fine (common). Options 'C Major'/'C Minor'. Or ask "This chord is..." Major/Minor. Include both chord audio and visual Qs. Now complete + fail screens. Confetti canvas full-screen pointer-events none. Particles with colors ['#58cc02','#1cb0f6','#ffc800','#ff4b4b','#a560e8']. Streak logic: ```js function touchStreak(){ const today = new Date().toDateString(); if(state.lastDate === today) return; // already counted today const yesterday = new Date(Date.now()-864e5).toDateString(); state.streak = (state.lastDate === yesterday) ? state.streak+1 : 1; state.lastDate = today; save(); } ``` Persistence: ```js function save(){ localStorage.setItem('tunelingo', JSON.stringify({xp,streak,lastDate,completed})); } function load(){...} ``` completed: array of level ids. Home render: header (app name + streak 🔥 n + XP ⭐ n), path nodes, plus reset progress link small. Node click unlocked → start. Also level tooltip: title + subtitle under node always (label), locked show 🔒. Edge: reset button "Reset progress" tiny at footer. Sounds: - correct(): playTone G5(79) 0.12 then C6(84) quick. - wrong(): playTone 46 (approx) low square short? Use triangle 0.25 at 110Hz-ish: playTone raw freq variant. Add playFreq(f,dur,type). Let me now also add "Tap to hear" button for audio questions: big speaker button 🔊. Auto attempts play on render (after user click flow it should be allowed since we entered lesson via click; AudioContext resume on first click). I'll write ensureAudio with resume(). Right — code volume. Let me write it out fully and carefully now, watching for correctness in the canvas math. Constants: W=360,H=170 canvas; s=14; top=45; staff spans 45..45+56=101; ledger for step -2 → y=45+56+14=115; step 10 → 45+56-5*14... y(step)=top+4s - step*s/2. For step 10: 101-70=31 → above top by 14 → ledger needed at y=31. OK H=170 gives margin for step -4? y(-4) = 101+28=129, plus stem down further 45 → 174 exceeds. For notes step<-2 stems go up (step<4 → up). Stem up from y goes upward — fine. Step -4 (A3) not used (pool max -2). Above: step 11 (A5): y=101-77=24, stem down goes to y+45=69 fine. Notes 2 pool includes 11. Canvas width per note group: single note x at W*0.6. For melodic interval: xs W*0.35 and W*0.7. Options ordinal names. For stacked chord triad: xs all W*0.58, whole-style with stems? Triad: use quarter style with one stem. Stems: for stacked, draw single stem from highest note (if stem up, from top note). Simplify: use whole-note style (no stems) for chords — acceptable visually. Do that; questions about chord quality don't need stems. Interval stacked two notes also whole style. Good, avoids stem complexity for stacked. For k==1 (2nd) stacked: shift upper note x by +s*1.3; ledger lines each draw own. If both have ledgers same y... e.g., steps (9,10): 10 has ledger at its x shifted; 9 none. ok. Now rhythm eighth: flag drawing: ```js stem tip (tx,ty); draw flag: bezier (tx,ty) → control (tx+s*1.2, ty+s*0.2) → (tx+s*0.7, ty+s*1.5) ``` Quadratic curve stroke width 2.5. Looks eighth-ish. Facts text for rhythm: "A quarter note gets 1 beat in 4/4 time.", etc. Auto from mapping. Now failure handling: when hearts hit 0 → show 'failScreen' overlay: "💔 Out of hearts!", lesson lost, buttons Try Again (restart same level) / Home. Completion: XP= +10, bonus +5 if mistakes==0. confetti. Also unlock next: LEVELS order; level i unlocked if i==0 or completed includes LEVELS[i-1].id. UI files: single index.html total. Maybe split style.css/script.js? Single file best for portability. Also meta viewport for mobile. Let me also handle 'Check' disabled until selection. Wrong selection UI: on check, correct option not auto-highlighted (keep simple), feedback bar shows "Correct answer: X". Accessibility minimal. Let me count questions: each lesson 8. Now, write the final code. Also include small intro on home: mascot emoji 🦉... music-themed: 🐦? Use 🎶 owl "Note-Owl"? Keep header simple. Write code: ```html TuneLingo — Learn Music Theory ``` I'll be thorough in writing CSS. Screens: #home: header bar fixed top with brand left, stats right (🔥 streak, ⭐ XP). Path centered container max-width 480, nodes with labels. Footer reset. #lesson: top bar (X, progress, hearts), main area, bottom action area with feedback + button. Bottom bar fixed: height ~110px; when feedback show colored. Structure detail: ```html ``` Same button toggles CHECK/CONTINUE. Complete screen & fail screen overlay divs. JS: full logic. Let me write carefully, aiming ~600-800 lines total. Ensure no bugs: Key pitfalls: - unicode in fillText: use \u{1D11E} — in JS string okay. - Canvas high-DPI: scale by devicePixelRatio for crispness. I'll set canvas.width = 360 * dpr, style width 360, ctx.scale(dpr,dpr). Simpler: skip dpr; slight blur acceptable. I'll include dpr handling—few lines, much crisper. Do it. - drawNote ledger/above: generalize: ```js function ledgerSteps(step){ const r=[]; if(step<=-2){ for(let k=-2;k>=step;k-=2) r.push(k); } if(step>=10){ for(let k=10;k<=step;k+=2) r.push(k); } return r; } ``` step -2 → [-2] ✓; step 10 → [10] ✓; step 12 → [10,12] ✓. step 11 → [] ... wait step 11 (B5): sits above the A5 ledger: needs ledger at 10. My range 10<=11 gives k=10 → [10]? Loop: k=10; k<=11 → include; k+=2 → 12 stops. Yes [10] ✓. Hmm B5 = step 11: B sits just above ledger line A (10). Correct to draw ledger at 10 ✓. Similarly step -3 (B3): below staff sitting under C4 ledger (-2): loop k=-2 >= -3 → include -2, next -4 >= -3 false → [-2] ✓. - Stem direction: step<4 → up else down. - Chord visuals stem-less whole notes fine. Auto-play note on question show for Notes lessons (helps connect sound) — attempts, catches promise errors fine. Audio: playTone(midi, when, dur, type='triangle', vol=0.35): ```js function playTone(midi, when=0, dur=0.9, type='triangle', vol=0.35){ ensureAudio(); const ac=AC; const t=ac.currentTime+when; const f=440*Math.pow(2,(midi-69)/12); const o=ac.createOscillator(), g=ac.createGain(); o.type=type; o.frequency.value=f; g.gain.setValueAtTime(0.0001,t); g.gain.exponentialRampToValueAtTime(vol,t+0.03); g.gain.exponentialRampToValueAtTime(0.0001,t+dur); o.connect(g); g.connect(ac.destination); o.start(t); o.stop(t+dur+0.05); } ``` exponentialRamp needs positive start value — setValueAtTime(0.0001) ✓. SFX: correct → playTone(79,0,.15,'sine',.4); playTone(84,.12,.25,...) ; wrong → square 138.59(C#3? somethin dissonant) short at low vol... let's do playTone(49,0,.3,'sawtooth',.12)? Might be harsh; use triangle at midi 45 dur .4 vol .2 plus 46 → minor second dissonance. ok. Now generators detail: genNoteLesson(pool, n): build n questions; each: step=sample(pool). Ensure last few not repeat consecutively — fine random. Options with duplicates impossible as letters unique. Facts: for step in 0..8 with lines/spaces universal string: lines: "The treble lines (bottom→top) spell E–G–B–D–F." spaces: "The spaces (bottom→top) spell F–A–C–E." ledger: "Notes above/below the staff use short ledger lines — count up or down from the staff." Choose based on step ranges. I'll compute: if step even && 0<=step<=8 → lines fact; odd in-range → spaces fact; else ledger fact. Rhythm lesson: questions array from RHY entries ×2 types shuffled, 8 items. Options: names (4 options as given) or beats ['4 beats','2 beats','1 beat','½ beat']. Interval lesson: 8 Q, k 1..7 random with bounds; variant stacked(side-by-side alt when k==1 shift) or melodic. Ear lesson: choose 3-4 of EAR set + repeats → 8 Q: build by cycling shuffled picks; options: correct label + 3 others (4-label distractors enough since 5 labels). Chord lesson: 6 audio Q (major/minor random) + 2 theory Q (C major set / 'minor chord has flatted 3rd'): - Q: 'Which notes make a C MAJOR chord?' options: ['C–E–G','C–E♭–G','C–E–G♯','C–D–G'] correct first; fact: 'Major triad = root + 4 semitones + 7 semitones (C, E, G).' - Q: 'Play the chord — is it MAJOR or MINOR?' audio. - Another theory: 'A MINOR triad is root + ...' options ['3 then 7 semitones','4 then 7','3 then 8','4 then 8'] correct '3 then 7'... phrasing: 'root + 3 semitones + 7 semitones'. options listed full strings. Total 8. Visual chord Q (quality from notation): include 2: show C-E♭-G (draw ♭ before E) ask Major/Minor with options. I'll implement: chordQ(steps, accidentalAtIndex) draw whole-note triad with accidental char left of note. Draw accidental: fillText('♭', x - s*1.9, y + s*0.35) font serif s*2. Now screens transitions: functions showHome(), startLesson(i), showComplete(), etc. Feedback bar: initially bottom bar contains only CHECK disabled. On selection enable. On check: fill feedback text & class correct/wrong, button label CONTINUE. On continue: if queue empty → complete; else render next; reset bar. Also clicking option after check → ignore (answered locked). Guard flag state.locked. Progress fill width = answered/total*100. Pre-fill small step as questions get answered. Heart: display ❤️×hearts visually maybe '❤️ ❤️ ❤️' count text. Home node START pill on first incomplete. Try again: restart same level minus persistence changes. Also quit button returns home with no penalty. Space 'completed' arrays saved. Reset progress: localStorage.removeItem; reload state; showHome. Edge: completing already-completed level replay adds XP again fine. Confetti: ```js function confetti(canvas){ particles 120; animate until off-screen; colors; } ``` Run on complete screen, cancel on leave (rAF id stored). I think design is solid. Now write final answer: brief intro, then the single-file code, then 'how to run' + 'features' + 'ideas to extend'. Keep prose short. Length considerations: The code will be long (~700 lines). That's necessary and appropriate for the ask. Format nicely. Let me write the code fully now, mentally checking critical functions. Drawing helpers consolidated: ```js function renderQuestionCanvas(q, container){ const c=document.createElement('canvas'); const W=380,H=180,dpr=Math.min(window.devicePixelRatio||1,2); c.width=W*dpr; c.height=H*dpr; c.style.width=W+'px'; c.style.height=H+'px'; const ctx=c.getContext('2d'); ctx.scale(dpr,dpr); q.draw(ctx,W,H); container.appendChild(c); } ``` draw signature: (ctx,W,H). drawStaff(ctx,W,H,notesArr,opts): notesArr: {step, style, xFrac?} Note x: default: single → 0.6; melodic multiple → spread 0.32..0.78; stacked → 0.58. Let generator set explicit xFracs to keep draw generic. I'll pass notes with xFrac values. Ledger and steps computed inside. Also clef: opts.clef default true. drawNote per earlier. Font for clef: try families: `'Noto Music','Segoe UI Symbol','Apple Symbols',serif`. Clef pos: x=left+4 ~ 22; baseline y: top + 4.35*s? With fontSize=4.6s, glyph ascent huge. Let fontSize = s*4.8; y = top + s*3.9 — I'll eyeball typical rendering: 𝄞 glyph drawn such that the bottom line wraps around second line G. Without exact tuning it may misalign but still reads as treble clef. Acceptable. To reduce risk of overlap with notes, notes x≥0.35. Stem: len=3.2*s. Up: x+rx (attach right), from y to y-len. Down: x-rx. For half: hollow head + stem. whole: hollow no stem. quarter: filled+stem. eighth: filled+stem+flag. Hollow: fill white, stroke lineWidth 2.2 → but over staff line crossing: fill white may erase line behind head — real engraving has line through note; hollow shows interior white matching paper, line visible? Actually in print the ledger/staff lines pass behind head and show through center for whole/half? In notation, for half/whole the staff line is visible through the head's hole. So stroke-only (no white fill) achieves that. Also head should occlude? For filled heads, black covers line ✓. For hollow, just stroke so line shows through ✓. So: fill only when filled style. Add white underlay? No—stroke-only works. But for stacked chord whole notes overlapping adjacent steps shifted—we shift x, fine. Stacked x shift for k==1 also ledger line widths: ledger drawn x±0.85*s around each note's own x: shifted note ledger right-shifted; the other ledger separate — visual ok. Rhythm names facts: store in RHY objects fact property. Implement options as buttons; two classes: default 4 options grid; 2 options full width. On check wrong: also mark chosen button red-ish and correct one green highlight (nice touch): set classes. Then CONTINUE. Progress: also add subtle bump animation? skip. Session XP display on complete: show '+10 XP' and bonus. Also show accuracy: mistakes count. Level fail: 'Out of hearts' modal overlay within lesson screen: simplest separate screen #failScreen. Streak after completing: touchStreak() then save. Now unlock check: ```js const isUnlocked = i===0 || state.completed.includes(LEVELS[i-1].id); ``` Render home: clear container; LEVELS.forEach create node wrapper (flex col center, offset). Label: title; subtitle small. Locked: gray + 🔒 overlay? Keep icon char; locked icon replaced by 🔒. Completed: gold + keep icon, add small ✓ badge? Use crown '👑'? Duolingo uses crowns. I'll set completed style class (gold) and still show emoji. START pill above current (first uncompleted unlocked) node. Also a hero header: '🎵 TuneLingo' plus tagline 'Learn music theory, one lesson at a time.' Write CSS with classes: screen, hidden, path, node, node-btn, levels. Total answer: code block + running instructions. Also mention works offline except font CDNs (Google Fonts; fallback ok). One more feature nice: keyboard support? skip. Let me write final code now carefully ensuring consistent IDs/functions, no undefined vars. I'll write it as one artifact. Also defensive: audio ensure created after user gesture: call ensureAudio in START and click handlers. Potential bug watch: exponentialRampToValueAtTime with target values must be >0 ✓ (0.0001). For chord arpeggio: play root, third, fifth at when 0,.12,.24 slight spread then sustain all (chord) — I'll just strike together plus arpeggio variant random. Ear intervals sequential+harmonic pattern: root at 0(.6s), second at .65(.6), both at 1.35(1.1). Chords: three notes same when 0 dur 1.3. Replay button: state per question play() function callable; button 🔊 labeled 'Replay sound' big outline. Note ID auto-play: play q.play once after append (setTimeout 150ms) — context may be suspended pre-gesture but we enter via click so resumed. Also provide small replay button anyway when q.play exists. For note-ID questions maybe not needed; I'll include replay only when q.play exists with q.showReplay=true set in generators (ear, chords) and notes (optional, set true too—harmless). Progress bar anim: CSS transition width .3s. Okay — also '✕' confirm quit? Just quit. Hearts start 5; display as text '❤️ 5'. Write it. Also fail screen includes hearts refill flavor: 'Hearts refill in Duolingo — here they refilled instantly. Lucky you!' cute. Let me write final HTML file. ```html ... ``` I'll inline everything. Rough line budget fine. Also note: canvas ctx.font with unicode styles — use `${size}px serif, "Segoe UI Symbol"`? font shorthand single family list ok. Fact for interval: names map & semitones not needed. Edge: genInterval bounds: a range: min -1 (space below staff) to 11-k? step up to 11 allowed. Let a=randInt(-1, 11-k). k up to 7 → a up to 4 ok. Gen melodic variant: lower then higher with xFracs .34/.66. Options: ordinal names distractors from remaining k values. Now payouts: correct answer adds small pop animation maybe skip. Complete screen markup: ```html ``` Fail similar. Confetti canvas fixed inset full. Good. Compose answer: short intro line, code block (long), how to run (save as index.html, open), features bullet list short, extend ideas 3 bullets. Keep headers minimal. Given Claude Code style: concise. The code block dominates. Double check letter cycle: 'CDEFGAB'[(abs%7+7)%7] with abs=30+step: step0 → 30%7=2 → 'E' ✓; step1→31%7=3→'F' ✓; step -1 → abs29%7=1 →'D' ✓ D4. midiForStep: step -1 → abs29, oct=4 (Math.floor(29/7)=4), d=1 → 5*12+2=62 → D4 ✓ (60 C4, 62 D4 ✓). step -7 → abs23, oct=3 (23/7=3.28→3); d=23-21=2 → E3= (4)*12+4=52 ✓ (E3 midi: C3=48 → E3=52 ✓). Ledger: step -2 → y = 101+14=115 within H=180 ✓ stem up adds nothing below ✓. Rhythm canvases same staff-less drawing? Notes on staff positions irrelevant; place at step 4 (middle line B) consistently? Duration symbols typically shown without pitch context but staff is normal. I'll draw on staff at step 2 (G line) constant. Whole note on G4 ✓. Whole/half/quarter/eighth beats facts: RHY entries: whole: beats '4', name 'Whole note', fact 'A whole note lasts 4 beats — the full measure in 4/4.' half: 'A half note lasts 2 beats — half the measure.' quarter: 'A quarter note = 1 beat. The beat of 4/4.' eighth: 'An eighth note = ½ beat. Two per quarter note.' Beats options strings: ['4 beats','2 beats','1 beat','½ beat']. Alright. Also home should distinguish current vs done visually (gold w/ crown badge? add '✓' small corner via ::after? Keep gold colored + opacity full; locked gray). Add legend? skip. Write the code now. I'll aim for clarity, comments minimal but useful. One more consideration — the response guidelines suggest minimal prose and no unnecessary summaries for Claude Code. I'll keep intro to one line and trailing notes brief. Here's a complete, Duolingo-style music theory app — gamified with hearts, XP, streaks, an unlockable lesson path, rendered music notation, and audio via the Web Audio API. Save it as `index.html` and open it in a browser (no build step, no dependencies). ```html TuneLingo — Learn Music Theory

Learn music theory, one bite-sized lesson at a time.

``` ## What's included **Duolingo mechanics:** - 🛤️ Unlockable lesson path (zigzag nodes, locked/completed/current states, "START" pill) - ❤️ 5 hearts per lesson — wrong answers cost a heart and requeue the question; 0 hearts = fail screen with retry - ⭐ XP with a flawless-lesson bonus, 🔥 daily streak tracking, all persisted in `localStorage` - Green/red feedback bar with the correct answer and a teaching "fact," plus success/fail sound effects and confetti on completion **Music theory content (6 lessons):** 1. **Notes I** — treble clef lines & spaces (notes are *drawn* on a real staff + played aloud) 2. **Notes II** — ledger lines above/below the staff 3. **Rhythm** — whole/half/quarter/eighth note ID and beat values 4. **Intervals** — visual 2nds through octaves, melodic and harmonic 5. **Ear Training** — identify intervals by ear (Web Audio API playback) 6. **Chords** — major vs. minor by ear, by notation (with ♭ accidentals), and triad construction ## Easy ways to extend it - **More lessons:** add entries to the `LEVELS` array — each is just a generator returning question objects (`prompt / options / correctIndex / fact`, with optional `draw` and `play`) - **Bass clef, key signatures, scales, chord progressions** follow the same generator pattern - **Replace the "Try again" gating** with timed heart refills or hearts-as-currency if you want true Duolingo economics

Lesson complete!

Lesson complete!

Out of hearts!