Szenario-Signal Synthlet

<div class="signal-studio">
  <div class="scenario">
    <span>Scenario</span>
    <p>
      A customer says their order was marked complete, but they never received it.
      Review the information below and classify each item.
    </p>
  </div>

  <article class="signal-card" data-correct="signal">
    <h4>The order was marked complete, but the customer says it was not received.</h4>

    <div class="options">
      <button data-choice="signal">Signal</button>
      <button data-choice="context">Context</button>
      <button data-choice="noise">Noise</button>
      <button data-choice="verify">Verify</button>
    </div>

    <p class="feedback"></p>
  </article>

  <article class="signal-card" data-correct="verify">
    <h4>The delivery note says the package was left at the front door.</h4>

    <div class="options">
      <button data-choice="signal">Signal</button>
      <button data-choice="context">Context</button>
      <button data-choice="noise">Noise</button>
      <button data-choice="verify">Verify</button>
    </div>

    <p class="feedback"></p>
  </article>

  <div class="debrief">
    <strong>Readiness: <span id="score">0</span>%</strong>
    <p id="debriefText">Classify each card to see the coaching debrief.</p>
  </div>
</div>

.signal-studio {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  font-family: system-ui, sans-serif;
}

.scenario {
  padding: 20px;
  border-radius: 20px;
  background: #f8fafc;
  margin-bottom: 18px;
}

.scenario span {
  display: block;
  margin-bottom: 8px;
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.signal-card {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  margin-bottom: 14px;
  background: #ffffff;
}

.signal-card h4 {
  margin: 0 0 14px;
  color: #07111f;
  line-height: 1.35;
}

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.options button {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  cursor: pointer;
}

.options button.selected {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.options button.correct {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

.feedback {
  display: none;
  margin: 14px 0 0;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
}

.feedback.show {
  display: block;
}

.debrief {
  margin-top: 18px;
  padding: 18px;
  border-radius: 20px;
  background: #f8fafc;
}

const cards = document.querySelectorAll(".signal-card");
const scoreEl = document.getElementById("score");
const debriefText = document.getElementById("debriefText");

const feedback = {
  signal: "This is signal. It should shape what happens next.",
  context: "This is context. It helps explain the situation.",
  noise: "This is noise. It adds pressure but should not drive the decision.",
  verify: "This needs verification before it should be treated as fact."
};

function updateScore() {
  let correct = 0;

  cards.forEach((card) => {
    if (card.dataset.selected === card.dataset.correct) {
      correct += 1;
    }
  });

  const score = Math.round((correct / cards.length) * 100);
  scoreEl.textContent = score;

  if (score === 100) {
    debriefText.textContent = "Strong read. You separated the useful signal from context, noise, and verification needs.";
  } else if (score >= 50) {
    debriefText.textContent = "Good start. Some categories may still be blurred, so review what should drive the decision.";
  } else {
    debriefText.textContent = "Slow the read down. Identify what matters, what explains the situation, and what still needs checking.";
  }
}

cards.forEach((card) => {
  const buttons = card.querySelectorAll("button");
  const feedbackEl = card.querySelector(".feedback");

  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      const choice = button.dataset.choice;
      const correct = card.dataset.correct;

      card.dataset.selected = choice;

      buttons.forEach((btn) => {
        btn.classList.remove("selected", "correct");
      });

      button.classList.add("selected");

      if (choice === correct) {
        button.classList.add("correct");
        feedbackEl.textContent = "Exactly. " + feedback[correct];
      } else {
        feedbackEl.textContent = "Not quite. " + feedback[correct];
      }

      feedbackEl.classList.add("show");
      updateScore();
    });
  });
});