Vue回炉重造之搭建考试答卷系统

2022-05-17 20:21:20 浏览数 (2)

本篇章主要讲述系统搭建逻辑 考试系统

资源

代码语言:javascript复制
Vue.js
Element UI
第三方数据接口
123

业务

代码语言:javascript复制
答题过程中,防止用户中途退出或者其他不可抗力因素阻碍答题,在每次选择都要请求下接口(接口状态为未交卷,只是保存用户的答题进度)。
选择答题区与答题卡必须同步,另外右侧的进度条也是同步的。
剩余时间的计算方法( begin.getTime()   duration * 1000 - serverTime.getTime()),
即开始考试时间 考试时间-服务器时间,首次进入开始考试时间为空。
考试时间到或者主动交卷都是置为已交卷。
12345

源码

Exam.vue

代码语言:javascript复制
<!-- 考试系统 -->
<template>
  <div class="exam">
    <div class="main">
      <div class="header-wrapper">
        <div class="inner">
          <el-row>
            <el-col :span="18">
              <div class="grid-content bg-purple ovf left">
                <div class="logo">
                  <router-link to="/">
                    <img src="../../assets/images/logo.png" />
                  </router-link>
                </div>
                <div class="index">{{title}}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple right ovf">
                <div class="esc" @click="esc">退出</div>
                <div class="name">{{name}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="mian-body">
        <div class="main-side">
          <div class="title">
            <div class="title_border"></div>
            <div class="title_content">答题卡</div>
          </div>
          <div class="card-content-list">
            <div class="card-content">
              <div class="card-content-title">单选题(共{{examinationData.length}}题,合计{{full_score}}分)</div>
              <div class="box-list">
                <div
                  class="box normal-box question_cbox"
                  v-for="(item,index) in examinationData"
                  :key="index"
                >
                  <div
                    class="checki"
                    :class="{'checked':radio[index]}"
                    v-show="!checkResult"
                  >{{index 1}}</div>
                  <div
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119116793

0 人点赞