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.
571 lines
17 KiB
571 lines
17 KiB
{extend name="public/container" /}
|
|
{block name="title"}错题详情{/block}
|
|
{block name="head"}
|
|
<style>
|
|
body {
|
|
padding: 1.44rem .3rem 1.5rem;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.wrong-question .header {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 5;
|
|
padding: .3rem .3rem 0;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.wrong-question .header .upper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 1.14rem;
|
|
padding-right: .3rem;
|
|
border-radius: .12rem .12rem 0 0;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.wrong-question .header .type {
|
|
position: relative;
|
|
left: -0.04rem;
|
|
height: .5rem;
|
|
padding: 0 .3rem 0 .22rem;
|
|
border-radius: 0 .25rem .25rem 0;
|
|
background-color: #2C8EFF;
|
|
font-size: .26rem;
|
|
line-height: .5rem;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.wrong-question .header .type::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -0.02rem;
|
|
left: 0;
|
|
border-width: .01rem .02rem;
|
|
border-style: solid;
|
|
border-color: #0C73E9 #0C73E9 transparent transparent;
|
|
}
|
|
|
|
.wrong-question .header .iconfont {
|
|
font-size: .28rem;
|
|
color: #666666;
|
|
}
|
|
|
|
.wrong-question .question {
|
|
border-radius: 0 0 .12rem .12rem;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.wrong-question .question .title {
|
|
padding: 0 .2rem;
|
|
font-size: .3rem;
|
|
line-height: .45rem;
|
|
color: #282828;
|
|
}
|
|
|
|
.wrong-question .question .title-image {
|
|
display: block;
|
|
width: 6.3rem;
|
|
height: 4.4rem;
|
|
margin: .3rem auto 0;
|
|
}
|
|
|
|
.wrong-question .question .options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: .3rem .3rem .27rem;
|
|
counter-reset: option;
|
|
}
|
|
|
|
.wrong-question .question .options .option {
|
|
position: relative;
|
|
padding: .24rem .61rem .24rem .73rem;
|
|
border-radius: .08rem;
|
|
margin: 0 0 .2rem;
|
|
background-color: #F9F9F9;
|
|
word-break: break-all;
|
|
font-size: .3rem;
|
|
line-height: .42rem;
|
|
color: #282828;
|
|
}
|
|
|
|
.wrong-question .question .options .option.ok {
|
|
background-color: #EBF9EB;
|
|
color: #52A452;
|
|
}
|
|
|
|
.wrong-question .question .options .option.no {
|
|
background-color: #FFF0E5;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.wrong-question .question .options .option::before {
|
|
counter-increment: option;
|
|
content: counter(option, upper-alpha) ".";
|
|
position: absolute;
|
|
left: .3rem;
|
|
}
|
|
|
|
.wrong-question .question .options .iconfont {
|
|
position: absolute;
|
|
top: .24rem;
|
|
right: .3rem;
|
|
font-size: .23rem;
|
|
}
|
|
|
|
.wrong-question .question .images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
padding: .3rem .05rem .27rem .25rem;
|
|
counter-reset: option;
|
|
}
|
|
|
|
.wrong-question .question .images .option {
|
|
position: relative;
|
|
padding: .6rem .2rem .28rem;
|
|
border-radius: .08rem;
|
|
margin: 0 .2rem .2rem 0;
|
|
background-color: #F9F9F9;
|
|
}
|
|
|
|
.wrong-question .question .images .option.ok {
|
|
background-color: #EBF9EB;
|
|
color: #52A452;
|
|
}
|
|
|
|
.wrong-question .question .images .option.no {
|
|
background-color: #FFF0E5;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.wrong-question .question .images .option::before {
|
|
counter-increment: option;
|
|
content: counter(option, upper-alpha) ".";
|
|
position: absolute;
|
|
top: .3rem;
|
|
left: .2rem;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.wrong-question .question .images .option img {
|
|
width: 2.7rem;
|
|
height: 1.62rem;
|
|
}
|
|
|
|
.wrong-question .analysis {
|
|
padding: .2rem .2rem .32rem;
|
|
border-radius: .12rem;
|
|
margin-top: .2rem;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.wrong-question .analysis .upper {
|
|
padding-bottom: .3rem;
|
|
font-size: .3rem;
|
|
line-height: .42rem;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.wrong-question .analysis .upper .iconfont {
|
|
margin-right: .15rem;
|
|
font-size: .32rem;
|
|
}
|
|
|
|
.wrong-question .analysis .answers {
|
|
display: flex;
|
|
font-size: .28rem;
|
|
line-height: .4rem;
|
|
color: #666666;
|
|
}
|
|
|
|
.wrong-question .analysis .answer {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
|
|
.wrong-question .analysis .answer .value {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-left: .26rem;
|
|
word-break: break-all;
|
|
color: #2C8EFF;
|
|
}
|
|
|
|
.wrong-question .analysis .answer:first-child .value {
|
|
color: #52A452;
|
|
}
|
|
|
|
.wrong-question .analysis .degree {
|
|
display: flex;
|
|
margin-top: .2rem;
|
|
font-size: .28rem;
|
|
line-height: .4rem;
|
|
color: #666666;
|
|
}
|
|
|
|
.wrong-question .analysis .degree .value {
|
|
flex: 1;
|
|
padding-left: .26rem;
|
|
font-size: 0;
|
|
}
|
|
|
|
.wrong-question .analysis .degree .iconfont {
|
|
margin-right: .15rem;
|
|
vertical-align: middle;
|
|
font-size: .24rem;
|
|
color: #FFF0E5;
|
|
}
|
|
|
|
.wrong-question .analysis .degree .active {
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.wrong-question .analysis .content {
|
|
margin-top: .2rem;
|
|
font-size: .28rem;
|
|
line-height: .4rem;
|
|
color: #676767;
|
|
}
|
|
|
|
.wrong-question .analysis .content .value {
|
|
margin-top: .1rem;
|
|
font-size: .28rem;
|
|
line-height: .44rem;
|
|
color: #282828;
|
|
}
|
|
|
|
.wrong-question .special {
|
|
margin-top: .2rem;
|
|
font-size: .28rem;
|
|
line-height: .4rem;
|
|
color: #676767;
|
|
}
|
|
|
|
.wrong-question .special .value {
|
|
margin-top: .18rem;
|
|
counter-reset: special;
|
|
}
|
|
|
|
.wrong-question .special .item {
|
|
position: relative;
|
|
display: flex;
|
|
padding-left: .18rem;
|
|
margin-top: .3rem;
|
|
}
|
|
|
|
.wrong-question .special .item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.wrong-question .special .item::before {
|
|
counter-increment: special;
|
|
content: counter(special, disc);
|
|
position: absolute;
|
|
left: 0;
|
|
color: rgba(44, 142, 255, 0.4);
|
|
}
|
|
|
|
.wrong-question .special .title {
|
|
flex: 1;
|
|
color: #2C8EFF;
|
|
}
|
|
|
|
.wrong-question .special .iconfont {
|
|
font-size: .26rem;
|
|
color: #999999;
|
|
}
|
|
|
|
.wrong-question .footer {
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 5;
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.wrong-question .footer button {
|
|
flex: 1;
|
|
height: 1.1rem;
|
|
font-size: .22rem;
|
|
line-height: .3rem;
|
|
color: #333333;
|
|
}
|
|
|
|
.wrong-question .footer div {
|
|
margin-top: .11rem;
|
|
}
|
|
|
|
.wrong-question .footer div:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.wrong-question .footer .iconfont {
|
|
vertical-align: bottom;
|
|
font-size: .34rem;
|
|
}
|
|
|
|
.wrong-question .footer button:disabled {
|
|
color: #999999;
|
|
}
|
|
|
|
.wrong-question .footer .light {
|
|
color: #2C8EFF;
|
|
}
|
|
</style>
|
|
{/block}
|
|
{block name="content"}
|
|
<div v-cloak id="app" class="wrong-question">
|
|
<template v-if="question">
|
|
<div class="header">
|
|
<div class="upper">
|
|
<div class="type">{{ question.question_type | questionType }}</div>
|
|
<button @click="deleteQuestion"><i class="iconfont iconshanchu"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="question">
|
|
<div class="title">{{ question.stem }}</div>
|
|
<img v-if="question.image" :src="question.image" class="title-image">
|
|
<div v-if="question.is_img" class="images">
|
|
<label
|
|
v-for="item in question.options"
|
|
:key="item.key"
|
|
:class="{
|
|
ok: question.user_answer.indexOf(item.key) !== -1 && question.answer.indexOf(item.key) !== -1,
|
|
no: question.user_answer.indexOf(item.key) !== -1 && question.answer.indexOf(item.key) === -1
|
|
}"
|
|
class="option"
|
|
>
|
|
<input type="radio" disabled hidden>
|
|
<img :src="item.value">
|
|
</label>
|
|
</div>
|
|
<div v-else class="options">
|
|
<label
|
|
v-for="item in question.options"
|
|
:key="item.key"
|
|
:class="{
|
|
ok: question.user_answer.indexOf(item.key) !== -1 && question.answer.indexOf(item.key) !== -1,
|
|
no: question.user_answer.indexOf(item.key) !== -1 && question.answer.indexOf(item.key) === -1
|
|
}"
|
|
class="option"
|
|
>
|
|
<input type="radio" disabled hidden>
|
|
{{ item.value }}
|
|
<i
|
|
v-if="question.user_answer.indexOf(item.key) !== -1"
|
|
:class="[question.answer.indexOf(item.key) === -1 ? 'iconguanbi' : 'icongouxuan']"
|
|
class="iconfont"
|
|
></i>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="analysis">
|
|
<div class="upper"><i class="iconfont iconjurassic_true"></i>回答错误</div>
|
|
<div class="answers">
|
|
<div class="answer">
|
|
<div>正确答案:</div>
|
|
<div class="value">{{ question.answer }}</div>
|
|
</div>
|
|
<div class="answer">
|
|
<div>您的答案:</div>
|
|
<div class="value">{{ question.user_answer }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="degree">
|
|
<div>试题难度:</div>
|
|
<div class="value"><i v-for="item in 5" :key="item" :class="{ active: item <= question.difficulty }" class="iconfont iconxing"></i></div>
|
|
</div>
|
|
<div class="content">
|
|
<div>答案解析:</div>
|
|
<div class="value" v-html="question.analysis"></div>
|
|
</div>
|
|
<div v-if="question.special && question.special.length" class="special">
|
|
<div>关联知识点:</div>
|
|
<div class="value">
|
|
<a v-for="item in question.special" :key="item.id" class="item" href="">
|
|
<div class="title">{{ item.title }}</div>
|
|
<i class="iconfont iconxiangyou"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<button :disabled="!index" @click="changeQuestion(-1)">
|
|
<div><i class="iconfont iconshangyige"></i></div>
|
|
<div>上一题</div>
|
|
</button>
|
|
<button :class="{ light: question.is_master }" @click="graspQuestion">
|
|
<div><i :class="question.is_master ? 'iconyizhangwo' : 'iconweizhangwo'" class="iconfont"></i></div>
|
|
<div>{{ question.is_master ? '已' : '未' }}掌握</div>
|
|
</button>
|
|
<button :disabled="index === idList.length - 1" @click="changeQuestion(1)">
|
|
<div><i class="iconfont iconxiayige"></i></div>
|
|
<div>下一题</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<quick-menu></quick-menu>
|
|
</div>
|
|
{/block}
|
|
{block name="foot"}
|
|
<script>
|
|
require(['vue', 'store', 'helper','quick'], function (Vue, store, $h) {
|
|
new Vue({
|
|
el: '#app',
|
|
filters: {
|
|
questionType: function (value) {
|
|
switch (value) {
|
|
case 1:
|
|
return '单选题';
|
|
case 2:
|
|
return '多选题';
|
|
case 3:
|
|
return '判断题';
|
|
}
|
|
}
|
|
},
|
|
data: {
|
|
id: 0,
|
|
is_master: '',
|
|
idList: [],
|
|
question: null
|
|
},
|
|
computed: {
|
|
index: function () {
|
|
if (!this.question.id) {
|
|
return -1;
|
|
}
|
|
return this.idList.indexOf(this.question.id);
|
|
}
|
|
},
|
|
created: function () {
|
|
var vm = this;
|
|
var wrongQuestion = localStorage.getItem('wrong_question');
|
|
if (!wrongQuestion) {
|
|
return;
|
|
}
|
|
wrongQuestion = JSON.parse(wrongQuestion);
|
|
this.id = this.nodeId = wrongQuestion.id;
|
|
this.is_master = wrongQuestion.is_master;
|
|
this.idList.push(this.id);
|
|
this.getQuestion(this.id);
|
|
this.getIdList(1);
|
|
this.getIdList();
|
|
window.addEventListener('beforeunload', function () {
|
|
localStorage.setItem('wrong_question', JSON.stringify({
|
|
id: vm.id,
|
|
is_master: vm.is_master
|
|
}));
|
|
});
|
|
},
|
|
methods: {
|
|
// 错题消息
|
|
getQuestion: function (id) {
|
|
var vm = this;
|
|
store.baseGet($h.U({
|
|
c: 'topic',
|
|
a: 'oneWrongBank',
|
|
q: {
|
|
id: id
|
|
}
|
|
}), function (res) {
|
|
var question = res.data.data;
|
|
var option = JSON.parse(question.option);
|
|
var answer = question.answer.split(',');
|
|
var optionObj = {};
|
|
|
|
question.options = [];
|
|
|
|
if (Array.isArray(option)) {
|
|
option.forEach(function (item, index) {
|
|
optionObj[String.fromCharCode(index + 65)] = item;
|
|
});
|
|
option = optionObj;
|
|
}
|
|
|
|
for (var key in option) {
|
|
if (Object.hasOwnProperty.call(option, key)) {
|
|
question.options.push({
|
|
key: key,
|
|
value: option[key]
|
|
});
|
|
}
|
|
}
|
|
|
|
vm.question = question;
|
|
});
|
|
},
|
|
getIdList: function (order) {
|
|
var vm = this;
|
|
store.basePost($h.U({
|
|
c: 'topic',
|
|
a: 'userWrongBankIdArr'
|
|
}), {
|
|
id: this.nodeId,
|
|
is_master: this.is_master,
|
|
order: order || 0
|
|
}, function (res) {
|
|
vm.idList = vm.idList.concat(res.data.data).sort(function (a, b) {
|
|
return b - a;
|
|
});
|
|
});
|
|
},
|
|
// 上一题/下一题
|
|
changeQuestion: function (value) {
|
|
var id = this.idList[this.index + value];
|
|
this.getQuestion(id);
|
|
if (this.index === this.idList.length - 2 && value === 1) {
|
|
this.nodeId = this.idList[this.idList.length - 1];
|
|
this.getIdList(1);
|
|
} else if (this.index === 1 && value === -1) {
|
|
this.nodeId = this.idList[0];
|
|
this.getIdList();
|
|
}
|
|
},
|
|
// 掌握
|
|
graspQuestion: function () {
|
|
var vm = this;
|
|
var is_master = this.question.is_master ? 0 : 1;
|
|
store.basePost($h.U({
|
|
c: 'topic',
|
|
a: 'submitWrongBank'
|
|
}), {
|
|
wrong_id: this.question.id,
|
|
questions_id: this.question.questions_id,
|
|
is_master: is_master
|
|
}, function (res) {
|
|
vm.question.is_master = is_master;
|
|
});
|
|
},
|
|
// 删除
|
|
deleteQuestion: function () {
|
|
var vm = this;
|
|
store.baseGet($h.U({
|
|
c: 'topic',
|
|
a: 'delWrongBank',
|
|
q: {
|
|
id: this.question.id
|
|
}
|
|
}), function (res) {
|
|
if (vm.idList.length === 1) {
|
|
window.history.back();
|
|
} else if (vm.index === vm.idList.length - 1) {
|
|
vm.getQuestion(vm.idList[vm.idList.length - 2]);
|
|
vm.idList.splice(vm.index, 1);
|
|
} else {
|
|
vm.getQuestion(vm.idList[vm.index + 1]);
|
|
vm.idList.splice(vm.index, 1);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{/block}
|
|
|