|
|
|
|
@ -30,7 +30,8 @@ |
|
|
|
|
<template v-for="(ques, j) in item.examQuestions"> |
|
|
|
|
<li |
|
|
|
|
v-if="!sheetStatus || (sheetStatus === 1 && !ques.answered) || (sheetStatus === 2 && ques.answered) || (sheetStatus === 3 && ques.partAnswer) || (sheetStatus === 4 && ques.sign)" |
|
|
|
|
:key="j" :class="{ answered: ques.answered, partAnswer: ques.partAnswer }"> |
|
|
|
|
:key="j" :class="{ answered: ques.answered, partAnswer: ques.partAnswer }" |
|
|
|
|
@click="scrollToQues(ques)"> |
|
|
|
|
<img v-if="ques.sign" class="tag" src="@/assets/images/tag-active.svg" alt=""> |
|
|
|
|
{{ j + 1 }} |
|
|
|
|
</li> |
|
|
|
|
@ -47,7 +48,7 @@ |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<ul v-if="form.paperOutline" class="ques-wrap"> |
|
|
|
|
<ul v-if="form.paperOutline" class="ques-wrap" id="quesWrap"> |
|
|
|
|
<li v-for="(item, i) in form.paperOutline" :key="i"> |
|
|
|
|
<div class="outline"> |
|
|
|
|
{{ arabicToChinese(i + 1) }}、{{ item.questionTypeName }}（本题共{{ item.questionNum }}小题，共{{ |
|
|
|
|
@ -56,11 +57,11 @@ |
|
|
|
|
@click="item.shrink = !item.shrink"> |
|
|
|
|
</div> |
|
|
|
|
<div :class="['ques', { hide: item.shrink }]"> |
|
|
|
|
<div v-for="(ques, j) in item.examQuestions" :key="j" class="item"> |
|
|
|
|
<div v-for="(ques, j) in item.examQuestions" :key="j" class="item" :id="'ques' + ques.id"> |
|
|
|
|
<div class="stem-wrap"> |
|
|
|
|
<span class="label">{{ j + 1 }} / {{ item.questionNum }}</span> |
|
|
|
|
<span class="label">{{ item.questionTypeName }}</span> |
|
|
|
|
<div :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div> |
|
|
|
|
<div class="stem" :id="'stem' + ques.id" v-html="getQuesStem(ques)"></div> |
|
|
|
|
<p v-if="item.questionType !== 'fill_blank'">（{{ ques.score }}分）</p> |
|
|
|
|
<img class="tag" :src="require('@/assets/images/' + (ques.sign ? 'tag-active' : 'tag') + '.svg')" alt="" |
|
|
|
|
@click="ques.sign = ques.sign ? 0 : 1"> |
|
|
|
|
@ -259,6 +260,26 @@ export default { |
|
|
|
|
progressFormat (e) { |
|
|
|
|
return this.totalAnswered + '/' + this.form.questionCount |
|
|
|
|
}, |
|
|
|
|
scrollToSmooth (position, duration) { |
|
|
|
|
let startTime = Date.now() |
|
|
|
|
|
|
|
|
|
function scroll () { |
|
|
|
|
let now = Date.now() |
|
|
|
|
let progress = Math.min(1, (now - startTime) / duration) |
|
|
|
|
document.querySelector('#quesWrap').scrollTo(0, position * progress) |
|
|
|
|
|
|
|
|
|
if (progress < 1) { |
|
|
|
|
window.requestAnimationFrame(scroll) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
window.requestAnimationFrame(scroll) |
|
|
|
|
}, |
|
|
|
|
// 答题卡题目点击滚动 |
|
|
|
|
scrollToQues (e) { |
|
|
|
|
const el = document.querySelector('#ques' + e.id) |
|
|
|
|
el && this.scrollToSmooth(el.offsetTop - document.querySelector('#quesWrap').offsetTop, 200) |
|
|
|
|
}, |
|
|
|
|
// 答题卡筛选 |
|
|
|
|
filterStatus (e) { |
|
|
|
|
this.sheetStatus = this.sheetStatus === e ? '' : e |
|
|
|
|
@ -418,6 +439,11 @@ export default { |
|
|
|
|
line-height: 35px; |
|
|
|
|
color: #505050; |
|
|
|
|
border: 1px solid #d3d3d3; |
|
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
opacity: .9; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.answered { |
|
|
|
|
color: #fff; |
|
|
|
|
@ -533,7 +559,7 @@ export default { |
|
|
|
|
|
|
|
|
|
.stem-wrap { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
align-items: baseline; |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -552,10 +578,15 @@ export default { |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 1; |
|
|
|
|
color: $main-color; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
border: 1px solid; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.stem { |
|
|
|
|
max-width: calc(100% - 191px); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.fill-input { |
|
|
|
|
width: 100px; |
|
|
|
|
height: 28px; |
|
|
|
|
|
