前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >答题交互功能深入研究

答题交互功能深入研究

原创
作者头像
CRMEB商城源码
发布2022-05-13 11:00:14
8180
发布2022-05-13 11:00:14
举报
文章被收录于专栏:crmeb

答题功能的题型都是客观题,分为单选题、多选题和判断题。

  • 后台添加试题:

题干可以添加图片,图文题干适用于看图答题,使得出题意图更明确,有助于答题者直观感受。

  1. 目前试题的选项分为图片和文本,一道题的全部选项只能是其中一种类型。新建试题时,默认 2 个选项。后台动态添加试题选项使用的 Layui Form 模块。动态添加答题选项的主要代:

如上图所示,使用 v-for 指令循环 options 选项数组。options 数组保存添加的选项数据。

  1. 单选题和多选题必须 1-10 个选项,判断题必须 2 个选项。

如上图所示,对删除试题选项按钮进行控制,符合必须条件时展示删除按钮。

  1. 通过标记字段判断试题选项类型:

如上图所示,通过 is_img 字段判断当前选项是否是图片。

  1. 试题选项的字母序号通过过滤器格式化展示。

如上图所示,大写字母 A 的码值是 65。以此类推选项在数组中下标加 65 基准值,就能获取对应字母。

  • 前台对错判断

如上图所示,这是判断答题对错的核心代码。根据题型将选中的选项数据类型分为字符串和数组,单选题和判断题是字符串,多选题是数组。单选题和判断题只需要将选中的结果和正确答案比对,就能判断对错。多选题先判断选中的结果个数和正确答案个数是否相等,然后再将两者同一数据类型,在同一数据类型下进行判断,这里使用字符串类型判断。

源码附件已经打包好上传到百度云了,大家自行下载即可~

代码语言:javascript
复制
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。

如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址:https://gitee.com/ZhongBangKeJi/crmeb_zzff_class

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开源地址
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档