考试增加对图片的支持

This commit is contained in:
daihh
2022-12-23 16:53:23 +08:00
parent c12a58558d
commit 9aa7d6bcf7

View File

@@ -11,8 +11,7 @@
<ul> <ul>
<li>考试时长: {{ testPaper.testDuration }}分钟</li> <li>考试时长: {{ testPaper.testDuration }}分钟</li>
<li>及格线: {{ testPaper.passLine }}</li> <li>及格线: {{ testPaper.passLine }}</li>
<li v-if="testPaper.entranceTime">开始时间: <li v-if="testPaper.entranceTime">开始时间:{{ testPaper.entranceTime }}</li>
{{ testPaper.entranceTime }}</li>
<li v-if="testPaper.times">尝试次数: {{ testPaper.times }}</li> <li v-if="testPaper.times">尝试次数: {{ testPaper.times }}</li>
<li v-if="testPaper.deadlineTime">结束时间: {{ testPaper.deadlineTime }}</li> <li v-if="testPaper.deadlineTime">结束时间: {{ testPaper.deadlineTime }}</li>
</ul> </ul>
@@ -72,7 +71,10 @@
<div v-if="judge.length > 0"> <div v-if="judge.length > 0">
<div class="question-type">判断题</div> <div class="question-type">判断题</div>
<div v-for="(question, i) in judge" :key="question.id" class="question-info"> <div v-for="(question, i) in judge" :key="question.id" class="question-info">
<div>
<div> {{ i + 1 }}{{ question.title }} {{question.defaultScore}}</div> <div> {{ i + 1 }}{{ question.title }} {{question.defaultScore}}</div>
<div v-if="question.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+question.images"/> </div>
</div>
<div> <div>
<div class="question-option"> <div class="question-option">
<el-radio v-model="question.userAnswer" label="true">正确</el-radio> <el-radio v-model="question.userAnswer" label="true">正确</el-radio>
@@ -86,12 +88,14 @@
<div v-if="single.length > 0"> <div v-if="single.length > 0">
<div class="question-type">单选题</div> <div class="question-type">单选题</div>
<div v-for="(question, i) in single" :key="question.id" class="question-info"> <div v-for="(question, i) in single" :key="question.id" class="question-info">
<div>
<div>{{ i + 1 + judge.length }}{{ question.title }}{{question.defaultScore}}</div> <div>{{ i + 1 + judge.length }}{{ question.title }}{{question.defaultScore}}</div>
<div v-if="question.images" class="qimg"><img class="qimg-fit" object-fit="contain" :src="imageBaseUrl+question.images"/> </div>
</div>
<div> <div>
<div class="question-option" v-for="(option, j) in question.optionList" :key="option.id"> <div class="question-option" v-for="(option, j) in question.optionList" :key="option.id">
<el-radio v-model="question.userAnswer":label="option.id"> <el-radio v-model="question.userAnswer":label="option.id">{{ numberToLetter(j+1) }}{{ option.content }}</el-radio>
{{ numberToLetter(j+1) }}{{ option.content }} <div v-if="option.images" class="qimg"><img class="qimg-fit" object-fit="contain" :src="imageBaseUrl+option.images"/></div>
</el-radio>
</div> </div>
</div> </div>
</div> </div>
@@ -100,12 +104,14 @@
<div class="question-type">多选题</div> <div class="question-type">多选题</div>
<div v-for="(question, i) in multiple" :key="question.id" class="question-info"> <div v-for="(question, i) in multiple" :key="question.id" class="question-info">
<div> <div>
{{ i + 1 + judge.length + single.length }}{{ question.title }}{{question.defaultScore}} <div> {{ i + 1 + judge.length + single.length }}{{ question.title }}{{question.defaultScore}}</div>
<div v-if="question.images"><img class="img-fit" :src="imageBaseUrl+question.images"/> </div>
</div> </div>
<div> <div>
<el-checkbox-group v-model="question.userAnswer"> <el-checkbox-group v-model="question.userAnswer">
<div class="question-option" v-for="(option, j) in question.optionList" :key="option.id"> <div class="question-option" v-for="(option, j) in question.optionList" :key="option.id">
<el-checkbox :label="option.id">{{ numberToLetter(j + 1) }}{{ option.content }}</el-checkbox> <el-checkbox :label="option.id">{{ numberToLetter(j + 1) }}{{ option.content }}</el-checkbox>
<div v-if="option.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+option.images"/></div>
</div> </div>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
@@ -126,7 +132,10 @@
<div v-if="judge.length > 0" style="margin-top:20px"> <div v-if="judge.length > 0" style="margin-top:20px">
<div class="question-type">判断题</div> <div class="question-type">判断题</div>
<div v-for="(question, i) in judge" :key="question.id" class="question-info"> <div v-for="(question, i) in judge" :key="question.id" class="question-info">
<div>
<div>{{ i + 1 }}{{ question.title }} {{question.defaultScore}}</div> <div>{{ i + 1 }}{{ question.title }} {{question.defaultScore}}</div>
<div v-if="question.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+question.images"/> </div>
</div>
<div> <div>
<div class="question-option"> <div class="question-option">
<el-radio v-model="question.userAnswer" disabled :label="true">正确</el-radio> <el-radio v-model="question.userAnswer" disabled :label="true">正确</el-radio>
@@ -143,10 +152,15 @@
<div v-if="single.length > 0"> <div v-if="single.length > 0">
<div class="question-type">单选题</div> <div class="question-type">单选题</div>
<div v-for="(question, i) in single" :key="question.id" class="question-info"> <div v-for="(question, i) in single" :key="question.id" class="question-info">
<div>
<div> {{ i + 1 + judge.length }}{{ question.title }}{{question.defaultScore}}</div> <div> {{ i + 1 + judge.length }}{{ question.title }}{{question.defaultScore}}</div>
<div v-if="question.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+question.images"/> </div>
</div>
<div> <div>
<div class="question-option" v-for="(option, j) in question.optionList" :key="option.id"> <div class="question-option" v-for="(option, j) in question.optionList" :key="option.id">
<el-radio disabled v-model="question.userAnswer" :label="option.id" >{{ numberToLetter(j+1) }}{{ option.content }}</el-radio> <el-radio disabled v-model="question.userAnswer" :label="option.id" >
{{ numberToLetter(j+1) }}{{ option.content }}</el-radio>
<div v-if="option.images" class="qimg"> <img class="qimg-fit":src="imageBaseUrl+option.images"/></div>
</div> </div>
</div> </div>
<p v-if="testPaper.showAnswer">正确答案:<span v-for="(item,a) in question.optionList" :key="a">{{item.isAnswer?numberToLetter(a+1):''}}</span></p> <p v-if="testPaper.showAnswer">正确答案:<span v-for="(item,a) in question.optionList" :key="a">{{item.isAnswer?numberToLetter(a+1):''}}</span></p>
@@ -157,13 +171,14 @@
<div class="question-type">多选题</div> <div class="question-type">多选题</div>
<div v-for="(question, i) in multiple" :key="question.id" class="question-info"> <div v-for="(question, i) in multiple" :key="question.id" class="question-info">
<div> <div>
{{ i + 1 + judge.length + single.length }}{{ question.title }}{{question.defaultScore}} <div> {{ i + 1 + judge.length + single.length }}{{ question.title }}{{question.defaultScore}}</div>
<div v-if="question.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+question.images"/> </div>
</div> </div>
<div> <div>
<el-checkbox-group v-model="question.userAnswer"> <el-checkbox-group v-model="question.userAnswer">
<div class="question-option" v-for="(option, j) in question.optionList" :key="option.id"> <div class="question-option" v-for="(option, j) in question.optionList" :key="option.id">
<el-checkbox disabled <el-checkbox disabled :label="option.id">{{ numberToLetter(j + 1) }}{{ option.content }}</el-checkbox>
:label="option.id">{{ numberToLetter(j + 1) }}{{ option.content }}</el-checkbox> <div v-if="option.images" class="qimg"> <img class="qimg-fit" :src="imageBaseUrl+option.images"/></div>
</div> </div>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
@@ -178,11 +193,15 @@
<el-dialog title="查看试卷" append-to-body :visible.sync="viewUserPapereShow" width="70%" custom-class="g-dialog"> <el-dialog title="查看试卷" append-to-body :visible.sync="viewUserPapereShow" width="70%" custom-class="g-dialog">
<div style="padding: 10px; font-size: 20px" class="upaper"> <div style="padding: 10px; font-size: 20px" class="upaper">
<div v-for="(ditem,didx) in paperDetailData" :key="didx" class="upaper-item"> <div v-for="(ditem,didx) in paperDetailData" :key="didx" class="upaper-item">
<div class="upaper-item-q">{{didx +1}}.{{getTypeName(ditem.type)}}{{ditem.title}}</div> <div class="upaper-item-q">
<div> {{didx +1}}.{{getTypeName(ditem.type)}}{{ditem.title}}</div>
<div v-if="ditem.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+ditem.images"/> </div>
</div>
<div class="upaper-item-opts" style="padding-left: 20px;"> <div class="upaper-item-opts" style="padding-left: 20px;">
<div v-for="(opt,optIdx) in ditem.optionList" :key="optIdx" class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}"> <div v-for="(opt,optIdx) in ditem.optionList" :key="optIdx" class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}">
<div> <div>
<div>{{numberToLetter(optIdx+1)}}, {{opt.content}}</div> <div>{{numberToLetter(optIdx+1)}}, {{opt.content}}</div>
<div v-if="opt.images" class="qimg"><img class="qimg-fit" :src="imageBaseUrl+opt.images"/> </div>
</div> </div>
<div> <div>
<span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; "></span> <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; "></span>
@@ -239,6 +258,7 @@ export default {
data() { data() {
return { return {
loading:0, loading:0,
imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
toScoreTow, toScoreTow,
examId:'',//考试的id examId:'',//考试的id
taskId:'',//考试任务的id taskId:'',//考试任务的id
@@ -966,7 +986,7 @@ export default {
} }
.test-info { .test-info {
// text-align: center; // text-align: center;
width: 500px; width: 600px;
margin: 0 auto; margin: 0 auto;
background: #eee; background: #eee;
border-radius: 16px; border-radius: 16px;
@@ -986,6 +1006,15 @@ export default {
margin: 0 20px; margin: 0 20px;
} }
} }
.qimg{
padding-left: 30px;
width:100%;
.qimg-fit{
width:100%;
object-fit:scale-down
}
}
.question-type { .question-type {
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;