{"id":2,"date":"2026-06-17T14:39:07","date_gmt":"2026-06-17T14:39:07","guid":{"rendered":"https:\/\/buffaloonthego.com\/?page_id=2"},"modified":"2026-06-17T18:37:25","modified_gmt":"2026-06-17T18:37:25","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/buffaloonthego.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style>\n    .quiz {\n      max-width: 1200px;\n      background: #1c1c1c;\n      border-radius: 24px;\n      padding: clamp(24px, 4vw, 60px);\n      box-shadow: 0 0 40px rgba(0,0,0,0.5);\n    }\n\n.top-bar {\n  display: flex;\n  justify-content: space-between;\n  gap: 20px;\n  margin-bottom: 30px;\n  font-size: clamp(16px, 1.4vw, 22px);\n  color: #ddd;\n}\n\n.category {\n  font-size: clamp(18px, 1.8vw, 28px);\n  color: #ffcc33;\n  margin-bottom: 16px;\n}\n\n.question {\n  font-size: clamp(24px, 2.6vw, 42px);\n  line-height: 1.3;\n  margin-bottom: 28px;\n  font-weight: bold;\n}\n\n    .answers {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 24px;\n      margin-bottom: 40px;\n    }\n\n.answer {\n  font-size: clamp(18px, 1.8vw, 28px);\n  padding: 18px;\n  border-radius: 18px;\n  border: 3px solid #555;\n  background: #2a2a2a;\n  color: #fff;\n  cursor: pointer;\n  text-align: left;\n}\n\n    .answer.selected {\n      border-color: #ffcc33;\n      background: #4a3b00;\n    }\n\n    .controls {\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n    }\n\nbutton {\n  font-size: clamp(16px, 1.5vw, 22px);\n  padding: 14px 24px;\n  border-radius: 14px;\n  border: none;\n  cursor: pointer;\n  font-weight: bold;\n}\n\n    button:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    .prev {\n      background: #555;\n      color: #fff;\n    }\n\n    .next,\n    .submit,\n    .restart {\n      background: #ffcc33;\n      color: #111;\n    }\n\n    .warning {\n      margin-top: 24px;\n      color: #ff7777;\n      font-size: clamp(20px, 2.5vw, 32px);\n      display: none;\n    }\n\n    .results {\n      text-align: center;\n    }\n\n    .results h1 {\n      font-size: clamp(48px, 8vw, 100px);\n      margin-bottom: 20px;\n      color: #ffcc33;\n    }\n\n    .results p {\n      font-size: clamp(32px, 5vw, 64px);\n      margin: 20px 0;\n    }\n\n    .missed {\n      margin-top: 40px;\n      text-align: left;\n      font-size: clamp(20px, 2.5vw, 30px);\n      line-height: 1.5;\n    }\n\n@media (max-width: 700px) {\n  .quiz {\n    padding: 16px;\n    border-radius: 0;\n  }\n\n  .answers {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .answer {\n    font-size: 16px;\n    padding: 14px;\n  }\n\n  .question {\n    font-size: 22px;\n    margin-bottom: 20px;\n  }\n\n  .category {\n    font-size: 18px;\n  }\n\n  .top-bar {\n    flex-direction: column;\n    gap: 6px;\n    font-size: 14px;\n  }\n\n  .controls {\n    flex-direction: column;\n  }\n\n  button {\n    width: 100%;\n    font-size: 16px;\n  }\n}\n  <\/style>\n\n  <div class=\"quiz\">\n    <div id=\"quizScreen\">\n      <div class=\"top-bar\">\n        <div id=\"counter\"><\/div>\n        <div id=\"answeredCounter\"><\/div>\n      <\/div>\n\n      <div class=\"category\" id=\"category\"><\/div>\n      <div class=\"question\" id=\"question\"><\/div>\n      <div class=\"answers\" id=\"answers\"><\/div>\n\n      <div class=\"controls\">\n        <button class=\"prev\" id=\"prevBtn\">Previous<\/button>\n        <button class=\"next\" id=\"nextBtn\">Next<\/button>\n        <button class=\"submit\" id=\"submitBtn\">Submit Quiz<\/button>\n      <\/div>\n\n      <div class=\"warning\" id=\"warning\">\n        Please answer every question before submitting.\n      <\/div>\n    <\/div>\n\n    <div class=\"results\" id=\"resultsScreen\" style=\"display:none;\"><\/div>\n  <\/div>\n\n  <script>\n    const questions = [\n      {\n        category: \"Classic Rock\",\n        question: \"Which band released Dark Side of the Moon?\",\n        answers: [\"Led Zeppelin\", \"Pink Floyd\", \"The Who\", \"Queen\"],\n        correct: 1\n      },\n      {\n        category: \"Classic Rock\",\n        question: \"Who was the lead singer of The Doors?\",\n        answers: [\"Mick Jagger\", \"Roger Daltrey\", \"Jim Morrison\", \"David Bowie\"],\n        correct: 2\n      },\n      {\n        category: \"Pop Music\",\n        question: 'Who is known as the \"Queen of Pop\"?',\n        answers: [\"Madonna\", \"Britney Spears\", \"Lady Gaga\", \"Cher\"],\n        correct: 0\n      },\n      {\n        category: \"Pop Music\",\n        question: 'Which artist sang \"Firework\"?',\n        answers: [\"Taylor Swift\", \"Katy Perry\", \"Pink\", \"Adele\"],\n        correct: 1\n      },\n      {\n        category: \"Country Music\",\n        question: 'Who sang \"Friends in Low Places\"?',\n        answers: [\"Tim McGraw\", \"Garth Brooks\", \"Kenny Chesney\", \"Alan Jackson\"],\n        correct: 1\n      },\n      {\n        category: \"Country Music\",\n        question: \"What state is considered the birthplace of country music?\",\n        answers: [\"Texas\", \"Kentucky\", \"Tennessee\", \"Georgia\"],\n        correct: 2\n      },\n      {\n        category: \"Hip-Hop & Rap\",\n        question: \"Which rapper released The Marshall Mathers LP?\",\n        answers: [\"Jay-Z\", \"Dr. Dre\", \"Eminem\", \"Snoop Dogg\"],\n        correct: 2\n      },\n      {\n        category: \"Hip-Hop & Rap\",\n        question: \"Which city is considered the birthplace of hip-hop?\",\n        answers: [\"Los Angeles\", \"Atlanta\", \"Chicago\", \"New York City\"],\n        correct: 3\n      },\n      {\n        category: \"1980s Music\",\n        question: 'Who sang \"Purple Rain\"?',\n        answers: [\"Michael Jackson\", \"Prince\", \"Lionel Richie\", \"Billy Joel\"],\n        correct: 1\n      },\n      {\n        category: \"1980s Music\",\n        question: 'Which band recorded \"Don\\'t Stop Believin\\'\"?',\n        answers: [\"REO Speedwagon\", \"Foreigner\", \"Journey\", \"Styx\"],\n        correct: 2\n      },\n      {\n        category: \"1990s Music\",\n        question: 'Which group performed \"Waterfalls\"?',\n        answers: [\"TLC\", \"En Vogue\", \"Destiny's Child\", \"Salt-N-Pepa\"],\n        correct: 0\n      },\n      {\n        category: \"1990s Music\",\n        question: \"What was Nirvana's breakthrough album?\",\n        answers: [\"In Utero\", \"Bleach\", \"Nevermind\", \"MTV Unplugged\"],\n        correct: 2\n      },\n      {\n        category: \"One-Hit Wonders\",\n        question: 'Who sang \"Take On Me\"?',\n        answers: [\"A-ha\", \"Europe\", \"Men at Work\", \"Tears for Fears\"],\n        correct: 0\n      },\n      {\n        category: \"One-Hit Wonders\",\n        question: 'Which band sang \"Come On Eileen\"?',\n        answers: [\"Modern English\", \"Dexys Midnight Runners\", \"Simple Minds\", \"Soft Cell\"],\n        correct: 1\n      },\n      {\n        category: \"Music Awards\",\n        question: \"What award is known as music's biggest night?\",\n        answers: [\"MTV Awards\", \"Grammys\", \"American Music Awards\", \"Billboard Awards\"],\n        correct: 1\n      },\n      {\n        category: \"Music Awards\",\n        question: \"What shape is the Grammy trophy?\",\n        answers: [\"Guitar\", \"Record\", \"Microphone\", \"Gramophone\"],\n        correct: 3\n      },\n      {\n        category: \"Boy Bands\",\n        question: \"Justin Timberlake was a member of which boy band?\",\n        answers: [\"Backstreet Boys\", \"98 Degrees\", \"NSYNC\", \"New Kids on the Block\"],\n        correct: 2\n      },\n      {\n        category: \"Boy Bands\",\n        question: 'Who sang \"I Want It That Way\"?',\n        answers: [\"NSYNC\", \"Backstreet Boys\", \"Hanson\", \"Boyz II Men\"],\n        correct: 1\n      },\n      {\n        category: \"Girl Groups\",\n        question: 'Which group sang \"Wannabe\"?',\n        answers: [\"TLC\", \"Spice Girls\", \"Destiny's Child\", \"The Supremes\"],\n        correct: 1\n      },\n      {\n        category: \"Girl Groups\",\n        question: \"Beyonc\u00e9 rose to fame in which group?\",\n        answers: [\"TLC\", \"En Vogue\", \"Destiny's Child\", \"Fifth Harmony\"],\n        correct: 2\n      }\n    ];\n\n    let currentQuestion = 0;\n    const userAnswers = Array(questions.length).fill(null);\n\n    const counter = document.getElementById(\"counter\");\n    const answeredCounter = document.getElementById(\"answeredCounter\");\n    const category = document.getElementById(\"category\");\n    const question = document.getElementById(\"question\");\n    const answers = document.getElementById(\"answers\");\n    const prevBtn = document.getElementById(\"prevBtn\");\n    const nextBtn = document.getElementById(\"nextBtn\");\n    const submitBtn = document.getElementById(\"submitBtn\");\n    const warning = document.getElementById(\"warning\");\n    const quizScreen = document.getElementById(\"quizScreen\");\n    const resultsScreen = document.getElementById(\"resultsScreen\");\n\n    function renderQuestion() {\n      const q = questions[currentQuestion];\n\n      counter.textContent = `Question ${currentQuestion + 1} of ${questions.length}`;\n      answeredCounter.textContent = `Answered ${userAnswers.filter(a => a !== null).length} of ${questions.length}`;\n      category.textContent = q.category;\n      question.textContent = q.question;\n      answers.innerHTML = \"\";\n      warning.style.display = \"none\";\n\n      q.answers.forEach((answer, index) => {\n        const button = document.createElement(\"button\");\n        button.className = \"answer\";\n        button.textContent = `${String.fromCharCode(65 + index)}. ${answer}`;\n\n        if (userAnswers[currentQuestion] === index) {\n          button.classList.add(\"selected\");\n        }\n\n        button.addEventListener(\"click\", () => {\n          userAnswers[currentQuestion] = index;\n          renderQuestion();\n        });\n\n        answers.appendChild(button);\n      });\n\n      prevBtn.disabled = currentQuestion === 0;\n      nextBtn.style.display = currentQuestion === questions.length - 1 ? \"none\" : \"inline-block\";\n      submitBtn.style.display = currentQuestion === questions.length - 1 ? \"inline-block\" : \"none\";\n    }\n\n    prevBtn.addEventListener(\"click\", () => {\n      if (currentQuestion > 0) {\n        currentQuestion--;\n        renderQuestion();\n      }\n    });\n\n    nextBtn.addEventListener(\"click\", () => {\n      if (currentQuestion < questions.length - 1) {\n        currentQuestion++;\n        renderQuestion();\n      }\n    });\n\n    submitBtn.addEventListener(\"click\", () => {\n      const unansweredIndex = userAnswers.findIndex(answer => answer === null);\n\n      if (unansweredIndex !== -1) {\n        warning.style.display = \"block\";\n        currentQuestion = unansweredIndex;\n        renderQuestion();\n        warning.style.display = \"block\";\n        return;\n      }\n\n      showResults();\n    });\n\n    function showResults() {\n      let correctCount = 0;\n      let missedHTML = \"\";\n\n      questions.forEach((q, index) => {\n        if (userAnswers[index] === q.correct) {\n          correctCount++;\n        } else {\n          missedHTML += `\n            <p>\n              <strong>Question ${index + 1}:<\/strong> ${q.question}<br>\n              Your answer: ${q.answers[userAnswers[index]]}<br>\n              Correct answer: ${q.answers[q.correct]}\n            <\/p>\n          `;\n        }\n      });\n\n      const percent = Math.round((correctCount \/ questions.length) * 100);\n\n      quizScreen.style.display = \"none\";\n      resultsScreen.style.display = \"block\";\n\n      resultsScreen.innerHTML = `\n        <h1>${percent}%<\/h1>\n        <p>${correctCount} \/ ${questions.length} Correct<\/p>\n\n        ${missedHTML ? `<div class=\"missed\"><h2>Missed Questions<\/h2>${missedHTML}<\/div>` : \"<p>Perfect score!<\/p>\"}\n\n        <button class=\"restart\" onclick=\"restartQuiz()\">Restart Quiz<\/button>\n      `;\n    }\n\n    function restartQuiz() {\n      currentQuestion = 0;\n      userAnswers.fill(null);\n      resultsScreen.style.display = \"none\";\n      quizScreen.style.display = \"block\";\n      renderQuestion();\n    }\n\n    renderQuestion();\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Previous Next Submit Quiz Please answer every question before submitting.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","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-2","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/2","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=2"}],"version-history":[{"count":11,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}