मार्गदर्शित परिदृश्य चयन ब्लॉक

<div class="scenario-choice-block">

  <div class="scenario-question">
    <p class="scenario-label">Scenario</p>

    <h3>
      A learner notices something does not match the expected process. What should they do first?
    </h3>
  </div>

  <div class="scenario-options">

    <button class="scenario-option" data-feedback="choice-a">
      <span>A</span>
      Continue the task and fix the issue later.
    </button>

    <div class="scenario-feedback" id="choice-a">
      <strong>Not the best first move.</strong>
      <p>
        Continuing may create more downstream work. The better first step is to pause and confirm what changed.
      </p>
    </div>

    <button class="scenario-option active" data-feedback="choice-b">
      <span>B</span>
      Pause, confirm the issue, and follow the next available guidance.
    </button>

    <div class="scenario-feedback active" id="choice-b">
      <strong>Strong choice.</strong>
      <p>
        This keeps the learner focused on the safest next action and reduces guessing.
      </p>
    </div>

    <button class="scenario-option" data-feedback="choice-c">
      <span>C</span>
      Restart the entire process from the beginning.
    </button>

    <div class="scenario-feedback" id="choice-c">
      <strong>Probably more effort than needed.</strong>
      <p>
        Restarting may work, but it can add unnecessary friction.
      </p>
    </div>

  </div>

</div>

<style>
.scenario-choice-block {
  max-width: 900px;
  margin: 0 auto;
  padding: 28px;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15,23,42,.08);
  font-family: inherit;
}

.scenario-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #777985;
}

.scenario-question h3 {
  margin: 0 0 24px;
  color: #111827;
  font-size: 26px;
  line-height: 1.15;
}

.scenario-options {
  display: grid;
  gap: 12px;
}

.scenario-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px;
  border: 2px solid rgba(17,24,39,.08);
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.scenario-option span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(124,58,237,.08);
  color: #7c3aed;
  font-size: 12px;
  font-weight: 900;
}

.scenario-option.active {
  border-color: rgba(124,58,237,.42);
  background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(124,58,237,.07), rgba(20,184,166,.07));
}

.scenario-feedback {
  display: none;
  margin: -4px 0 10px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(248,250,252,.9);
  border: 1px solid rgba(15,23,42,.06);
}

.scenario-feedback.active {
  display: block;
}

.scenario-feedback strong {
  display: block;
  margin-bottom: 6px;
  color: #111827;
}

.scenario-feedback p {
  margin: 0;
  color: #5f6472;
  line-height: 1.55;
}
</style>

<script>
(function () {
  const options = document.querySelectorAll(".scenario-option");
  const feedbackItems = document.querySelectorAll(".scenario-feedback");

  options.forEach(function(option) {
    option.addEventListener("click", function() {
      const targetId = option.getAttribute("data-feedback");

      options.forEach(function(item) {
        item.classList.remove("active");
      });

      feedbackItems.forEach(function(item) {
        item.classList.remove("active");
      });

      option.classList.add("active");

      const targetFeedback = document.getElementById(targetId);
      if (targetFeedback) {
        targetFeedback.classList.add("active");
      }
    });
  });
})();
</script>