समस्या समाधान प्रवाह प्रोटोटाइप

<div class="troubleshooting-flow">
  <h3>What issue are you seeing?</h3>

  <button data-next="instructions">
    Instructions do not match the situation
  </button>

  <button data-next="tool">
    The tool is not behaving as expected
  </button>

  <button data-next="confidence">
    I am unsure what to do next
  </button>

  <div class="troubleshooting-result" aria-live="polite">
    <h4>Next step</h4>
    <p>Choose an issue to see guidance.</p>
  </div>
</div>

<script>
const guidance = {
  instructions: "Compare the current situation to the expected flow and identify where it diverges.",
  tool: "Refresh, verify the tool state, and capture the exact error or screen.",
  confidence: "Use a short example or decision guide before restarting the full learning experience."
};

document.querySelectorAll("[data-next]").forEach(function(button) {
  button.addEventListener("click", function() {
    const key = button.getAttribute("data-next");
    document.querySelector(".troubleshooting-result p").textContent = guidance[key];
  });
});
</script>