<!-- HTML 结构 -->
<div class="flashcard" onclick="toggleAnswer()">
  <div class="question">什么是光合作用？</div>
  <div class="answer" style="display:none;">
    植物利用光能...
  </div>
</div>

<!-- JavaScript 行为 -->
<script>
function toggleAnswer() {
  var card = document.querySelector('.flashcard');
  var answer = card.querySelector('.answer');
  if (answer.style.display === 'none') {
    answer.style.display = 'block';
  } else {
    answer.style.display = 'none';
  }
}
</script>

<!-- CSS 样式 (可由AI进一步添加) -->
<style>
.flashcard {
  border: 1px solid #ccc;
  padding: 20px;
  cursor: pointer;
  /* ...更多样式... */
}
</style>

<!-- HTML 结构 -->
<div id="step1">第一步：准备材料</div>
<div id="step2" style="display:none;">第二步：混合材料</div>
<div id="step3" style="display:none;">第三步：加热</div>

<button onclick="prevStep()">上一步</button>
<button onclick="nextStep()">下一步</button>

<!-- JavaScript 行为 -->
<script>
let currentStep = 1;
const totalSteps = 3;

function showStep(stepNum) {
  for (let i = 1; i <= totalSteps; i++) {
    document.getElementById('step' + i).style.display = 'none';
  }
  document.getElementById('step' + stepNum).style.display = 'block';
  currentStep = stepNum;
}

function nextStep() {
  if (currentStep < totalSteps) showStep(currentStep + 1);
}

function prevStep() {
  if (currentStep > 1) showStep(currentStep - 1);
}

// 初始化显示第一步
showStep(1);
</script>