vue 答题（单选，多选，判断）

最新推荐文章于 2024-10-15 20:43:37 发布
原创 最新推荐文章于 2024-10-15 20:43:37 发布 · 7.8k 阅读 · 61 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文介绍了如何使用Vue.js实现在线答题系统，包括后台处理计分逻辑和前端展示题目及用户答案，同时展示了答题和回显得分的效果图。

这里是后台处理得计分，前台这是渲染题目，以及回显用户答得题

答题

后台数据格式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

    <ul>
        <li v-for="(i, index1) in arrlist.pqList" :key="index1">
          <h3>
            <span>{{ index1 + 1 }}、</span>
            <div class="newtuexam_box">
              <span v-show="i.questionBankType == '1'">（单选题）</span>
              <span v-show="i.questionBankType == '2'">（多选题）</span>
              <span v-show="i.questionBankType == '3'">（判断题）</span>
              {{ i.subjectContent }}
            </div>
          </h3>
            <!-- 单选，判断 -->
          <div v-show="i.questionBankType !== '2'" style="margin-left: 60px">
            <el-radio-group v-model="radioList[index1]">
              <el-radio
                v-for="(j, index2) in i.optionAll"
                :key="index2"
                :label="j.pqaId"
                @change="handleRadioChanges(j)"
              >
                {{ j.answerContent }}
              </el-radio>
            </el-radio-group>
          </div>
            <!-- 多选题 -->
          <div v-show="i.questionBankType == '2'" style="margin-left: 60px">
            <el-checkbox-group v-model="checkboxList">
              <el-checkbox
                v-for="(x, index2) in i.optionAll"
                :key="index2"
                :label="x.pqaId"
                @change="handleCheckboxChanges(x)"
              >
                {{ x.answerContent }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </li>
      </ul>
      
      <div class="newtuexam_cont_btn" @click="getsubmit">提交试卷</div>

import { createPaper, paperInfo, inspectionPaper } from "@/api/newtu";
export default {
  components: {},
  data() {
    return {
      arrlist: {},
      paperId: "",
      checkboxList: [],
      radioList: [],
      textForm: {
        answeredIds: [],
        pid: "0",
      },
      loading:true,
    };
  },
  created() {
    this.textForm.pid=this.$store.state.paperId;
    this.paperId=this.$store.state.paperId;
    this.getexam();
  },
  methods: {
    handleRadioChanges(e) {
      console.log(e);
      console.log(this.radioList);
    },
    handleCheckboxChanges(e) {
      console.log(e);
      console.log(this.checkboxList);
    },
    getexam() {
      paperInfo(this.paperId).then((res) => {
        if (res.code == 200) {
          this.arrlist = res.data;
          console.log(this.arrlist);
        }
      });
    },
    //提交试卷
    getsubmit() {
    //合并选的单选，多选，判断id
      this.textForm.answeredIds = this.radioList.concat(this.checkboxList);
      console.log(this.textForm.answeredIds);
      inspectionPaper(this.textForm).then((res) => {
        if (res.code == 200) {
          this.$store.commit("pid", res.data);
          this.$router.push("/newtuExamAnswer");
        }
      });
    },
  },
};
</script>

ul {
    width: 1060px;
    background: linear-gradient(
      180deg,
      rgba(164, 134, 84, 0.5) 0%,
      rgba(205, 173, 120, 0.5) 100%
    );
    border: 1px solid #ffdc82;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    margin: 20px auto 24px auto;
    padding-bottom: 35px;

    li {
      font-size: 20px;
      color: #ffdc82;
      padding-top: 35px;
      padding-left: 37px;
      h3 {
        margin-bottom: 20px;
        .newtuexam_box {
          display: inline-block;
          width: 93%;
          vertical-align: top;
        }
      }
      /deep/ .el-radio {
        margin-bottom: 15px;
      }
      /deep/ .el-radio__inner:hover {
        border-color: #ffdc82;
      }

      /deep/ .el-radio__label {
        color: #ffdc82;
        font-size: 20px;
      }
      /deep/ .el-radio__inner {
        border-color: #ffdc82;
        background: none;
        width: 20px;
        height: 20px;
      }
      /deep/.el-radio__input {
        vertical-align: sub;
      }
      /deep/ .el-radio__inner::after {
        width: 7px;
        height: 7px;
      }
      /deep/ .el-radio__input.is-checked + .el-radio__label {
        color: #fff;
      }
      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #ffdc82;
        background: #ffdc82;
      }
      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #ffdc82;
        border-color: #ffdc82;
      }
      /deep/ .el-checkbox__input {
        line-height: 0;
        vertical-align: top;
      }
      /deep/ .el-checkbox__inner::after {
        border: 2px solid #635136;
        border-left: 0px;
        border-top: 0px;
        height: 13px;
        left: 5px;
        position: absolute;
        top: 0px;
        width: 6px;
      }
      /deep/ .el-checkbox__label {
        color: #ffdc82;
        font-size: 20px;
      }
      /deep/ .el-checkbox {
        margin-bottom: 15px;
      }
      /deep/ .el-checkbox__inner:hover {
        border-color: #ffdc82;
      }
      /deep/ .el-checkbox__inner {
        border-color: #ffdc82;
        background: none;
        width: 20px;
        height: 20px;
      }
      /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
    }
  }
  .newtuexam_cont_btn {
    width: 259px;
    height: 46px;
    cursor: pointer;
    font-size: 24px;
    line-height: 46px;
    text-align: center;
    color: #ffdc82;
    border-radius: 30px;
    border: 1px solid #ffdc82;
    margin: 24px auto;
  }
  .newtuexam_cont_btn:hover {
    background: linear-gradient(
      89.96deg,
      #a58654 0.03%,
      rgba(165, 134, 84, 0.6) 50.65%,
      #a58654 99.21%
    );
  }

效果图
在这里插入图片描述

回显得分

 <ul>
        <p class="newtuexam_p1">
          <span>得分：</span>
          <i> {{ arrlist.objectiveScore }}分</i>
        </p>
        <li v-for="(i, index1) in arrlist.ownerPaperAll" :key="index1">
          <h3>
            <span>{{ index1 + 1 }}、</span>
            <div class="newtuexam_box">
              <span v-show="i.questionBankType == '1'">（单选题）</span>
              <span v-show="i.questionBankType == '2'">（多选题）</span>
              <span v-show="i.questionBankType == '3'">（判断题）</span>
              {{ i.subjectContent }}
            </div>
          </h3>
          <div v-show="i.questionBankType !== '2'" style="margin-left: 60px">
            <el-radio-group v-model="i.radioList">
              <el-radio
                v-for="(j, index2) in i.pqaList"
                :key="index2"
                :label="j.pqaId"
              >
                {{ j.answerContent }}
              </el-radio>
            </el-radio-group>
            <p class="newtuexam_p2">正确答案是：{{ i.answer }}</p>
          </div>
          <div v-show="i.questionBankType == '2'" style="margin-left: 60px">
            <div v-if="i.checkboxList">
            <el-checkbox-group  v-model="i.checkboxList">
              <el-checkbox
                v-for="(x, index2) in i.pqaList"
                :key="index2"
                :label="x.pqaId"
              >
                {{ x.answerContent }}
              </el-checkbox>
            </el-checkbox-group>
             <p class="newtuexam_p2">正确答案是：{{ i.answer }}</p>
            </div>
           
          </div>
        </li>
      </ul>

import { examinationResults,getILabUrl } from "@/api/newtu";
export default {
  components: {},
  data() {
    return {
      arrlist: [],
      paperId: "",
      // checkboxList: [],
      // radioList: [],
      textForm: {
        answeredIds: [],
        pid: "0",
      },
    };
  },
  created() {
    this.paperId = this.$store.state.pid;
    this.getexam();
  },
  methods: {
    // handleRadioChanges(e) {
    //   console.log(e);
    //   console.log(this.radioList);
    // },
    // handleCheckboxChanges(e) {
    //   console.log(e);
    //   console.log(this.checkboxList);
    // },
    getexam() {
      examinationResults(this.paperId).then((res) => {
        if (res.code == 200) {
          this.arrlist = res.data;
          this.arrlist.ownerPaperAll.map((i) => {
            //单选，判断
            if (i.questionBankType !== '2') {
              i.pqaList.map((j) => {
                if (j.checked == "1") {
                  this.$set(i, "radioList", j.pqaId);
                }
                if (j.isRight == "1") {
                  this.$set(i, "answer", j.answerContent);
                }
              });
            } else if (i.questionBankType == '2'){
              console.log('多选题');
              //多选题
              this.$set(i, "checkboxList", []);
              i.pqaList.map((j) => {
                if (j.checked == "1") {
                  i.checkboxList.push(j.pqaId);
                }
                if (j.isRight == "1") {
                  this.$set(i, "answer", j.answerContent);
                }
                // this.$set(j, "checked", false);
              });
            }
          });
          console.log(this.arrlist.ownerPaperAll);
        }
      });
    },
 
    
  },
};
</script>

 ul {
    width: 1060px;
    background: linear-gradient(
      180deg,
      rgba(164, 134, 84, 0.5) 0%,
      rgba(205, 173, 120, 0.5) 100%
    );
    border: 1px solid #ffdc82;
    box-sizing: border-box;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    margin: 20px auto 24px auto;
    padding-bottom: 35px;
    .newtuexam_p1 {
      text-align: center;
      padding-top: 58px;
      span {
        font-size: 24px;
        line-height: 36px;
        color: #ffffff;
      }
      i {
        font-size: 24px;
        line-height: 36px;
        color: #ff4646;
      }
    }
    li {
      font-size: 20px;
      color: #ffdc82;
      padding-top: 35px;
      padding-left: 37px;
      .newtuexam_p2 {
        font-size: 20px;
        line-height: 30px;
        color: #70ff00;
      }
      h3 {
        margin-bottom: 20px;
        .newtuexam_box {
          display: inline-block;
          width: 93%;
          vertical-align: top;
        }
      }
      /deep/ .el-radio {
        margin-bottom: 15px;
      }
      /deep/ .el-radio__inner:hover {
        border-color: #ffdc82;
      }

      /deep/ .el-radio__label {
        color: #ffdc82;
        font-size: 20px;
      }
      /deep/ .el-radio__inner {
        border-color: #ffdc82;
        background: none;
        width: 20px;
        height: 20px;
      }
      /deep/.el-radio__input {
        vertical-align: sub;
      }
      /deep/ .el-radio__inner::after {
        width: 7px;
        height: 7px;
      }
      /deep/ .el-radio__input.is-checked + .el-radio__label {
        color: #fff;
      }
      /deep/ .el-radio__input.is-checked .el-radio__inner {
        border-color: #ffdc82;
        background: #ffdc82;
      }
      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #ffdc82;
        border-color: #ffdc82;
      }
      /deep/ .el-checkbox__input {
        line-height: 0;
        vertical-align: top;
      }
      /deep/ .el-checkbox__inner::after {
        border: 2px solid #635136;
        border-left: 0px;
        border-top: 0px;
        height: 13px;
        left: 5px;
        position: absolute;
        top: 0px;
        width: 6px;
      }
      /deep/ .el-checkbox__label {
        color: #ffdc82;
        font-size: 20px;
      }
      /deep/ .el-checkbox {
        margin-bottom: 15px;
      }
      /deep/ .el-checkbox__inner:hover {
        border-color: #ffdc82;
      }
      /deep/ .el-checkbox__inner {
        border-color: #ffdc82;
        background: none;
        width: 20px;
        height: 20px;
      }
      /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #fff;
      }
    }
  }

效果图
在这里插入图片描述
在这里插入图片描述

2022Vue经典面试题及答案汇总(持续更新）
m0_54866636的博客
07-27 4413
如果在组件上，引就指向组件实例。保证组件的独立性和可复用性，data是一个函数，组件实例化的时候将会调用这个函数，返回一个对象，计算机会给这个对象分配一个内存地址，你实例化几次，就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。总结在后端接没有开发完成之前，前端可以已有的接档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。..
vue试卷单选多选处理
Y2960018173的博客
05-13 327
一张试卷多到题
vue编写实现考试模块答题功能单选多选
十年树人的博客
02-28 7252
需求： 单选多选判断题。
vue实现自定义多选与单选的答题功能
08-27
主要介绍了使用vue实现自定义多选与单选的答题功能,vue组件中在表单方面提供了一个v-model指令，非常好用，具体实现过程大家跟随脚本之家小编一起看看吧
vue答题
m0_53912016的博客
05-26 3436
【代码】vue答题。
Vue测试题
PanHanJia的博客
09-19 1165
要求：使用vue，完成一个登陆校验功能。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #login { width: 400p...
vue实现单选和多选功能
08-29
Vue 实现单选和多选功能 Vue 是一种流行的前端框架，能够帮助开发者快速构建交互式用户界面。单选和多选是两个常见的交互模式，在 Vue 中可以通过不同的方式实现。下面将详细介绍 Vue 实现单选和多选功能的方法。 ...
Vue自定义答题：多选单选v-model实现教程
在本文中，我们将深入探讨如何使用Vue.js实现自定义的多选与单选答题功能。Vue框架的强大之处在于其v-model指令，它能够实现双向数据绑定，使得表单输入与组件状态保持同步。然而，在实际项目中，可能会遇到UI设计...
【Vue】Vue实现单选题、多选题、级联选项题的前端代码
Jacker
09-13 968
【代码】【Vue】Vue实现单选题、多选题、级联选项题的前端代码。
vuejs在线答题demo
05-07
vuejs在线答题demo，点击答案后标记出正确以及错误答案并切换到下一题，结束后显示答题结果，题目写的是静态的，可以自己从后台获取。
vue的简单答题demo.zip
10-27
vue的demo，vue答题卡，自动跳转，自动出答案，倒计时，计算分数，答题试卷，背景色变色，在线简单答题应用
做题H5 vue小程序
04-28
做题页面H5，用到了Vue一些常用标签(没有搭建脚手架)，上一题，下一题，进度条。。 Ui用到的比较杂(ui小白)，有Bootstrap,element和自己写的。
Vue简答题
woyebuzhidao321的博客
05-09 788
1、Vue 3.0 性能提升主要是通过哪几方面体现的？ 1.响应式系统升级 vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，来实现响应式 vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历 可以监听动态属性的添加 可以监听到数组的索引和数组length属性 可以监听删除属性 2.编译优化 vue2中采用标记静态根节点，优化diff过程，来减少操作dom vue3中标记和提升所有
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
热门推荐
qq_41312395的博客
12-16 2万+
vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题 文章目录vue+element 实现 试卷答题功能，单选题 ,多选题，判断题，简答题难点：一、后端返回数据（）二、页面1.html2.js - 答题部分3.js - 回显部分总结 难点： 如何循环不同类型的题 如何记录点击的是哪道题，并且分清楚他是单选还是多选 单选还好，多选的话不能出现点了一道题，其他题的答案都是点击的这个选项 回显的时候如何再把值赋上去 附加功能：设置开始时间和结束时间，未到时间不可答题（后端做判断）
vue案例 - 使用vue实现自定义多选与单选的答题功能
xing.org1^
07-04 932
4月底立得flag，五月底插上小旗，结果拖到六月底七月初才来执行。说什么工作忙都是借口，就是睡的比猪早，起的比猪晚。 本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意， 能把我们的多选单选功能很完美且很强大得双向绑定起来，实现多选、单选、任意选...根本不在话下。 但是，凡事都有一个但是！ 但是奈何这个项目设计稿的缘故，使用原生的表单组件是不可能使...
vue简单实现考试答题界面
最新发布
m0_68605510的博客
10-15 1587
前端Vue实现考试答题功能
vue 练习项目-答题
cyh
12-02 3938
功能如下： 主要是练习下vue-router和vuex的使用。码云地址
vue案例：实现自定义单选多选的答题功能
乔的博客
09-17 2544
https://www.cnblogs.com/padding1015/p/9265985.html
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值