examTest
This commit is contained in:
parent
3509d73487
commit
7aa8d94d93
|
|
@ -50,8 +50,9 @@ const install = (Vue, vm) => {
|
|||
let getExamList = (params={})=>vm.$u.get('/exam/exam/', params);//考试列表
|
||||
let startExam = (id)=>vm.$u.post(`/exam/exam/${id}/start/`);//开始考试
|
||||
let submitExam = (id,params={})=>vm.$u.post(`/exam/examrecord/${id}/submit/`,params);//开始考试
|
||||
let examRecord = (id,params={})=>vm.$u.get(`/exam/examrecord/self/`,params);//我的考试记录
|
||||
let examRecord = (id,params={})=>vm.$u.get(`/exam/examrecord/self/`,params);//我的考试记录
|
||||
let examRecordDetail = (id,params={})=>vm.$u.get(`/exam/examrecord/${id}/`,params);//我的考试记录
|
||||
let paperDetail = (id,params={})=>vm.$u.get(`/exam/paper/${id}/`,params);//测试
|
||||
|
||||
vm.$u.api = {getUserInfo,
|
||||
getCode,
|
||||
|
|
@ -79,6 +80,7 @@ const install = (Vue, vm) => {
|
|||
startExam,
|
||||
submitExam,
|
||||
examRecord,
|
||||
paperDetail,
|
||||
examRecordDetail
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,6 +131,33 @@
|
|||
,{
|
||||
"path" : "pages/exam/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "考试",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/exam/test",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "练习",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/exam/testDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "练习题目",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/exam/exam",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "考试列表",
|
||||
"enablePullDownRefresh": false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,6 +1,27 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<uni-list>
|
||||
<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
|
||||
<uni-list-item direction="column" :key="item.id" v-for="(item, index) in examList">
|
||||
<template v-slot:header>
|
||||
<view class="uni-title">{{item.name}}</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<view class="uni-list-box">
|
||||
<view class="uni-content">
|
||||
<view class="uni-title-sub uni-ellipsis-2">开启时间: {{item.open_time}}至{{item.close_time}}</view>
|
||||
<view class="uni-note">考试机会: {{item.chance}}次</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<view class="uni-footer">
|
||||
<u-button size="mini" type="primary" @click="attendExam(item)">我要参加</u-button>
|
||||
<u-button size="mini" type="info">成绩排名</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,11 +29,28 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
query:{
|
||||
page: 1
|
||||
},
|
||||
examList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getExamList();
|
||||
},
|
||||
methods: {
|
||||
|
||||
getExamList(){
|
||||
this.$u.api.getExamList(this.query).then(res=>{
|
||||
this.examList = res.data.results
|
||||
})
|
||||
},
|
||||
attendExam(val){
|
||||
console.log(val)
|
||||
uni.setStorageSync('currentExam', val)
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/preview"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,11 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-list>
|
||||
<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
|
||||
<uni-list-item direction="column" :key="item.id" v-for="(item, index) in examList">
|
||||
<template v-slot:header>
|
||||
<view class="uni-title">{{item.name}}</view>
|
||||
</template>
|
||||
<template v-slot:body>
|
||||
<view class="uni-list-box">
|
||||
<view class="uni-content">
|
||||
<view class="uni-title-sub uni-ellipsis-2">开启时间: {{item.open_time}}至{{item.close_time}}</view>
|
||||
<view class="uni-note">考试机会: {{item.chance}}次</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<view class="uni-footer">
|
||||
<u-button size="mini" type="primary" @click="attendExam(item)">我要参加</u-button>
|
||||
<u-button size="mini" type="info">成绩排名</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
<view class="cellWrap">
|
||||
<view class="cellItem" v-for="item in cellList" :index="item.id" :key="item.id" @click="intoPage(item)">
|
||||
<image class="cellImg" :src="item.img"></image>
|
||||
<text class="cellText">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,29 +16,79 @@
|
|||
query:{
|
||||
page: 1
|
||||
},
|
||||
examList: []
|
||||
cellList: [
|
||||
{img:'../../static/exam/exam.png',title:'正式考试',id:'exam'},
|
||||
{img:'../../static/exam/test.png',title:'模拟测试',id:'test'},
|
||||
{img:'../../static/exam/question.png',title:'专题练习',id:'qusetion'},
|
||||
{img:'../../static/exam/errorIcon.png',title:'错题记录',id:'record'},
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getExamList();
|
||||
},
|
||||
methods: {
|
||||
getExamList(){
|
||||
this.$u.api.getExamList(this.query).then(res=>{
|
||||
this.examList = res.data.results
|
||||
})
|
||||
},
|
||||
attendExam(val){
|
||||
console.log(val)
|
||||
uni.setStorageSync('currentExam', val)
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/preview"
|
||||
})
|
||||
intoPage(item){
|
||||
switch (item.id){
|
||||
case 'exam':
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/exam"
|
||||
})
|
||||
break;
|
||||
case 'test':
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/test"
|
||||
})
|
||||
break;
|
||||
case 'question':
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/question"
|
||||
})
|
||||
break;
|
||||
case 'erroRrecord':
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/erroRrecord"
|
||||
})
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.cellWrap{
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
margin: auto;
|
||||
margin-top: 30upx;
|
||||
margin-bottom: 30upx;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
.cellItem{
|
||||
width: 35%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
margin-top: 50upx;
|
||||
}
|
||||
.cellImg{
|
||||
margin: auto;
|
||||
width: 120upx;
|
||||
height: 120upx;
|
||||
}
|
||||
.cellText{
|
||||
height: 60upx;
|
||||
line-height: 60upx;
|
||||
text-align: center;
|
||||
color: #339900;
|
||||
}
|
||||
.cellItem:nth-of-type(2) .cellText{
|
||||
color: #efb336;
|
||||
}
|
||||
.cellItem:nth-of-type(3) .cellText{
|
||||
color: #1296db;
|
||||
}
|
||||
.cellItem:nth-of-type(4) .cellText{
|
||||
color: #d81e06;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<view>
|
||||
<uni-list>
|
||||
<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
|
||||
<uni-list-item direction="column" :key="item.id" v-for="(item, index) in examList">
|
||||
<template v-slot:header>
|
||||
<view class="uni-title">{{item.name}}</view>
|
||||
</template>
|
||||
<template v-slot:footer>
|
||||
<view class="uni-footer">
|
||||
<u-button size="mini" type="primary" @click="attendTest(item)">开始练习</u-button>
|
||||
</view>
|
||||
</template>
|
||||
</uni-list-item>
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
query:{
|
||||
page: 1
|
||||
},
|
||||
examList: []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getExamList();
|
||||
},
|
||||
methods: {
|
||||
getExamList(){
|
||||
this.$u.api.getExamList(this.query).then(res=>{
|
||||
this.examList = res.data.results
|
||||
})
|
||||
},
|
||||
attendTest(val){
|
||||
console.log(val)
|
||||
let currentExam = val;
|
||||
this.$u.api.paperDetail(val.paper_.id).then(res=>{
|
||||
currentExam = res.data;
|
||||
uni.setStorageSync('currentExam', currentExam)
|
||||
uni.navigateTo({
|
||||
url:"/pages/exam/testDetail"
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,294 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 大标题 -->
|
||||
<view class="header" id="header">
|
||||
<span class="header-button">第{{currentIndex+1}}/{{currentExam.questions_.length}} 题</span>
|
||||
|
||||
</view>
|
||||
<!-- 小标题栏 -->
|
||||
<view class="sub-header">
|
||||
<u-row>
|
||||
<u-col span="4">
|
||||
<view style="text-align: center;"><span class="header-card">{{currentQuestion.type}}</span></view>
|
||||
</u-col>
|
||||
<u-col span="4">
|
||||
<view style="text-align: right;"><span class="submitButton" @click='handleSubmit()' >显示答案</span></view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
<scroll-view class="content" scroll-y="true" v-bind:style="{height:scollHeight+'rpx'}">
|
||||
<view class="name">
|
||||
<view>{{currentIndex}}·{{currentQuestion.name}}</view>
|
||||
<!-- <rich-text :nodes="currentQuestion.name"></rich-text> -->
|
||||
<view v-if="currentQuestion.img">
|
||||
{{currentQuestion.img}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="options">
|
||||
<checkbox-group @change="checkboxGroupChange" v-if="currentQuestion.type=='多选'">
|
||||
<label class="option" v-for="item in currentOptions" :key="item.id" >
|
||||
<view class="option-item1">
|
||||
<checkbox :value="item.value" :checked="item.checked" color="#2979ff"/>
|
||||
</view >
|
||||
<view class="option-item2">{{item.value}}.{{item.text}}</view>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
<radio-group v-else @change="checkboxGroupChange">
|
||||
<label class="option" v-for="item in currentOptions" :key="item.id">
|
||||
<view class="option-item1">
|
||||
<radio :value="item.value" :checked="item.checked" color="#2979ff"></radio>
|
||||
</view>
|
||||
<view class="option-item2">
|
||||
{{item.value}}.{{item.text}}
|
||||
</view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<view v-if="showAns">正确答案：{{currentQuestion.right}}</view>
|
||||
<view style="height:20rpx"></view>
|
||||
</scroll-view>
|
||||
<u-popup v-model="showM" mode="bottom" height="40%">
|
||||
<view class="questionArea" style="display:flex">
|
||||
<block v-for="(item, index) in currentExam.questions_" :key="index">
|
||||
<view class="questionItem questionItem-select" v-if="item.user_answer" @click="jumpQuestion(index)">{{index+1}}</view>
|
||||
<view class="questionItem questionItem-unselect" v-else @click="jumpQuestion(index)">{{index+1}}</view>
|
||||
</block>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 底部栏 -->
|
||||
<view class="footer" id="footer">
|
||||
<u-button @click='previousQ()' throttle-time="200" :plain="true" type="primary">上一题</u-button>
|
||||
<u-button @click="showM = !showM" type="primary">答题卡</u-button>
|
||||
<u-button @click='nextQ()' throttle-time="200" :plain="true" type="primary">下一题</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentExam:{questions_:[]},
|
||||
currentIndex:0,
|
||||
currentOptions:[],
|
||||
currentQuestion:{type:'单选'},
|
||||
showM:false,
|
||||
keyid:0,
|
||||
start_time:null,
|
||||
scollHeight:0,
|
||||
showAns:false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
//#ifdef MP-WEIXIN
|
||||
uni.hideHomeButton()
|
||||
//#endif
|
||||
let res = uni.getSystemInfoSync();
|
||||
let ratio = 750 / res.windowWidth;
|
||||
this.scollHeight = res.windowHeight*ratio - 230;
|
||||
this.currentExam = uni.getStorageSync('currentExam');
|
||||
this.initQuestion();
|
||||
this.getpaperDetail();
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleSubmit(){
|
||||
this.showAns = true;
|
||||
},
|
||||
panTi(tm_current) {
|
||||
// 返回当前题目是否正确,得分多少
|
||||
let is_right = false, score = 0
|
||||
if (tm_current.type == '多选') {
|
||||
if (tm_current.user_answer) {
|
||||
if (tm_current.user_answer.sort().toString() == tm_current.right.sort().toString()) {
|
||||
is_right = true
|
||||
score = tm_current.total_score
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if(tm_current.right == tm_current.user_answer){
|
||||
is_right = true
|
||||
score = tm_current.total_score
|
||||
}
|
||||
}
|
||||
return {'is_right':is_right,'score':score}
|
||||
},
|
||||
initQuestion(){
|
||||
var currentQuestion = this.currentExam.questions_[this.currentIndex];
|
||||
this.currentQuestion = currentQuestion;
|
||||
let options_ = [];
|
||||
let origin = currentQuestion.options;
|
||||
this.currentOptions = [];
|
||||
for (let key in origin) {
|
||||
let option = {
|
||||
value:key,
|
||||
text:origin[key],
|
||||
id: this.keyid++,
|
||||
checked:false
|
||||
}
|
||||
if (currentQuestion.user_answer) {
|
||||
if (key == currentQuestion.user_answer || currentQuestion.user_answer.indexOf(key) != -1) {
|
||||
option.checked = true
|
||||
}
|
||||
} else {
|
||||
option.checked = false
|
||||
}
|
||||
options_.push(option)
|
||||
}
|
||||
this.currentOptions = options_
|
||||
},
|
||||
nextQ(){
|
||||
let index = this.currentIndex + 1
|
||||
if(index<this.currentExam.questions_.length){
|
||||
this.currentIndex = index
|
||||
this.initQuestion()
|
||||
}
|
||||
},
|
||||
previousQ(){
|
||||
let index = this.currentIndex - 1
|
||||
if(index >= 0){
|
||||
this.currentIndex = index
|
||||
this.initQuestion()
|
||||
}
|
||||
},
|
||||
checkboxGroupChange(e){
|
||||
// debugger;
|
||||
console.log(e)
|
||||
this.currentExam.questions_[this.currentIndex].user_answer = e.detail.value
|
||||
},
|
||||
jumpQuestion(index){
|
||||
this.currentIndex = index
|
||||
this.initQuestion()
|
||||
this.showM = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: $u-bg-color;
|
||||
}
|
||||
.content{
|
||||
margin-top:8rpx;
|
||||
.name {
|
||||
font-size:34rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
color:$u-content-color;
|
||||
line-height:130%;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.options {
|
||||
margin-top:8rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 6rpx 30rpx;
|
||||
.option {
|
||||
padding: 10rpx 0rpx;
|
||||
display: flex;
|
||||
font-size: 36rpx;
|
||||
.option-item1{
|
||||
justify-content: flex-start
|
||||
}
|
||||
.option-item2{
|
||||
justify-content: flex-start;
|
||||
color:$u-main-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 750rpx;
|
||||
text-align: center;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: $theme-color;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&-button {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
font-size:34rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.scoreText {
|
||||
color: #00b060;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
.sub-header {
|
||||
padding: 4rpx 20rpx;
|
||||
color: #000;
|
||||
font-size: 33rpx;
|
||||
font-weight: bold;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.submitButton{
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 15rpx;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
background-color: $u-type-error;
|
||||
}
|
||||
.header-card {
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 15rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: $u-type-primary-dark;
|
||||
}
|
||||
.footer {
|
||||
width: 750rpx;
|
||||
height: 100rpx;
|
||||
padding: 30rpx 60rpx;
|
||||
position: fixed;
|
||||
bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 32rpx;
|
||||
box-sizing: border-box;
|
||||
color: #4c8af3;
|
||||
box-shadow: 0 0 5px 1px #eee;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
&-card {
|
||||
padding: 10rpx 20rpx;
|
||||
border: 1px solid $theme-color;
|
||||
border-radius: 15rpx;
|
||||
color: #FFFFFF;
|
||||
background-color: $theme-color;
|
||||
}
|
||||
}
|
||||
.questionArea {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.questionItem {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin: 10rpx 22rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 35rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
color: #ffffff;
|
||||
}
|
||||
.questionItem-select {
|
||||
background-color: $theme-color;
|
||||
}
|
||||
|
||||
.questionItem-unselect {
|
||||
background-color: #bbbbbb;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue