本篇章主要讲述系统搭建逻辑 考试系统
资源
代码语言: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