Trivia Night<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Archivo+Black&family=Space+Mono:wght@400;700&family=Oswald:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper:#efe9dc;\n --ink:#181410;\n --hotpink:#e0245e;\n --mustard:#e8a92e;\n --teal:#1c6e63;\n --tape:#d9d2bf;\n --line: rgba(24,20,16,0.15);\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:var(--ink);\n background-image:\n radial-gradient(circle at 15% 20%, rgba(224,36,94,0.10), transparent 40%),\n radial-gradient(circle at 85% 80%, rgba(232,169,46,0.08), transparent 45%);\n color:var(--paper);\n font-family:'Oswald', sans-serif;\n min-height:100vh;\n }\n .wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px;}\n\n \/* ---------- Header ---------- *\/\n .masthead{\n display:flex;justify-content:space-between;align-items:flex-end;\n border-bottom:4px solid var(--paper);\n padding-bottom:14px;margin-bottom:26px;\n flex-wrap:wrap;gap:10px;\n }\n .masthead h1{\n font-family:'Anton', sans-serif;\n font-size:clamp(2.4rem, 6vw, 4.2rem);\n letter-spacing:1px;\n margin:0;\n line-height:0.9;\n text-transform:uppercase;\n color:var(--paper);\n text-shadow: 4px 4px 0 var(--hotpink);\n }\n .masthead .sub{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;\n color:var(--mustard);\n letter-spacing:2px;\n text-transform:uppercase;\n }\n .scoreboard{\n font-family:'Space Mono', monospace;\n font-size:0.8rem;\n color:var(--paper);\n opacity:0.7;\n }\n\n .stats-bar{\n display:flex;gap:14px;justify-content:flex-end;\n margin:-16px 0 26px;\n font-family:'Space Mono', monospace;\n font-size:0.85rem;letter-spacing:1px;text-transform:uppercase;\n }\n .stats-bar .stat{\n padding:6px 14px;border-radius:20px;\n border:2px solid var(--paper);\n }\n .stats-bar .stat span{font-family:'Archivo Black', sans-serif;font-size:1rem;margin-right:6px;}\n .stats-bar .correct-stat{border-color:var(--teal);color:var(--teal);background:rgba(28,110,99,0.12);}\n .stats-bar .wrong-stat{border-color:var(--hotpink);color:var(--hotpink);background:rgba(224,36,94,0.10);}\n\n \/* ---------- Menu grid ---------- *\/\n .round-block{margin-bottom:34px;}\n .round-title{\n font-family:'Archivo Black', sans-serif;\n font-size:1.1rem;\n text-transform:uppercase;\n letter-spacing:1px;\n display:flex;align-items:center;gap:12px;\n margin-bottom:14px;\n color:var(--mustard);\n }\n .round-title::after{content:\"\";flex:1;height:2px;background:var(--line);background:rgba(232,169,46,0.25);}\n .grid{\n display:grid;\n grid-template-columns:repeat(auto-fill,minmax(190px,1fr));\n gap:14px;\n }\n .card{\n background:var(--paper);\n color:var(--ink);\n border-radius:2px;\n padding:16px 14px;\n cursor:pointer;\n position:relative;\n border:2px solid var(--ink);\n box-shadow:5px 5px 0 rgba(0,0,0,0.35);\n transition:transform .12s ease, box-shadow .12s ease;\n min-height:96px;\n display:flex;flex-direction:column;justify-content:space-between;\n }\n .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,0.4);}\n .card:active{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(0,0,0,0.4);}\n .card .cat-name{\n font-family:'Archivo Black', sans-serif;\n font-size:1.02rem;\n text-transform:uppercase;\n line-height:1.15;\n }\n .card .cat-meta{\n font-family:'Space Mono', monospace;\n font-size:0.7rem;\n color:var(--hotpink);\n margin-top:8px;\n letter-spacing:1px;\n }\n .card.disabled{opacity:0.4;cursor:not-allowed;}\n .card.disabled:hover{transform:none;box-shadow:5px 5px 0 rgba(0,0,0,0.35);}\n .card.done{background:var(--teal);color:var(--paper);border-color:var(--teal);}\n .card.done .cat-meta{color:var(--mustard);}\n\n \/* ---------- Stage (question view) ---------- *\/\n .stage{display:none;}\n .stage.active{display:block;}\n .menu.hidden{display:none;}\n\n .stage-top{\n display:flex;justify-content:space-between;align-items:center;\n margin-bottom:18px;flex-wrap:wrap;gap:10px;\n }\n .back-btn{\n font-family:'Space Mono', monospace;\n background:none;border:2px solid var(--paper);color:var(--paper);\n padding:8px 14px;cursor:pointer;font-size:0.8rem;letter-spacing:1px;text-transform:uppercase;\n border-radius:2px;\n }\n .back-btn:hover{background:var(--paper);color:var(--ink);}\n .pill{\n font-family:'Space Mono', monospace;\n background:var(--hotpink);color:var(--paper);\n padding:6px 14px;border-radius:20px;font-size:0.75rem;\n letter-spacing:1px;text-transform:uppercase;\n }\n\n .board{\n background:var(--paper);color:var(--ink);\n border:3px solid var(--ink);\n border-radius:4px;\n padding:44px 40px;\n min-height:360px;\n display:flex;flex-direction:column;justify-content:center;\n box-shadow:8px 8px 0 rgba(0,0,0,0.4);\n position:relative;\n }\n .q-eyebrow{\n font-family:'Space Mono', monospace;\n font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n color:var(--hotpink);margin-bottom:14px;\n }\n .q-text{\n font-family:'Archivo Black', sans-serif;\n font-size:clamp(1.5rem, 3.4vw, 2.3rem);\n line-height:1.25;\n margin:0 0 26px 0;\n }\n .choices{\n display:grid;grid-template-columns:1fr 1fr;gap:12px;\n margin-bottom:8px;\n }\n .choice{\n font-family:'Oswald', sans-serif;\n font-size:1.05rem;\n border:2px solid var(--ink);\n padding:12px 16px;border-radius:3px;\n background:transparent;\n cursor:pointer;\n transition:transform .08s ease, background .12s ease;\n }\n .choice:hover:not(.correct):not(.wrong):not(.locked){\n background:rgba(24,20,16,0.06);\n }\n .choice:active:not(.locked){transform:translate(1px,1px);}\n .choice.correct{\n background:var(--teal);color:var(--paper);border-color:var(--teal);\n font-weight:600;\n }\n .choice.wrong{\n background:var(--hotpink);color:var(--paper);border-color:var(--hotpink);\n font-weight:600;\n }\n .choice.locked{cursor:default;}\n .video-link{\n display:inline-block;margin-top:10px;\n font-family:'Space Mono', monospace;\n color:var(--hotpink);text-decoration:underline;\n font-size:0.95rem;\n }\n .clip-time{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;color:var(--teal);margin-top:4px;\n }\n .answer-panel{\n margin-top:24px;padding-top:20px;border-top:2px dashed var(--ink);\n display:none;\n }\n .answer-panel.shown{display:block;}\n .answer-label{\n font-family:'Space Mono', monospace;\n font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n color:var(--teal);margin-bottom:8px;\n }\n .answer-text{\n font-family:'Archivo Black', sans-serif;\n font-size:1.4rem;\n }\n .placeholder-note{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;\n background:var(--mustard);\n color:var(--ink);\n padding:10px 14px;border-radius:3px;\n margin-top:16px;\n display:inline-block;\n }\n\n .controls{\n display:flex;justify-content:space-between;align-items:center;\n margin-top:22px;flex-wrap:wrap;gap:10px;\n }\n .btn-group{display:flex;gap:10px;flex-wrap:wrap;}\n button.action{\n font-family:'Archivo Black', sans-serif;\n text-transform:uppercase;letter-spacing:0.5px;\n font-size:0.9rem;\n padding:12px 22px;\n border:none;border-radius:3px;\n cursor:pointer;\n background:var(--hotpink);color:var(--paper);\n box-shadow:4px 4px 0 rgba(0,0,0,0.5);\n transition:transform .1s ease;\n }\n button.action:hover{transform:translate(-2px,-2px);}\n button.action:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,0.5);}\n button.action.secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);}\n button.action.ghost{background:transparent;color:var(--paper);border:2px solid var(--paper);box-shadow:none;}\n button.action:disabled{opacity:0.35;cursor:not-allowed;}\n\n .q-progress{\n font-family:'Space Mono', monospace;\n font-size:0.8rem;color:var(--paper);opacity:0.7;\n }\n\n footer.note{\n text-align:center;margin-top:40px;\n font-family:'Space Mono', monospace;\n font-size:0.7rem;color:var(--paper);opacity:0.4;\n }\n\n @media (max-width:520px){\n .choices{grid-template-columns:1fr;}\n .board{padding:28px 22px;}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <div>\n <h1>Trivia Night<\/h1>\n <div class=\"sub\">Music Edition — Host Console<\/div>\n <\/div>\n <div class=\"scoreboard\" id=\"progressSummary\"><\/div>\n <\/div>\n\n <div class=\"stats-bar\" id=\"statsBar\">\n <div class=\"stat correct-stat\"><span id=\"correctCount\">0<\/span> Correct<\/div>\n <div class=\"stat wrong-stat\"><span id=\"wrongCount\">0<\/span> Wrong<\/div>\n <\/div>\n\n \n <div class=\"menu\" id=\"menuView\">\n\n <div class=\"round-block\">\n <div class=\"round-title\">Rounds 1 & 2 \u2014 Categories (pick any 6 for the night)<\/div>\n <div class=\"grid\" id=\"categoryGrid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Round 3 \u2014 General Knowledge (pick 4)<\/div>\n <div class=\"grid\" id=\"round3Grid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Bonus \u2014 Name That Video<\/div>\n <div class=\"grid\" id=\"videoGrid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Bonus \u2014 Butchering The Classics<\/div>\n <div class=\"grid\" id=\"butcherGrid\"><\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"stage\" id=\"stageView\">\n <div class=\"stage-top\">\n <button class=\"back-btn\" id=\"backBtn\">← Back to categories<\/button>\n <span class=\"pill\" id=\"stagePill\"><\/span>\n <\/div>\n\n <div class=\"board\" id=\"boardContent\"><\/div>\n\n <div class=\"controls\">\n <div class=\"q-progress\" id=\"qProgress\"><\/div>\n <div class=\"btn-group\">\n <button class=\"action secondary\" id=\"prevBtn\">Prev<\/button>\n <button class=\"action\" id=\"revealBtn\">Reveal Answer<\/button>\n <button class=\"action ghost\" id=\"nextBtn\">Next Question →<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <footer class=\"note\">Host view \u2014 click a category to run its questions, Reveal to show the answer, Next to advance.<\/footer>\n<\/div>\n\n<script>\n\/* ============ DATA ============ *\/\nconst categories = [\n { name: \"CBGB's\", questions: [\n { q:\"Name the legendary founder of CBGB's who opened the doors in December 1973?\", choices:[\"Malcolm McLaren\",\"Hilly Kristal\",\"Andy Warhol\",\"Lou Reed\"], answer:1 },\n { q:\"Which of these bands did not regularly play the CBGB stage in its early years?\", choices:[\"Television\",\"Patti Smith Group\",\"The Stooges\",\"The Dead Boys\"], answer:2 }\n ]},\n { name:\"Gone Too Soon\", questions:[\n { q:'On February 3, 1959, the music world suffered a devastating loss in a plane crash later dubbed \"The Day the Music Died.\" Which of these artists did NOT perish in that crash?', choices:[\"Buddy Holly\",\"Ritchie Valens\",\"The Big Bopper (J.P. Richardson)\",\"Eddie Cochran\"], answer:3 },\n { q:\"Bon Scott, the original frontman for AC\/DC, tragically died in 1980. What was his official cause of death?\", choices:[\"Drug overdose\",\"Alcohol poisoning (acute alcohol intoxication)\",\"A motorcycle accident\",\"Heart failure\"], answer:1 }\n ]},\n { name:\"Hip Hop\", questions:[\n { q:\"Which legendary hip-hop artist is famously known for releasing the acclaimed debut album Illmatic at just 19 years old?\", choices:[\"Nas\",\"Tupac Shakur\",\"The Notorious B.I.G.\",\"Snoop Dogg\"], answer:0 },\n { q:\"Who became the first hip-hop artist to win the Pulitzer Prize for Music in 2018?\", choices:[\"J. Cole\",\"Drake\",\"Kanye West\",\"Kendrick Lamar\"], answer:3 }\n ]},\n { name:\"Original Band Names\", questions:[\n { q:\"Before they became a global pop-rock phenomenon, Coldplay performed under what original moniker?\", choices:[\"Big Fat Noises\",\"Starfish\",\"The High Numbers\",\"Smile\"], answer:1 },\n { q:\"Before Syd Barrett coined the name Pink Floyd, what was the group's original name?\", choices:[\"The Tea Set\",\"The Pendletones\",\"The Quarrymen\",\"Sigma 6\"], answer:0 }\n ]},\n { name:\"Woodstock\", questions:[\n { q:\"In which New York town did the Woodstock festival actually take place?\", choices:[\"Woodstock, NY\",\"Bethel, NY\",\"Saugerties, NY\",\"Wallkill, NY\"], answer:1 },\n { q:\"Which folk artist was the first official performer to take the stage at Woodstock?\", choices:[\"Joan Baez\",\"Arlo Guthrie\",\"Richie Havens\",\"Melanie\"], answer:2 }\n ]},\n { name:\"1-Hit Wonders\", questions:[\n { q:'Which 1981 hit for the band Soft Cell is widely considered one of the most covered one-hit wonders of all time?', choices:['\"Tainted Love\"','\"Come On Eileen\"','\"Mickey\"','\"Love Shack\"'], answer:0 },\n { q:'Which artist famously sang the 1982 cheerleader-pop anthem \"Mickey\"?', choices:[\"Cyndi Lauper\",\"Toni Basil\",\"Debbie Gibson\",\"Kim Wilde\"], answer:1 }\n ]},\n { name:\"The Beatles\", questions:[\n { q:\"Which member was the last to officially join The Beatles' definitive lineup?\", choices:[\"George Harrison\",\"Paul McCartney\",\"Ringo Starr\",\"John Lennon\"], answer:2 },\n { q:\"Who was the band's primary manager during their meteoric rise to fame?\", choices:[\"George Martin\",\"Brian Epstein\",\"Richard Lester\",\"Phil Spector\"], answer:1 }\n ]},\n { name:\"Power Couples\", questions:[\n { q:\"Gwen Stefani and Gavin Rossdale ruled the rock charts in the late 90s and 2000s. Which No Doubt song was directly written about the breakdown of her romance with bandmate Tony Kanal?\", choices:['\"Don\\'t Speak\"','\"Just a Girl\"','\"Spiderwebs\"','\"Hey Baby\"'], answer:0 },\n { q:\"Which pioneering English guitarist met his future wife, Patti Boyd, while she was still married to his friend George Harrison of The Beatles?\", choices:[\"Jimi Hendrix\",\"Jimmy Page\",\"Eric Clapton\",\"Jeff Beck\"], answer:2 }\n ]},\n { name:\"Cover Me\", questions:[\n { q:'\"I Will Always Love You\" is a massive Whitney Houston ballad, but which country music legend wrote and recorded the original in 1973?', choices:[\"Loretta Lynn\",\"Dolly Parton\",\"Reba McEntire\",\"Patsy Cline\"], answer:1 },\n { q:'The Bangles scored a 1986 Billboard number-one hit with \"Manic Monday,\" but which famous musician wrote the track under the pseudonym \"Christopher\"?', choices:[\"Prince\",\"Paul McCartney\",\"Bruce Springsteen\",\"John Mellencamp\"], answer:0 }\n ]},\n { name:\"You're So Vain\", questions:[\n { q:'Which 1970s chart-topper was written by Elton John and Bernie Taupin as a tribute to Marilyn Monroe, later re-recorded for Princess Diana?', choices:['\"Rocket Man\"','\"Bennie and the Jets\"','\"Candle in the Wind\"','\"Tiny Dancer\"'], answer:2 },\n { q:'Which Full House actor is famously rumored to be the subject of Alanis Morissette\\'s 1995 breakup anthem \"You Oughta Know\"?', choices:[\"John Stamos\",\"Bob Saget\",\"Dave Coulier\",\"Scott Weinger\"], answer:2 }\n ]},\n { name:\"Prog Rock\", questions:[\n { q:\"Which classical composer wrote the original orchestral suite that ELP heavily adapted for their popular 1971 live album Pictures at an Exhibition?\", choices:[\"Modest Mussorgsky\",\"Pyotr Ilyich Tchaikovsky\",\"Sergei Prokofiev\",\"B\\u00e9la Bart\\u00f3k\"], answer:0 },\n { q:\"What sci-fi concept album by the band Rush was famously inspired by an Ayn Rand novella, telling of a dystopian future where music is outlawed?\", choices:[\"2112\",\"Hemispheres\",\"A Farewell to Kings\",\"Moving Pictures\"], answer:0 }\n ]},\n { name:\"Grunge\", questions:[\n { q:'Which famous 90s grunge supergroup released the 1991 hit \"Hunger Strike\" as a tribute to Mother Love Bone\\'s late frontman?', choices:[\"Temple of the Dog\",\"Mad Season\",\"Audioslave\",\"Blind Melon\"], answer:0 },\n { q:'The tragic 1991 song \"Jeremy\" by Pearl Jam was inspired by:', choices:[\"A real-life news story about a boy who shot himself in front of his English class\",\"A poem written by frontman Eddie Vedder in high school\",\"The story of a famous local Seattle graffiti artist\",\"A recurring nightmare experienced by the band's guitarist\"], answer:0 }\n ]}\n];\n\n\/* Round 3 \u2014 open-ended, answers researched since the source doc had no answer key *\/\nconst round3 = [\n { q:\"What was the best-selling album of all time worldwide, released in 1982?\", answer:\"Thriller \u2014 Michael Jackson\" },\n { q:\"What was the real birth name of Queen frontman Freddie Mercury?\", answer:\"Farrokh Bulsara\" },\n { q:\"In the classic movie The Big Lebowski, what band does The Dude not abide by?\", answer:\"The Eagles\" },\n { q:\"What was Madonna's first top 10 hit?\", answer:'\"Borderline\" (1984, No. 10 on the Billboard Hot 100) \u2014 \"Holiday\" charted first but only reached No. 16' },\n { q:\"Which famous acoustic artist tragically died in a plane crash while piloting his own plane in 1997?\", answer:\"John Denver\" },\n { q:\"Van Halen famously banned what color M&Ms in their rider?\", answer:\"Brown\" },\n { q:\"Art Garfunkel initially declined to sing one of Simon & Garfunkel's biggest hits solo. Which song is it?\", answer:'\"Bridge Over Troubled Water\"' },\n { q:'Who is Kendrick Lamar\\'s diss track \"Not Like Us\" about?', answer:\"Drake\" },\n { q:\"What singer was born Georgios Kyriacos Panayiotou?\", answer:\"George Michael\" }\n];\n\n\/* Name That Video \u2014 links provided, question\/answer left as placeholders for you to fill in *\/\nconst videoRound = [\n { label:\"Video Clip 1\", url:\"https:\/\/www.youtube.com\/watch?v=GHhD4PD75zY\", clip:\"Use :07 to :24\", placeholder:true },\n { label:\"Video Clip 2\", url:\"https:\/\/www.youtube.com\/watch?v=fHiGbolFFGw\", clip:\"Use :28 to :42\", placeholder:true }\n];\n\n\/* Butchering The Classics \u2014 waiting on Ed's clips, not in the source doc *\/\nconst butcherRound = { placeholder:true };\n\n\/* ============ STATE ============ *\/\nlet currentSet = null; \/\/ {type, title, items}\nlet currentIndex = 0;\nlet completed = new Set();\nlet correctCount = 0;\nlet wrongCount = 0;\n\nfunction updateStats(){\n document.getElementById('correctCount').textContent = correctCount;\n document.getElementById('wrongCount').textContent = wrongCount;\n}\n\n\/* ============ RENDER MENU ============ *\/\nconst categoryGrid = document.getElementById('categoryGrid');\nconst round3Grid = document.getElementById('round3Grid');\nconst videoGrid = document.getElementById('videoGrid');\nconst butcherGrid = document.getElementById('butcherGrid');\n\nfunction cardKey(type, idx){ return type + '-' + idx; }\n\nfunction buildCategoryCards(){\n categoryGrid.innerHTML = '';\n categories.forEach((cat, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('cat', idx);\n el.innerHTML = `<div class=\"cat-name\">${cat.name}<\/div><div class=\"cat-meta\">2 QUESTIONS<\/div>`;\n el.addEventListener('click', () => openSet('cat', idx, cat.name, cat.questions));\n categoryGrid.appendChild(el);\n });\n}\n\nfunction buildRound3Cards(){\n round3Grid.innerHTML = '';\n round3.forEach((item, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('r3', idx);\n el.innerHTML = `<div class=\"cat-name\">Question ${idx+1}<\/div><div class=\"cat-meta\">GENERAL KNOWLEDGE<\/div>`;\n el.addEventListener('click', () => openSet('r3', idx, 'Round 3 \u00b7 Q' + (idx+1), [item]));\n round3Grid.appendChild(el);\n });\n}\n\nfunction buildVideoCards(){\n videoGrid.innerHTML = '';\n videoRound.forEach((item, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('vid', idx);\n el.innerHTML = `<div class=\"cat-name\">${item.label}<\/div><div class=\"cat-meta\">NEEDS Q&A<\/div>`;\n el.addEventListener('click', () => openSet('vid', idx, item.label, [item]));\n videoGrid.appendChild(el);\n });\n}\n\nfunction buildButcherCard(){\n butcherGrid.innerHTML = '';\n const el = document.createElement('div');\n el.className = 'card disabled';\n el.innerHTML = `<div class=\"cat-name\">Not ready yet<\/div><div class=\"cat-meta\">WAITING ON ED'S CLIPS<\/div>`;\n butcherGrid.appendChild(el);\n}\n\nfunction markDone(type, idx){\n completed.add(cardKey(type, idx));\n const el = document.querySelector(`[data-key=\"${cardKey(type, idx)}\"]`);\n if(el) el.classList.add('done');\n updateProgressSummary();\n}\n\nfunction updateProgressSummary(){\n document.getElementById('progressSummary').textContent =\n completed.size + ' cleared this session';\n}\n\n\/* ============ STAGE LOGIC ============ *\/\nconst menuView = document.getElementById('menuView');\nconst stageView = document.getElementById('stageView');\nconst boardContent = document.getElementById('boardContent');\nconst stagePill = document.getElementById('stagePill');\nconst qProgress = document.getElementById('qProgress');\nconst revealBtn = document.getElementById('revealBtn');\nconst nextBtn = document.getElementById('nextBtn');\nconst prevBtn = document.getElementById('prevBtn');\nconst backBtn = document.getElementById('backBtn');\n\nfunction openSet(type, idx, title, items){\n currentSet = { type, idx, title, items };\n currentIndex = 0;\n menuView.classList.add('hidden');\n stageView.classList.add('active');\n stagePill.textContent = title;\n renderQuestion();\n}\n\nfunction closeSet(){\n if(currentSet){ markDone(currentSet.type, currentSet.idx); }\n stageView.classList.remove('active');\n menuView.classList.remove('hidden');\n currentSet = null;\n}\n\nfunction renderQuestion(){\n const item = currentSet.items[currentIndex];\n qProgress.textContent = `Question ${currentIndex+1} of ${currentSet.items.length}`;\n prevBtn.disabled = currentIndex === 0;\n revealBtn.textContent = 'Reveal Answer';\n revealBtn.disabled = false;\n\n if(currentSet.type === 'cat' || currentSet.type === 'r3-mc'){\n renderMultipleChoice(item);\n } else if(currentSet.type === 'r3'){\n renderOpenEnded(item);\n } else if(currentSet.type === 'vid'){\n renderVideo(item);\n }\n}\n\nfunction renderMultipleChoice(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Multiple Choice<\/div>\n <div class=\"q-text\">${item.q}<\/div>\n <div class=\"choices\" id=\"choicesRow\">\n ${item.choices.map((c,i) => `<div class=\"choice\" data-i=\"${i}\">${String.fromCharCode(65+i)}) ${c}<\/div>`).join('')}\n <\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Correct Answer<\/div>\n <div class=\"answer-text\">${String.fromCharCode(65+item.answer)}) ${item.choices[item.answer]}<\/div>\n <\/div>\n `;\n\n const choiceEls = boardContent.querySelectorAll('.choice');\n choiceEls.forEach(el => {\n el.addEventListener('click', () => {\n if(el.classList.contains('locked')) return;\n const picked = parseInt(el.dataset.i, 10);\n if(picked === item.answer){\n el.classList.add('correct');\n choiceEls.forEach(c => c.classList.add('locked'));\n correctCount++;\n updateStats();\n } else {\n if(!el.classList.contains('wrong')){\n el.classList.add('wrong');\n wrongCount++;\n updateStats();\n }\n }\n });\n });\n}\n\nfunction renderOpenEnded(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Open Answer<\/div>\n <div class=\"q-text\">${item.q}<\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Answer<\/div>\n <div class=\"answer-text\">${item.answer}<\/div>\n <\/div>\n `;\n}\n\nfunction renderVideo(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Name That Video<\/div>\n <div class=\"q-text\">Play the clip and see who can name it first.<\/div>\n <a class=\"video-link\" href=\"${item.url}\" target=\"_blank\" rel=\"noopener\">${item.url}<\/a>\n <div class=\"clip-time\">${item.clip}<\/div>\n <div class=\"placeholder-note\">Placeholder \u2014 add the actual question wording and correct answer here before the show.<\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Answer<\/div>\n <div class=\"answer-text\">Not filled in yet<\/div>\n <\/div>\n `;\n}\n\nrevealBtn.addEventListener('click', () => {\n const panel = document.getElementById('answerPanel');\n if(panel){\n panel.classList.toggle('shown');\n revealBtn.textContent = panel.classList.contains('shown') ? 'Hide Answer' : 'Reveal Answer';\n }\n});\n\nnextBtn.addEventListener('click', () => {\n if(currentIndex < currentSet.items.length - 1){\n currentIndex++;\n renderQuestion();\n } else {\n closeSet();\n }\n});\n\nprevBtn.addEventListener('click', () => {\n if(currentIndex > 0){\n currentIndex--;\n renderQuestion();\n }\n});\n\nbackBtn.addEventListener('click', closeSet);\n\n\/* ============ INIT ============ *\/\nbuildCategoryCards();\nbuildRound3Cards();\nbuildVideoCards();\nbuildButcherCard();\nupdateProgressSummary();\nupdateStats();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Trivia Night Trivia Night Music Edition — Host Console 0 Correct 0 Wrong Rounds 1 & 2 \u2014 Categories (pick any 6 for the night) Round 3 \u2014 General Knowledge (pick 4) Bonus \u2014 Name That Video Bonus \u2014 Butchering The Classics ← Back to categories Prev Reveal Answer Next Question → Host view \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":3,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":32,"date":"2026-07-22T22:12:42","date_gmt":"2026-07-22T22:12:42","guid":{"rendered":"https:\/\/buffaloonthego.com\/?page_id=32"},"modified":"2026-07-22T22:23:39","modified_gmt":"2026-07-22T22:23:39","slug":"new-quiz","status":"publish","type":"page","link":"https:\/\/buffaloonthego.com\/?page_id=32","title":{"rendered":"New Quiz"},"content":{"rendered":"\n\n\n\n\n\nTrivia Night<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Archivo+Black&family=Space+Mono:wght@400;700&family=Oswald:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --paper:#efe9dc;\n --ink:#181410;\n --hotpink:#e0245e;\n --mustard:#e8a92e;\n --teal:#1c6e63;\n --tape:#d9d2bf;\n --line: rgba(24,20,16,0.15);\n }\n *{box-sizing:border-box;}\n html,body{margin:0;padding:0;}\n body{\n background:var(--ink);\n background-image:\n radial-gradient(circle at 15% 20%, rgba(224,36,94,0.10), transparent 40%),\n radial-gradient(circle at 85% 80%, rgba(232,169,46,0.08), transparent 45%);\n color:var(--paper);\n font-family:'Oswald', sans-serif;\n min-height:100vh;\n }\n .wrap{max-width:1100px;margin:0 auto;padding:28px 20px 60px;}\n\n \/* ---------- Header ---------- *\/\n .masthead{\n display:flex;justify-content:space-between;align-items:flex-end;\n border-bottom:4px solid var(--paper);\n padding-bottom:14px;margin-bottom:26px;\n flex-wrap:wrap;gap:10px;\n }\n .masthead h1{\n font-family:'Anton', sans-serif;\n font-size:clamp(2.4rem, 6vw, 4.2rem);\n letter-spacing:1px;\n margin:0;\n line-height:0.9;\n text-transform:uppercase;\n color:var(--paper);\n text-shadow: 4px 4px 0 var(--hotpink);\n }\n .masthead .sub{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;\n color:var(--mustard);\n letter-spacing:2px;\n text-transform:uppercase;\n }\n .scoreboard{\n font-family:'Space Mono', monospace;\n font-size:0.8rem;\n color:var(--paper);\n opacity:0.7;\n }\n\n .stats-bar{\n display:flex;gap:14px;justify-content:flex-end;\n margin:-16px 0 26px;\n font-family:'Space Mono', monospace;\n font-size:0.85rem;letter-spacing:1px;text-transform:uppercase;\n }\n .stats-bar .stat{\n padding:6px 14px;border-radius:20px;\n border:2px solid var(--paper);\n }\n .stats-bar .stat span{font-family:'Archivo Black', sans-serif;font-size:1rem;margin-right:6px;}\n .stats-bar .correct-stat{border-color:var(--teal);color:var(--teal);background:rgba(28,110,99,0.12);}\n .stats-bar .wrong-stat{border-color:var(--hotpink);color:var(--hotpink);background:rgba(224,36,94,0.10);}\n\n \/* ---------- Menu grid ---------- *\/\n .round-block{margin-bottom:34px;}\n .round-title{\n font-family:'Archivo Black', sans-serif;\n font-size:1.1rem;\n text-transform:uppercase;\n letter-spacing:1px;\n display:flex;align-items:center;gap:12px;\n margin-bottom:14px;\n color:var(--mustard);\n }\n .round-title::after{content:\"\";flex:1;height:2px;background:var(--line);background:rgba(232,169,46,0.25);}\n .grid{\n display:grid;\n grid-template-columns:repeat(auto-fill,minmax(190px,1fr));\n gap:14px;\n }\n .card{\n background:var(--paper);\n color:var(--ink);\n border-radius:2px;\n padding:16px 14px;\n cursor:pointer;\n position:relative;\n border:2px solid var(--ink);\n box-shadow:5px 5px 0 rgba(0,0,0,0.35);\n transition:transform .12s ease, box-shadow .12s ease;\n min-height:96px;\n display:flex;flex-direction:column;justify-content:space-between;\n }\n .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,0.4);}\n .card:active{transform:translate(1px,1px);box-shadow:3px 3px 0 rgba(0,0,0,0.4);}\n .card .cat-name{\n font-family:'Archivo Black', sans-serif;\n font-size:1.02rem;\n text-transform:uppercase;\n line-height:1.15;\n }\n .card .cat-meta{\n font-family:'Space Mono', monospace;\n font-size:0.7rem;\n color:var(--hotpink);\n margin-top:8px;\n letter-spacing:1px;\n }\n .card.disabled{opacity:0.4;cursor:not-allowed;}\n .card.disabled:hover{transform:none;box-shadow:5px 5px 0 rgba(0,0,0,0.35);}\n .card.done{background:var(--teal);color:var(--paper);border-color:var(--teal);}\n .card.done .cat-meta{color:var(--mustard);}\n\n \/* ---------- Stage (question view) ---------- *\/\n .stage{display:none;}\n .stage.active{display:block;}\n .menu.hidden{display:none;}\n\n .stage-top{\n display:flex;justify-content:space-between;align-items:center;\n margin-bottom:18px;flex-wrap:wrap;gap:10px;\n }\n .back-btn{\n font-family:'Space Mono', monospace;\n background:none;border:2px solid var(--paper);color:var(--paper);\n padding:8px 14px;cursor:pointer;font-size:0.8rem;letter-spacing:1px;text-transform:uppercase;\n border-radius:2px;\n }\n .back-btn:hover{background:var(--paper);color:var(--ink);}\n .pill{\n font-family:'Space Mono', monospace;\n background:var(--hotpink);color:var(--paper);\n padding:6px 14px;border-radius:20px;font-size:0.75rem;\n letter-spacing:1px;text-transform:uppercase;\n }\n\n .board{\n background:var(--paper);color:var(--ink);\n border:3px solid var(--ink);\n border-radius:4px;\n padding:44px 40px;\n min-height:360px;\n display:flex;flex-direction:column;justify-content:center;\n box-shadow:8px 8px 0 rgba(0,0,0,0.4);\n position:relative;\n }\n .q-eyebrow{\n font-family:'Space Mono', monospace;\n font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n color:var(--hotpink);margin-bottom:14px;\n }\n .q-text{\n font-family:'Archivo Black', sans-serif;\n font-size:clamp(1.5rem, 3.4vw, 2.3rem);\n line-height:1.25;\n margin:0 0 26px 0;\n }\n .choices{\n display:grid;grid-template-columns:1fr 1fr;gap:12px;\n margin-bottom:8px;\n }\n .choice{\n font-family:'Oswald', sans-serif;\n font-size:1.05rem;\n border:2px solid var(--ink);\n padding:12px 16px;border-radius:3px;\n background:transparent;\n cursor:pointer;\n transition:transform .08s ease, background .12s ease;\n }\n .choice:hover:not(.correct):not(.wrong):not(.locked){\n background:rgba(24,20,16,0.06);\n }\n .choice:active:not(.locked){transform:translate(1px,1px);}\n .choice.correct{\n background:var(--teal);color:var(--paper);border-color:var(--teal);\n font-weight:600;\n }\n .choice.wrong{\n background:var(--hotpink);color:var(--paper);border-color:var(--hotpink);\n font-weight:600;\n }\n .choice.locked{cursor:default;}\n .video-link{\n display:inline-block;margin-top:10px;\n font-family:'Space Mono', monospace;\n color:var(--hotpink);text-decoration:underline;\n font-size:0.95rem;\n }\n .clip-time{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;color:var(--teal);margin-top:4px;\n }\n .answer-panel{\n margin-top:24px;padding-top:20px;border-top:2px dashed var(--ink);\n display:none;\n }\n .answer-panel.shown{display:block;}\n .answer-label{\n font-family:'Space Mono', monospace;\n font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;\n color:var(--teal);margin-bottom:8px;\n }\n .answer-text{\n font-family:'Archivo Black', sans-serif;\n font-size:1.4rem;\n }\n .placeholder-note{\n font-family:'Space Mono', monospace;\n font-size:0.85rem;\n background:var(--mustard);\n color:var(--ink);\n padding:10px 14px;border-radius:3px;\n margin-top:16px;\n display:inline-block;\n }\n\n .controls{\n display:flex;justify-content:space-between;align-items:center;\n margin-top:22px;flex-wrap:wrap;gap:10px;\n }\n .btn-group{display:flex;gap:10px;flex-wrap:wrap;}\n button.action{\n font-family:'Archivo Black', sans-serif;\n text-transform:uppercase;letter-spacing:0.5px;\n font-size:0.9rem;\n padding:12px 22px;\n border:none;border-radius:3px;\n cursor:pointer;\n background:var(--hotpink);color:var(--paper);\n box-shadow:4px 4px 0 rgba(0,0,0,0.5);\n transition:transform .1s ease;\n }\n button.action:hover{transform:translate(-2px,-2px);}\n button.action:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,0.5);}\n button.action.secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink);}\n button.action.ghost{background:transparent;color:var(--paper);border:2px solid var(--paper);box-shadow:none;}\n button.action:disabled{opacity:0.35;cursor:not-allowed;}\n\n .q-progress{\n font-family:'Space Mono', monospace;\n font-size:0.8rem;color:var(--paper);opacity:0.7;\n }\n\n footer.note{\n text-align:center;margin-top:40px;\n font-family:'Space Mono', monospace;\n font-size:0.7rem;color:var(--paper);opacity:0.4;\n }\n\n @media (max-width:520px){\n .choices{grid-template-columns:1fr;}\n .board{padding:28px 22px;}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n <div class=\"masthead\">\n <div>\n <h1>Trivia Night<\/h1>\n <div class=\"sub\">Music Edition — Host Console<\/div>\n <\/div>\n <div class=\"scoreboard\" id=\"progressSummary\"><\/div>\n <\/div>\n\n <div class=\"stats-bar\" id=\"statsBar\">\n <div class=\"stat correct-stat\"><span id=\"correctCount\">0<\/span> Correct<\/div>\n <div class=\"stat wrong-stat\"><span id=\"wrongCount\">0<\/span> Wrong<\/div>\n <\/div>\n\n \n <div class=\"menu\" id=\"menuView\">\n\n <div class=\"round-block\">\n <div class=\"round-title\">Rounds 1 & 2 \u2014 Categories (pick any 6 for the night)<\/div>\n <div class=\"grid\" id=\"categoryGrid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Round 3 \u2014 General Knowledge (pick 4)<\/div>\n <div class=\"grid\" id=\"round3Grid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Bonus \u2014 Name That Video<\/div>\n <div class=\"grid\" id=\"videoGrid\"><\/div>\n <\/div>\n\n <div class=\"round-block\">\n <div class=\"round-title\">Bonus \u2014 Butchering The Classics<\/div>\n <div class=\"grid\" id=\"butcherGrid\"><\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"stage\" id=\"stageView\">\n <div class=\"stage-top\">\n <button class=\"back-btn\" id=\"backBtn\">← Back to categories<\/button>\n <span class=\"pill\" id=\"stagePill\"><\/span>\n <\/div>\n\n <div class=\"board\" id=\"boardContent\"><\/div>\n\n <div class=\"controls\">\n <div class=\"q-progress\" id=\"qProgress\"><\/div>\n <div class=\"btn-group\">\n <button class=\"action secondary\" id=\"prevBtn\">Prev<\/button>\n <button class=\"action\" id=\"revealBtn\">Reveal Answer<\/button>\n <button class=\"action ghost\" id=\"nextBtn\">Next Question →<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <footer class=\"note\">Host view \u2014 click a category to run its questions, Reveal to show the answer, Next to advance.<\/footer>\n<\/div>\n\n<script>\n\/* ============ DATA ============ *\/\nconst categories = [\n { name: \"CBGB's\", questions: [\n { q:\"Name the legendary founder of CBGB's who opened the doors in December 1973?\", choices:[\"Malcolm McLaren\",\"Hilly Kristal\",\"Andy Warhol\",\"Lou Reed\"], answer:1 },\n { q:\"Which of these bands did not regularly play the CBGB stage in its early years?\", choices:[\"Television\",\"Patti Smith Group\",\"The Stooges\",\"The Dead Boys\"], answer:2 }\n ]},\n { name:\"Gone Too Soon\", questions:[\n { q:'On February 3, 1959, the music world suffered a devastating loss in a plane crash later dubbed \"The Day the Music Died.\" Which of these artists did NOT perish in that crash?', choices:[\"Buddy Holly\",\"Ritchie Valens\",\"The Big Bopper (J.P. Richardson)\",\"Eddie Cochran\"], answer:3 },\n { q:\"Bon Scott, the original frontman for AC\/DC, tragically died in 1980. What was his official cause of death?\", choices:[\"Drug overdose\",\"Alcohol poisoning (acute alcohol intoxication)\",\"A motorcycle accident\",\"Heart failure\"], answer:1 }\n ]},\n { name:\"Hip Hop\", questions:[\n { q:\"Which legendary hip-hop artist is famously known for releasing the acclaimed debut album Illmatic at just 19 years old?\", choices:[\"Nas\",\"Tupac Shakur\",\"The Notorious B.I.G.\",\"Snoop Dogg\"], answer:0 },\n { q:\"Who became the first hip-hop artist to win the Pulitzer Prize for Music in 2018?\", choices:[\"J. Cole\",\"Drake\",\"Kanye West\",\"Kendrick Lamar\"], answer:3 }\n ]},\n { name:\"Original Band Names\", questions:[\n { q:\"Before they became a global pop-rock phenomenon, Coldplay performed under what original moniker?\", choices:[\"Big Fat Noises\",\"Starfish\",\"The High Numbers\",\"Smile\"], answer:1 },\n { q:\"Before Syd Barrett coined the name Pink Floyd, what was the group's original name?\", choices:[\"The Tea Set\",\"The Pendletones\",\"The Quarrymen\",\"Sigma 6\"], answer:0 }\n ]},\n { name:\"Woodstock\", questions:[\n { q:\"In which New York town did the Woodstock festival actually take place?\", choices:[\"Woodstock, NY\",\"Bethel, NY\",\"Saugerties, NY\",\"Wallkill, NY\"], answer:1 },\n { q:\"Which folk artist was the first official performer to take the stage at Woodstock?\", choices:[\"Joan Baez\",\"Arlo Guthrie\",\"Richie Havens\",\"Melanie\"], answer:2 }\n ]},\n { name:\"1-Hit Wonders\", questions:[\n { q:'Which 1981 hit for the band Soft Cell is widely considered one of the most covered one-hit wonders of all time?', choices:['\"Tainted Love\"','\"Come On Eileen\"','\"Mickey\"','\"Love Shack\"'], answer:0 },\n { q:'Which artist famously sang the 1982 cheerleader-pop anthem \"Mickey\"?', choices:[\"Cyndi Lauper\",\"Toni Basil\",\"Debbie Gibson\",\"Kim Wilde\"], answer:1 }\n ]},\n { name:\"The Beatles\", questions:[\n { q:\"Which member was the last to officially join The Beatles' definitive lineup?\", choices:[\"George Harrison\",\"Paul McCartney\",\"Ringo Starr\",\"John Lennon\"], answer:2 },\n { q:\"Who was the band's primary manager during their meteoric rise to fame?\", choices:[\"George Martin\",\"Brian Epstein\",\"Richard Lester\",\"Phil Spector\"], answer:1 }\n ]},\n { name:\"Power Couples\", questions:[\n { q:\"Gwen Stefani and Gavin Rossdale ruled the rock charts in the late 90s and 2000s. Which No Doubt song was directly written about the breakdown of her romance with bandmate Tony Kanal?\", choices:['\"Don\\'t Speak\"','\"Just a Girl\"','\"Spiderwebs\"','\"Hey Baby\"'], answer:0 },\n { q:\"Which pioneering English guitarist met his future wife, Patti Boyd, while she was still married to his friend George Harrison of The Beatles?\", choices:[\"Jimi Hendrix\",\"Jimmy Page\",\"Eric Clapton\",\"Jeff Beck\"], answer:2 }\n ]},\n { name:\"Cover Me\", questions:[\n { q:'\"I Will Always Love You\" is a massive Whitney Houston ballad, but which country music legend wrote and recorded the original in 1973?', choices:[\"Loretta Lynn\",\"Dolly Parton\",\"Reba McEntire\",\"Patsy Cline\"], answer:1 },\n { q:'The Bangles scored a 1986 Billboard number-one hit with \"Manic Monday,\" but which famous musician wrote the track under the pseudonym \"Christopher\"?', choices:[\"Prince\",\"Paul McCartney\",\"Bruce Springsteen\",\"John Mellencamp\"], answer:0 }\n ]},\n { name:\"You're So Vain\", questions:[\n { q:'Which 1970s chart-topper was written by Elton John and Bernie Taupin as a tribute to Marilyn Monroe, later re-recorded for Princess Diana?', choices:['\"Rocket Man\"','\"Bennie and the Jets\"','\"Candle in the Wind\"','\"Tiny Dancer\"'], answer:2 },\n { q:'Which Full House actor is famously rumored to be the subject of Alanis Morissette\\'s 1995 breakup anthem \"You Oughta Know\"?', choices:[\"John Stamos\",\"Bob Saget\",\"Dave Coulier\",\"Scott Weinger\"], answer:2 }\n ]},\n { name:\"Prog Rock\", questions:[\n { q:\"Which classical composer wrote the original orchestral suite that ELP heavily adapted for their popular 1971 live album Pictures at an Exhibition?\", choices:[\"Modest Mussorgsky\",\"Pyotr Ilyich Tchaikovsky\",\"Sergei Prokofiev\",\"B\\u00e9la Bart\\u00f3k\"], answer:0 },\n { q:\"What sci-fi concept album by the band Rush was famously inspired by an Ayn Rand novella, telling of a dystopian future where music is outlawed?\", choices:[\"2112\",\"Hemispheres\",\"A Farewell to Kings\",\"Moving Pictures\"], answer:0 }\n ]},\n { name:\"Grunge\", questions:[\n { q:'Which famous 90s grunge supergroup released the 1991 hit \"Hunger Strike\" as a tribute to Mother Love Bone\\'s late frontman?', choices:[\"Temple of the Dog\",\"Mad Season\",\"Audioslave\",\"Blind Melon\"], answer:0 },\n { q:'The tragic 1991 song \"Jeremy\" by Pearl Jam was inspired by:', choices:[\"A real-life news story about a boy who shot himself in front of his English class\",\"A poem written by frontman Eddie Vedder in high school\",\"The story of a famous local Seattle graffiti artist\",\"A recurring nightmare experienced by the band's guitarist\"], answer:0 }\n ]}\n];\n\n\/* Round 3 \u2014 open-ended, answers researched since the source doc had no answer key *\/\nconst round3 = [\n { q:\"What was the best-selling album of all time worldwide, released in 1982?\", answer:\"Thriller \u2014 Michael Jackson\" },\n { q:\"What was the real birth name of Queen frontman Freddie Mercury?\", answer:\"Farrokh Bulsara\" },\n { q:\"In the classic movie The Big Lebowski, what band does The Dude not abide by?\", answer:\"The Eagles\" },\n { q:\"What was Madonna's first top 10 hit?\", answer:'\"Borderline\" (1984, No. 10 on the Billboard Hot 100) \u2014 \"Holiday\" charted first but only reached No. 16' },\n { q:\"Which famous acoustic artist tragically died in a plane crash while piloting his own plane in 1997?\", answer:\"John Denver\" },\n { q:\"Van Halen famously banned what color M&Ms in their rider?\", answer:\"Brown\" },\n { q:\"Art Garfunkel initially declined to sing one of Simon & Garfunkel's biggest hits solo. Which song is it?\", answer:'\"Bridge Over Troubled Water\"' },\n { q:'Who is Kendrick Lamar\\'s diss track \"Not Like Us\" about?', answer:\"Drake\" },\n { q:\"What singer was born Georgios Kyriacos Panayiotou?\", answer:\"George Michael\" }\n];\n\n\/* Name That Video \u2014 links provided, question\/answer left as placeholders for you to fill in *\/\nconst videoRound = [\n { label:\"Video Clip 1\", url:\"https:\/\/www.youtube.com\/watch?v=GHhD4PD75zY\", clip:\"Use :07 to :24\", placeholder:true },\n { label:\"Video Clip 2\", url:\"https:\/\/www.youtube.com\/watch?v=fHiGbolFFGw\", clip:\"Use :28 to :42\", placeholder:true }\n];\n\n\/* Butchering The Classics \u2014 waiting on Ed's clips, not in the source doc *\/\nconst butcherRound = { placeholder:true };\n\n\/* ============ STATE ============ *\/\nlet currentSet = null; \/\/ {type, title, items}\nlet currentIndex = 0;\nlet completed = new Set();\nlet correctCount = 0;\nlet wrongCount = 0;\n\nfunction updateStats(){\n document.getElementById('correctCount').textContent = correctCount;\n document.getElementById('wrongCount').textContent = wrongCount;\n}\n\n\/* ============ RENDER MENU ============ *\/\nconst categoryGrid = document.getElementById('categoryGrid');\nconst round3Grid = document.getElementById('round3Grid');\nconst videoGrid = document.getElementById('videoGrid');\nconst butcherGrid = document.getElementById('butcherGrid');\n\nfunction cardKey(type, idx){ return type + '-' + idx; }\n\nfunction buildCategoryCards(){\n categoryGrid.innerHTML = '';\n categories.forEach((cat, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('cat', idx);\n el.innerHTML = `<div class=\"cat-name\">${cat.name}<\/div><div class=\"cat-meta\">2 QUESTIONS<\/div>`;\n el.addEventListener('click', () => openSet('cat', idx, cat.name, cat.questions));\n categoryGrid.appendChild(el);\n });\n}\n\nfunction buildRound3Cards(){\n round3Grid.innerHTML = '';\n round3.forEach((item, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('r3', idx);\n el.innerHTML = `<div class=\"cat-name\">Question ${idx+1}<\/div><div class=\"cat-meta\">GENERAL KNOWLEDGE<\/div>`;\n el.addEventListener('click', () => openSet('r3', idx, 'Round 3 \u00b7 Q' + (idx+1), [item]));\n round3Grid.appendChild(el);\n });\n}\n\nfunction buildVideoCards(){\n videoGrid.innerHTML = '';\n videoRound.forEach((item, idx) => {\n const el = document.createElement('div');\n el.className = 'card';\n el.dataset.key = cardKey('vid', idx);\n el.innerHTML = `<div class=\"cat-name\">${item.label}<\/div><div class=\"cat-meta\">NEEDS Q&A<\/div>`;\n el.addEventListener('click', () => openSet('vid', idx, item.label, [item]));\n videoGrid.appendChild(el);\n });\n}\n\nfunction buildButcherCard(){\n butcherGrid.innerHTML = '';\n const el = document.createElement('div');\n el.className = 'card disabled';\n el.innerHTML = `<div class=\"cat-name\">Not ready yet<\/div><div class=\"cat-meta\">WAITING ON ED'S CLIPS<\/div>`;\n butcherGrid.appendChild(el);\n}\n\nfunction markDone(type, idx){\n completed.add(cardKey(type, idx));\n const el = document.querySelector(`[data-key=\"${cardKey(type, idx)}\"]`);\n if(el) el.classList.add('done');\n updateProgressSummary();\n}\n\nfunction updateProgressSummary(){\n document.getElementById('progressSummary').textContent =\n completed.size + ' cleared this session';\n}\n\n\/* ============ STAGE LOGIC ============ *\/\nconst menuView = document.getElementById('menuView');\nconst stageView = document.getElementById('stageView');\nconst boardContent = document.getElementById('boardContent');\nconst stagePill = document.getElementById('stagePill');\nconst qProgress = document.getElementById('qProgress');\nconst revealBtn = document.getElementById('revealBtn');\nconst nextBtn = document.getElementById('nextBtn');\nconst prevBtn = document.getElementById('prevBtn');\nconst backBtn = document.getElementById('backBtn');\n\nfunction openSet(type, idx, title, items){\n currentSet = { type, idx, title, items };\n currentIndex = 0;\n menuView.classList.add('hidden');\n stageView.classList.add('active');\n stagePill.textContent = title;\n renderQuestion();\n}\n\nfunction closeSet(){\n if(currentSet){ markDone(currentSet.type, currentSet.idx); }\n stageView.classList.remove('active');\n menuView.classList.remove('hidden');\n currentSet = null;\n}\n\nfunction renderQuestion(){\n const item = currentSet.items[currentIndex];\n qProgress.textContent = `Question ${currentIndex+1} of ${currentSet.items.length}`;\n prevBtn.disabled = currentIndex === 0;\n revealBtn.textContent = 'Reveal Answer';\n revealBtn.disabled = false;\n\n if(currentSet.type === 'cat' || currentSet.type === 'r3-mc'){\n renderMultipleChoice(item);\n } else if(currentSet.type === 'r3'){\n renderOpenEnded(item);\n } else if(currentSet.type === 'vid'){\n renderVideo(item);\n }\n}\n\nfunction renderMultipleChoice(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Multiple Choice<\/div>\n <div class=\"q-text\">${item.q}<\/div>\n <div class=\"choices\" id=\"choicesRow\">\n ${item.choices.map((c,i) => `<div class=\"choice\" data-i=\"${i}\">${String.fromCharCode(65+i)}) ${c}<\/div>`).join('')}\n <\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Correct Answer<\/div>\n <div class=\"answer-text\">${String.fromCharCode(65+item.answer)}) ${item.choices[item.answer]}<\/div>\n <\/div>\n `;\n\n const choiceEls = boardContent.querySelectorAll('.choice');\n choiceEls.forEach(el => {\n el.addEventListener('click', () => {\n if(el.classList.contains('locked')) return;\n const picked = parseInt(el.dataset.i, 10);\n if(picked === item.answer){\n el.classList.add('correct');\n choiceEls.forEach(c => c.classList.add('locked'));\n correctCount++;\n updateStats();\n } else {\n if(!el.classList.contains('wrong')){\n el.classList.add('wrong');\n wrongCount++;\n updateStats();\n }\n }\n });\n });\n}\n\nfunction renderOpenEnded(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Open Answer<\/div>\n <div class=\"q-text\">${item.q}<\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Answer<\/div>\n <div class=\"answer-text\">${item.answer}<\/div>\n <\/div>\n `;\n}\n\nfunction renderVideo(item){\n boardContent.innerHTML = `\n <div class=\"q-eyebrow\">Name That Video<\/div>\n <div class=\"q-text\">Play the clip and see who can name it first.<\/div>\n <a class=\"video-link\" href=\"${item.url}\" target=\"_blank\" rel=\"noopener\">${item.url}<\/a>\n <div class=\"clip-time\">${item.clip}<\/div>\n <div class=\"placeholder-note\">Placeholder \u2014 add the actual question wording and correct answer here before the show.<\/div>\n <div class=\"answer-panel\" id=\"answerPanel\">\n <div class=\"answer-label\">Answer<\/div>\n <div class=\"answer-text\">Not filled in yet<\/div>\n <\/div>\n `;\n}\n\nrevealBtn.addEventListener('click', () => {\n const panel = document.getElementById('answerPanel');\n if(panel){\n panel.classList.toggle('shown');\n revealBtn.textContent = panel.classList.contains('shown') ? 'Hide Answer' : 'Reveal Answer';\n }\n});\n\nnextBtn.addEventListener('click', () => {\n if(currentIndex < currentSet.items.length - 1){\n currentIndex++;\n renderQuestion();\n } else {\n closeSet();\n }\n});\n\nprevBtn.addEventListener('click', () => {\n if(currentIndex > 0){\n currentIndex--;\n renderQuestion();\n }\n});\n\nbackBtn.addEventListener('click', closeSet);\n\n\/* ============ INIT ============ *\/\nbuildCategoryCards();\nbuildRound3Cards();\nbuildVideoCards();\nbuildButcherCard();\nupdateProgressSummary();\nupdateStats();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Trivia Night Trivia Night Music Edition — Host Console 0 Correct 0 Wrong Rounds 1 & 2 \u2014 Categories (pick any 6 for the night) Round 3 \u2014 General Knowledge (pick 4) Bonus \u2014 Name That Video Bonus \u2014 Butchering The Classics ← Back to categories Prev Reveal Answer Next Question → Host view \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":3,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}