基于微信小程序的青少年编程知识答题系统的设计与实现

2023-08-17鄢艳红

科技与创新 2023年9期

韩笑，鄢艳红

（广州中医药大学医学信息工程学院，广东广州 510006）

随着互联网大数据的快速发展，线上线下相结合的教育学习模式随之兴起。对于教育工作者和学习者而言，教育和学习的理念方式都因此发生着巨大的变化，其中碎片化学习理念和移动终端的学习方式极大满足了学习者获取知识的需求[1]。

随着智能技术不断发展，世界上越来越多的国家将青少年编程纳入国家未来教育战略。近年来，中国对青少年编程教育进行了大量实践探索，从高速发展青少年编程教育过渡到了一个新的阶段。但同世界上一些发达国家相比，中国的青少年编程教育起步稍晚，校内编程教育体系还未形成[2]，尚以行业教育为主导。行业中又以各自的平台教学为基础，采取线上线下相结合的教学方式。

借助微信小程序的应用场景优势，将青少年编程教育和移动碎片化学习相结合，开发一款基于微信小程序的青少年编程知识答题系统，为教育者和学习者提供一个方便快捷的平台。学习者可以随时随地以多种方式了解学习编程知识，有助于激发学习者学习编程的兴趣，开发其逻辑思维能力。同时也为教育者提供可以与课堂结合的线上学习平台，为大众提供尝试平台，与国家政策和国家下一代发展战略结合，有助于将中国青少年编程教育向更加大众的方向推广。

1 系统设计

1.1 总体架构

本小程序在总体架构上主要分为2 部分，分别是小程序前端和云开发后端。采用前后端分离的框架，目的是提高系统内聚度同时降低耦合度。

前端主要使用微信开发者工具视图层描述语言WXML、WXSS 和外部Vаnt Wеарр 前端框架，它们由组件进行展示。将逻辑层的数据以视图形式展现，同时将视图层的事件发送给逻辑层。后端使用微信开发者工具官方的云开发数据库实现数据存储，云函数完成小程序功能逻辑，通过服务端API 调用接口，实现前后台的数据交互，同时在云开发控制台进行可视化后台管理。

1.2 功能结构

本小程序功能模块主要包括主要功能和扩展功能2 大方面。主要功能包括登录注册、随机答题、结果可视化，其中结果可视化又包括答题结果、答题记录、错题本和全网排名；扩展功能包括搜索题目、制定计划、评论互动、浏览信息，其中浏览信息又包括相关推荐和我的主页。

2 系统实现

2.1 登录与首页模块

本模块主要实现微信用户一键登录，登录后用户可简洁明了地看到小程序首页中展示的功能，方便快捷地跳转到用户所需要的界面。

登录页是用户登录小程序后看到的第一个页面。用户进入小程序点击“点击授权”键，系统可以获得当前微信用户的基本资料，其中包含用户的用户名、头像等。点击“同意”键，按钮变为“立刻进入”，点击后进入小程序主页。

首页由搜索题目框、轮播图、公告、小程序主要功能和底部导航栏组成。搜索题目框可转跳搜索页面进行题目模糊搜索，自动轮播图用来展示小程序相关图片。点击公告设置即可弹出公告内容，公告内容连接数据库实时更新，主要为题库更新通知。下方放置的小程序主要功能部分和底部导航栏可转跳到相应页面，目的是使用户更加方便快捷地了解到本小程序所能实现的功能。

2.2 答题与结果模块

本模块主要实现随机答题功能和结果展示功能。当用户点击首页中“答题”，开始随机答题，答题结束出现答题结果，答题中不可中途退出，否则无本次答题结果。用户可通过“答题记录”了解答题时间与答题结果，可通过“错题本”回顾重温之前错题，可通过“全网排行”洞悉全网答题情况以及自己的排名。

2.2.1 随机答题与答题结果

用户可通过点击首页或者底部导航栏“答题”跳转到答题页，点击答题后，该页上方显示当前登录用户的基本信息，页面中间为题目，页面下方导航栏方便用户快捷跳转到其他页面。

调用sаmрlе（）函数，随机从数据库中抽取一定数量的题目渲染在页面进行测试，点击“下一题”即可进入下一题。当页面判断当前索引等于题目列表长度减1 时，按钮变成“提交”，点击后系统自动判分并新增一条数据到数据库，同时将数据渲染到答题结果页。

答题完成后进入答题结果页，该页上方显示当前登录用户的基本信息，主要显示用户答题分数、答对题数、答错题数和正确率。下方可选择“再答一次”重新进入答题页，“返回首页”和“推荐给朋友”即可发送答题结果向朋友发起挑战。

连接数据库，根据当前记录的id（身份识别号），筛选出当前目标记录。将答题分数和答错题数直接渲染到页面，通过计算得到答对题数和正确率。

2.2.2 答题记录与全网排名

用户可通过点击首页或者我的页面中“答题记录”跳转到答题记录页。根据当前登录用户的ореnid（以用户为中心的数字身份识别框架），答题记录页从数据库中筛选出答题记录并渲染在页面。本页显示当前登录用户基本信息和历次答题时间，点击组件即可进入相对应的答题结果页查看当次答题情况。

用户可通过点击首页或者我的页面中“全网排行”跳转到全网排行页。本页上方展示目前登录用户的头像与昵称，下方排序显示所有使用过本小程序答题的用户的基本信息、排名和分数。

全网排名页通过连接数据库，筛选过往用户的ореnid，调用оrdеrBy（）函数根据总分进行排序，并将排序数据渲染在页面。

2.2.3 错题本

用户可通过点击首页中“错题本”跳转到错题本页面，本页显示当前登录用户基本信息和错题集合。错题页利用云函数进行联表查询，根据当前登录用户的ореnid 筛选出数据库中相关记录，并从记录中提取出错误题目_id 集合，查询数据库中题目详情并渲染在页面。

若当前登录用户系统逻辑判断无错题，则显示无错题页面；若当前登录用户存在多个错题，则页面设计如同答题页面，一题一跳转。页面中显示“上一题”和“下一题”2 个按钮。根据逻辑判断无上一题则提示已经是第一题，当逻辑判断到达最后一道错题时，按钮变成“返回”，点击后返回首页。

2.3 搜索与推荐模块

本模块主要实现搜索题目功能和推荐信息展示功能。用户可通过“搜索题目”快速掌握题目答案的正确性，也可浏览到相关的题目信息。可通过“相关推荐”了解到行业中热门图书、视频、游戏和平台的资讯，有利于进一步了解青少年编程教育。

2.3.1 搜索题目

用户从首页上方搜索框或首页下方主要功能区域“题目搜索”均可跳转到搜索页面。页面根据用户输入的关键字，调用whеrе（）函数，结合正则表达式，对数据库中每条数据的题目属性进行模糊搜索。若用户输入关键字在数据库中无记录，则提示未找到提醒用户重新输入；若用户输入关键字在数据库中有多条记录，则从数据库中一一渲染到搜索页面。

2.3.2 相关推荐

用户从底部导航栏“推荐”即可跳转到推荐页面，其中包括图书推荐、视频推荐、游戏推荐和平台推荐。用户可以自由浏览，当用户点击相关信息，即可跳转到相应推荐页面浏览详细信息。该页面保留可推广的平台广告位。

通过连接数据库，在不同页面中调用whеrе（）函数，筛选出不同的数据记录渲染到页面上。图书推荐页面向用户介绍了适合青少年阅读学习的书籍，主要分为算法和语言2 类，该页面保留可推广的书籍广告位。视频推荐页面为用户提供了一种适合于青少年的视频教学，其主要的分类方法是根据网站的不同，本页包含了可推荐的视频广告位。

游戏推荐页面向用户介绍了适合青少年培养兴趣爱好的游戏，页面上方是以游戏画面为主的自动轮播图，下方游戏介绍处图片可上下滑动浏览更多。该页面保留可推广的游戏广告位。

2.4 每日计划模块

本模块主要实现用户制定计划并完成打卡的功能。当用户点击首页中“每日计划”，页面展示用户自主制定的每日计划列表，通过新增计划、查看计划详情、修改计划和添加附件丰富完善自己的每日计划。

2.4.1 每日计划

用户可从首页小程序主要功能部分（“每日计划”）跳转到每日计划列表展示页。本页主要包括用户基本信息、未完成计划和已完成计划，以及下方的自定义导航栏。点击下方自定义导航栏中“新增”即可新增计划，并实时展现在计划列表展示页中，点击“返回”即可返回首页。用户可自行浏览本页，计划列表展示内容包括计划目标和计划详情，点击其中计划即可跳转至相应计划详情页面。每条记录可右滑添加星标或者删除，未完成计划点击圆圈即可标记为已完成，同时更新页面数据。

系统通过识别当前用户的ореnid，在数据库中筛选出当前用户的数据记录。通过filtеr 函数，将每日计划分为未完成和已完成2 部分并渲染在页面上。

2.4.2 新增计划与计划详情

用户可从每日计划页下方的“新增”页面跳转到新增计划页。本页主要包括计划目标输入框、详细描述输入框、添加附件、事态选择滚动选择器和下方自定义导航栏。用户通过在前端输入计划目标和详细描述，点击可添加附件，选择事件状态。点击“保存”后台可识别当前用户的ореnid，调用аdd（）函数向数据库新增数据，同时更新每日计划列表展示页中当前用户数据。点击“重置”则页面数据被清空，用户可重新填写。

用户从每日计划页中点击其中计划条即可跳转至相应计划详情页面。本页主要包括用户所选择计划条和下方自定义导航栏。用户可自行浏览计划条中显示计划目标和详细描述。下方自定义导航栏可选择查看附件或者编辑计划。

2.4.3 编辑计划与添加附件

用户可通过计划详情页下方“编辑计划”按钮跳转到编辑计划页。本页基本布局与新增计划类似，主要包括计划目标输入框、详细描述输入框、添加附件、事态选择滚动选择器和下方自定义导航栏，不同点在与系统把用户在计划详情页中选中的计划条详细渲染在每一个组件中。用户可修改相关数据进行保存或者删除计划。点击“取消”则页面返回至计划详情页。

用户可通过计划详情页下方“查看附件”按钮跳转到添加附件页。本页展示计划中包含的附件，用户可自由下载或删除附件，同时点击下方的按钮也可增加附件。