Skip to content

X
xzksxt
Commit 684af648 by yangyang
Options

试题调整

parent 7c34dec1
Showing with 806 additions and 551 deletions
src/components/student/answer.vue
<!--考生答题界面--> <!--考生答题界面-->
<template> <template>
<div class="bg"> <div class="bg">
<div id="answer"> <div id="answer">
<!--顶部信息栏--> <!--顶部信息栏-->
<div class="top"> <div class="top">
<div class="item" style="display: flex;justify-content: space-between"> <div class="item" style="display: flex;justify-content: space-between">
<div style="display: flex;justify-content: flex-start"> <div style="display: flex;justify-content: flex-start">
<img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" /> <img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
<p class="titleClass" >{{examData.type}}-{{examData.source}}</p> <p class="titleClass">{{ examData.type }}-{{ examData.source }}</p>
<!-- <p >"啊刑侦百科”-线上学习系统</p>--> <!-- <p >"啊刑侦百科”-线上学习系统</p>-->
</div> </div>
<div class="itemTwo" > <div class="itemTwo">
<div style="display: flex; align-items: center; margin-left: auto;"> <div style="display: flex; align-items: center; margin-left: auto;">
<router-link <router-link :to="{
:to="{ path: '/scoreTable',
path: '/scoreTable', query: {
query: { cid: this.$route.query.cid,
cid: this.$route.query.cid, cname: this.$route.query.cname,
cname:this.$route.query.cname, role: this.$route.query.role
role:this.$route.query.role }
} }" class="router1" target="_blank">个人统计
}" class="router1" target="_blank">个人统计 </router-link>
</router-link> </div>
</div> <div style="display: flex; align-items: center; margin-left: auto;">
<div style="display: flex; align-items: center; margin-left: auto;"> <router-link :to="{ path: '/videoList' }" class="router1" target="_blank">视频学习
<router-link </router-link>
:to="{ path: '/videoList' }" class="router1" target="_blank">视频学习 </div>
</router-link> </div>
</div> </div>
</div> </div>
</div> <div class="flexarea">
</div>
<div class="flexarea">
<!--右边选择答题区--> <!--右边选择答题区-->
<transition name="slider-fade"> <transition name="slider-fade">
<div class="right"> <div class="right">
<div class="title"> <div class="title">
<p>{{title}}({{optionValue}})</p> <p>{{ title }}({{ optionValue }})</p>
<i class="iconfont icon-right auto-right"></i> <i class="iconfont icon-right auto-right"></i>
<span style="color: black;font-weight: bold">全卷共1题 <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span> <span style="color: black;font-weight: bold">全卷共5题 <i
<div style="color: black;font-weight: bold">({{userInfo.name}})</div> class="iconfont icon-time"></i>倒计时：<b>{{time}}</b></span>
</div> <div style="color: black;font-weight: bold">({{ userInfo.name }})</div>
<ul style="display: flex;margin-left: 30px"> </div>
<li v-for="item in reduceAnswer.img" style="overflow: visible;display: flex"> <ul style="display: flex;margin-left: 30px">
<img :src="item" alt="" <li v-for="item in reduceAnswer.img" style="overflow: visible;display: flex">
@click="magnifyPhoto(item)" <img :src="item" alt="" @click="magnifyPhoto(item)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: -5px"> style="width: 300px; height:300px; margin-left: 10px;margin-top: -5px">
</li> </li>
</ul> </ul>
<div class="content"> <div class="content">
<p class="topic">{{showQuestion}}</p> <p class="topic">{{ showQuestion }}</p>
<div v-if=" optionValue == '单选题'"> <div v-if="optionValue == '单选题'">
<el-radio-group v-model="radio[index]" @change="getChangeLabel" > <el-radio-group v-model="radio[index]" @change="getChangeLabel">
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-radio :label="1" :disabled='radioFlag' <el-radio :label="1" :disabled='radioFlagOne'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']"> :class="[isradio ? (this.reduceAnswer.rightAnswer === 'A' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">
{{showAnswer.answerA}} {{ showAnswer.answerA }}
</el-radio> </el-radio>
<ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Aimg" alt="" <img :src="showAnswer.Aimg" alt="" @click="magnifyPhoto(showAnswer.Aimg)"
@click="magnifyPhoto(showAnswer.Aimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-radio :label="2" :disabled='radioFlag' <el-radio :label="2" :disabled='radioFlagOne'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']"> :class="[isradio ? (this.reduceAnswer.rightAnswer === 'B' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">
{{showAnswer.answerB}} {{ showAnswer.answerB }}
</el-radio> </el-radio>
<ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Bimg" alt="" <img :src="showAnswer.Bimg" alt="" @click="magnifyPhoto(showAnswer.Bimg)"
@click="magnifyPhoto(showAnswer.Bimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-radio :label="3" :disabled='radioFlag' <el-radio :label="3" :disabled='radioFlagOne'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']"> :class="[isradio ? (this.reduceAnswer.rightAnswer === 'C' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">
{{showAnswer.answerC}} {{ showAnswer.answerC }}
</el-radio> </el-radio>
<ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Cimg" alt="" <img :src="showAnswer.Cimg" alt="" @click="magnifyPhoto(showAnswer.Cimg)"
@click="magnifyPhoto(showAnswer.Cimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-radio :label="4" :disabled='radioFlag' <el-radio :label="4" :disabled='radioFlagOne'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']"> :class="[isradio ? (this.reduceAnswer.rightAnswer === 'D' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">
{{showAnswer.answerD}} {{ showAnswer.answerD }}
</el-radio> </el-radio>
<ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Dimg" alt="" <img :src="showAnswer.Dimg" alt="" @click="magnifyPhoto(showAnswer.Dimg)"
@click="magnifyPhoto(showAnswer.Dimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
</el-radio-group> </el-radio-group>
<div class="analysis" id="topic1Right" style="display: none"> <div class="analysis" id="topic1Right" style="display: none">
<ul> <ul>
<li class="first "> <el-tag type="success">正确答案：</el-tag><span class="right">{{reduceAnswer.rightAnswer}}</span></li> <li class="first "> <el-tag type="success">正确答案：</el-tag><span
<li class="second"><el-tag>题目解析：</el-tag> class="right">{{ reduceAnswer.rightAnswer }}</span></li>
<div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无': reduceAnswer.analysis}}</div> <li class="second"><el-tag>题目解析：</el-tag>
<!-- <div class="li2right">{{reduceAnswer.analysis == null || reduceAnswer.analysis=='null' ? '强强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我们努力去外面人了吗；了米女方老大是哪里发你来撒文风给了你手里的你发了什么劳动法；饿了么人类；魔法师空间是你的看法不射控大部分考生蓝风铃看到看见菲尼克斯的缴纳罚款楼上的你发了看到了妇女四点零分': reduceAnswer.analysis}}</div>--> <div class="li2right">{{ (reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无' :
</li> reduceAnswer.analysis }}</div>
</ul> <!-- <div class="li2right">{{reduceAnswer.analysis == null || reduceAnswer.analysis=='null' ? '强强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我们努力去外面人了吗；了米女方老大是哪里发你来撒文风给了你手里的你发了什么劳动法；饿了么人类；魔法师空间是你的看法不射控大部分考生蓝风铃看到看见菲尼克斯的缴纳罚款楼上的你发了看到了妇女四点零分': reduceAnswer.analysis}}</div>-->
</li>
</ul>
</div>
</div> </div>
</div> <div v-if="optionValue == '多选题'">
<div v-if=" optionValue == '多选题'" > <el-checkbox-group v-model="checkList" @change="handleCheckboxChange">
<el-checkbox-group v-model="checkList" @change="handleCheckboxChange" > <!-- <div style="display: flex">-->
<!-- <div style="display: flex">--> <el-checkbox :label="1" :disabled='radioFlagMore'
<el-checkbox :label="1" :disabled='radioFlag' :class="ischeckBox ? (this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle') : 'noStyle'">
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> {{ showAnswer.answerA }}
{{showAnswer.answerA}}
</el-checkbox> </el-checkbox>
<ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Aimg" alt="" <img :src="showAnswer.Aimg" alt="" @click="magnifyPhoto(showAnswer.Aimg)"
@click="magnifyPhoto(showAnswer.Aimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-checkbox :label="2" :disabled='radioFlag' <el-checkbox :label="2" :disabled='radioFlagMore'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> :class="ischeckBox ? (this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle') : 'noStyle'">
{{showAnswer.answerB}} {{ showAnswer.answerB }}
</el-checkbox> </el-checkbox>
<ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Bimg" alt="" <img :src="showAnswer.Bimg" alt="" @click="magnifyPhoto(showAnswer.Bimg)"
@click="magnifyPhoto(showAnswer.Bimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display:flex;">--> <!-- <div style="display:flex;">-->
<el-checkbox :label="3" :disabled='radioFlag' <el-checkbox :label="3" :disabled='radioFlagMore'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> :class="ischeckBox ? (this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle') : 'noStyle'">
{{showAnswer.answerC}} {{ showAnswer.answerC }}
</el-checkbox> </el-checkbox>
<ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Cimg" alt="" <img :src="showAnswer.Cimg" alt="" @click="magnifyPhoto(showAnswer.Cimg)"
@click="magnifyPhoto(showAnswer.Cimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
<!-- <div style="display: flex">--> <!-- <div style="display: flex">-->
<el-checkbox :label="4" :disabled='radioFlag' <el-checkbox :label="4" :disabled='radioFlagMore'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> :class="ischeckBox ? (this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle') : 'noStyle'">
{{showAnswer.answerD}} {{ showAnswer.answerD }}
</el-checkbox> </el-checkbox>
<ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px"> <ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex"> <li style="overflow: visible;display: flex">
<img :src="showAnswer.Dimg" alt="" <img :src="showAnswer.Dimg" alt="" @click="magnifyPhoto(showAnswer.Dimg)"
@click="magnifyPhoto(showAnswer.Dimg)" style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li> </li>
</ul> </ul>
<!-- </div>--> <!-- </div>-->
</el-checkbox-group> </el-checkbox-group>
<el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button> <el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected"
@click="submitAnswer">提交</el-button>
<div class="analysis" id="topic1Right" style="display: none">
<ul> <div class="analysis" id="topic2Right" style="display: none">
<li class="first"> <ul>
<el-tag type="success">正确答案：</el-tag> <li class="first">
<span class="right">{{reduceAnswer.rightAnswer}}</span></li> <el-tag type="success">正确答案：</el-tag>
<li class="second"> <span class="right">{{ reduceAnswer.rightAnswer }}</span>
<el-tag>题目解析：</el-tag> </li>
<div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无': reduceAnswer.analysis}}</div> <li class="second">
</li> <el-tag>题目解析：</el-tag>
</ul> <div class="li2right">{{ (reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无' :
reduceAnswer.analysis }}</div>
</li>
</ul>
</div>
</div> </div>
</div> <div class="judge" v-if="optionValue == '判断题'">
<div class="judge" v-if=" optionValue == '判断题'"> <el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel">
<el-radio-group v-model="judgeAnswer[index]" @change="getJudgeLabel"> <el-radio :label="1" :disabled='radioFlagPd'
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='T' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">正确</el-radio> :class="[isradio ? (this.reduceAnswer.answer === 'T' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">正确</el-radio>
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.answer==='F' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">错误</el-radio> <el-radio :label="2" :disabled='radioFlagPd'
</el-radio-group> :class="[isradio ? (this.reduceAnswer.answer === 'F' ? 'checkboxTrueStyle' : 'radioFlaseStyle') : 'noStyle']">错误</el-radio>
<div class="analysis" id="topic3Right" style="display: none"> </el-radio-group>
<ul> <div class="analysis" id="topic3Right" style="display: none">
<li class="first"> <ul>
<el-tag type="success">正确答案：</el-tag> <li class="first">
<span class="right">{{pdtanswer}}</span></li> <el-tag type="success">正确答案：</el-tag>
<li class="second"> <span class="right">{{ reduceAnswer.answer === 'T' ? '正确' : '错误' }}</span>
<el-tag>题目解析：</el-tag> </li>
<div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '')? '无': reduceAnswer.analysis}}</div> <li class="second">
</li> <el-tag>题目解析：</el-tag>
</ul> <div class="li2right">{{ (reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无' :
reduceAnswer.analysis }}</div>
</li>
</ul>
</div>
</div> </div>
</div> </div>
<div class="operation">
<ul class="end">
<li @click="previous()"><i class="iconfont icon-previous"></i><span>上一题</span></li>
<li @click="commit()"><i class="iconfont icon-previous"></i><span>结束考试</span>
</li>
<li @click="next()"><span>下一题</span></li>
</ul>
</div>
</div> </div>
</div>
</transition> </transition>
</div> </div>
</div> </div>
<el-image <el-image style=" position: absolute;display: none" :preview-src-list="[dialogImageUrl]" ref="elImage">
style=" position: absolute;display: none"
:preview-src-list="[dialogImageUrl]"
ref="elImage"
>
</el-image> </el-image>
</div> </div>
</template> </template>
<script> <script>
import {mapState} from 'vuex' import { mapState } from 'vuex'
export default { export default {
data() { data() {
return { return {
pdtanswer:'', dialogImageUrl: "",//放大的图片
dialogImageUrl:"",//放大的图片 isradio: false, //默认为false 。。点击后改为true
isradio:false, //默认为false 。。点击后改为true ischeckBox: false, //默认为false 。。点击后改为true
ischeckBox:false, //默认为false 。。点击后改为true
startTime: null, //考试开始时间 startTime: null, //考试开始时间
endTime: null, //考试结束时间 endTime: null, //考试结束时间
time: null, //考试持续时间 time: '5', //考试持续时间
reduceAnswer:[], //vue官方不支持3层以上数据嵌套,如嵌套则会数据渲染出现问题,此变量直接接收3层嵌套时的数据。 reduceAnswer: [], //vue官方不支持3层以上数据嵌套,如嵌套则会数据渲染出现问题,此变量直接接收3层嵌套时的数据。
answerScore: 0, //答题总分数 answerScore: 0, //答题总分数
bg_flag: false, //已答标识符,已答改变背景色 bg_flag: false, //已答标识符,已答改变背景色
radioFlag: false, //已答标识符,已答改变背景色 radioFlag: false, //已答标识符,已答改变背景色 (判断)
radioFlagOne: false, //已答标识符,已答改变背景色(单选)
radioFlagMore: false, //已答标识符,已答改变背景色(多选)
radioFlagPd: false, //已答标识符,已答改变背景色(判断)
isFillClick: false, //选择题是否点击标识符 isFillClick: false, //选择题是否点击标识符
slider_flag: true, //左侧显示隐藏标识符 slider_flag: true, //左侧显示隐藏标识符
flag: false, //个人信息显示隐藏标识符 flag: false, //个人信息显示隐藏标识符
currentType: 1, //当前题型类型 1--选择题 2--填空题 3--判断题 currentType: 1, //当前题型类型 1--选择题 2--填空题 3--判断题
radio: [], //保存考生所有选择题的选项 radio: [], //保存考生所有选择题的选项
title: "请选择正确的选项", title: "请选择正确的选项",
optionValue:"",//题干类型 optionValue: "",//题干类型
index: 0, //全局index index: 0, //全局index
userInfo: { //用户信息 userInfo: { //用户信息
name: null, name: null,
...@@ -262,21 +267,30 @@ export default { ...@@ -262,21 +267,30 @@ export default {
part: null, //填空题的空格数量 part: null, //填空题的空格数量
fillAnswer: [[]], //二维数组保存所有填空题答案 fillAnswer: [[]], //二维数组保存所有填空题答案
judgeAnswer: [], //保存所有判断题答案 judgeAnswer: [], //保存所有判断题答案
topic1Answer: [], //学生选择题作答编号, topic1Answer: [], //学生选择题作答编号（单选）,
topic2Answer: [], //学生选择题作答编号(多选),
rightAnswer: '', rightAnswer: '',
roleflag: false, roleflag: false,
isOptionSelected:false,// 提交按钮 isOptionSelected: false,// 提交按钮
checkList:[] checkList: [],
end: ''
} }
}, },
created() { created() {
this.getUrlParams() this.getUrlParams()
this.getExamData() this.getExamData()
this.showTime() //获取当前时间
var date = new Date();
var now = date.getTime();
var fiveMinutesInMillis = 5 * 60 * 1000; // 五分钟的毫秒数
//设置截止时间
var endDate = new Date(now + fiveMinutesInMillis);
this.end = endDate.getTime();
this.countTime()
}, },
watch: { watch: {
optionValue(newValue) { optionValue(newValue) {
console.log(this.optionValue ) console.log(this.optionValue)
}, },
}, },
...@@ -288,20 +302,20 @@ export default { ...@@ -288,20 +302,20 @@ export default {
}, },
getTime(date) { //日期格式化 getTime(date) { //日期格式化
let year = date.getFullYear() let year = date.getFullYear()
let month= date.getMonth()+ 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1; let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day=date.getDate() < 10 ? "0" + date.getDate() : date.getDate(); let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours=date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes=date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds=date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接 // 拼接
return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds; return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}, },
getUrlParams() { //从路由上获取参数 getUrlParams() { //从路由上获取参数
this.userInfo.name = this.$route.query.cname this.userInfo.name = this.$route.query.cname
this.userInfo.id = this.$route.query.cid this.userInfo.id = this.$route.query.cid
let role = this.$route.query.role let role = this.$route.query.role
if(role == "0"){ if (role == "0") {
this.roleflag = true; this.roleflag = true;
} }
}, },
calcuScore() { //计算答题分数 calcuScore() { //计算答题分数
...@@ -312,96 +326,194 @@ export default { ...@@ -312,96 +326,194 @@ export default {
this.startTime = this.getTime(date) this.startTime = this.getTime(date)
let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号 let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号
this.$axios(`/api/exam/${examCode}`).then(res => { //通过examCode请求试卷详细信息 this.$axios(`/api/exam/${examCode}`).then(res => { //通过examCode请求试卷详细信息
this.examData = {...res.data.data} //获取考试详情 this.examData = { ...res.data.data } //获取考试详情
this.index = 0 this.index = 0
this.time = this.examData.totalScore //获取分钟数 //this.time = this.examData.totalScore //获取分钟数
let paperId = this.examData.paperId let paperId = this.examData.paperId
this.$axios(`/api/paper/${paperId}`).then(res => { //通过paperId获取试题题目信息 this.$axios(`/api/paper/${paperId}`).then(res => { //通过paperId获取试题题目信息
this.topic = {...res.data} this.topic = { ...res.data }
let reduceAnswer = this.getRandomData(this.topic[1], this.topic[2], this.topic[3]) //获取随机一道题 let reduceAnswer;
console.log(reduceAnswer) //let reduceAnswer = this.getRandomData(this.topic[1], this.topic[2], this.topic[3]) //获取第一道题
if (this.topic[1].length > 0) {
reduceAnswer = this.topic[1][0];
}
if (this.topic[3].length > 0) {
reduceAnswer = this.topic[3][0];
}
console.log('题' + reduceAnswer)
this.reduceAnswer = reduceAnswer this.reduceAnswer = reduceAnswer
if (reduceAnswer.oneOrMore=='1'){ if (reduceAnswer.oneOrMore == '1') {
this.optionValue = "单选题" this.optionValue = "单选题"
this.showAnswer ={ this.currentType = 1
answerA:reduceAnswer.answerA, this.showAnswer = {
Aimg:reduceAnswer.aimg, answerA: reduceAnswer.answerA,
answerB:reduceAnswer.answerB, Aimg: reduceAnswer.aimg,
Bimg:reduceAnswer.bimg, answerB: reduceAnswer.answerB,
answerC:reduceAnswer.answerC, Bimg: reduceAnswer.bimg,
Cimg:reduceAnswer.cimg, answerC: reduceAnswer.answerC,
answerD:reduceAnswer.answerD, Cimg: reduceAnswer.cimg,
Dimg:reduceAnswer.dimg, answerD: reduceAnswer.answerD,
Dimg: reduceAnswer.dimg,
} }
}else if (reduceAnswer.oneOrMore=='2'){ } else if (reduceAnswer.oneOrMore == '2') {
this.optionValue = "多选题" this.optionValue = "多选题"
this.showAnswer ={ this.currentType = 1
answerA:reduceAnswer.answerA, this.showAnswer = {
Aimg:reduceAnswer.aimg, answerA: reduceAnswer.answerA,
answerB:reduceAnswer.answerB, Aimg: reduceAnswer.aimg,
Bimg:reduceAnswer.bimg, answerB: reduceAnswer.answerB,
answerC:reduceAnswer.answerC, Bimg: reduceAnswer.bimg,
Cimg:reduceAnswer.cimg, answerC: reduceAnswer.answerC,
answerD:reduceAnswer.answerD, Cimg: reduceAnswer.cimg,
Dimg:reduceAnswer.dimg, answerD: reduceAnswer.answerD,
Dimg: reduceAnswer.dimg,
} }
}else if (!reduceAnswer.oneOrMore) { } else if (!reduceAnswer.oneOrMore) {
reduceAnswer.oneOrMore = '3' reduceAnswer.oneOrMore = '3'
this.currentType = 3
this.optionValue = '判断题' this.optionValue = '判断题'
if (reduceAnswer.answer =='T'){
this.pdtanswer = "正确"
}else {
this.pdtanswer = "错误"
}
} }
this.showQuestion = reduceAnswer.question this.showQuestion = reduceAnswer.question
}) })
}) })
}, },
/* getExamData() { //获取当前试卷所有信息 /* getExamData() { //获取当前试卷所有信息
let date = new Date() let date = new Date()
this.startTime = this.getTime(date) this.startTime = this.getTime(date)
let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号 let examCode = this.$route.query.examCode //获取路由传递过来的试卷编号
this.$axios(`/api/exam/${examCode}`).then(res => { //通过examCode请求试卷详细信息 this.$axios(`/api/exam/${examCode}`).then(res => { //通过examCode请求试卷详细信息
this.examData = { ...res.data.data} //获取考试详情 this.examData = { ...res.data.data} //获取考试详情
this.index = 0 this.index = 0
this.time = this.examData.totalScore //获取分钟数 this.time = this.examData.totalScore //获取分钟数
let paperId = this.examData.paperId let paperId = this.examData.paperId
this.$axios(`/api/paper/${paperId}`).then(res => { //通过paperId获取试题题目信息 this.$axios(`/api/paper/${paperId}`).then(res => { //通过paperId获取试题题目信息
this.topic = {...res.data} this.topic = {...res.data}
console.log(res) console.log(res)
console.log(res.data) console.log(res.data)
let reduceAnswer = this.topic[1][this.index] let reduceAnswer = this.topic[1][this.index]
this.reduceAnswer = reduceAnswer this.reduceAnswer = reduceAnswer
console.log(this.reduceAnswer) console.log(this.reduceAnswer)
let keys = Object.keys(this.topic) //对象转数组 let keys = Object.keys(this.topic) //对象转数组
// console.log(this.topic[1][0]) //获取第一个题干类型 // console.log(this.topic[1][0]) //获取第一个题干类型
this.optionValue = this.topic[3][0].oneOrMore this.optionValue = this.topic[3][0].oneOrMore
keys.forEach(e => { keys.forEach(e => {
let data = this.topic[e] let data = this.topic[e]
this.topicCount.push(data.length) this.topicCount.push(data.length)
let currentScore = 0 let currentScore = 0
for(let i = 0; i< data.length; i++) { //循环每种题型,计算出总分 for(let i = 0; i< data.length; i++) { //循环每种题型,计算出总分
currentScore += data[i].score currentScore += data[i].score
} }
this.score.push(currentScore) //把每种题型总分存入score this.score.push(currentScore) //把每种题型总分存入score
})
let len = this.topicCount[1]
let father = []
for(let i = 0; i < len; i++) { //根据填空题数量创建二维空数组存放每道题答案
let children = [null,null,null,null]
father.push(children)
}
this.fillAnswer = father
let dataInit = this.topic[3]
this.number = 1
this.showQuestion = dataInit[0].question
this.showAnswer = dataInit[0]
})
}) })
let len = this.topicCount[1] },*/
let father = [] change(index) { //选择题
for(let i = 0; i < len; i++) { //根据填空题数量创建二维空数组存放每道题答案 let Data = this.topic[1]
let children = [null,null,null,null] let reduceAnswer = this.topic[1][this.index]
father.push(children) this.reduceAnswer = reduceAnswer
this.isFillClick = true
this.currentType = 1
let len = this.topic[1].length
if (this.index < len) {
if (this.index < 0) {
this.index = this.topic[1].length - 1
this.change(this.index)
}
if (Data[this.index].oneOrMore == 1) {
this.optionValue = '单选题';
var topic1Right = document.getElementById("topic1Right");// 答案以=及解析
if (topic1Right != null && topic1Right != undefined) {
if (this.topic1Answer[this.index] != undefined) {
topic1Right.style.display = "block";
this.radioFlagOne = true
this.isradio = true
} else {
topic1Right.style.display = "none";
this.radioFlagOne = false
this.isradio = false
} }
this.fillAnswer = father }
let dataInit = this.topic[3] } else if (Data[this.index].oneOrMore == 2) {
this.number = 1 this.optionValue = '多选题';
this.showQuestion = dataInit[0].question var topic2Right = document.getElementById("topic2Right");// 答案以=及解析
this.showAnswer = dataInit[0] if(topic2Right != null && topic2Right != undefined){
}) if (this.topic2Answer[this.index] != undefined) {
}) topic2Right.style.display = "block";
},*/ this.radioFlagMore = true
this.ischeckBox = true
this.checkList = this.topic2Answer[this.index];
} else {
topic2Right.style.display = "none";
this.radioFlagMore = false
this.ischeckBox = false
this.checkList = [];
}
}
}
console.log(`总长度${len}`)
console.log(`当前index:${index}`)
this.title = "请选择正确的选项"
// console.log(Data)
this.showQuestion = Data[this.index].question //获取题目信息
this.showAnswer = Data[this.index]
this.number = this.index + 1
} else if (this.index >= len) {
this.index = 0
this.change(this.index)
}
},
judge(index) { //判断题
debugger
let reduceAnswer = this.topic[3][this.index]
this.reduceAnswer = reduceAnswer
let len = this.topic[3].length
this.currentType = 3
this.index = index
var topic3Right = document.getElementById("topic3Right");// 答案以=及解析
if (topic3Right != null && topic3Right != undefined) {
if (this.judgeAnswer[this.index] != undefined) {
topic3Right.style.display = "block";
this.radioFlagPd = true
this.isradio = true
} else {
topic3Right.style.display = "none";
this.radioFlagPd = false
this.isradio = false
}
}
if (this.index < len) {
if (this.index < 0) {
this.index = this.topic[3].length - 1
this.judge(this.index)
} else {
console.log(`总长度${len}`)
console.log(`当前index:${this.index}`)
this.title = "请作出正确判断"
let Data = this.topic[3]
this.showQuestion = Data[index].question //获取题目信息
this.optionValue = '判断题'
this.number = this.index + 1
}
} else if (this.index >= len) {
this.index = 0
this.judge(this.index)
}
},
//获取随机题 //获取随机题
getRandomData(multiQuestionRes ,fillQuestionsRes , judgeQuestionRes ) { getRandomData(multiQuestionRes, fillQuestionsRes, judgeQuestionRes) {
let availableLists = []; let availableLists = [];
if (multiQuestionRes.length > 0) { if (multiQuestionRes.length > 0) {
...@@ -429,28 +541,27 @@ export default { ...@@ -429,28 +541,27 @@ export default {
}, },
//多选题点击显示提交按钮 //多选题点击显示提交按钮
handleCheckboxChange(val) { handleCheckboxChange(val) {
debugger
console.log('多选中的值为：', val); console.log('多选中的值为：', val);
this.radio[this.index] = val //当前选择的序号 if (val) {
//点击提交禁止选择
if(val) {
this.isOptionSelected = true; this.isOptionSelected = true;
/* //点击提交禁止选择
this.radioFlag= true*/
} }
/* 保存学生答题选项 */
// this.topic1Answer[this.index] = val
}, },
//多选点击提交的时候再触发 //多选点击提交的时候再触发
submitAnswer(){ submitAnswer() {
//答案和解析 //答案和解析
var topic1Right = document.getElementById("topic1Right"); var topic2Right = document.getElementById("topic2Right");
topic1Right.style.display = "block"; topic2Right.style.display = "block";
//提交的按钮 //提交的按钮
this.isOptionSelected = false this.isOptionSelected = false
//点击提交禁止选择 //点击提交禁止选择
this.radioFlag = true this.radioFlagMore = true
this.ischeckBox = true this.ischeckBox = true
this.commit() //保存学生答题选项
this.topic2Answer[this.index] = this.checkList
//this.commit()
// console.log(this.topic1Answer[this.index]) // console.log(this.topic1Answer[this.index])
// this.radio[this.index] = this.topic1Answer[this.index] // this.radio[this.index] = this.topic1Answer[this.index]
// const dasd = this.radio[this.index] // const dasd = this.radio[this.index]
...@@ -468,35 +579,61 @@ export default { ...@@ -468,35 +579,61 @@ export default {
getChangeLabel(val) { getChangeLabel(val) {
this.radio[this.index] = val //当前选择的序号 this.radio[this.index] = val //当前选择的序号
console.log(val) console.log(val)
if(val) { if (val) {
var topic1Right = document.getElementById("topic1Right"); var topic1Right = document.getElementById("topic1Right");
topic1Right.style.display = "block"; topic1Right.style.display = "block";
this.radioFlag = true this.radioFlagOne = true
this.isradio = true
} }
/* 保存学生答题选项 */ /* 保存学生答题选项 */
this.topic1Answer[this.index] = val this.topic1Answer[this.index] = val
this.commit() //this.commit()
}, },
//获取判断题作答选项 //获取判断题作答选项
getJudgeLabel(val) { getJudgeLabel(val) {
this.judgeAnswer[this.index] = val this.judgeAnswer[this.index] = val
if(val) { if (val) {
var topic3Right = document.getElementById("topic3Right"); var topic3Right = document.getElementById("topic3Right");
topic3Right.style.display = "block"; topic3Right.style.display = "block";
this.radioFlag = true this.radioFlagPd = true
this.isradio = true
} }
this.commit() //this.commit()
}, },
previous() { //上一题
debugger
this.index--
switch (this.currentType) {
case 1:
this.change(this.index)
break
case 3:
this.judge(this.index)
break
}
},
next() { //下一题
this.index++
switch (this.currentType) {
case 1:
this.change(this.index)
break
case 3:
this.judge(this.index)
break
}
},
commit() { //答案提交计算分数 commit() { //答案提交计算分数
/* 计算选择题总分 */ /* 计算选择题总分 */
let finalScore = 0 //分数 let finalScore = 0 //分数
if (this.optionValue=="单选题"){ if (this.optionValue == "单选题"||this.optionValue == "") {
// 单选分数计算
let topic1Answer = this.topic1Answer let topic1Answer = this.topic1Answer
topic1Answer.forEach((element,index) => { //循环每道选择题根据选项计算分数 topic1Answer.forEach((element, index) => { //循环每道选择题根据选项计算分数
let right = null let right = null
if(element != null) { if (element != null) {
switch(element) { //选项1,2,3,4 转换为 "A","B","C","D" switch (element) { //选项1,2,3,4 转换为 "A","B","C","D"
case 1: case 1:
right = "A" right = "A"
break break
...@@ -509,17 +646,20 @@ export default { ...@@ -509,17 +646,20 @@ export default {
case 4: case 4:
right = "D" right = "D"
} }
if(right == this.reduceAnswer.rightAnswer) { // 当前选项与正确答案对比 if (right == this.topic[1][index].rightAnswer) { // 当前选项与正确答案对比
finalScore = this.reduceAnswer.score // 计算总分数 finalScore += this.topic[1][index].score // 计算总分数
} }
this.isradio = true this.isradio = true
} }
}) })
} else if (this.optionValue == "多选题") { } else if (this.optionValue == "多选题") {
// 多选分数计算
let topic2Answer = this.topic2Answer
topic2Answer.forEach((element, index) => { //循环每道选择题根据选项计算分数
//正确答案 //正确答案
const arr = this.reduceAnswer.rightAnswer.split(", "); const arr = this.topic[1][index].rightAnswer.split(", ");
//选中的 //选中的
const letterArray = this.checkList.map(number => String.fromCharCode(64 + parseInt(number, 10)).toUpperCase()); const letterArray = element.map(number => String.fromCharCode(64 + parseInt(number, 10)).toUpperCase());
console.log(arr) console.log(arr)
console.log(letterArray) console.log(letterArray)
// 对两个数组进行排序，并将其转换为字符串 // 对两个数组进行排序，并将其转换为字符串
...@@ -529,171 +669,210 @@ export default { ...@@ -529,171 +669,210 @@ export default {
console.log(str2) console.log(str2)
if (str1 === str2) { if (str1 === str2) {
console.log("回答正确") console.log("回答正确")
finalScore = this.reduceAnswer.score finalScore += this.topic[1][index].score
} }
}else if (this.optionValue=="判断题"){ })
this.isradio = true } else if (this.optionValue == "判断题") {
let pitch = this.judgeAnswer[this.index] // let pitch = this.judgeAnswer[this.index]
console.log("当前选中的 = "+ pitch) // console.log("当前选中的 = "+ pitch)
if (pitch=='1'){ // if (pitch=='1'){
pitch = "T" // pitch = "T"
}else { // }else {
pitch = "F" // pitch = "F"
} // }
console.log(pitch) // console.log(pitch)
if (pitch === this.reduceAnswer.answer){ // if (pitch === this.reduceAnswer.answer){
finalScore = this.reduceAnswer.score // finalScore = this.reduceAnswer.score
} // }
let topic3Answer = this.judgeAnswer
topic3Answer.forEach((element, index) => {
let right = null
switch (element) {
case 1:
right = "T"
break
case 2:
right = "F"
}
if (right == this.topic[3][index].answer) { // 当前选项与正确答案对比
finalScore += this.topic[3][index].score // 计算总分数
}
})
} }
console.log(`目前总分${finalScore}`) console.log(`目前总分${finalScore}`)
if(this.time != 0) { if (this.time != 0) {
console.log("交卷") console.log("交卷")
let date = new Date() let date = new Date()
this.endTime = this.getTime(date) this.endTime = this.getTime(date)
let answerDate = this.endTime.substr(0,10) let answerDate = this.endTime.substr(0, 10)
this.$axios({ this.$axios({
url: '/api/score', url: '/api/score',
method: 'post', method: 'post',
data: { data: {
examCode: this.examData.examCode, //考试编号 examCode: this.examData.examCode, //考试编号
studentId: this.userInfo.id, //学号 studentId: this.userInfo.id, //学号
subject: this.examData.source, //课程名称 subject: this.examData.source, //课程名称
etScore: finalScore, //答题成绩 etScore: finalScore, //答题成绩
answerDate: answerDate, //答题日期 answerDate: answerDate, //答题日期
} }
}).then(res => { }).then(res => {
if(res.data.code == 200) { if (res.data.code == 200) {
console.log("关闭当前页面") this.$router.push({
} path: '/studentScore', query: {
}).catch(() => { score: finalScore,
startTime: this.startTime,
endTime: this.endTime,
cid: this.$route.query.cid,
cname: this.$route.query.cname,
role: this.$route.query.role
}
})
console.log("出总分数")
}
}).catch(() => {
console.log("继续答题") console.log("继续答题")
}) })
} }
}, },
showTime() { //倒计时 countTime() {//倒计时
setInterval(() => { //获取当前时间
this.time -= 1 var date = new Date();
if(this.time == 10) { var now = date.getTime();
this.$message({ //设置截止时间
showClose: true, //时间差
type: 'error', var leftTime = this.end - now;
message: '考生注意,考试时间还剩10分钟！！！' //定义变量 d,h,m,s保存倒计时的时间
}) if (leftTime >= 0) {
if(this.time == 0) { let m = Math.floor(leftTime / 1000 / 60 % 60);
console.log("考试时间已到,强制交卷。") let s = Math.floor(leftTime / 1000 % 60);
} this.time = m + '分' + s + '秒'
} //递归每秒调用countTime方法，显示动态时间效果
},1000 * 60) setTimeout(this.countTime, 1000);
}, }else{
console.log("考试时间已到,强制交卷。")
this.commit();
}
}
}, },
computed:mapState(["isPractice"]) computed: mapState(["isPractice"])
} }
</script> </script>
<style lang="less"> <style lang="less">
.titleClass{ .titleClass {
font-family: 'youshe'; font-family: 'youshe';
color: white; color: white;
font-size: 40px; font-size: 40px;
margin-right: -15px; margin-right: -15px;
margin-left: -10px; margin-left: -10px;
//不换行 //不换行
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* 在 756px 或以下的屏幕上应用这些样式 */
@media (max-width: 756px) {
.itemTwo{
display: flex;
flex-direction: column;
margin-top: -10px;
margin-bottom: -15px;
}
.titleClass{
width: 70vw;
}
}
/* 在 756px 以上的屏幕上应用这些样式 */ /* 在 756px 或以下的屏幕上应用这些样式 */
@media (min-width: 757px) { @media (max-width: 756px) {
.itemTwo{ .itemTwo {
display: flex; display: flex;
} flex-direction: column;
} margin-top: -10px;
.jinhuiClass{
height: 80px;
margin-top: -15px;
margin-bottom: -15px; margin-bottom: -15px;
margin-left: -10px;
}
@font-face {
font-family: "youshe";
src: url("../../assets/fonts/YouSheBiaoTiHei-2.ttf");
}
/*放大的图片*/
.el-image-viewer__img{
height: 500px;
}
.submitAnswerClass{
/*background-color: red;*/
margin-top: 15px;
} }
.noStyle{
.titleClass {
width: 70vw;
} }
//对号 }
.checkboxTrueStyle::before{
content: ""; /* 在 756px 以上的屏幕上应用这些样式 */
position: absolute; @media (min-width: 757px) {
top: -14px; .itemTwo {
left: 3px; display: flex;
width: 12px;
height: 25px;
border: 2px solid transparent;
border-bottom: 5px solid #2776df;
border-right: 5px solid #2776df;
transform: rotate(45deg);
z-index: 2;
}
//多选题错号
.checkboxFlaseStyle::before{
content: "×";
position: absolute;
top: -3px;
left: -8px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
}
//判断题错号
.radioFlaseStyle::before{
content: "×";
position: absolute;
top: -19px;
left: -8px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
} }
}
.jinhuiClass {
height: 80px;
margin-top: -15px;
margin-bottom: -15px;
margin-left: -10px;
}
@font-face {
font-family: "youshe";
src: url("../../assets/fonts/YouSheBiaoTiHei-2.ttf");
}
/*放大的图片*/
.el-image-viewer__img {
height: 500px;
}
.submitAnswerClass {
/*background-color: red;*/
margin-top: 15px;
}
.noStyle {}
//对号
.checkboxTrueStyle::before {
content: "";
position: absolute;
top: -14px;
left: 3px;
width: 12px;
height: 25px;
border: 2px solid transparent;
border-bottom: 5px solid #2776df;
border-right: 5px solid #2776df;
transform: rotate(45deg);
z-index: 2;
}
//多选题错号
.checkboxFlaseStyle::before {
content: "×";
position: absolute;
top: -3px;
left: -8px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
}
.iconfont.icon-time { //判断题错号
.radioFlaseStyle::before {
content: "×";
position: absolute;
top: -19px;
left: -8px;
color: #f50808;
font-size: 30px;
text-shadow:
-1px -1px 0 #f50808,
1px -1px 0 #f50808,
-1px 1px 0 #f50808,
1px 1px 0 #f50808;
z-index: 2;
}
.iconfont.icon-time {
color: #2776df; color: #2776df;
margin: 0px 6px 0px 20px; margin: 0px 6px 0px 20px;
} }
.analysis { .analysis {
margin-top: 20px; margin-top: 20px;
//正确选项后边的字体 //正确选项后边的字体
.right { .right {
color: black; color: black;
...@@ -704,23 +883,26 @@ export default { ...@@ -704,23 +883,26 @@ export default {
border-radius: 4px; border-radius: 4px;
margin-left: 20px; margin-left: 20px;
} }
ul li:nth-child(2) { ul li:nth-child(2) {
margin: 90px 0px; margin: 90px 0px;
display: flex; display: flex;
} }
/*最后一个li标签*/ /*最后一个li标签*/
/* ul li:nth-child(3) { /* ul li:nth-child(3) {
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
}*/ }*/
.first{ .first {
.el-tag{ .el-tag {
background-color: #2776df; background-color: #2776df;
color:white; color: white;
} }
} }
.second{
.second {
align-items: center; align-items: center;
/*align-items: flex-end;*/ /*align-items: flex-end;*/
/*position: absolute;*/ /*position: absolute;*/
...@@ -728,13 +910,14 @@ export default { ...@@ -728,13 +910,14 @@ export default {
margin-right: 10px; margin-right: 10px;
margin-top: 30px; margin-top: 30px;
.el-tag{ .el-tag {
background-color: #2776df; background-color: #2776df;
color:white; color: white;
} }
//题目解析后边的样式 //题目解析后边的样式
.li2right{ .li2right {
margin-left: 25px; margin-left: 25px;
margin-right: 20px; margin-right: 20px;
letter-spacing: 5px; letter-spacing: 5px;
...@@ -745,8 +928,10 @@ export default { ...@@ -745,8 +928,10 @@ export default {
/*border: 1px solid #2776df;*/ /*border: 1px solid #2776df;*/
color: black; color: black;
font-weight: bold; font-weight: bold;
max-height: 250px; /* 设置固定高度，根据需要调整 */ max-height: 250px;
overflow: auto; /* 添加滚动条 */ /* 设置固定高度，根据需要调整 */
overflow: auto;
/* 添加滚动条 */
} }
} }
...@@ -758,6 +943,7 @@ export default { ...@@ -758,6 +943,7 @@ export default {
bottom: 0px; bottom: 0px;
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
} }
.mark { .mark {
position: absolute; position: absolute;
width: 4px; width: 4px;
...@@ -768,31 +954,39 @@ export default { ...@@ -768,31 +954,39 @@ export default {
top: 0px; top: 0px;
left: 22px; left: 22px;
} }
.border { .border {
position: relative; position: relative;
border: 1px solid #FF90AA !important; border: 1px solid #FF90AA !important;
} }
.bg { .bg {
background-color: #5188b8 !important; background-color: #5188b8 !important;
} }
.fill .el-input { .fill .el-input {
display: inline-flex; display: inline-flex;
width: 150px; width: 150px;
margin-left: 20px; margin-left: 20px;
.el-input__inner { .el-input__inner {
border: 1px solid transparent; border: 1px solid transparent;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding-left: 20px; padding-left: 20px;
} }
} }
/* slider过渡效果 */ /* slider过渡效果 */
.slider-fade-enter-active { .slider-fade-enter-active {
transition: all .3s ease; transition: all .3s ease;
} }
.slider-fade-leave-active { .slider-fade-leave-active {
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
} }
.slider-fade-enter, .slider-fade-leave-to {
.slider-fade-enter,
.slider-fade-leave-to {
transform: translateX(-100px); transform: translateX(-100px);
opacity: 0; opacity: 0;
} }
...@@ -802,20 +996,22 @@ export default { ...@@ -802,20 +996,22 @@ export default {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgb(39, 118, 223);
border-radius: 50%; border-radius: 50%;
/*width: 50px;*/ /*width: 50px;*/
height: 50px; height: 50px;
color: #fff; color: red;
} }
.operation .end li { .operation .end li {
cursor: pointer; cursor: pointer;
margin: 0 100px; margin: 0 100px;
color: #fff; color: red;
border: 2px solid red;
border-radius: 10px;
} }
.operation { .operation {
background-color: #2776df;
border-radius: 4px; border-radius: 4px;
padding: 10px 0px; padding: 10px 0px;
margin-right: 10px; margin-right: 10px;
...@@ -824,13 +1020,16 @@ export default { ...@@ -824,13 +1020,16 @@ export default {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
} }
.operation .end { .operation .end {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 22px; font-size: 25px;
} }
.content .number { .content .number {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
...@@ -841,9 +1040,11 @@ export default { ...@@ -841,9 +1040,11 @@ export default {
border-radius: 4px; border-radius: 4px;
margin-right: 4px; margin-right: 4px;
} }
.content { .content {
padding: 0px 20px; padding: 0px 20px;
} }
//题干的样式 //题干的样式
.content .topic { .content .topic {
padding: 20px 0px; padding: 20px 0px;
...@@ -855,6 +1056,7 @@ export default { ...@@ -855,6 +1056,7 @@ export default {
line-height: 1.5; line-height: 1.5;
letter-spacing: 5px; letter-spacing: 5px;
} }
.right .content { .right .content {
margin: 10px; margin: 10px;
margin-left: 0px; margin-left: 0px;
...@@ -862,9 +1064,10 @@ export default { ...@@ -862,9 +1064,10 @@ export default {
font-size: 24px; font-size: 24px;
/*font-family: cursive;*/ /*font-family: cursive;*/
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
letter-spacing:1px;//字间距 letter-spacing: 1px; //字间距
} }
//判断题的选项 //判断题的选项
.content .el-radio-group label { .content .el-radio-group label {
color: black; color: black;
...@@ -874,11 +1077,11 @@ export default { ...@@ -874,11 +1077,11 @@ export default {
line-height: 2; line-height: 2;
} }
.el-radio{ .el-radio {
.el-radio__label{ .el-radio__label {
font-size: 25px; font-size: 25px;
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
white-space:normal; white-space: normal;
line-height: 25px; line-height: 25px;
} }
...@@ -886,30 +1089,32 @@ export default { ...@@ -886,30 +1089,32 @@ export default {
.content .el-radio-group { .content .el-radio-group {
display: flex; display: flex;
flex-direction:column; flex-direction: column;
} }
.el-radio__input{ .el-radio__input {
vertical-align: baseline; vertical-align: baseline;
} }
/*前边的小圆圈*/ /*前边的小圆圈*/
.el-radio__input.is-disabled.is-checked .el-radio__inner{ .el-radio__input.is-disabled.is-checked .el-radio__inner {
background-color:black; background-color: black;
border: 1px solid black; border: 1px solid black;
margin-right: 10px; margin-right: 10px;
} }
/*选项*/
.el-radio__input.is-checked+.el-radio__label {
color: white;
background-color: rgb(39, 118, 223);
/*right: 50px;*/
border-radius: 4px;
border-style: solid;
border-width: 0px;
box-sizing: border-box;
padding: 2px;
}
/*选项*/
.el-radio__input.is-checked + .el-radio__label {
color: white;
background-color: rgb(39, 118, 223);
/*right: 50px;*/
border-radius: 4px;
border-style: solid;
border-width: 0px;
box-sizing: border-box;
padding: 2px;
}
/*title的样式*/ /*title的样式*/
.right .title p { .right .title p {
color: black; color: black;
...@@ -917,20 +1122,24 @@ export default { ...@@ -917,20 +1122,24 @@ export default {
margin-left: 20px; margin-left: 20px;
font-size: 25px; font-size: 25px;
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
letter-spacing:2px letter-spacing: 2px
} }
.flexarea { .flexarea {
display: flex; display: flex;
padding-top: 90px; padding-top: 90px;
} }
.flexarea .right { .flexarea .right {
flex: 1; flex: 1;
} }
.auto-right { .auto-right {
margin-left: auto; margin-left: auto;
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
} }
.right .title { .right .title {
margin-right: 10px; margin-right: 10px;
/*padding-right: 30px;*/ /*padding-right: 30px;*/
...@@ -943,9 +1152,11 @@ export default { ...@@ -943,9 +1152,11 @@ export default {
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
} }
.clearfix { .clearfix {
clear: both; clear: both;
} }
.l-bottom .final { .l-bottom .final {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
...@@ -962,15 +1173,18 @@ export default { ...@@ -962,15 +1173,18 @@ export default {
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
} }
#answer .left .item { #answer .left .item {
padding: 0px; padding: 0px;
font-size: 24px; font-size: 24px;
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
} }
.l-bottom { .l-bottom {
border-radius: 4px; border-radius: 4px;
} }
.l-bottom .item p { .l-bottom .item p {
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 10px; margin-top: 10px;
...@@ -978,15 +1192,18 @@ export default { ...@@ -978,15 +1192,18 @@ export default {
margin-left: 10px; margin-left: 10px;
letter-spacing: 2px; letter-spacing: 2px;
} }
.l-bottom .item li { .l-bottom .item li {
width: 15%; width: 15%;
margin-left: 5px; margin-left: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.l-bottom .item { .l-bottom .item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.l-bottom .item ul { .l-bottom .item ul {
width: 100%; width: 100%;
margin-bottom: -8px; margin-bottom: -8px;
...@@ -994,6 +1211,7 @@ export default { ...@@ -994,6 +1211,7 @@ export default {
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
} }
.l-bottom .item ul li a { .l-bottom .item ul li a {
position: relative; position: relative;
justify-content: center; justify-content: center;
...@@ -1010,6 +1228,7 @@ export default { ...@@ -1010,6 +1228,7 @@ export default {
font-family: 'SimSun', sans-serif; font-family: 'SimSun', sans-serif;
} }
.left .l-top { .left .l-top {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
...@@ -1018,23 +1237,28 @@ export default { ...@@ -1018,23 +1237,28 @@ export default {
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.left { .left {
width: 260px; width: 260px;
height: 100%; height: 100%;
margin: 10px 10px 0px 10px; margin: 10px 10px 0px 10px;
} }
.left .l-top li:nth-child(2) a { .left .l-top li:nth-child(2) a {
border: 1px solid #eee; border: 1px solid #eee;
} }
.left .l-top li:nth-child(3) a { .left .l-top li:nth-child(3) a {
background: url('../../assets/img/dtbj.png')center top / cover no-repeat; background: url('../../assets/img/dtbj.png')center top / cover no-repeat;
background-color: #b6bccdd1 !important; background-color: #b6bccdd1 !important;
border: none; border: none;
} }
.left .l-top li:nth-child(4) a { .left .l-top li:nth-child(4) a {
position: relative; position: relative;
border: 1px solid #eee; border: 1px solid #eee;
} }
.left .l-top li:nth-child(4) a::before { .left .l-top li:nth-child(4) a::before {
width: 4px; width: 4px;
height: 4px; height: 4px;
...@@ -1045,6 +1269,7 @@ export default { ...@@ -1045,6 +1269,7 @@ export default {
top: 0px; top: 0px;
left: 16px; left: 16px;
} }
.left .l-top li { .left .l-top li {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -1052,6 +1277,7 @@ export default { ...@@ -1052,6 +1277,7 @@ export default {
flex-direction: column; flex-direction: column;
color: #fff; color: #fff;
} }
.left .l-top li a { .left .l-top li a {
display: inline-block; display: inline-block;
padding: 10px; padding: 10px;
...@@ -1059,6 +1285,7 @@ export default { ...@@ -1059,6 +1285,7 @@ export default {
background-color: #fff; background-color: #fff;
border: 1px solid #FF90AA; border: 1px solid #FF90AA;
} }
#answer .top { #answer .top {
/*background-color: rgb(39, 118, 223);*/ /*background-color: rgb(39, 118, 223);*/
/*background-color: #dc4b4b;*/ /*background-color: #dc4b4b;*/
...@@ -1067,15 +1294,18 @@ export default { ...@@ -1067,15 +1294,18 @@ export default {
position: fixed; position: fixed;
width: 100%; width: 100%;
} }
#answer .item { #answer .item {
display: flex; display: flex;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px; padding-top: 20px;
font-size: 23px; font-size: 23px;
} }
#answer .top .item li:nth-child(1) { #answer .top .item li:nth-child(1) {
margin-right: 10px; margin-right: 10px;
} }
//名称 //名称
#answer .top .item li:nth-child(3) { #answer .top .item li:nth-child(3) {
position: relative; position: relative;
...@@ -1085,27 +1315,32 @@ export default { ...@@ -1085,27 +1315,32 @@ export default {
align-items: center; align-items: center;
color: white; color: white;
} }
//个人统计 //个人统计
#answer .top .item li:nth-child(4) { #answer .top .item li:nth-child(4) {
font-weight: bold; font-weight: bold;
display: flex; display: flex;
align-items: center; align-items: center;
} }
//视频
#answer .top .item li:nth-child(5){ //视频
display: flex; #answer .top .item li:nth-child(5) {
align-items: center; display: flex;
justify-content: center; align-items: center;
margin-left: 10px; justify-content: center;
} margin-left: 10px;
}
#answer { #answer {
position:relative; position: relative;
padding-bottom: 30px; padding-bottom: 30px;
} }
.icon20 { .icon20 {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
} }
.item .msg { .item .msg {
padding: 10px 15px; padding: 10px 15px;
border-radius: 4px; border-radius: 4px;
...@@ -1113,22 +1348,27 @@ export default { ...@@ -1113,22 +1348,27 @@ export default {
right: -30px; right: -30px;
color: #6c757d; color: #6c757d;
position: absolute; position: absolute;
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0, 0, 0, .15);
background-color: #fff; background-color: #fff;
} }
.item .msg p { .item .msg p {
font-size: 20px; font-size: 20px;
width: 200px; width: 200px;
text-align: left; text-align: left;
} }
.router1 { .router1 {
color: white; color: white;
font-weight: bold; font-weight: bold;
margin-right: 5px; margin-right: 5px;
border: 2px solid white; border: 2px solid white;
border-radius: 10px; border-radius: 10px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
//背景 //背景
.bg { .bg {
position: fixed; position: fixed;
...@@ -1138,82 +1378,96 @@ export default { ...@@ -1138,82 +1378,96 @@ export default {
height: 100%; height: 100%;
background: url('../../assets/img/beij2.jpg')center top / cover no-repeat; background: url('../../assets/img/beij2.jpg')center top / cover no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
max-height: 100%; /* 设置固定高度，根据需要调整 */ max-height: 100%;
overflow: auto; /* 添加滚动条 */ /* 设置固定高度，根据需要调整 */
overflow: auto;
/* 添加滚动条 */
} }
/*多选的*/ /*多选的*/
.el-checkbox__input .el-checkbox__inner { .el-checkbox__input .el-checkbox__inner {
width: 16px; width: 16px;
height: 16px; height: 16px;
border-radius: 100%; border-radius: 100%;
border: 1px solid black; border: 1px solid black;
/*background-color: #fff;*/ /*background-color: #fff;*/
} }
//多选选中的样式
.el-checkbox__label{
color: black;
font-weight: bold;
font-size: 25px !important;
font-family: 'SimSun', sans-serif;
white-space:normal;
line-height: 25px !important;
}
.content .el-checkbox-group{
display: flex;
flex-direction:column;
}
.content .el-checkbox-group label {
color: #fff;
margin: 10px 0px;
}
.el-checkbox__input{
vertical-align: baseline;
}
.el-checkbox__input.is-checked .el-checkbox__inner{
background-color:black;
/*border-color:#E4E7ED;*/
margin-right: 10px;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
background-color:black;
/*border-color:white;*/
margin-right: 10px;
}
//多选点击后未选中的样式
.el-checkbox__input.is-checked+.el-checkbox__label{
color: black;
font-weight: bold;
background-color: rgb(39, 118, 223);
/*right: 50px;*/
border-radius: 4px;
border-style: solid;
border-width: 0px;
box-sizing: border-box;
padding: 2px;
} //多选选中的样式
//判断和单选选中后选项的样式 .el-checkbox__label {
.el-radio__input.is-disabled+span.el-radio__label{ color: black;
font-weight: bold;
font-size: 25px !important;
font-family: 'SimSun', sans-serif;
white-space: normal;
line-height: 25px !important;
}
.content .el-checkbox-group {
display: flex;
flex-direction: column;
}
.content .el-checkbox-group label {
color: #fff;
margin: 10px 0px;
}
.el-checkbox__input {
vertical-align: baseline;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: black;
/*border-color:#E4E7ED;*/
margin-right: 10px;
}
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: black;
/*border-color:white;*/
margin-right: 10px;
}
//多选点击后未选中的样式
.el-checkbox__input.is-checked+.el-checkbox__label {
color: black; color: black;
font-weight: bold; font-weight: bold;
background-color: rgb(39, 118, 223);
/*right: 50px;*/
border-radius: 4px;
border-style: solid;
border-width: 0px;
box-sizing: border-box;
padding: 2px;
} }
//判断和单选选中后选项的样式
.el-radio__input.is-disabled+span.el-radio__label {
color: black;
font-weight: bold;
}
//多选提交后选项的样式 //多选提交后选项的样式
.el-checkbox__input.is-disabled+span.el-checkbox__label{ .el-checkbox__input.is-disabled+span.el-checkbox__label {
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
//选项前边的小圆圈未选中 //选项前边的小圆圈未选中
.el-radio__inner { .el-radio__inner {
border: 1px solid black; border: 1px solid black;
} }
//选项前边的小圆圈选中 单选和判断 //选项前边的小圆圈选中 单选和判断
.el-radio__input.is-disabled .el-radio__inner{ .el-radio__input.is-disabled .el-radio__inner {
border: 1px solid black; border: 1px solid black;
background: black ; background: black;
} }
//多选前面的圆点
.el-checkbox__input.is-disabled .el-checkbox__inner{ //多选前面的圆点
border: 1px solid black; .el-checkbox__input.is-disabled .el-checkbox__inner {
background: black; border: 1px solid black;
} background: black;
</style> }</style>
src/components/student/answerScore.vue
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<ul class="time"> <ul class="time">
<li class="start"><span>开始时间</span> <span>{{startTime}}</span></li> <li class="start"><span>开始时间</span> <span>{{startTime}}</span></li>
<li class="end"><span>结束时间</span> <span>{{endTime}}</span></li> <li class="end"><span>结束时间</span> <span>{{endTime}}</span></li>
<div class="final" @click="over()">结束考试</div> <!-- <div class="final" @click="over()">结束考试</div> -->
</ul> </ul>
</div> </div>
</div> </div>
...@@ -146,8 +146,9 @@ export default { ...@@ -146,8 +146,9 @@ export default {
flex-direction: column; flex-direction: column;
.name { .name {
font-size: 26px; font-size: 26px;
color: #fff; color: red;
font-weight: 500; font-weight: 500;
font-family:'youshe';
} }
.description { .description {
font-size: 14px; font-size: 14px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment