Skip to content

C
center-exam-show
提交 004db84a authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

考试开发

上级 c60e006e
显示空白字符变更
内嵌 并排
正在显示 包含 197 行增加 和 25 行删除
src/components/exam/question.vue
浏览文件 @ 004db84a
<template> <template>
<div> <div>
<template v-if="true"> <!-- 单选多选判断题(题目描述dom结构一样，只那选项区分) -->
<template v-if="questionData.type === 1 || questionData.type === 2 || questionData.type === 3">
<div class="title"> <div class="title">
<span>1.</span>将以下5个句子重新排列组合，排列组合最连贯的是（ ）。 <span>{{ questionData.orderNum }}.</span>{{ questionData.title }}
</div> </div>
<div class="describe">甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。甘露寺正位于北固山，所以移徒这段漕路，势必要紧贴北固山与山根的顽石打交手战，这样的工程自非一日之功。</div> <div class="describe" v-html="questionData.des"></div>
<ul class="check-option"> <!-- radio-option check-option --> <ul :class="questionData.type === 2 ? 'check-option' : 'radio-option'">
<li class="active"> <template v-for="(item, index) in questionData.opt">
<div class="icon"></div> <li
<div class="txt">A.⑤④②③①</div> :key="index"
</li> @click="changeOptions(questionData.type, questionData.id, item.id)"
<li> :class="questionParams.answerRecord[questionData.id]
<div class="icon"></div> ? questionParams.answerRecord[questionData.id].answer.find(id => { return id === item.id })
<div class="txt">A.⑤④②③①</div> ? 'active'
</li> : ''
<li> : ''"
<div class="icon"></div> >
<div class="txt">A.⑤④②③①</div>
</li>
<li>
<div class="icon"></div> <div class="icon"></div>
<div class="txt">A.⑤④②③①</div> <div class="txt">{{item.text}}</div>
</li> </li>
</template>
</ul> </ul>
</template> </template>
<template v-if="false"> <!-- 复合题 -->
<template v-if="questionData.type === 4">
<div class="case-que"> <div class="case-que">
<div class="stem">李克强在讲话中首先代表党中央、国务院，向受命名的地方和受表彰的单位与个人 <div class="stem">李克强在讲话中首先代表党中央、国务院，向受命名的地方和受表彰的单位与个人
表示热烈祝贺，向人民解放军指战员、武警官兵、民兵预备役人员、部队职工，向烈军 表示热烈祝贺，向人民解放军指战员、武警官兵、民兵预备役人员、部队职工，向烈军
...@@ -90,9 +90,54 @@ ...@@ -90,9 +90,54 @@
<script> <script>
export default { export default {
props: { props: {
contentHeight: { type: Number, default: () => {} } contentHeight: { type: Number, default: () => {} },
questionParams: { type: Object, default: () => {} }
},
data() {
return {
questionData: {}
}
}, },
mounted() { mounted() {
this.questionData = this.questionParams.list[this.questionParams.questionIndex]
},
methods: {
changeOptions(type, id, cId) {
if (type !== 2) {
this.questionParams.answerRecord[id]
? this.questionParams.answerRecord[id].answer = [cId]
: (() => {
this.questionParams.answeredCount++
this.questionParams.answerRecord[id] = { answer: [cId] }
})()
} else {
if (this.questionParams.answerRecord[id]) {
const optChack = this.questionParams.answerRecord[id].answer.findIndex(item => { return item === cId })
optChack === -1
? (() => {
this.questionParams.answerRecord[id].answer.length === 0 && (this.questionParams.answeredCount++)
this.questionParams.answerRecord[id].answer.push(cId)
})()
: this.questionParams.answerRecord[id].answer.splice(optChack, 1)
this.questionParams.answerRecord[id].answer.length === 0 && (this.questionParams.answeredCount--)
} else {
this.questionParams.answeredCount++
this.questionParams.answerRecord[id] = { answer: [cId] }
}
}
this.$forceUpdate()
}
},
computed: {
changeQuestionIndex() {
return this.questionParams.questionIndex
}
},
watch: {
changeQuestionIndex(newV, oldV) {
this.questionData = this.questionParams.list[this.questionParams.questionIndex]
console.log(this.questionData)
}
} }
} }
</script> </script>
...@@ -120,6 +165,7 @@ export default { ...@@ -120,6 +165,7 @@ export default {
margin: 0; margin: 0;
list-style: none; list-style: none;
li{ li{
cursor: pointer;
margin-bottom: 20px; margin-bottom: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -130,6 +176,7 @@ export default { ...@@ -130,6 +176,7 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
.txt{ .txt{
width: 95%;
font-size: 18px; font-size: 18px;
color: #222222; color: #222222;
line-height: 18px; line-height: 18px;
......
src/pages/exam/examAnswer.vue
浏览文件 @ 004db84a
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="head" id="head-h"> <div class="head" id="head-h">
<div class="title">全国统一高考试卷A</div> <div class="title">全国统一高考试卷A</div>
<div class="right"> <div class="right">
<div class="count">已答1/100</div> <div class="count">已答{{ questionParams.answeredCount }}/{{ questionParams.list.length + 1 }}</div>
<div class="time"> <div class="time">
<div class="icon"></div> <div class="icon"></div>
<div class="mun">60:00</div> <div class="mun">60:00</div>
...@@ -13,7 +13,10 @@ ...@@ -13,7 +13,10 @@
</div> </div>
<div class="exam-main" :style="{height: this.contentHeight + 'px'}"> <div class="exam-main" :style="{height: this.contentHeight + 'px'}">
<div class="left"> <div class="left">
<question :contentHeight="contentHeight"></question> <question
:contentHeight="contentHeight"
:questionParams="questionParams"
></question>
</div> </div>
<div class="right"> <div class="right">
<answer-card></answer-card> <answer-card></answer-card>
...@@ -21,8 +24,14 @@ ...@@ -21,8 +24,14 @@
</div> </div>
<div class="foot" id="foot-h"> <div class="foot" id="foot-h">
<div class="exam-btn"> <div class="exam-btn">
<div>上一题</div> <div
<div class="active">下一题</div> @click="changeIndex('prev')"
:class="this.questionParams.questionIndex !== 0 ? 'active' : ''"
>上一题</div>
<div
:class="questionParams.questionIndex !== questionParams.list.length - 1 ? 'active' : ''"
@click="changeIndex('next')"
>下一题</div>
</div> </div>
<div class="rigth-btn"> <div class="rigth-btn">
<div class="sign"> <div class="sign">
...@@ -50,7 +59,114 @@ export default { ...@@ -50,7 +59,114 @@ export default {
}, },
data() { data() {
return { return {
contentHeight: 0 contentHeight: 0,
// 题的数据所需的参数
questionParams: {
answeredCount: 0,
// 用户选择的选项 --- 提交后台的数据
answerRecord: {},
// 当前题的下标
questionIndex: 0,
// 所有题
list: [
{
id: 1,
type: 1,
orderNum: '1',
title: '将以下5个句子重新排列组合： ',
des: '①宋代《新唐书音训》云：“京口在润州城东北甘露寺侧。<br/> ②这也就是李白《丁督护歌》中所描绘的“万人凿磐石，无由达江浒”的施工场面。<br/> ③而要开辟一条通京口的新漕路却是十分艰辛的。<br/> ④甘露寺正位于北固山，所以移徙这段漕路，势必要紧贴着北固山下与山根的顽石打交手战，这样的工程自非一日之功。<br/> ⑤瓜洲浦成为便利的津渡是由于它正对南岸江边的京口，而京口的漕路是在开元二十五年齐浣迁润州后才兴修的，换句话说，旧漕路原来并不通京口。 ',
opt: [
{
id: 1,
text: 'A、⑤④①③②'
},
{
id: 2,
text: 'B、④①②③⑤'
},
{
id: 3,
text: 'C、⑤③①④②'
},
{
id: 4,
text: 'D、④①③②⑤'
}
]
},
{
id: 2,
type: 2,
orderNum: '2',
title: '下列关于国际税法内容的陈述，正确的有（　）。',
des: '甘露寺正位于北固山，所以移徒这段漕路。',
opt: [
{
id: 1,
text: 'A、国际避税的基本方式就是跨国纳税人通过错用或滥用有关国家税法、国际税收协定，利用它们的差别、漏洞、特例和缺陷，规避纳税主体和纳税客体的纳税义务，不纳税或少纳税。'
},
{
id: 2,
text: 'B、税收情报交换是国际反避税的合作的主要内容'
},
{
id: 3,
text: 'C、加强国际税收合作，防止国际避税和逃税，这是国际税收协定的基本内容'
},
{
id: 4,
text: 'D、税收协定不能限制有关国家对跨国投资者提供更为优惠的税收待遇'
},
{
id: 5,
text: 'E、税收协定可以干预协约国对税法的修订和调整'
}
]
},
{
id: 3,
type: 3,
orderNum: '3',
title: '八月十五是中秋节？',
des: '甘露寺正位于北固山，所以移徒这段漕路。',
opt: [
{
id: 1,
text: 'A、正确'
},
{
id: 2,
text: 'B、错误'
}
]
},
{
id: 4,
type: 4,
orderNum: '4',
title: '将以下5个句子重新排列组合',
des: '甘露寺正位于北固山，所以移徒这段漕路。',
opt: [
{
id: 1,
text: '选项A'
},
{
id: 2,
text: '选项B'
},
{
id: 3,
text: '选项C'
},
{
id: 4,
text: '选项D'
}
]
}
]
}
} }
}, },
mounted() { mounted() {
...@@ -59,6 +175,14 @@ export default { ...@@ -59,6 +175,14 @@ export default {
methods: { methods: {
getDom(id) { getDom(id) {
return document.getElementById(id) return document.getElementById(id)
},
changeIndex(type) {
if (type === 'prev') {
this.questionParams.questionIndex > 0 && (this.questionParams.questionIndex--)
} else {
this.questionParams.questionIndex !== this.questionParams.list.length - 1 && (this.questionParams.questionIndex++)
console.log(this.questionParams.questionIndex)
}
} }
} }
} }
...@@ -144,6 +268,7 @@ export default { ...@@ -144,6 +268,7 @@ export default {
.exam-btn{ .exam-btn{
display: flex; display: flex;
padding-left: 40px; padding-left: 40px;
cursor: pointer;
div{ div{
width: 100px; width: 100px;
height: 40px; height: 40px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论