https://vijay.eu/tags/music/Recent content in Music on Vijay KodamHugo -- gohugo.ioenSun, 08 Mar 2026 00:00:00 +0200https://vijay.eu/projects/note-quest/Thu, 26 Feb 2026 00:00:00 +0200https://vijay.eu/projects/note-quest/<p>Learn to read music notes on the grand staff! Pick the correct note name for each question.</p> <p>Created using Claude Code CLI on 26th Feb 2026. V2 released on 8th Mar 2026. <link rel="stylesheet" href="https://vijay.eu/css/note-quest.css"> <script src="https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js"></script> <div class="note-quest-wrapper"> <div class="nq-screen start-screen active" id="nqStartScreen"> <label class="nq-helper-toggle"> <input type="checkbox" id="nqShowNoteNames"> Show note names on staff <small class="nq-helper-hint">Auto for Levels 1–2, 4 · Ignored for 8–10</small> </label> <div class="level-grid"> <div class="level-row"> <span class="row-label easy">Easy</span> <div class="level-boxes"> <button class="level-box easy" data-level="1"> <span class="level-num">1</span> <span class="level-detail">First Notes · Both clefs · F3,C4 / C4,G4</span> </button> <button class="level-box easy" data-level="2"> <span class="level-num">2</span> <span class="level-detail">Staff Basics · Both clefs · F3–G4</span> </button> <button class="level-box easy" data-level="3"> <span class="level-num">3</span> <span class="level-detail">Getting Comfortable · Both clefs · C3–C5</span> </button> </div> </div> <div class="level-row"> <span class="row-label medium">Medium</span> <div class="level-boxes"> <button class="level-box medium" data-level="4"> <span class="level-num">4</span> <span class="level-detail">Wider Range · Both clefs · A2–E5</span> </button> <button class="level-box medium" data-level="5"> <span class="level-num">5</span> <span class="level-detail">Grand Staff · Both clefs · C2–C6</span> </button> <button class="level-box medium" data-level="6"> <span class="level-num">6</span> <span class="level-detail">Expanding Range · Both clefs · A1–E6</span> </button> <button class="level-box medium" data-level="7"> <span class="level-num">7</span> <span class="level-detail">Full Staff · Both clefs · E2–C6</span> </button> </div> </div> <div class="level-row"> <span class="row-label hard">Hard</span> <div class="level-boxes"> <button class="level-box hard" data-level="8"> <span class="level-num">8</span> <span class="level-detail">Ledger Lines · Both clefs · C2–E6</span> </button> <button class="level-box hard" data-level="9"> <span class="level-num">9</span> <span class="level-detail">Extended Range · Both clefs · B1–E6</span> </button> <button class="level-box hard" data-level="10"> <span class="level-num">10</span> <span class="level-detail">Note Master · Both clefs · A1–E6</span> </button> </div> </div> </div> <div class="nq-version">v2.1</div> </div> <div class="nq-screen" id="nqGameScreen"> <div class="nq-header"> <div class="nq-logo">Note Quest</div> <div class="nq-progress" id="nqProgress">1 / 10</div> </div> <div class="nq-container"> <div class="staff-card" id="nqStaffCard"></div> <div class="choices" id="nqChoices"> <button class="choice-btn" data-note="C">C</button> <button class="choice-btn" data-note="D">D</button> <button class="choice-btn" data-note="E">E</button> <button class="choice-btn" data-note="F">F</button> <button class="choice-btn" data-note="G">G</button> <button class="choice-btn" data-note="A">A</button> <button class="choice-btn" data-note="B">B</button> </div> <div class="stats-bar"> <span>Streak: <strong id="nqStreakDisplay">0</strong></span> <span>Score: <strong id="nqScoreDisplay">0</strong></span> <span id="nqTimerDisplay">0:00</span> </div> </div> </div> <div class="nq-screen results-screen" id="nqResultsScreen"> <h2>Round Complete!</h2> <div class="stars" id="nqStarsDisplay"></div> <div class="results-stats" id="nqResultsStats"></div> <button class="play-again-btn">Play Again</button> </div> <canvas id="nqConfetti"></canvas> </div> <script src="https://vijay.eu/js/note-quest.js"></script> </p>