微信小程序答题页面代码
时间: 2023-08-31 16:07:11 浏览: 784
以下是一个简单的微信小程序答题页面的代码示例:
```html
<!-- index.wxml -->
<view class="container">
<view class="question">
<text class="title">{{question.title}}</text>
</view>
<view class="options">
<block wx:for="{{question.options}}" wx:key="index">
<view class="option" bindtap="selectOption" data-index="{{index}}">
<text>{{option}}</text>
</view>
</block>
</view>
<button class="submit-btn" bindtap="submitAnswer">提交</button>
<view class="feedback">
<text wx:if="{{showFeedback}}">{{feedback}}</text>
</view>
<button class="next-btn" bindtap="nextQuestion" wx:if="{{showNextButton}}">下一题</button>
<view class="progress">
<text>进度:{{currentQuestionIndex + 1}}/{{questions.length}}</text>
</view>
</view>
```
```js
// index.js
Page({
data: {
questions: [], // 题目数据
currentQuestionIndex: 0, // 当前题目索引
selectedOptionIndex: -1, // 用户选择的选项索引
showFeedback: false, // 是否显示答案反馈
feedback: '', // 答案反馈信息
showNextButton: false // 是否显示下一题按钮
},
onLoad: function () {
// 获取题目数据并初始化页面
this.getQuestions();
},
getQuestions: function () {
// 使用wx.request获取题目数据,将数据赋值给this.data.questions
// 示例:
wx.request({
url: 'https://example.com/questions',
success: res => {
this.setData({
questions: res.data
});
},
fail: err => {
console.error(err);
}
});
},
selectOption: function (e) {
// 用户选择选项后的处理函数
const index = e.currentTarget.dataset.index;
this.setData({
selectedOptionIndex: index
});
},
submitAnswer: function () {
// 提交答案的处理函数
const currentQuestion = this.data.questions[this.data.currentQuestionIndex];
const selectedOptionIndex = this.data.selectedOptionIndex;
if (selectedOptionIndex === currentQuestion.correctIndex) {
this.setData({
showFeedback: true,
feedback: '回答正确!'
});
} else {
this.setData({
showFeedback: true,
feedback: '回答错误!'
});
}
this.setData({
showNextButton: true
});
},
nextQuestion: function () {
// 切换到下一题的处理函数
if (this.data.currentQuestionIndex < this.data.questions.length - 1) {
this.setData({
currentQuestionIndex: this.data.currentQuestionIndex + 1,
selectedOptionIndex: -1,
showFeedback: false,
feedback: '',
showNextButton: false
});
} else {
// 答题结束,跳转到结果页或其他页面
wx.navigateTo({
url: '/pages/result/result'
});
}
}
});
```
以上是一个简单的微信小程序答题页面的代码示例。你可以将代码保存在对应的文件中,并根据实际需求进行修改和扩展。需要注意的是,示例中的数据请求和页面跳转的具体实现可能需要根据你的实际情况进行调整。
阅读全文