बिल्कुल / बिल्कुल नहीं फीडबैक कार्ड

<div class="feedback-card-interaction">

  <div class="feedback-question">

    <p class="feedback-label">Scenario</p>

    <h3>
      A learner is unsure which next step to take. What should the experience do?
    </h3>

    <button class="feedback-choice" data-feedback="notexactly">
      Give them the full policy document and let them search.
    </button>

    <button class="feedback-choice active" data-feedback="exactly">
      Guide them to one clear next action.
    </button>

    <button class="feedback-choice" data-feedback="notexactly">
      Ask them to restart the full course.
    </button>

  </div>

  <div class="feedback-response exactly active" id="feedback-exactly">
    <span>Exactly</span>
    <h3>Reinforce the useful decision.</h3>
    <p>
      This response supports the learner at the moment of need.
    </p>
  </div>

  <div class="feedback-response notexactly" id="feedback-notexactly">
    <span>Not exactly</span>
    <h3>Redirect without shutting people down.</h3>
    <p>
      This option may provide information, but it adds effort at the wrong moment.
    </p>
  </div>

</div>

<style>
.feedback-card-interaction {
  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;
}

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

.feedback-question h3,
.feedback-response h3 {
  margin: 0 0 20px;
  color: #111827;
}

.feedback-choice {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  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;
}

.feedback-choice.active {
  border-color: rgba(94,234,212,.9);
  background: rgba(94,234,212,.16);
}

.feedback-response {
  display: none;
  margin-top: 24px;
  padding: 24px;
  border-radius: 24px;
}

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

.feedback-response span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.feedback-response.exactly {
  background: rgba(220,252,231,.9);
  border: 1px solid rgba(34,197,94,.22);
}

.feedback-response.exactly span {
  background: rgba(22,163,74,.12);
  color: #166534;
}

.feedback-response.notexactly {
  background: rgba(255,248,236,.9);
  border: 1px solid rgba(245,215,166,.9);
}

.feedback-response.notexactly span {
  background: rgba(217,119,6,.12);
  color: #92400e;
}
</style>

<script>
(function () {
  const choices = document.querySelectorAll(".feedback-choice");
  const exactly = document.getElementById("feedback-exactly");
  const notExactly = document.getElementById("feedback-notexactly");

  choices.forEach(function(choice) {
    choice.addEventListener("click", function() {
      choices.forEach(function(item) {
        item.classList.remove("active");
      });

      choice.classList.add("active");

      if (choice.getAttribute("data-feedback") === "exactly") {
        exactly.classList.add("active");
        notExactly.classList.remove("active");
      } else {
        notExactly.classList.add("active");
        exactly.classList.remove("active");
      }
    });
  });
})();
</script>