如何修改代码实现多级决策问题的动画交互图形功能

Hey Joseph, let's get your fully interactive decision tree working! Your current code only handles the first level of interaction, but we can refactor it to dynamically handle any depth of questions/answers using your Map structure. Here's the step-by-step solution:

First, Update Your HTML #

We'll use a more flexible structure with a data attribute to link buttons to their corresponding question string:

<div id="box">
  <button class="question-btn" data-question="how are you?">How are you?</button>
</div>

Then, Refactor the JavaScript #

The key is to create a reusable function that handles rendering answers for any question, not just the first one. Here's the revised code:

// Define your full question-answer map
const qaMap = new Map([
  ['how are you?', ["I'm fine", "I'm NOT fine"]],
  ["I'm fine", ["Nice weather today!", "Great people around!"]],
  ["I'm NOT fine", ["Terrible weather...", "Annoying people..."]],
  // Add more question-answer pairs here to extend the hierarchy
]);

// Get the main container element
const container = document.getElementById('box');

// Reusable function to render answers for a given question
function showAnswersForQuestion(question) {
  // Hide the current question button
  const activeBtn = container.querySelector(`[data-question="${question}"]`);
  if (activeBtn) {
    activeBtn.style.display = 'none';
  }

  // Get the corresponding answers from the map
  const answers = qaMap.get(question);
  if (!answers || answers.length !== 2) return; // Exit if no valid answers

  // Create and add each answer button
  answers.forEach(answer => {
    const answerBtn = document.createElement('button');
    answerBtn.className = 'question-btn';
    answerBtn.innerText = answer;
    answerBtn.dataset.question = answer; // Store the answer as the next question

    // Add click handler to show answers for this new "question"
    answerBtn.addEventListener('click', () => {
      showAnswersForQuestion(answer);
    });

    container.appendChild(answerBtn);
  });
}

// Initialize the first button's click handler
document.querySelector('[data-question="how are you?"]')
  .addEventListener('click', () => showAnswersForQuestion('how are you?'));

Key Improvements Explained #

• Dynamic Question Linking: We use the data-question attribute to tie each button directly to its corresponding entry in the Map. This lets us handle any button, regardless of which level it's on.
• Reusable Logic: The showAnswersForQuestion function works for any question string, so you can add as many levels to your Map as you want without changing the code.
• Proper Element Hiding: Instead of trying to set an invalid type="hidden" on a button, we use style.display = 'none' to hide the previous question button cleanly.
• Scalable Structure: Just add more entries to the qaMap to extend your decision tree—no extra code changes needed.

If you want to add extras like styling, or a way to go back to previous questions, you could extend this by tracking a history of questions and adding back buttons, but this code fully meets your core requirement of full hierarchical interaction.

内容的提问来源于stack exchange，提问作者Joseph