小程序计算题答题页面模板

以下是一个简单的小程序计算题答题页面模板，你可以根据需要进行修改和完善：

<view class="question">{{ currentQuestion }}</view>
<view class="answer">
  <input type="number" placeholder="请输入答案" bindinput="onInputAnswer" />
  <button type="default" disabled="{{ !isAnswered }}" bindtap="onSubmitAnswer">提交答案</button>
</view>
<view class="feedback" hidden="{{ hideFeedback }}">
  <view class="result">{{ feedback }}</view>
  <button type="default" bindtap="onNextQuestion">下一题</button>
</view>

在这个模板中，我们假设已经定义了以下数据：

data: {
  questions: [
    {
      question: '1 + 1 = ?',
      answer: 2
    },
    {
      question: '3 + 4 = ?',
      answer: 7
    }
  ],
  currentQuestionIndex: 0,
  currentQuestion: '',
  currentAnswer: '',
  isAnswered: false,
  feedback: '',
  hideFeedback: true
}

其中，`questions` 是一个包含多个题目的数组，每个题目有一个 `question` 字段表示题目内容，和一个 `answer` 字段表示正确答案。`currentQuestionIndex` 表示当前题目的索引，`currentQuestion` 表示当前题目的内容，`currentAnswer` 表示用户输入的答案，`isAnswered` 表示用户是否已经回答了当前题目，`feedback` 表示用户的答题结果反馈，`hideFeedback` 表示是否隐藏答题反馈。

在页面的 `onLoad` 生命周期中，我们可以初始化当前题目内容：

onLoad: function () {
  this.setData({
    currentQuestion: this.data.questions[this.data.currentQuestionIndex].question
  })
}

当用户输入答案时，我们可以通过 `bindinput` 事件来更新 `currentAnswer`：

onInputAnswer: function (event) {
  this.setData({
    currentAnswer: event.detail.value
  })
}

当用户点击提交按钮时，我们可以判断用户是否输入了答案，并且验证答案是否正确，然后显示答题反馈：

onSubmitAnswer: function () {
  if (!this.data.currentAnswer) {
    wx.showToast({
      title: '请输入答案',
      icon: 'none'
    })
    return
  }

  let isCorrect = (parseInt(this.data.currentAnswer) === this.data.questions[this.data.currentQuestionIndex].answer)

  this.setData({
    isAnswered: true,
    feedback: isCorrect ? '回答正确' : '回答错误',
    hideFeedback: false
  })
}

最后，当用户点击下一题按钮时，我们可以更新当前题目的索引，并重新显示新的题目内容：

onNextQuestion: function () {
  let nextIndex = this.data.currentQuestionIndex + 1
  if (nextIndex >= this.data.questions.length) {
    wx.showToast({
      title: '已经是最后一题了',
      icon: 'none'
    })
    return
  }

  this.setData({
    currentQuestionIndex: nextIndex,
    currentQuestion: this.data.questions[nextIndex].question,
    currentAnswer: '',
    isAnswered: false,
    feedback: '',
    hideFeedback: true
  })
}

以上代码只是一个简单的模板，你可以根据需要进行修改和完善，例如添加更多的题目，改变答题方式，增加动画效果等等。