大数跨境
0
0

微信小程序刷题 刷题功能部分改造说明~

微信小程序刷题 刷题功能部分改造说明~ 乡下小哥编程
2025-12-09
2
导读:之前开发过一个微信小程序的刷题系统,但是刷题的格式有些单调,不美观。画时间对前端的页面布局和刷题方式进行了优化和改造,需要的可以看看~
前言
     之前开发过一个微信小程序的刷题系统,但是刷题的格式有些单调,不美观。画时间对前端的页面布局和刷题方式进行了优化和改造。主要改动点:1、题目分页展示;2、可以跳转题目;3、记录已做题目;4、题目布局格式美化。整体改造之后,从视觉方面还是刷题体验方面都有了很大的提高。接下来详细说明一下改造点~
实现效果演示
以下是我优化改造后的页面,手机上实物演示,相比之前的页面是有了很大的提升。

改进部分说明
1、题目分页展示 + 跳转
     这里的“分页”和传统意义的分页不是同一回事,通过渲染题目列表的标签。每页仅展示一个题目的相关信息。在点击不同的题目标签时,跳转到对应的题目部分。
    <!-- 底部题号导航条 -->    <view class="nav-bar">        <view class="nav-list">            <block wx:for="{{exampaperModule.questionList}}" wx:for-item="item" wx:for-index="i" wx:key="id">                <view class="nav-item {{ i == currentIndex ? 'active' : '' }} {{ answersSimple[item.id] ? 'answered' : '' }}" data-index="{{i}}" bindtap="jumpToQuestion">{{i + 1}}</view>            </block>        </view>    </view>
对应的跳转方法
  // 点击题号跳转  jumpToQuestion(e) {    const index = e.currentTarget.dataset.index;    this.setData({      currentIndex: index,      currentQuestion: this.data.exampaperModule.questionList[index]    });  },
2、已做题目记录
      如何保存用户的作答情况呢,在从其它题目跳转到已做题目的时候,要展示已经作答情况。当用户选择题目的相关选项时,记录选择信息到映射对象集合中。然后前台跳转到此题目的 时候,遍历整个映射对象集合。填充相关的选项信息,如果没有映射到内容,则表示该题未作答。
    <!-- 当前题目卡片 -->    <view class="question-card">        <view class="question-text">            {{currentIndex + 1}}. {{currentQuestion.questionText}}        </view>        <radio-group data-qid="{{currentQuestion.id}}" bindchange="onOptionChange" class="option-list">            <block wx:for="{{currentQuestion.optionList}}" wx:key="id" wx:for-item="option">                <label class="option-item">                    <radio value="{{option.optionText}}|{{option.isCorrect}}" checked="{{answersSimple[currentQuestion.id] === option.optionText}}" />                    <text class="option-text">{{option.optionText}}</text>                </label>            </block>        </radio-group>    </view>
这里是具体的方法实现
  // 选项选中  onOptionChange(e) {    const questionId = e.currentTarget.dataset.qid;    const value = e.detail.value    const [optionText, isCorrect] = value.split("|");    console.log("用户选择答案:", optionText, "题目ID: ", questionId)    const newAnswer = {      questionId: questionId,      chosenAnswer: optionText,      isCorrect: isCorrect    };    // 更新 answers(对象)和 answersSimple(映射 questionId -> chosenAnswer)    this.setData({      [`answers.${questionId}`]: newAnswer,      [`answersSimple.${questionId}`]: optionText    });    console.log("Stored Answer:", newAnswer);  },
公众号回复如下内容即可获取对应资料

数字 1、表示获取后端开发学习资料

数字 2、表示获取前端开发学习资料

数字 3、表示获取 软考中级设计师资料

数字 4、表示获取后端常用在线免费学习资料

数字 5、计算机毕业设计优秀论文模板

数字 6、前后端分离项目案例源码

数字 7、SSM项目案例源码

数字 8、视频轮播图全部案例源码

数字 9、商城系统项目 前后端分离源码

数字10:商城系统源码 前后端分离项目【毕业设计系统】

数字11:毕业论文答辩PPT模板案例

数字12:系统部署+论文指导+开题指导+开发指导

数字13:万字答辩问题汇总文档

数字14:前后端项目结构模块详细讲解说明(小白可懂)

数字15:协同过滤算法+敏感词过滤+SpringBoot+Vue 商城源码

数字16:微信小程序考勤打卡 系统源码

更多。。。


这部分源码暂未开源,需要学习的,找我即可~

【声明】内容源于网络
0
0
乡下小哥编程
主要用公众号分享纯干货知识、日常开发经验总结、前沿技术、优秀项目源码案例等
内容 246
粉丝 0
乡下小哥编程 主要用公众号分享纯干货知识、日常开发经验总结、前沿技术、优秀项目源码案例等
总阅读25
粉丝0
内容246