devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

在线考试（ vue2.x + elemen-ui 可升级 vue3 ）_vue答题卡组件

作者：爱喝兽奶帝天荒 | 2024-06-29 04:45:06

赞

踩

vue答题卡组件
1、技术栈：vue2.x 、elemen-ui、JavaScript ( 这里css  命名用 拼音 不要在意细节 )
（1）HYML结构：
  1. <template>
  2.   <div class="page">
  3.     <el-row class="test-paper">
  4.       <el-col class="answer-sheet">
  5.         <el-card style="min-height: 800px" shadow="hover">
  6.           <h4>序号：</h4>
  7.           <div class="all-serial-number">
  8.             <el-button
  9.               @click="handleLeft(index)"
  10.               v-for="(item, index) in examDetails"
  11.               :key="index"
  12.               class="serial-number"
  13.               size="mini"
  14.               :class="{
  15.                 'yi-zuo-da': item.da.length != 0,
  16.               }"
  17.             >
  18.               {{ index + 1 }}
  19.             </el-button>
  20.           </div>
  21.           <div>
  22.             <el-button @click="getSubmit" type="primary" plain>提 交</el-button>
  23.           </div>
  24.         </el-card>
  25.       </el-col>
  26.       <el-col class="test-questions">
  27.         <el-card style="min-height: 800px" shadow="hover">
  28.           <div
  29.             @click="getChenge"
  30.             v-for="(shiTi, index) in examDetails"
  31.             :key="index"
  32.             :id="'id' + index"
  33.             class="exam-details"
  34.             :class="{ 'skip-style': index === navgatorIndex }"
  35.           >
  36.             <!-- isShiTi -->
  37.             <!-- 试题 -->
  38.             <div class="shi-ti-style">
  39.               <!-- 题目 -->
  40.               <div>{{ index + 1 }}、{{ shiTi.timu }}</div>
  41.               <!-- 选项 -->
  42.               <div class="xuan-xiang-style">
  43.                 <!-- 单选 -->
  44.                 <el-radio-group
  45.                   @input="gegegegeg(shiTi, index)"
  46.                   v-if="shiTi.type == '单选'"
  47.                   v-model="shiTi.da"
  48.                 >
  49.                   <el-radio
  50.                     v-for="(dan, danIdnex) in shiTi.xuanxiang"
  51.                     :label="danIdnex"
  52.                     :key="danIdnex"
  53.                   >
  54.                     {{ dan }}
  55.                   </el-radio>
  56.                 </el-radio-group>
  57.                 <!-- 多选 -->
  58.                 <el-checkbox-group
  59.                   @change="gegegegeg(shiTi, index)"
  60.                   v-else-if="shiTi.type == '多选'"
  61.                   v-model="shiTi.da"
  62.                 >
  63.                   <!-- label绑定答案的值,可以绑定索引index,也可以绑定答案内容times -->
  64.                   <el-checkbox
  65.                     v-for="(duo, duoIndex) in shiTi.xuanxiang"
  66.                     :label="duoIndex"
  67.                     :key="duoIndex"
  68.                   >
  69.                     {{ duo }}
  70.                   </el-checkbox>
  71.                 </el-checkbox-group>
  72.                 <!-- 简单 -->
  73.                 <div v-else>
  74.                   <el-input
  75.                     type="textarea"
  76.                     :rows="2"
  77.                     placeholder="请输入内容"
  78.                     v-model="shiTi.da"
  79.                   />
  80.                 </div>
  81.               </div>
  82.             </div>
  83.             <!-- 标记 -->
  84.             <div class="mark-style">
  85.               <el-tooltip
  86.                 :content="shiTi.mark ? '已标记' : '可标记'"
  87.                 placement="right"
  88.                 effect="light"
  89.               >
  90.                 <a
  91.                   @click="getChangMark(index)"
  92.                   class="el-icon-star-on"
  93.                   :class="{ mark: shiTi.mark }"
  94.                 />
  95.               </el-tooltip>
  96.             </div>
  97.           </div>
  98.         </el-card>
  99.       </el-col>
  100.     </el-row>
  101.   </div>
  102. </template>
（2）script 代码
  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       examDetails: [
  6.         {
  7.           timu: "《山行》是描绘了( C )的景色。",
  8.           type: "单选",
  9.           xuanxiang: ["A、春天", "B、夏天", "C、秋天", " D、冬天"],
  10.           // 答案存放字符串
  11.           da: "",
  12.           mark: false,
  13.         },
  14.         {
  15.           timu: "劝君更尽一杯酒，西出阳关无故人。”出自( B )的名句。",
  16.           type: "单选",
  17.           xuanxiang: ["A、李白", "B、王维", "C、王昌龄", "D、杜牧"],
  18.           // 答案存放字符串
  19.           da: "",
  20.           mark: false,
  21.         },
  22.         {
  23.           timu: "把“春风”比作“剪刀”的是哪首诗?( C )",
  24.           type: "单选",
  25.           xuanxiang: [
  26.             "A、《忆江南》",
  27.             "B、《滁州西涧》",
  28.             "C、《咏柳》",
  29.             "D、《游园不值》",
  30.           ],
  31.           // 答案存放字符串
  32.           da: "",
  33.           mark: false,
  34.         },
  35.         {
  36.           timu: "横看成岭侧成峰，远近高低各不一样。”诗中写的名胜是( D )。",
  37.           type: "单选",
  38.           xuanxiang: ["A、泰山", "B、华山", "C、黄山", "D、庐山"],
  39.           // 答案存放字符串
  40.           da: "",
  41.           mark: false,
  42.         },
  43.         {
  44.           timu: "解落三秋叶，能开二月花。过江千尺浪，入竹万竿斜。”这首诗写的是( B )。",
  45.           type: "单选",
  46.           xuanxiang: ["A、花", "B、风", "C、竹", "D、水"],
  47.           // 答案存放字符串
  48.           da: "",
  49.           mark: false,
  50.         },
  51.         {
  52.           timu: "以下哪些诗句出自白居易的作品？( A、C、E )",
  53.           type: "多选",
  54.           xuanxiang: [
  55.             "A、春风又绿江南岸",
  56.             "B、白日依山尽",
  57.             "C、人生自古谁无死",
  58.             "D、大漠孤烟直",
  59.             "E、举杯邀明月",
  60.             "F、月落乌啼霜满天",
  61.           ],
  62.           // 答案存放数组
  63.           da: [0, 2, 4],
  64.           mark: false,
  65.         },
  66.         {
  67.           timu: "以下哪些是唐代诗人？( A、B、C、E、F )",
  68.           type: "多选",
  69.           xuanxiang: [
  70.             "A、杜甫",
  71.             "B、苏轼",
  72.             "C、白居易",
  73.             "D、李清照",
  74.             "E、辛弃疾",
  75.             "F、陆游",
  76.           ],
  77.           // 答案存放数组
  78.           da: [],
  79.           mark: false,
  80.         },
  81.         {
  82.           timu: "以下哪些诗人被称为“唐三百首”？( A、B、C )",
  83.           type: "多选",
  84.           xuanxiang: [
  85.             "A、李白",
  86.             "B、杜甫",
  87.             "C、白居易",
  88.             "D、苏轼",
  89.             "E、王之涣",
  90.           ],
  91.           // 答案存放数组
  92.           da: [],
  93.           mark: false,
  94.         },
  95.         {
  96.           timu: "以下哪些诗人被称为“宋词四大家”？( A、B、C、D  )",
  97.           type: "多选",
  98.           xuanxiang: [
  99.             "A、李清照",
  100.             "B、辛弃疾",
  101.             "C、苏轼",
  102.             "D、杜牧",
  103.             "E、杨万里",
  104.           ],
  105.           // 答案存放数组
  106.           da: [],
  107.           mark: false,
  108.         },
  109.         {
  110.           timu: "具有诗仙、诗圣、诗鬼称号的的诗人分别是谁?",
  111.           type: "问答",
  112.           xuanxiang: ["李白 杜甫 李贺"],
  113.           // 答案存放字符串
  114.           da: "",
  115.           mark: false,
  116.         },
  117.         {
  118.           timu: "在苏轼写的《惠崇春江晚景》这首中，让我们明白了有一种味美但内脏有毒的鱼叫什么?",
  119.           type: "问答",
  120.           xuanxiang: ["河豚"],
  121.           // 答案存放字符串
  122.           da: "",
  123.           mark: false,
  124.         },
  125.       ],
  126.       navgatorIndex: null,
  127.       listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
  128.       isSkip: true,
  129.       isShiTi: false,
  130.     };
  131.   },
  132.   mounted() {
  133.     let timeId;
  134.     window.addEventListener(
  135.       "scroll",
  136.       () => {
  137.         // 页面滚动停止100毫秒后才会执行下面的函数。
  138.         clearTimeout(timeId);
  139.         timeId = setTimeout(() => {
  140.           this.scrollToTop();
  141.           console.log("执行完成");
  142.         }, 100);
  143.       },
  144.       true
  145.     );
  146.   },
  147.   methods: {
  148.     // 点击导航菜单，页面滚动到指定位置
  149.     handleLeft(index) {
  150.       this.navgatorIndex = index;
  151.       this.$el.querySelector(`#id${index}`).scrollIntoView({
  152.         top: "100px",
  153.         behavior: "smooth", // 平滑过渡
  154.         block: "center", // 上边框与视窗顶部平齐。默认值
  155.       });
  156.       this.listBoxState = false;
  157.       //定时器
  158.       let timeId;
  159.       clearTimeout(timeId);
  160.       timeId = setTimeout(() => {
  161.         this.listBoxState = true;
  162.       }, 200);
  163.     },
  164.     // 监听页面元素滚动，改变导航栏选中
  165.     scrollToTop() {
  166.       // dom滚动位置
  167.       var scrollTop =
  168.         window.pageYOffset ||
  169.         document.documentElement.scrollTop ||
  170.         document.body.scrollTop;
  171.       if (this.listBoxState) {
  172.         if (this.listBox != undefined) {
  173.           //作用是点击导航栏时，延迟这里执行。
  174.           this.listBox.map((v, i) => {
  175.             // 获取监听元素距离视窗顶部距离
  176.             var offsetTop = document.getElementById(`id${i}`).offsetTop;
  177.             // 获取监听元素本身高度
  178.             var scrollHeight = document.getElementById(`id${i}`).scrollHeight;
  179.             if (
  180.               scrollTop >= offsetTop &&
  181.               scrollTop <= offsetTop + scrollHeight
  182.             ) {
  183.               // 导航栏背景色选中
  184.               this.navgatorIndex = i;
  185.             }
  186.           });
  187.         }
  188.       }
  189.     },
  190.     // 标记 或者 收藏
  191.     getChangMark(num) {
  192.       this.examDetails[num].mark = !this.examDetails[num].mark;
  193.     },
  194.     gegegegeg(val, num) {
  195.       console.log(val);
  196.     },
  197.     // 跳转样式 取消
  198.     getChenge() {
  199.       this.navgatorIndex = null;
  200.     },
  201.     // 提交
  202.     getSubmit() {
  203.       console.log(this.examDetails);
  204.       let list = this.examDetails.map((item) => {
  205.         return item.da;
  206.       });
  207.       console.log(list);
  208.       this.$message({
  209.         message: JSON.stringify(list),
  210.         type: "success",
  211.       });
  212.       // 0代表A 1代表B 2代表C 3代表D 4代表E 5代表F 6代表G 7代表H 8代表I 9代表J 10代表K... （ 可以用字符串 或者数组的 方法 将至 替换； 回显同理 实例中有一个回显的实例 ）
  213.       // 1、 其中判断题可以 用A、B 或者用 对、错 需要单独处理。
  214.       // 2、简单题也需要 单独处理。
  215.       // [0, 0, 0, 0, 0, Array(1), Array(1), Array(1), Array(1), '12', '1212']
  216.     },
  217.   },
  218. };
  219. </script>
（3）style样式
  1.  
  2. <style scoped>
  3. /* 骨架 */
  4. .page {
  5.   padding: 10px;
  6.   overflow-x: scroll;
  7.   overflow-y: scroll;
  8. }
  9. .test-paper {
  10.   width: 100%;
  11.   min-width: 1100px;
  12.   min-height: 800px;
  13. }
  14. ::v-deep .el-card__body {
  15.   padding: 10px;
  16.   height: calc(100vh - 110px);
  17.   overflow-y: scroll;
  18. }
  19. .answer-sheet {
  20.   display: inline-block;
  21.   margin-right: 10px;
  22.   width: 330px;
  23. }
  24. .test-questions {
  25.   display: inline-block;
  26.   width: calc(100% - 340px);
  27. }
  28. </style>
  29.  
  30. <style scoped>
  31. /* 具体样式：答题卡样式 */
  32. /* .all-serial-number */
  33. .serial-number {
  34.   margin: 8px;
  35.   width: 45px;
  36.   height: 45px;
  37.   font-size: 16px;
  38. }
  39. /* 具体样式：试题样式 */
  40. .exam-details {
  41.   margin-bottom: 10px;
  42.   padding: 10px;
  43.   border: 2px solid pink;
  44.   border-radius: 5px;
  45.   height: 150px;
  46.   background: #fff;
  47. }
  48. /* 指定 跳转 题目样式 */
  49. .skip-style {
  50.   border: 2px solid yellow;
  51. }
  52. .shi-ti-style {
  53.   display: inline-block;
  54.   width: calc(100% - 30px);
  55. }
  56. /* 选项样式 */
  57. .xuan-xiang-style {
  58.   margin-top: 20px;
  59. }
  60. /* 标记样式 */
  61. .mark-style {
  62.   float: right;
  63.   text-align: center;
  64.   width: 30px;
  65. }
  66. /* 标记样式 */
  67. .el-icon-star-on {
  68.   font-size: 25px;
  69. }
  70. /* 标记样式 */
  71. .mark {
  72.   color: #f7ba2a;
  73. }
  74. </style>
  75. <style scoped>
  76. /* 联动样式 */
  77. .yi-zuo-da {
  78.   color: #fff;
  79.   background: dodgerblue;
  80. }
  81. </style>

2、实例演示视频：

在线考试在线实例 操作详情视频

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/768302
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号