微信小程序｜实现试题答卷逐题展示与翻页功能

小蹦跶儿
698 阅读3分钟

前言：

随着互联网技术的发展，越来越多的教育、培训和评估活动转移到了线上。

在很多在线考试或答题场景中，为了让用户更加专注于每一道题目，提高答题体验，我们常常需要实现一个试题答卷页面，其中每道题单独展示，并且可以通过 “上一题” 和 “下一题” 按钮进行切换。

通过这种方式，用户可以按顺序完成题目，确保答题过程的连贯性和完整性。本文将介绍如何使用 微信小程序 实现这样的功能。

一、需要实现的效果图

image.png

二、项目背景

后端返回的是一个包含所有题目的数组，每个题目对象包含题目内容、选项等信息。前端需按照该数组中试题的顺序进行单题展示。

image.png

以我的项目为例，如上图所示，paperQuestionList数组就是试题列表。

三、实现步骤

1. 数据获取

首先，我们需要从后端接口获取试题列表数据（即上图中展示的的接口数据）。

this.setData({
  paperQuestionList: paperQuestionList
});

同时需要在data中定义一个变量currentIndex，用来记录试题的index，设置初始值为 0。

data() {
  currentIndex: 0, // 记录试题index
  paperQuestionList: [], // 试题列表
}

2. 页面布局

以我的项目为例，我将试题单独抽离为子组件了，父组件是整个试卷页面（由于我们项目第一期的试卷页面是将所有试题全部展示出来的，迭代成单题展示后，保留了这个写法）。

  • 下面是父组件examPage 文件中的相关代码：

image.png

  <!--pages/examPage/examPage.wxml-->

  <!-- 列表 -->
  <view wx:if="{{ paperQuestionList && paperQuestionList.length > 0 }}" class="list">
    <!-- for此部分 -->
    <examinationItem itemList="{{paperQuestionList[currentIndex]}}" itemIndex="{{currentIndex}}" bindgetOptionId="getOptionId">
    </examinationItem>
    <view wx:if="{{ currentIndex < paperQuestionList.length - 1 }}" bindtap="next" class="btn next">
      下一题
    </view>
    <view wx:if="{{mode == 1 && currentIndex > 0 }}" bindtap="prev" class="btn prev">
      上一题
    </view>
  </view>

注：此处加了一个判断条件，即第一题不展示“上一题”按钮，最后一题不展示“下一题”按钮。

  • 下面是子组件examinationItem 文件中的全部代码：

image.png

<view class="examinationItem">
  <!-- 题干 -->
  <view class="stem">
    {{itemIndex + 1}}.（{{itemList.questionType == 1 ? '单选' : itemList.questionType == 2 ? '多选' : '判断'}}）{{itemList.questionContent}}
  </view>
  <!-- 选项- for循环每个选项 -->
  <block wx:for='{{itemList.questionOptionList}}' wx:key='id'>
    <view bindtap="choose" data-id="{{item.id}}" data-index="{{itemIndex}}" data-type="{{itemList.questionType}}" data-childindex="{{index}}" class="option {{item.isAnswerRight ? 'active' : ''}}">
      <text>{{item.optionCode}}</text>
      <view class="space {{item.isAnswerRight ? 'active' : ''}}"></view>
      <view>{{item.optionContent}}</view>
    </view>
  </block>
</view>

下面是子组件examinationItem 文件中样式的全部代码：

/* components/examinationItem/examinationItem.wxss */
.examinationItem {
  padding: 48rpx 32rpx;
  margin-bottom: 100rpx;
  background: #fff;
  border-radius: 32rpx;
  box-shadow: 0 0 12rpx 0 rgba(61, 92, 255, 0.06);
}

.stem {
  font: 32rpx PingFangSC-Regular;
  line-height: 44rpx;
  color: #333;
}

.option {
  display: flex;
  margin-top: 24rpx;
  background: #F6F7FB;
  border-radius: 24rpx;
  font: 32rpx PingFangSC-Medium;
  padding: 26rpx 32rpx;
  color: #333;
}

.active {
  color: #3D5CFF;
  background: rgba(61, 92, 255, 0.1);
}

.space {
  position: relative;
  top: -2rpx;
  display: inline-block;
  width: 2rpx;
  height: 24rpx;
  margin: 16rpx 24rpx 0;
  background: #D9D9D9;
}

.option .active {
  background: rgba(61, 92, 255, 0.1);
}

3. 按钮功能实现

“上一题” 按钮点击时，如果当前不是第一道题，则切换到上一道题。“下一题” 按钮点击时，如果当前不是最后一道题，则切换到下一道题。

按钮布局的位置已经在第一步中就展示了，下面只展示功能实现的代码。

image.png

附上代码可直接复制：

  next() {
    if (this.data.currentIndex < this.data.paperQuestionList.length - 1) {
      this.setData({
        currentIndex: ++this.data.currentIndex,
      });
    }
  },

  prev() {
    if (this.data.currentIndex > 0) {
      this.setData({
        currentIndex: --this.data.currentIndex,
      });
    }
  },

四、总结

通过上述步骤，我们成功在 微信小程序 中实现了逐题展示的试题答卷页面，有效提升了用户的答题体验。这种实现方法不仅简单直观，而且具备良好的扩展性和维护性。对于其他前端框架，如 Vue，也可以借鉴这一思路，稍作调整即可应用。希望这篇笔记能为你的项目开发提供一些有价值的参考。

以上，希望对大家有帮助！

avatar
文章
阅读
粉丝