You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
zhishifufei_php/application/merchant/view/questions/test_paper/answers.php

286 lines
9.1 KiB

10 months ago
{extend name="public/container"}
{block name="head"}
<style>
.first {
margin: 30px;
font-weight: bold;
font-size: 22px;
text-align: center;
}
.second {
margin: 30px 0;
font-weight: bold;
font-size: 14px;
}
.third {
margin: 30px 0;
font-weight: bold;
font-size: 14px;
}
.third table {
width: 100%;
}
.third td {
padding: 5px;
font-weight: normal;
}
.third table,
.third td {
border: 1px solid #333;
}
.fourth {
margin: 30px 0;
}
.fourth>div:first-child {
margin: 0 0 15px;
font-weight: bold;
font-size: 14px;
}
.fourth .userinfo .title {
margin: 0 0 10px;
}
.fourth .userinfo .content>div {
padding: 5px;
margin: 0 0 15px;
background: #efefef;
}
.question {
margin: 0 0 15px;
}
.question .content {
margin: 5px 0;
}
.question li {
margin: 5px 0;
}
.question li>div:nth-child(2) {
margin: 5px 0;
}
.result {
display: inline-block;
color: #0092db;
}
.question li label {
display: block;
}
.question li input {
margin: 0 5px 0 0;
}
.question li input:checked {
color: #999;
}
.btn {
display: inline-block;
padding: 5px 10px;
border: 1px solid #0092DC;
border-radius: 5px;
color: #0092DC;
}
.layui-icon-radio {
color: #0092db;
}
</style>
{/block}
{block name="content"}
<div v-cloak class="layui-fluid" id="app">
<div class="layui-card">
<div class="layui-card-body">
<div class="btn" @click="print">打印</div>
<div class="first">{{ title }}</div>
<div class="second">
<div>答题人</div>
<div>UID:{{ information.uid }} | 昵称:{{ information.nickname }}</div>
</div>
<div class="third" v-if="type==2">
<div>成绩单</div>
<div>
<table>
<tr>
<td>得分:{{ score }} | 总分:{{ total_score }}</td>
<td>答对题数: {{ yes_questions }} | 总题数:{{ item_number }}</td>
</tr>
</table>
</div>
</div>
<div class="fourth">
<div>答题解析</div>
<div v-for="(test, num) in testPaperAnswers" :key="test.type" class="question">
<div class="title">
{{ num ? (num === 1 ? '二' : '三') : '一' }}、{{ test.name }}(每题{{ test.questions.length && test.questions[0].single_score }}分,共{{ test.questions.length }}题)
</div>
<div class="content">
<ul v-if="test.questions.length">
<li v-for="(question, index) in test.questions" :key="index">
<div>{{ index + 1 }}.{{ question.stem }}</div>
<img v-if="question.image" :src="question.image" width="380" height="266">
<div v-if="question.is_img">
<label v-for="(option, key) in question.option" :key="key">
<i :class="!question.user_answer || question.user_answer.indexOf(key) == -1 ? 'layui-icon-circle' : 'layui-icon-radio'" class="layui-icon"></i>
{{ key }}.<img :src="option" width="205" height="144">
</label>
</div>
<div v-else>
<label v-for="(option, key) in question.option" :key="key">
<i :class="!question.user_answer || question.user_answer.indexOf(key) == -1 ? 'layui-icon-circle' : 'layui-icon-radio'" class="layui-icon"></i>
{{ key }}.{{ option }}
</label>
</div>
<div class="result">回答{{ question.is_correct === 2 ? '正确' : '错误' }}</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
require(['vue'], function (Vue) {
var uid =<?= $uid ?>;
var record_id =<?= $record_id ?>;
var test_id =<?= $test_id ?>;
var type =<?= $type ?>;
var single_sort =<?= $single_sort ?>;
var many_sort =<?= $many_sort ?>;
var judge_sort =<?= $judge_sort ?>;
var testPaperAnswers = [
{
name: '单选题',
type: 1,
sort: single_sort,
questions: []
},
{
name: '多选题',
type: 2,
sort: many_sort,
questions: []
},
{
name: '判断题',
type: 3,
sort: judge_sort,
questions: []
}
].sort(function (a, b) {
return b.sort - a.sort;
});
new Vue({
el: '#app',
data: {
testPaperAnswers: [],
title: '',
type: type,
total_score: 0,
item_number: 0,
score: 0,
yes_questions: 0,
information: {}
},
created: function () {
this.getUserInformation();
if (type == 2) {
this.getUserAchievement();
}
for (var i = 1; i <= 3; i++) {
this.getTestPaperAnswers(i);
}
},
methods: {
// 信息
getUserInformation: function () {
var vm = this;
layList.baseGet(layList.U({
a: 'getUserInformation',
p: {
uid: uid
}
}), function (res) {
vm.information = res.data;
});
},
// 成绩
getUserAchievement: function () {
var vm = this;
layList.baseGet(layList.U({
a: 'getUserAchievement',
p: {
uid: uid,
test_id: test_id,
record_id: record_id
}
}), function (res) {
vm.title = res.data.title;
vm.total_score = res.data.total_score;
vm.item_number = res.data.item_number;
vm.score = res.data.score;
vm.yes_questions = res.data.yes_questions;
});
},
// 试卷中的试题答题情况
getTestPaperAnswers: function (question_type) {
var vm = this;
layList.baseGet(layList.U({
a: 'getTestPaperAnswers',
q: {
test_id: test_id,
record_id: record_id,
question_type: question_type
}
}), function (res) {
var questions = res.data;
questions.forEach(function (question) {
question.option = JSON.parse(question.option);
if (Array.isArray(question.option)) {
var options = {};
question.option.forEach(function (option, index) {
options[String.fromCharCode(65 + index)] = option;
});
question.option = options;
}
});
for (var i = 0; i < testPaperAnswers.length; i++) {
if (testPaperAnswers[i].type === question_type) {
if (questions.length) {
testPaperAnswers[i].questions = questions;
} else {
testPaperAnswers.splice(i, 1);
}
break;
}
}
vm.testPaperAnswers = testPaperAnswers;
});
},
print: function () {
window.print()
}
}
});
});
</script>
{/block}