Mind & Emotions Mastery Quest

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mind & Emotions Mastery Quest</title>
<style>
  * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
  body { background: #f0f4f8; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 15px; }
  .card { background: white; padding: 25px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); max-width: 550px; width: 100%; text-align: center; }
  h1 { color: #2c3e50; margin-bottom: 5px; font-size: 24px; }
  p { color: #555; line-height: 1.5; font-size: 15px; }
  .btn { background: #4A90E2; color: white; border: none; padding: 12px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: 0.2s; margin-top: 15px; width: 100%; font-weight: bold; }
  .btn:hover { background: #357ABD; }
  .option-btn { background: #f8f9fa; color: #333; border: 2px solid #e9ecef; text-align: left; margin: 8px 0; font-weight: normal; }
  .option-btn:hover { background: #e2e8f0; border-color: #cbd5e1; }
  .correct { background: #d4edda !important; border-color: #28a745 !important; color: #155724; }
  .incorrect { background: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; }
  .feedback { margin-top: 15px; font-weight: bold; min-height: 24px; font-size: 16px; }
  .score { font-size: 14px; color: #777; margin-top: 10px; }
</style>
</head>
<body>

<div class="card" id="game-card">
  <h1>🧠 Emotion & Mind Quest</h1>
  <p>Test your understanding of triggers, mindfulness, integrity, and healthy emotional choices!</p>
  <button class="btn" onclick="startGame()">Start Game</button>
</div>

<script>
const questions = [
  {
    q: "How we understand and interpret different situations is called an emotion ______.",
    options: ["Trigger", "Filter", "Reaction", "Response"],
    answer: 1,
    explain: "A filter shapes how you view a situation based on your mood!"
  },
  {
    q: "Doing the right thing even when no one is watching is called ______.",
    options: ["Self-Talk", "Mindfulness", "Integrity", "Self-Awareness"],
    answer: 2,
    explain: "Integrity means being honest and doing good secretly or publicly."
  },
  {
    q: "An event or situation that causes a sudden rise in strong feelings is a ______.",
    options: ["Trigger", "Response", "Filter", "Value"],
    answer: 0,
    explain: "Triggers start strong emotional reactions quickly."
  },
  {
    q: "Taking a pause, breathing deeply, and talking calmly are examples of ______ expression.",
    options: ["Unhealthy", "Healthy", "Automatic", "Triggered"],
    answer: 1,
    explain: "Taking space and breathing helps reset your emotional state!"
  },
  {
    q: "Words or internal dialogue spoken inside your mind are known as ______.",
    options: ["Self-Talk", "Mindfulness", "Integrity", "Filter"],
    answer: 0,
    explain: "Self-talk is the inner voice guiding your feelings and choices."
  }
];

let currentQ = 0;
let score = 0;

function startGame() {
  currentQ = 0;
  score = 0;
  showQuestion();
}

function showQuestion() {
  let q = questions[currentQ];
  let html = `<h3>Question ${currentQ + 1} of ${questions.length}</h3>
              <p><b>${q.q}</b></p>`;
  
  q.options.forEach((opt, idx) => {
    html += `<button class="btn option-btn" id="opt-${idx}" onclick="checkAnswer(${idx})">${opt}</button>`;
  });

  html += `<div class="feedback" id="feedback"></div>
           <div class="score">Score: ${score}</div>`;

  document.getElementById('game-card').innerHTML = html;
}

function checkAnswer(idx) {
  let q = questions[currentQ];
  let feedback = document.getElementById('feedback');
  
  let buttons = document.querySelectorAll('.option-btn');
  buttons.forEach(b => b.disabled = true);

  if (idx === q.answer) {
    score++;
    document.getElementById(`opt-${idx}`).classList.add('correct');
    feedback.style.color = '#28a745';
    feedback.innerHTML = `Correct! 🎉 <br><small style="font-weight:normal;">${q.explain}</small>`;
  } else {
    document.getElementById(`opt-${idx}`).classList.add('incorrect');
    document.getElementById(`opt-${q.answer}`).classList.add('correct');
    feedback.style.color = '#dc3545';
    feedback.innerHTML = `Not quite! <br><small style="font-weight:normal;">${q.explain}</small>`;
  }

  setTimeout(() => {
    currentQ++;
    if (currentQ < questions.length) {
      showQuestion();
    } else {
      showResults();
    }
  }, 2200);
}

function showResults() {
  document.getElementById('game-card').innerHTML = `
    <h1>🏆 Quest Complete!</h1>
    <p>You scored <b>${score} / ${questions.length}</b>!</p>
    <p>${score === questions.length ? "Outstanding! You are a Mindfulness Master!" : "Great effort! Practice again to get a perfect score."}</p>
    <button class="btn" onclick="startGame()">Play Again</button>
  `;
}
</script>

</body>
</html>