答题交互功能深入研究

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

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

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

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

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

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

通过标记字段判断试题选项类型：

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

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

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

前台对错判断

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

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

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27
百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

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

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

开源不易，Star 以表尊重，感兴趣的朋友欢迎 Star，提交 PR，一起维护开源项目，造福更多人！

答题交互功能深入研究相关推荐

基于移动终端的大学生心理健康交互管理系统的研究与设计
基于移动终端的大学生心理健康交互管理系统的研究与设计摘要:近年来随着科技的不断发展和进步,移动智能设备逐渐融入到了我们的日常生活中.为了应对大学生在心理健康管理方面的大量需求,提出了一种基于移动端设 ...
websocket+netty实时视频弹幕交互功能（Java版）
欢迎关注方志朋的博客,回复"666"获面试宝典 2021年了,还有不支持弹幕的视频网站吗,现在各种弹幕玩法层出不穷,抽奖,ppt都上弹幕玩法了,不整个弹幕都说不过去了,今天笔者就抽 ...
人形图案c语言程序_做游戏，学编程（C语言） 7 学习EasyX图形交互功能----flappy bird源代码...
经过之前的学习,我们基本掌握了开发小游戏所需要的语法知识和搭建方法,但是基础C语言的可视化与交互功能实在是太弱了 . 利用免费的EasyX插件,我们可以快速上手,简单实现很酷的视觉效果 . EasyX ...
js用button激活 Alert 元素关闭按钮的交互功能
js用button激活 Alert 元素关闭按钮的交互功能一.总结 1.点(.)对应class,井号(#)对应id 2.jquery:amaze里面用的jquery,jquery熟悉之后,这些东西 ...
html5 页面答题算分,JavaScript实现答题评分功能页面
本文实例为大家分享了JavaScript实现答题评分功能的具体代码,供大家参考,具体内容如下效果图直接上代码 HTML部分 JavaScript实现一个在线做题测试网页在线答题测试已开始,请开 ...
做游戏，学编程（C语言） 7 学习EasyX图形交互功能----flappy bird源代码
经过之前的学习,我们基本掌握了开发小游戏所需要的语法知识和搭建方法,但是基础C语言的可视化与交互功能实在是太弱了 . 利用免费的EasyX插件,我们可以快速上手,简单实现很酷的视觉效果 . EasyX ...
c语言心形编程代码_做游戏，学编程（C语言） 7 学习EasyX图形交互功能----flappy bird源代码...
经过之前的学习,我们基本掌握了开发小游戏所需要的语法知识和搭建方法,但是基础C语言的可视化与交互功能实在是太弱了 . 利用免费的EasyX插件,我们可以快速上手,简单实现很酷的视觉效果 . EasyX ...
在线客服机器人交互功能开发总结
背景与前言在线客服系统是MIC和新一站等部门客服与访客通讯的平台.最近智能机器人很火,我们部门也配合开发了交互功能,投入线上使用. 在线客服前端为了配合机器人功能显示,遇到了不少问题,涉及交互和代码 ...
vue实现答题考试功能(上一题下一题)
1,后端返回数据 questionList: [{id: "1",name: "one",question: "问题1111111?",an ...

答题交互功能深入研究

答题交互功能深入研究相关推荐

最新文章

热门文章