{"id":25,"date":"2025-09-29T00:41:41","date_gmt":"2025-09-29T00:41:41","guid":{"rendered":"https:\/\/apostolicmusic.site\/?page_id=25"},"modified":"2025-09-29T00:48:37","modified_gmt":"2025-09-29T00:48:37","slug":"nashville-number-system","status":"publish","type":"page","link":"https:\/\/apostolicmusic.site\/?page_id=25","title":{"rendered":"What is the Nashville Number System?"},"content":{"rendered":"\n<p>The Nashville Number System (NNS) writes chords as scale degrees instead of letter names. The number <strong>1<\/strong> means the chord built on the key\u2019s 1st note (tonic), <strong>4<\/strong> is the subdominant, <strong>5<\/strong> is the dominant, etc. Because numbers are relative, the same chart works in any key\u2014just change the key center and keep the numbers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to read NNS<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1\u20137<\/strong>: Diatonic scale degrees in the key (major by default for 1, 4, 5; minor for 2, 3, 6; 7 is diminished in major).<\/li>\n\n\n\n<li><strong>Accidentals<\/strong>: <code>#4<\/code> (sharp four), <code>b7<\/code> (flat seven) for altered chords or borrowed tones.<\/li>\n\n\n\n<li><strong>Quality<\/strong> (optional, when clarity is needed): <code>2m<\/code>, <code>5sus<\/code>, <code>1maj7<\/code>, <code>6m7<\/code>, <code>7\u00b0<\/code>.<\/li>\n\n\n\n<li><strong>Slash bass<\/strong>: <code>1\/3<\/code> = tonic chord over the 3rd in the bass.<\/li>\n\n\n\n<li><strong>Rhythm<\/strong> (often notated with symbols): diamonds (holds), pushes (arrows or carets), bars for measures.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Why NNS in Apostolic Pentecostal music?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fast key changes<\/strong>: Worship leaders may jump keys for energy or vocal comfort\u2014numbers make on\u2011the\u2011fly modulations easy.<\/li>\n\n\n\n<li><strong>Vamps and builds<\/strong>: Common I\u2013IV\u2013V vamps, 4\u21925 lifts, and turnarounds repeat seamlessly with numbers.<\/li>\n\n\n\n<li><strong>Shouts\/Altars<\/strong>: Repetitive progressions (e.g., shout patterns) can loop indefinitely and modulate by whole\/half steps.<\/li>\n\n\n\n<li><strong>Medleys<\/strong>: Chain songs without rewriting chords\u2014keep the same numeric flow in new keys.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Typical progressions you\u2019ll hear<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Modern worship ballad<\/strong>: <code>1 \u2013 5 \u2013 6m \u2013 4<\/code><\/li>\n\n\n\n<li><strong>Classic chorus<\/strong>: <code>1 \u2013 4 \u2013 1 \u2013 5<\/code><\/li>\n\n\n\n<li><strong>Turnaround\/cadence<\/strong>: <code>4 \u2013 5 \u2013 1<\/code> or <code>2m \u2013 5 \u2013 1<\/code><\/li>\n\n\n\n<li><strong>Drive\/Vamp<\/strong>: <code>1 \u2013 4 \u2013 5 \u2013 4<\/code> (loop) or <code>4 \u2192 5<\/code> build<\/li>\n\n\n\n<li><strong>Shout pattern (one option)<\/strong>: <code>1 \u2013 #1\u00b07 \u2013 2m \u2013 5<\/code> (repeat)<\/li>\n\n\n\n<li><strong>Bass walk (6 to 1)<\/strong>: <code>6m \u2013 5 \u2013 4 \u2013 5 \u2013 1<\/code><\/li>\n<\/ul>\n\n\n\n<p>Examples in keys:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/\/ Key of G:  1\u20135\u20136m\u20134   =&gt;  G - D - Em - C\n\/\/ Key of Db: 4\u20135\u20131      =&gt;  Gb - Ab - Db\n\/\/ Key of A:  2m\u20135\u20131     =&gt;  Bm - E - A\n\/\/ Key of Bb: 1\u2013#1\u00b07\u20132m\u20135 =&gt; Bb - B\u00b07 - Cm - F\n  <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Quick translator (numbers \u2192 chords)<\/h3>\n\n\n\n<p>Use this small script to turn a number chart into letter chords in any major key.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&amp;lt;script&amp;gt;\n\/\/ Major scale spelling with diatonic chord qualities\nconst MAJOR = {\n  C:  &#91;\"C\",\"D\",\"E\",\"F\",\"G\",\"A\",\"B\"],\n  G:  &#91;\"G\",\"A\",\"B\",\"C\",\"D\",\"E\",\"F#\"],\n  D:  &#91;\"D\",\"E\",\"F#\",\"G\",\"A\",\"B\",\"C#\"],\n  A:  &#91;\"A\",\"B\",\"C#\",\"D\",\"E\",\"F#\",\"G#\"],\n  E:  &#91;\"E\",\"F#\",\"G#\",\"A\",\"B\",\"C#\",\"D#\"],\n  B:  &#91;\"B\",\"C#\",\"D#\",\"E\",\"F#\",\"G#\",\"A#\"],\n  \"F#\":&#91;\"F#\",\"G#\",\"A#\",\"B\",\"C#\",\"D#\",\"E#\"],\n  \"C#\":&#91;\"C#\",\"D#\",\"E#\",\"F#\",\"G#\",\"A#\",\"B#\"],\n  F:  &#91;\"F\",\"G\",\"A\",\"Bb\",\"C\",\"D\",\"E\"],\n  Bb: &#91;\"Bb\",\"C\",\"D\",\"Eb\",\"F\",\"G\",\"A\"],\n  Eb: &#91;\"Eb\",\"F\",\"G\",\"Ab\",\"Bb\",\"C\",\"D\"],\n  Ab: &#91;\"Ab\",\"Bb\",\"C\",\"Db\",\"Eb\",\"F\",\"G\"],\n  Db: &#91;\"Db\",\"Eb\",\"F\",\"Gb\",\"Ab\",\"Bb\",\"C\"],\n  Gb: &#91;\"Gb\",\"Ab\",\"Bb\",\"Cb\",\"Db\",\"Eb\",\"F\"]\n};\nconst QUAL = &#91;\"maj\",\"min\",\"min\",\"maj\",\"maj\",\"min\",\"dim\"]; \/\/ I ii iii IV V vi vii\u00b0\n\nfunction nnsToChords(key, numbers) {\n  const scale = MAJOR&#91;key];\n  if (!scale) throw new Error(\"Unsupported key: \" + key);\n  return numbers.map(n =&gt; {\n    \/\/ parse items like \"6m7\", \"#4\", \"1\/3\", \"5sus4\", \"7\u00b0\"\n    const m = String(n).trim().match(\/^(&#91;#b]?)(\\d)(&#91;^\/]*)(?:\\\/(&#91;#b]?\\d))?$\/);\n    if (!m) return n; \/\/ return as-is if not matched\n    const &#91;, acc, degStr, ext, bassAccDeg] = m;\n    let deg = parseInt(degStr, 10);\n    \/\/ base diatonic note\n    let note = scale&#91;(deg - 1) % 7];\n\n    \/\/ apply accidental to root if present (# or b on the number)\n    const sharp = s =&gt; s.replace(\/(&#91;A-G])b?$\/, (m)=&gt; m + \"#\");\n    const flat  = s =&gt; s.replace(\/(&#91;A-G])#?$\/, (m)=&gt; m + \"b\");\n    if (acc === \"#\") note = note.includes(\"b\") ? note.replace(\"b\",\"\") : note + \"#\";\n    if (acc === \"b\") note = note.includes(\"#\") ? note.replace(\"#\",\"\") : note + \"b\";\n\n    \/\/ default quality if none specified and ext doesn't override:\n    let qual = ext || \"\";\n    if (!ext) {\n      const q = QUAL&#91;deg - 1];\n      qual = q === \"maj\" ? \"\" : q === \"min\" ? \"m\" : \"\u00b0\";\n    }\n\n    \/\/ handle slash bass like 1\/3\n    let bass = \"\";\n    if (bassAccDeg) {\n      const acc2 = bassAccDeg&#91;0] === \"#\" || bassAccDeg&#91;0] === \"b\" ? bassAccDeg&#91;0] : \"\";\n      const d2 = parseInt(acc2 ? bassAccDeg.slice(1) : bassAccDeg, 10);\n      let bassNote = scale&#91;(d2 - 1) % 7];\n      if (acc2 === \"#\") bassNote = bassNote.includes(\"b\") ? bassNote.replace(\"b\",\"\") : bassNote + \"#\";\n      if (acc2 === \"b\") bassNote = bassNote.includes(\"#\") ? bassNote.replace(\"#\",\"\") : bassNote + \"b\";\n      bass = \" \/ \" + bassNote;\n    }\n    return note + qual + bass;\n  });\n}\n\n\/\/ Demo:\nconsole.log(nnsToChords(\"Ab\", &#91;\"1\", \"5\", \"6m\", \"4\"]));     \/\/ &#91;\"Ab\",\"Eb\",\"Fm\",\"Db\"]\nconsole.log(nnsToChords(\"Bb\", &#91;\"1\",\"#1\u00b07\",\"2m\",\"5\"]));     \/\/ &#91;\"Bb\",\"B\u00b07\",\"Cm\",\"F\"]\nconsole.log(nnsToChords(\"G\",  &#91;\"1\/3\",\"4\",\"5sus\",\"1\"]));    \/\/ &#91;\"G \/ B\",\"C\",\"Dsus\",\"G\"]\n&amp;lt;\/script&amp;gt;\n  <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Practical tips for your band<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Agree on symbols<\/strong>: Decide as a team how you\u2019ll write minors (m), diminished (\u00b0), sus, extensions (7, 9), and pushes.<\/li>\n\n\n\n<li><strong>Use numbers on the fly<\/strong>: When the leader says \u201cgo to 4, build to 5,\u201d everyone moves together regardless of key.<\/li>\n\n\n\n<li><strong>Guitarists<\/strong>: Capo freely\u2014numbers keep the harmony aligned while voicings stay comfortable.<\/li>\n\n\n\n<li><strong>Modulations<\/strong>: Step up by a whole\/half step\u2014keep the same numeric loop for shouts, vamps, and altar calls.<\/li>\n<\/ul>\n\n\n\n<section style=\"font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height:1.5; color:#111\">\n  <h2 style=\"margin-bottom:.4rem\">What is the Nashville Number System?<\/h2>\n  <p>\n    The Nashville Number System (NNS) writes chords as scale degrees instead of letter names.\n    The number <strong>1<\/strong> means the chord built on the key\u2019s 1st note (tonic), <strong>4<\/strong> is the subdominant, <strong>5<\/strong> is the dominant, etc.\n    Because numbers are relative, the same chart works in any key\u2014just change the key center and keep the numbers.\n  <\/p>\n\n  <h3 style=\"margin:.8rem 0 .3rem\">How to read NNS<\/h3>\n  <ul style=\"margin:.2rem 0 .8rem; padding-left:1.2rem\">\n    <li><strong>1\u20137<\/strong>: Diatonic scale degrees in the key (major by default for 1, 4, 5; minor for 2, 3, 6; 7 is diminished in major).<\/li>\n    <li><strong>Accidentals<\/strong>: <code>#4<\/code> (sharp four), <code>b7<\/code> (flat seven) for altered chords or borrowed tones.<\/li>\n    <li><strong>Quality<\/strong> (optional, when clarity is needed): <code>2m<\/code>, <code>5sus<\/code>, <code>1maj7<\/code>, <code>6m7<\/code>, <code>7\u00b0<\/code>.<\/li>\n    <li><strong>Slash bass<\/strong>: <code>1\/3<\/code> = tonic chord over the 3rd in the bass.<\/li>\n    <li><strong>Rhythm<\/strong> (often notated with symbols): diamonds (holds), pushes (arrows or carets), bars for measures.<\/li>\n  <\/ul>\n\n  <h3 style=\"margin:.8rem 0 .3rem\">Why NNS in Apostolic Pentecostal music?<\/h3>\n  <ul style=\"margin:.2rem 0 .8rem; padding-left:1.2rem\">\n    <li><strong>Fast key changes<\/strong>: Worship leaders may jump keys for energy or vocal comfort\u2014numbers make on\u2011the\u2011fly modulations easy.<\/li>\n    <li><strong>Vamps and builds<\/strong>: Common I\u2013IV\u2013V vamps, 4\u21925 lifts, and turnarounds repeat seamlessly with numbers.<\/li>\n    <li><strong>Shouts\/Altars<\/strong>: Repetitive progressions (e.g., shout patterns) can loop indefinitely and modulate by whole\/half steps.<\/li>\n    <li><strong>Medleys<\/strong>: Chain songs without rewriting chords\u2014keep the same numeric flow in new keys.<\/li>\n  <\/ul>\n\n  <h3 style=\"margin:.8rem 0 .3rem\">Typical progressions you\u2019ll hear<\/h3>\n  <ul style=\"margin:.2rem 0 .8rem; padding-left:1.2rem\">\n    <li><strong>Modern worship ballad<\/strong>: <code>1 \u2013 5 \u2013 6m \u2013 4<\/code><\/li>\n    <li><strong>Classic chorus<\/strong>: <code>1 \u2013 4 \u2013 1 \u2013 5<\/code><\/li>\n    <li><strong>Turnaround\/cadence<\/strong>: <code>4 \u2013 5 \u2013 1<\/code> or <code>2m \u2013 5 \u2013 1<\/code><\/li>\n    <li><strong>Drive\/Vamp<\/strong>: <code>1 \u2013 4 \u2013 5 \u2013 4<\/code> (loop) or <code>4 \u2192 5<\/code> build<\/li>\n    <li><strong>Shout pattern (one option)<\/strong>: <code>1 \u2013 #1\u00b07 \u2013 2m \u2013 5<\/code> (repeat)<\/li>\n    <li><strong>Bass walk (6 to 1)<\/strong>: <code>6m \u2013 5 \u2013 4 \u2013 5 \u2013 1<\/code><\/li>\n  <\/ul>\n\n  <p style=\"margin:.6rem 0 .8rem\">\n    Examples in keys:\n  <\/p>\n  <pre style=\"background:#0b1220;color:#e5e7eb;padding:.8rem;border-radius:10px;overflow:auto\"><code>\n\/\/ Key of G:  1\u20135\u20136m\u20134   =>  G - D - Em - C\n\/\/ Key of Db: 4\u20135\u20131      =>  Gb - Ab - Db\n\/\/ Key of A:  2m\u20135\u20131     =>  Bm - E - A\n\/\/ Key of Bb: 1\u2013#1\u00b07\u20132m\u20135 => Bb - B\u00b07 - Cm - F\n  <\/code><\/pre>\n\n  <h3 style=\"margin:.8rem 0 .3rem\">Quick translator (numbers \u2192 chords)<\/h3>\n  <p style=\"margin:.2rem 0 .6rem\">Use this small script to turn a number chart into letter chords in any major key.<\/p>\n  <pre style=\"background:#0b1220;color:#e5e7eb;padding:.8rem;border-radius:10px;overflow:auto\"><code class=\"language-html\">&lt;script&gt;\n\/\/ Major scale spelling with diatonic chord qualities\nconst MAJOR = {\n  C:  [\"C\",\"D\",\"E\",\"F\",\"G\",\"A\",\"B\"],\n  G:  [\"G\",\"A\",\"B\",\"C\",\"D\",\"E\",\"F#\"],\n  D:  [\"D\",\"E\",\"F#\",\"G\",\"A\",\"B\",\"C#\"],\n  A:  [\"A\",\"B\",\"C#\",\"D\",\"E\",\"F#\",\"G#\"],\n  E:  [\"E\",\"F#\",\"G#\",\"A\",\"B\",\"C#\",\"D#\"],\n  B:  [\"B\",\"C#\",\"D#\",\"E\",\"F#\",\"G#\",\"A#\"],\n  \"F#\":[\"F#\",\"G#\",\"A#\",\"B\",\"C#\",\"D#\",\"E#\"],\n  \"C#\":[\"C#\",\"D#\",\"E#\",\"F#\",\"G#\",\"A#\",\"B#\"],\n  F:  [\"F\",\"G\",\"A\",\"Bb\",\"C\",\"D\",\"E\"],\n  Bb: [\"Bb\",\"C\",\"D\",\"Eb\",\"F\",\"G\",\"A\"],\n  Eb: [\"Eb\",\"F\",\"G\",\"Ab\",\"Bb\",\"C\",\"D\"],\n  Ab: [\"Ab\",\"Bb\",\"C\",\"Db\",\"Eb\",\"F\",\"G\"],\n  Db: [\"Db\",\"Eb\",\"F\",\"Gb\",\"Ab\",\"Bb\",\"C\"],\n  Gb: [\"Gb\",\"Ab\",\"Bb\",\"Cb\",\"Db\",\"Eb\",\"F\"]\n};\nconst QUAL = [\"maj\",\"min\",\"min\",\"maj\",\"maj\",\"min\",\"dim\"]; \/\/ I ii iii IV V vi vii\u00b0\n\nfunction nnsToChords(key, numbers) {\n  const scale = MAJOR[key];\n  if (!scale) throw new Error(\"Unsupported key: \" + key);\n  return numbers.map(n => {\n    \/\/ parse items like \"6m7\", \"#4\", \"1\/3\", \"5sus4\", \"7\u00b0\"\n    const m = String(n).trim().match(\/^([#b]?)(\\d)([^\/]*)(?:\\\/([#b]?\\d))?$\/);\n    if (!m) return n; \/\/ return as-is if not matched\n    const [, acc, degStr, ext, bassAccDeg] = m;\n    let deg = parseInt(degStr, 10);\n    \/\/ base diatonic note\n    let note = scale[(deg - 1) % 7];\n\n    \/\/ apply accidental to root if present (# or b on the number)\n    const sharp = s => s.replace(\/([A-G])b?$\/, (m)=> m + \"#\");\n    const flat  = s => s.replace(\/([A-G])#?$\/, (m)=> m + \"b\");\n    if (acc === \"#\") note = note.includes(\"b\") ? note.replace(\"b\",\"\") : note + \"#\";\n    if (acc === \"b\") note = note.includes(\"#\") ? note.replace(\"#\",\"\") : note + \"b\";\n\n    \/\/ default quality if none specified and ext doesn't override:\n    let qual = ext || \"\";\n    if (!ext) {\n      const q = QUAL[deg - 1];\n      qual = q === \"maj\" ? \"\" : q === \"min\" ? \"m\" : \"\u00b0\";\n    }\n\n    \/\/ handle slash bass like 1\/3\n    let bass = \"\";\n    if (bassAccDeg) {\n      const acc2 = bassAccDeg[0] === \"#\" || bassAccDeg[0] === \"b\" ? bassAccDeg[0] : \"\";\n      const d2 = parseInt(acc2 ? bassAccDeg.slice(1) : bassAccDeg, 10);\n      let bassNote = scale[(d2 - 1) % 7];\n      if (acc2 === \"#\") bassNote = bassNote.includes(\"b\") ? bassNote.replace(\"b\",\"\") : bassNote + \"#\";\n      if (acc2 === \"b\") bassNote = bassNote.includes(\"#\") ? bassNote.replace(\"#\",\"\") : bassNote + \"b\";\n      bass = \" \/ \" + bassNote;\n    }\n    return note + qual + bass;\n  });\n}\n\n\/\/ Demo:\nconsole.log(nnsToChords(\"Ab\", [\"1\", \"5\", \"6m\", \"4\"]));     \/\/ [\"Ab\",\"Eb\",\"Fm\",\"Db\"]\nconsole.log(nnsToChords(\"Bb\", [\"1\",\"#1\u00b07\",\"2m\",\"5\"]));     \/\/ [\"Bb\",\"B\u00b07\",\"Cm\",\"F\"]\nconsole.log(nnsToChords(\"G\",  [\"1\/3\",\"4\",\"5sus\",\"1\"]));    \/\/ [\"G \/ B\",\"C\",\"Dsus\",\"G\"]\n&lt;\/script&gt;\n  <\/code><\/pre>\n\n  <h3 style=\"margin:.8rem 0 .3rem\">Practical tips for your band<\/h3>\n  <ul style=\"margin:.2rem 0 .8rem; padding-left:1.2rem\">\n    <li><strong>Agree on symbols<\/strong>: Decide as a team how you\u2019ll write minors (m), diminished (\u00b0), sus, extensions (7, 9), and pushes.<\/li>\n    <li><strong>Use numbers on the fly<\/strong>: When the leader says \u201cgo to 4, build to 5,\u201d everyone moves together regardless of key.<\/li>\n    <li><strong>Guitarists<\/strong>: Capo freely\u2014numbers keep the harmony aligned while voicings stay comfortable.<\/li>\n    <li><strong>Modulations<\/strong>: Step up by a whole\/half step\u2014keep the same numeric loop for shouts, vamps, and altar calls.<\/li>\n  <\/ul>\n<\/section>\n\n\n\n<!-- 1) Place the component where you want it -->\n<nns-trainer><\/nns-trainer>\n\n<!-- 2) Include this script (inline or as a separate JS file) -->\n<script>\nclass NNSTrainer extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this.shadowRoot.innerHTML = `\n      <style>\n        :host { display:block; }\n        \/* All styles are scoped to the shadow root below *\/\n        .wrap {\n          width: 100%;\n          max-width: 720px;\n          font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;\n          color: #e5e7eb;\n        }\n        .card {\n          background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));\n          border: 1px solid #1f2937;\n          border-radius: 16px;\n          padding: 24px;\n          box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n          background-color: #111827;\n        }\n        .title { font-size: 22px; font-weight: 700; margin: 0 0 8px; }\n        .muted { color: #94a3b8; font-size: 14px; margin: 0 0 16px; }\n        .row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }\n        .pill {\n          background: #0b1220; border: 1px solid #1f2937; padding: 10px 14px; border-radius: 999px;\n          font-weight: 600; letter-spacing: .3px;\n        }\n        .linkish { color: #93c5fd; text-decoration: underline; cursor: pointer; font-size: 13px; }\n        .display { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 16px 0 20px; }\n        .big { background: #0b1220; border: 1px solid #1f2937; border-radius: 12px; padding: 24px; text-align: center; }\n        .label { color: #94a3b8; font-size: 12px; letter-spacing: .3px; text-transform: uppercase; }\n        .value { font-size: 40px; font-weight: 800; margin-top: 4px; }\n        .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 8px; }\n        .footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; flex-wrap: wrap; }\n        .score { font-weight: 700; }\n\n        \/* Button styles scoped to the component only *\/\n        .btn {\n          border: 1px solid #1f2937; background: #1f2937; color: #e5e7eb;\n          padding: 12px 10px; border-radius: 10px; font-weight: 700; letter-spacing: .4px; cursor: pointer;\n          transition: transform .03s ease, background .2s ease, border-color .2s ease;\n        }\n        .btn:hover { background: #374151; border-color: #465167; }\n        .btn:active { transform: translateY(1px); }\n        .btn.correct { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #bbf7d0; }\n        .btn.wrong { background: rgba(239,68,68,0.12); border-color: #ef4444; color: #fecaca; }\n\n        .controls { display: flex; gap: 10px; }\n        .root {\n          display: grid; place-items: center; padding: 20px;\n          background: radial-gradient(1200px 600px at 70% -10%, #1f2937 0%, #0f172a 40%, #0f172a 100%);\n          border-radius: 18px;\n        }\n      <\/style>\n      <div class=\"root\">\n        <div class=\"wrap\">\n          <div class=\"card\">\n            <h1 class=\"title\">Nashville Number Trainer<\/h1>\n            <p class=\"muted\">Given the Note and the Key (major), pick its Nashville number (1\u20137).<\/p>\n\n            <div class=\"row\">\n              <div class=\"pill\">Mode: Major Keys<\/div>\n              <div id=\"toggleNumerals\" class=\"linkish\" title=\"Show roman numerals instead of Arabic numerals\">Use Roman numerals<\/div>\n            <\/div>\n\n            <div class=\"display\">\n              <div class=\"big\">\n                <div class=\"label\">Key<\/div>\n                <div id=\"keyDisplay\" class=\"value\">C<\/div>\n              <\/div>\n              <div class=\"big\">\n                <div class=\"label\">Note<\/div>\n                <div id=\"noteDisplay\" class=\"value\">C<\/div>\n              <\/div>\n            <\/div>\n\n            <div id=\"buttons\" class=\"grid\"><\/div>\n\n            <div class=\"footer\">\n              <div class=\"score\">\n                Score: <span id=\"score\">0<\/span> \/ <span id=\"total\">0<\/span>\n                - Streak: <span id=\"streak\">0<\/span>\n              <\/div>\n              <div class=\"controls\">\n                <button id=\"nextBtn\" class=\"btn\" title=\"Next question\">Next \u25b6<\/button>\n                <button id=\"revealBtn\" class=\"btn\" title=\"Show the answer\">Reveal<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    `;\n\n    \/\/ Logic (same behavior as before, scoped to shadow DOM)\n    const MAJOR_SCALES = {\n      \"C\":  [\"C\",\"D\",\"E\",\"F\",\"G\",\"A\",\"B\"],\n      \"G\":  [\"G\",\"A\",\"B\",\"C\",\"D\",\"E\",\"F#\"],\n      \"D\":  [\"D\",\"E\",\"F#\",\"G\",\"A\",\"B\",\"C#\"],\n      \"A\":  [\"A\",\"B\",\"C#\",\"D\",\"E\",\"F#\",\"G#\"],\n      \"E\":  [\"E\",\"F#\",\"G#\",\"A\",\"B\",\"C#\",\"D#\"],\n      \"B\":  [\"B\",\"C#\",\"D#\",\"E\",\"F#\",\"G#\",\"A#\"],\n      \"F#\": [\"F#\",\"G#\",\"A#\",\"B\",\"C#\",\"D#\",\"E#\"],\n      \"C#\": [\"C#\",\"D#\",\"E#\",\"F#\",\"G#\",\"A#\",\"B#\"],\n      \"F\":  [\"F\",\"G\",\"A\",\"Bb\",\"C\",\"D\",\"E\"],\n      \"Bb\": [\"Bb\",\"C\",\"D\",\"Eb\",\"F\",\"G\",\"A\"],\n      \"Eb\": [\"Eb\",\"F\",\"G\",\"Ab\",\"Bb\",\"C\",\"D\"],\n      \"Ab\": [\"Ab\",\"Bb\",\"C\",\"Db\",\"Eb\",\"F\",\"G\"]\n    };\n    const KEYS = Object.keys(MAJOR_SCALES);\n    const rome = [\"I\",\"II\",\"III\",\"IV\",\"V\",\"VI\",\"VII\"];\n\n    let currentKey = \"C\";\n    let currentDegree = 1;\n    let currentNote = \"C\";\n    let waiting = false;\n    let score = 0, total = 0, streak = 0;\n    let roman = false;\n\n    const $ = sel => this.shadowRoot.querySelector(sel);\n    const keyDisplay = $(\"#keyDisplay\");\n    const noteDisplay = $(\"#noteDisplay\");\n    const buttons = $(\"#buttons\");\n    const scoreEl = $(\"#score\");\n    const totalEl = $(\"#total\");\n    const streakEl = $(\"#streak\");\n    const nextBtn = $(\"#nextBtn\");\n    const revealBtn = $(\"#revealBtn\");\n    const toggleNumerals = $(\"#toggleNumerals\");\n\n    function renderButtons() {\n      buttons.innerHTML = \"\";\n      for (let n = 1; n <= 7; n++) {\n        const btn = document.createElement(\"button\");\n        btn.className = \"btn\";\n        btn.textContent = roman ? rome[n-1] : String(n);\n        btn.dataset.degree = n;\n        btn.addEventListener(\"click\", onGuess);\n        buttons.appendChild(btn);\n      }\n    }\n\n    function nextQuestion() {\n      waiting = false;\n      [...buttons.children].forEach(b => { b.classList.remove(\"correct\",\"wrong\"); b.disabled = false; });\n      currentKey = KEYS[Math.floor(Math.random() * KEYS.length)];\n      currentDegree = 1 + Math.floor(Math.random() * 7);\n      currentNote = MAJOR_SCALES[currentKey][currentDegree - 1];\n      keyDisplay.textContent = currentKey;\n      noteDisplay.textContent = currentNote;\n    }\n\n    function onGuess(e) {\n      if (waiting) return;\n      const picked = Number(e.currentTarget.dataset.degree);\n      total++; totalEl.textContent = total;\n      waiting = true;\n      [...buttons.children].forEach(b => b.disabled = true);\n      const correctBtn = [...buttons.children].find(b => Number(b.dataset.degree) === currentDegree);\n      if (picked === currentDegree) {\n        score++; streak++;\n        e.currentTarget.classList.add(\"correct\");\n      } else {\n        streak = 0;\n        e.currentTarget.classList.add(\"wrong\");\n        if (correctBtn) correctBtn.classList.add(\"correct\");\n      }\n      scoreEl.textContent = score;\n      streakEl.textContent = streak;\n    }\n\n    function reveal() {\n      if (waiting) return;\n      waiting = true;\n      total++; totalEl.textContent = total;\n      streak = 0; streakEl.textContent = streak;\n      [...buttons.children].forEach(b => b.disabled = true);\n      const correctBtn = [...buttons.children].find(b => Number(b.dataset.degree) === currentDegree);\n      if (correctBtn) correctBtn.classList.add(\"correct\");\n    }\n\n    toggleNumerals.addEventListener(\"click\", () => {\n      roman = !roman;\n      toggleNumerals.textContent = roman ? \"Use Arabic numerals\" : \"Use Roman numerals\";\n      renderButtons();\n    });\n    nextBtn.addEventListener(\"click\", nextQuestion);\n    revealBtn.addEventListener(\"click\", reveal);\n\n    renderButtons();\n    nextQuestion();\n  }\n}\n\ncustomElements.define('nns-trainer', NNSTrainer);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>The Nashville Number System (NNS) writes chords as scale degrees instead of letter names. The number 1 means the chord built on the key\u2019s 1st note (tonic), 4 is the subdominant, 5 is the dominant, etc. Because numbers are relative, the same chart works in any key\u2014just change the key center and keep the numbers. How to read NNS Why [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":5,"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/apostolicmusic.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}