Vue实现一个考试答题系统

最新推荐文章于 2024-05-29 00:19:43 发布
最新推荐文章于 2024-05-29 00:19:43 发布
阅读量1.3w 收藏 76
点赞数 11
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15267341/article/details/100184948
版权

下面是界面，每页显示两个选题，上一页，下一页，答题状况  三个按钮

点击答题状况，弹出如下对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue考试系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="Font-Awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="css/build.css"/>
    <link rel="stylesheet" type="text/css" href="css/default.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-cookies.js"></script>
</head>
<body>
<div id="app">
    <div class="container">
        <form>
            <div class="col-sm-push-2 col-sm-8">
                <div class="asbdy" v-for="(item ,index) in pageData">
                    <!-题干->
                    <div class="question">
                        <span class="num">{{(currentPage-1)*pageSize+index+1}}、</span>
                        {{item.tiMu}}
                        {{item.type==0?' (单选题)':' (多选题)'}}
                    </div>
                    <!-选项->
                    <div class="anser">
                        <ul>
                            <li class="xuanXiang" v-for="(tiao,i) in item.xuanXiang" :class="{'double-line':false}">
                                <div v-if="item.type==0">
                                    <input
                                            type="radio"
                                            v-model="item.picked_radio"
                                            :name="'pickedd_' +((currentPage-1)*pageSize+index)"
                                            v-bind:value="haha[i]"
                                            @change="doCheck(item,((currentPage-1)*pageSize+index))"
                                    />
                                    {{haha[i]}} {{tiao}}
                                </div >

                                <div  v-if="item.type==1">
                                    <input
                                            type="checkbox"
                                            v-model="item.pickedMany"
                                            :name="'pickedd_' +((currentPage-1)*pageSize+index)"
                                            v-bind:value="haha[i]"
                                            @change="doCheck(item,((currentPage-1)*pageSize+index))"
                                    />
                                    {{haha[i]}} {{tiao}}
                                </div>


                            </li>
                        </ul>
                    </div>


                    <div class="clearfix"></div>
                </div>

                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
                     aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-hidden="true">&times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">答题情况</h4>
                            </div>
                            <!-- 内容 -->
                            <div class="modal-body">
                                <ul class="modal-u">
                                    <li v-for="(item,index) in chengji">
									<span :class="{unselect:!item.isChose,is_right:item.isRight,is_error
									:(!item.isRight&&item.isRight!=undefined)}">
										第{{index+1}}题
									</span>
                                    </li>

                                </ul>
                            </div>
                            <div class="clearfix"></div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <!-- <button type="button" class="btn btn-primary saveBtn">确定</button> -->
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                </div>
            </div>
            <div class="col-sm-offset-2 col-sm-8 dtbtn">
                <button type="button" class="btn btn-primary" style="width: 80px" @click="prev">上一题</button>
                <button type="button" class="btn btn-primary" style="width: 80px" @click="next">下一题</button>
                <button type="button" class="btn btn-primary" style="width: 80px" @click="detail"  data-toggle="modal"
                        data-target="#myModal">答题状况</button>
            </div>
        </form>
    </div>
</div>

</body>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            name: "zhangsan",
            currentPage: 1, //当前第几页
            pageSize: 2,  //每页显示几条数据
            haha: ["A", "B", "C", "D"],
            pageData: [],  //单页数据
            chengji: [
                {
                    isRight: null,
                    picked_radio: "",
                    pickedMany:[],
                    daan: ["C"],
                    tiMu: "1*8=?",
                    xuanXiang: ["2", "6", "8", "10"],
                    type: 0
                },
                {
                    isRight: null,
                    picked_radio: "",
                    pickedMany:[],
                    daan: ["D"],
                    tiMu: "2*5=?",
                    xuanXiang: ["2", "6", "8", "10"],
                    type: 0
                },
                {
                    isRight: null,
                    picked_radio: "",
                    pickedMany:[],
                    daan: ["A", "B", "D"],
                    tiMu: "下面哪些城市属于河南？",
                    xuanXiang: ["郑州", "开封", "阜阳", "信阳"],
                    type: 1
                },
                {
                    isRight: null,
                    picked_radio: "",
                    pickedMany:[],
                    daan: ["D"],
                    tiMu: "纽约是下面哪个国家的城市?",
                    xuanXiang: ["中国", "日本", "韩国", "美国"],
                    type: 0
                },
                {
                    isRight: null,
                    ppicked_radio: "",
                    pickedMany:[],
                    daan: ["A"],
                    tiMu: "2*8=?",
                    xuanXiang: ["16", "6", "8", "10"],
                    type: 0
                },
                {
                    isRight: null,
                    picked_radio: "",
                    pickedMany:[],
                    daan: ["B", "D"],
                    tiMu: "下面哪些属于植物?",
                    xuanXiang: ["狗", "棉花", "猫", "水稻"],
                    type: 1
                }
            ]
        },
        methods: {
            init() {
                var $this = this;

                this.pageData = this.chengji.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
                this.pageData.forEach(function (item, i) {
                    if(item.type==0){
                        item.picked_radio = $this.$cookies.get('pickedd_' + (($this.currentPage - 1) * $this.pageSize + i));
                    }else{
                        if(JSON.parse($this.$cookies.get('pickedd_' + (($this.currentPage - 1) * $this.pageSize + i)))==null||
                            JSON.parse($this.$cookies.get('pickedd_' + (($this.currentPage - 1) * $this.pageSize + i)))==undefined){
                            item.pickedMany=[];
                        }else{
                            item.pickedMany = JSON.parse($this.$cookies.get('pickedd_' + (($this.currentPage - 1) * $this.pageSize + i)));
                        }
                    }
                    item.isRight = this.$cookies.get('isRightt_' + (($this.currentPage - 1) * $this.pageSize + i));
                });
            },
            doCheck(item, index) {
                if(item.type==0){
                    //单选
                    if (item.picked_radio == item.daan[0]) {
                        item.isRight = true;
                    } else {
                        item.isRight = false;
                    }
                }else{
                    //多选
                    if (JSON.stringify(item.pickedMany.sort()) == JSON.stringify(item.daan.sort())) {
                        item.isRight = true;
                    } else {
                        item.isRight = false;
                    }
                }

                // 将结果放入缓存
                if(item.type==0){
                    this.$cookies.set('pickedd_' + index, item.picked_radio);

                }else{
                    this.$cookies.set('pickedd_' + index, JSON.stringify(item.pickedMany));
                }

                this.$cookies.set('isRightt_' + index, item.isRight);
                this.$cookies.set('isChose_' + index, true);

            },
            prev() {  //上一页
                if (this.currentPage > 1) {
                    this.currentPage = this.currentPage - 1;
                    this.init();
                }
            },
            next() {  //下一页
                if (this.currentPage < this.allPageNum) {
                    this.currentPage = this.currentPage + 1;
                    this.init();
                }
            },
            detail() { //答题状况
                var $this = this;
                this.chengji.forEach(function (item, i) {
                    item.isRight = JSON.parse($this.$cookies.get('isRightt_' + i));
                    item.isChose = JSON.parse($this.$cookies.get('isChose_' + i));
                    //下面注释的是错误写法
                    //item.isRight = $this.$cookies.get('isRightt_' + i);
                    //item.isChose = $this.$cookies.get('isChose_' + i);
                });
            }
        },
        computed: {
            allPageNum: {
                get: function () {
                    return parseInt((this.chengji.length + this.pageSize - 1) / this.pageSize);
                }
            }
        },
        mounted() {
            this.init();
        }
    });
</script>

</html>

 

必须要通过JSON.parse将字符串转json

海涛高软
关注
  • 11
    点赞
  • 踩
  • 76
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
做题H5 vue小程序
04-28
做题页面H5，用到了Vue一些常用标签(没有搭建脚手架)，上一题，下一题，进度条。。 Ui用到的比较杂(ui小白)，有Bootstrap,element和自己写的。
界面美观大方,功能完美的在线考试系统
08-14
实现前台考试,后台评阅,出卷(实现随即出题和人工出题)试题管理,等等,后台评阅完了以后从前台可以看见自己历次考试的记录与成绩,开始系统中该有的功能都有,是一个比较全面的在线考试系统
基于vue3的静态简易答题案例
m0_75011313的博客
09-18 174
非常简单的练手案例直接上代码！
vue+vant制作一个做题页面（包含选择题，判断题，填空题，简答题）
jakelihua
06-11 2089
本文讲解如何结合vue+vant制作一个做题页面里面包含选择题，判断题，填空题，简答题，还包含计算成绩的功能。效果展示 完整代码如下：
vue简答题
最新发布
weixin_73922932的博客
05-29 270
指令主要包括内置命令和自定义命令，内置命令指的是vue中自带的命令，而自定义命令指的是有用户自己定义的指令。router.push():push()方法会向历史记录中添加一个新的记录，以编程方式导航到一个新的URL，当用户单机浏览器后退按钮时，会回到之前的URL。当需要频繁切换某个元素的显示或隐藏属性的时候，使用v-show会更加节省性能上的开销，如果只需要切换一次的时候，使用v-if更合理。私有自定义指令指的是在组件内部定义的指令，私有自定义指令指的是在组件内部定义，在定义的组件内部使用的指令。
Vue实现在线考试系统
xiaocao1223的博客
05-28 5220
1.技术介绍 java+springboot+mysql+mybatis+Vue 开发工具：eclipse或idea 2.主要功能说明： 1）学生 注册、登录、查看试卷、开始考试、查看成绩、修改密码 2）教师 学生信息管理、试卷管理、试题管理、查看学生成绩、修改密码 3）管理员 教师管理、学生管理、科目管理、查看学生成绩、试题管理、修改密码、注销 3.部分代码展示： 注册 <template> <div style="width: 30%;margin-left: 30%;margin
vue路由学习
西鱼的博客
02-18 322
&lt;div id="app"&gt; &lt;h1&gt;Hello App!&lt;/h1&gt; &lt;p&gt; &lt;!-- 使用 router-link 组件来导航. --&gt; &lt;!-- 通过传入 `to` 属性指定链接. --&gt; &lt;!-- &lt;router-link&gt; 默认会被渲染成一个
计算机毕业/课程设计系列基于SpringBoot+Vue的在线考试系统
zhongtailian的博客
06-26 594
本课程演示的是一套基于SpringBoot+Vue前后端分离的在线考试系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1. 包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2. 带你从零开始部署运行本套系统 3. 该项目附带的源码资料可作为毕设使用 该线考试系统基于B/S架构，后端采用SpringBoot架构，前端采用Vue+ElementUI技术，并结合MySQL数据库。
python+vue 在线考试系统的设计与实现
QQ511008285的博客
04-13 1258
在各学校的教学过程中，用户的考试是一项非常重要的事情。随着计算机多媒体技术的发展和网络的普及，“基于网络的学习模式”正悄无声息的改变着传统的教室学习模式，“在线考试系统”的研究和设计也成为教育技术领域的热点课题。这样可以有效地解决考试混乱的局面。
【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——①创建vue-cli实现项目搭建
m0_56905968的博客
12-18 526
在终端创建脚手架（该创建项目文件夹用于存放前端内容，通常命名为my-app），注意，此处项目创建命名不可以为驼峰命名，否则会报错，只能通过小写或中划线-方式进行命名。创建vue-cli的指令如下 （注意，my-app可为任意创建项目的名称，推荐使用my-app）注意，项目报错常常由于版本不匹配，因此需要下载对应的版本（如版本不符合则需要卸载重新安装）单击回车键，进入版本选择页面（此处选择vue2版本为例）综上，项目搭建完成 ，后续还要安装各种插件。
spring boot+vue 在线考试系统
03-28
在线考试系统的开发是现代教育技术的重要应用，它结合了Java后端技术Spring Boot和前端技术Vue.js，为用户提供了一个高效、便捷的在线考试环境。本系统以MySQL数据库为数据存储基础，实现试题管理、考生管理、考试...
springboot和vue实现的在线考试系统
06-09
本项目采用SpringBoot后端框架与Vue.js前端框架相结合的方式，构建了一个功能完备的在线考试系统。下面我们将深入探讨这一系统的构建过程及其核心知识点。 一、SpringBoot框架的应用 SpringBoot是由Pivotal团队...
基于springboot+vue实现的在线考试系统+源代码+文档
05-06
本项目是一个采用现代Web技术构建的在线考试系统，主要运用了SpringBoot框架作为后端处理核心，Vue.js作为前端框架，以及Element-UI组件库来丰富用户界面。下面将详细介绍这些关键技术及其在在线考试系统中的应用。 ...
基于SpringBoot+VUE+Element的在线考试系统
06-16
该项目是一个前后端分离，基于 RESTFUL 风格接口的项目，同时也是 本人的毕业设计项目。后台使用 SpringBoot，前端使用 VUE 和 Element-UI 组件库配合完成开发。因为本人还在实习，基于时间和技术原因，所以项目还有...
Springboot+Vue前后端分离在线答题+题库管理系统
一天不学习，就浑身难受
09-24 1万+
后端：SpringBoot 前端：Vue 数据库: MySQL
一些简单的vue考试题(选择题和简答题)
热门推荐
Wmlikeweb的博客
05-24 4万+
1、下面代码结果打印结果为: new Vue({ data: { a: 1, b: 2 }, created: function () { console.log(this.a) }, mounted(){ console.log(this.b) } }) A：1，2 B: 1,1 C: 2,2 D:2,1 2、在beforeRouteEnter钩子函数中进行console.log(...
毕业设计｜SpringBoot+Vue实现的在线考试系统
软件开发实战项目分享
12-28 1348
语言环境：Java: jdk1.8数据库：Mysql: mysql5.7应用服务器：Tomcat: tomcat8.5.31开发工具：IDEA或eclipse基于SpringBoot+Vue的在线考试系统是一款专为高校设计的在线考试平台，旨在为高校提供一个高效、便捷、安全的在线考试解决方案。系统结合SpringBoot后端框架和Vue前端框架，利用先进的Web技术，实现了一套完整的在线考试流程，包括考试创建、题库管理、学生管理、成绩管理等核心功能。
vue实现答题考试功能(上一题下一题)
weixin_50367873的博客
06-19 8425
1，后端返回数据 questionList: [ { id: "1", name: "one", question: "问题1111111?", answer: "防弹少年框架的积分换深刻领会是客家话" }, { id: "2", name: "two", question: "问题222222222?",
基于springboot和vue的经管学院在线考试系统设计与实现LW
07-17
这篇资源主要讨论了如何设计并实现一个基于Spring Boot和Vue.js的在线考试系统，特别适用于经济管理学院的教育场景。这个系统是针对本科毕业设计的，旨在解决传统纸质考试存在的问题，如资源浪费和潜在的作弊行为。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值