<!-- AlumniQuiz - Test Quiz: Classroom Reunion Planner -->

<div class="alumni-quiz" style="max-width:700px;margin:0 auto;font-family:sans-serif;">
  <style>
    .alumni-quiz * { box-sizing:border-box; }

    .quiz-card {
      background:#fff;
      border:1px solid #e0e0e0;
      border-radius:14px;
      padding:24px;
      box-shadow:0 8px 20px rgba(0,0,0,0.08);
      margin:20px 0;
    }

    .quiz-header { text-align:center; margin-bottom:20px; }
    .quiz-title { font-size:1.6rem; margin:0; }
    .quiz-subtitle { font-size:0.95rem; color:#555; margin-top:6px; }

    .primary-btn {
      padding:12px 20px;
      border-radius:8px;
      border:none;
      background:#4a5cff;
      color:#fff;
      font-size:1rem;
      cursor:pointer;
      margin-top:18px;
      display:inline-block;
    }
    .primary-btn:hover { background:#3a49d9; }

    .question-text {
      font-size:1.1rem;
      margin-bottom:14px;
      font-weight:600;
    }

    .answers { display:grid; gap:10px; }

    /* FIX: Answer text visible */
    .answer-btn {
      padding:10px 14px;
      background:#f3f4f7;
      border:1px solid #ccc;
      border-radius:8px;
      text-align:left;
      cursor:pointer;
      font-size:1rem;
      color:#222 !important;  /* <-- THE FIX */
    }
    .answer-btn:hover {
      background:#e6e7ee;
    }

    .result-title { font-size:1.4rem; text-align:center; }
    .result-label { font-size:1rem; color:#555; text-align:center; margin-bottom:14px; }
    .result-body { font-size:1rem; }
    .result-body ul { margin:10px 0 20px 22px; }
    .result-body h4 { margin-top:16px; }

    .progress {
      margin:12px 0;
      color:#555;
      font-size:0.9rem;
    }
  </style>

  <div class="quiz-card">

    <!-- START SCREEN -->
    <div id="start-screen">
      <div class="quiz-header">
        <h1 class="quiz-title">What Type of Classroom Reunion Planner Are You?</h1>
        <p class="quiz-subtitle">Take this 7-question quiz to see your natural reunion-planning style.</p>
      </div>
      <button class="primary-btn" id="start-btn">Start Quiz ▶</button>
    </div>

    <!-- QUIZ SCREEN -->
    <div id="quiz-screen" style="display:none;">
      <div class="progress">
        <span id="progress-label">Question 1 of 7</span>
      </div>
      <p class="question-text" id="question-text"></p>
      <div class="answers" id="answers-container"></div>
    </div>

    <!-- RESULT SCREEN -->
    <div id="result-screen" style="display:none;">
      <h2 class="result-title">Your Reunion Planner Type</h2>
      <p class="result-label" id="result-label"></p>
      <div class="result-body" id="result-body"></div>
      <button class="primary-btn" id="restart-btn">Retake Quiz</button>
    </div>

  </div>
</div>

<script>
/* --------------------------
   RESULT DEFINITIONS
--------------------------- */
const results = {
  organizer: {
    label:"The Master Organizer",
    body:`
      <h4>What this says about you</h4>
      <ul>
        <li>You see all the moving pieces instantly.</li>
        <li>You’re the one people trust to make things happen.</li>
      </ul>
      <h4>Your strengths</h4>
      <ul>
        <li>Planning & logistics</li>
        <li>Keeping people on track</li>
        <li>Making decisions smoothly</li>
      </ul>
    `
  },
  connector: {
    label:"The Social Connector",
    body:`
      <h4>What this says about you</h4>
      <ul>
        <li>You bring the energy and fun.</li>
        <li>Your strength is making people feel included.</li>
      </ul>
      <h4>Your strengths</h4>
      <ul>
        <li>Outreach & invitations</li>
        <li>Building excitement</li>
        <li>Growing attendance</li>
      </ul>
    `
  },
  chill: {
    label:"The Chill Host",
    body:`
      <h4>What this says about you</h4>
      <ul>
        <li>You create a calm, comfortable environment.</li>
        <li>People relax around you.</li>
      </ul>
      <h4>Your strengths</h4>
      <ul>
        <li>Warm low-pressure vibe</li>
        <li>Setting people at ease</li>
      </ul>
    `
  },
  memory: {
    label:"The Memory Keeper",
    body:`
      <h4>What this says about you</h4>
      <ul>
        <li>You care about stories and nostalgia.</li>
        <li>You make reunions meaningful.</li>
      </ul>
      <h4>Your strengths</h4>
      <ul>
        <li>Photos & yearbooks</li>
        <li>Memory displays</li>
      </ul>
    `
  }
};

/* --------------------------
   QUESTIONS
--------------------------- */
const quiz = [
  {
    q:"When someone mentions planning a classroom reunion, what’s your first thought?",
    a:[
      { text:"Start listing tasks.", type:"organizer" },
      { text:"Who should we invite first?", type:"connector" },
      { text:"Keep it casual and easy.", type:"chill" },
      { text:"We need to gather old photos!", type:"memory" }
    ]
  },
  {
    q:"Which part of planning would you grab first?",
    a:[
      { text:"Date, venue, RSVPs.", type:"organizer" },
      { text:"Messaging classmates.", type:"connector" },
      { text:"Picking a cozy location.", type:"chill" },
      { text:"Building a memory slideshow.", type:"memory" }
    ]
  },
  {
    q:"Your ideal reunion size?",
    a:[
      { text:"Big—everyone invited!", type:"organizer" },
      { text:"Medium crowd of key people.", type:"connector" },
      { text:"Small and intimate.", type:"chill" },
      { text:"Any size—memories matter most.", type:"memory" }
    ]
  },
  {
    q:"Your biggest concern with reunions?",
    a:[
      { text:"Details falling apart.", type:"organizer" },
      { text:"People feeling left out.", type:"connector" },
      { text:"It feeling awkward.", type:"chill" },
      { text:"Forgetting meaningful moments.", type:"memory" }
    ]
  },
  {
    q:"If you had a spare hour to help, you'd:",
    a:[
      { text:"Tighten up logistics.", type:"organizer" },
      { text:"Invite more people.", type:"connector" },
      { text:"Improve the vibe.", type:"chill" },
      { text:"Organize old photos.", type:"memory" }
    ]
  },
  {
    q:"The best part of reunions is:",
    a:[
      { text:"Everything runs smoothly.", type:"organizer" },
      { text:"Reconnecting with people.", type:"connector" },
      { text:"Relaxed conversations.", type:"chill" },
      { text:"Looking at old memories.", type:"memory" }
    ]
  },
  {
    q:"How do people remember your role?",
    a:[
      { text:"The one who made it happen.", type:"organizer" },
      { text:"The one who brought everyone together.", type:"connector" },
      { text:"The one who made it warm and easy.", type:"chill" },
      { text:"The one who preserved the memories.", type:"memory" }
    ]
  }
];

/* --------------------------
   LOGIC
--------------------------- */
let index = 0;
let scores = { organizer:0, connector:0, chill:0, memory:0 };

const startBtn = document.getElementById("start-btn");
const restartBtn = document.getElementById("restart-btn");
const startScreen = document.getElementById("start-screen");
const quizScreen = document.getElementById("quiz-screen");
const resultScreen = document.getElementById("result-screen");

startBtn.onclick = startQuiz;
restartBtn.onclick = restartQuiz;

function startQuiz() {
  index = 0;
  scores = { organizer:0, connector:0, chill:0, memory:0 };
  startScreen.style.display = "none";
  quizScreen.style.display = "block";
  showQuestion();
}

function showQuestion() {
  const q = quiz[index];
  document.getElementById("progress-label").innerText = `Question ${index+1} of ${quiz.length}`;
  document.getElementById("question-text").innerText = q.q;

  const aContainer = document.getElementById("answers-container");
  aContainer.innerHTML = "";

  q.a.forEach((ans)=>{
    const b = document.createElement("button");
    b.className = "answer-btn";
    b.textContent = ans.text;
    b.onclick = ()=> selectAnswer(ans.type);
    aContainer.appendChild(b);
  });
}

function selectAnswer(type) {
  scores[type]++;
  index++;
  if(index < quiz.length){
    showQuestion();
  } else {
    showResults();
  }
}

function showResults() {
  quizScreen.style.display = "none";
  resultScreen.style.display = "block";

  let top = "organizer";
  let max = -1;
  for (const t in scores) {
    if(scores[t] > max) {
      max = scores[t];
      top = t;
    }
  }

  const r = results[top];
  document.getElementById("result-label").innerText = r.label;
  document.getElementById("result-body").innerHTML = r.body;
}

function restartQuiz() {
  resultScreen.style.display = "none";
  startScreen.style.display = "block";
}
</script>