544 lines
25 KiB
JavaScript
544 lines
25 KiB
JavaScript
const BASE_URL = '/mobile/question/h5'
|
||
const onlineAnswer = {
|
||
template:
|
||
`
|
||
<div style="height: 100%">
|
||
<div style="max-height: 700px;overflow-y: scroll">
|
||
<div class="btDiv mb10" title="">
|
||
<el-row style="text-align: center">
|
||
<h2>{{questionData.qtitle}}</h2>
|
||
</el-row>
|
||
</div>
|
||
<div class="survey-container" v-if="!mLoading">
|
||
<!-- 顶部信息区 -->
|
||
<el-card class="survey-head-top" shadow="never">
|
||
<!-- 轮次/日期选择 -->
|
||
<template v-if="questionData.qlx==2">
|
||
<el-dropdown @command="randomCountSelect"
|
||
v-if="questionData.ctMode==2 && isSameDay && randomCount > 0">
|
||
<el-button>
|
||
第{{randomCount}}轮<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</el-button>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item v-for="i in userHasAnswerRandomNum" :key="i"
|
||
:command="{val: i}">第{{i}}轮
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
|
||
<el-date-picker
|
||
v-else-if="questionData.ctMode==1 || (questionData.ctMode==2 && !isSameDay)"
|
||
v-model="currentDate"
|
||
type="date"
|
||
:disabled-date="disabledDate"
|
||
@change="dateChange">
|
||
</el-date-picker>
|
||
</template>
|
||
|
||
<!-- 分数显示 -->
|
||
<span class="score" v-if="finishAnswer && (currentScore || currentScore===0)">
|
||
{{questionData.calcScoreMode==1 ? '今日最高成绩' : '得分'}}：{{currentScore}}
|
||
</span>
|
||
|
||
<!-- 计时器 -->
|
||
<span v-if="questionData.enableTimer && !finishAnswer">
|
||
剩余时间：{{remainder}}
|
||
</span>
|
||
</el-card>
|
||
|
||
<!-- 题目列表 -->
|
||
<el-table :data="issueList"
|
||
class="issueList mt10"
|
||
default-expand-all="true"
|
||
highlight-current-row="true"
|
||
style="width: 100%">
|
||
<el-table-column align="left" header-align="left" label="">
|
||
<template scope="issue">
|
||
<el-col :span="1">
|
||
<span style="color: red" v-if="issue.row.iisbd">*</span>
|
||
<span style="font-weight: bolder">{{issue.$index+1}}.</span>
|
||
</el-col>
|
||
<el-col :span="23">
|
||
<el-row>
|
||
<el-col :span="1" v-if="issue.row.fraction">
|
||
<span>({{issue.row.fraction}}分)</span>
|
||
</el-col>
|
||
<el-col :span="23" style="display: flex">
|
||
<span v-html="issue.row.iname"></span>
|
||
<span v-if="issue.row.itx===1" size="mini" style="font-weight: bold">
|
||
({{issue.row.iisdx ? '单选' : '多选'}})
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<div style="color: rgb(160,160,160)" v-html="issue.row.its"
|
||
v-if="!isNull(issue.row.its)"></div>
|
||
</el-row>
|
||
<el-row>
|
||
<el-row v-for="wor,idx in issue.row.wors">
|
||
<el-row style="margin-top: 5px" v-if="wor.wimg">
|
||
<el-image
|
||
:src="FILE_STREAM_PREVIEW_ADDRESS + '?id=' +wor.wimg"
|
||
fit="fill"
|
||
style="max-width: 100px;max-height: 100px"></el-image>
|
||
</el-row>
|
||
|
||
<el-row style="margin-top: 5px"
|
||
v-if="!isNull(wor.wimg)">
|
||
<div style="color: rgb(160,160,160);text-align: left">
|
||
<div v-html="wor.wsm"></div>
|
||
</div>
|
||
</el-row>
|
||
|
||
<!-- <el-radio v-if="issue.row.iisdx==true"-->
|
||
<!-- :label="idx"-->
|
||
<!-- v-model="issue.row.userSelect"-->
|
||
<!-- border-->
|
||
<!-- style="margin-bottom: 5px;"-->
|
||
<!-- :disabled="finishAnswer || finishAllAnswer"-->
|
||
<!-- size="small">-->
|
||
<!-- <span>{{wor.wtxt}}</span>-->
|
||
<!-- </el-radio>-->
|
||
<!-- :disabled="finishAnswer || finishAllAnswer"-->
|
||
<el-checkbox style="margin-bottom: 5px;"
|
||
class="custom-disabled-checkbox"
|
||
border
|
||
size="small"
|
||
v-model="issue.row.userSelect"
|
||
:key="idx"
|
||
:label="wor.wid">
|
||
<span>{{wor.wtxt}}</span>
|
||
</el-checkbox>
|
||
|
||
<span v-else-if="wor.wistk==true" class="inputParent">
|
||
<el-input
|
||
size="mini"
|
||
style="border-top: none"
|
||
disabled
|
||
v-model="wor.tktxt"></el-input>
|
||
<span style="color:red;"
|
||
v-if="wor.wisbt==true">*</span>
|
||
</span>
|
||
|
||
<el-row style="margin-top: 5px"
|
||
v-if="isNull(wor.wimg)&&!isNull(wor.wsm)">
|
||
<div style="color: rgb(160,160,160)">
|
||
<div v-html="wor.wsm"></div>
|
||
</div>
|
||
</el-row>
|
||
</el-row>
|
||
</el-row>
|
||
<el-row v-if="issue.row.itx==2">
|
||
<el-input size="small" style="width: 50%"
|
||
v-for="wor in issue.row.wors"
|
||
v-model="issue.row.tktxt"></el-input>
|
||
</el-row>
|
||
|
||
<div v-if="finishAnswer" class="question-result">
|
||
<span :class="issue.row.isEqual ? 'text-success' : 'text-danger'">
|
||
{{issue.row.isEqual ? '回答正确' : '回答错误'}}
|
||
</span>
|
||
<span>
|
||
正确答案：{{issue.row.wors.filter(v=>v.correct).map(v=>v.wtxt).join('')}}
|
||
</span>
|
||
</div>
|
||
</el-col>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-control" style="display: flex;justify-content: center;margin-top: 10px">
|
||
<el-button v-if="!finishAnswer && !questionData.enableTimer"
|
||
type="primary"
|
||
@click="save">保存
|
||
</el-button>
|
||
<el-button v-if="!finishAnswer"
|
||
type="primary"
|
||
@click="submit">提交
|
||
</el-button>
|
||
<el-button v-if="canAnswerAgain && finishAnswer"
|
||
type="primary"
|
||
@click="answerAgain">再答一次
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
`, data() {
|
||
return {
|
||
questionData: {
|
||
issues: []
|
||
},
|
||
currentIssueIndex: 0,
|
||
replyInfo: [],
|
||
finishAnswer: false,
|
||
finishAllAnswer: false,
|
||
mLoading: true,
|
||
|
||
//用户已答题总轮数
|
||
randomCount: null,
|
||
currentRandomCountScore: 0,
|
||
sumScore: 0,
|
||
randomCountSheetShow: false,
|
||
randomActions: [],
|
||
currentRandomCount: null,
|
||
|
||
//能否再次答题
|
||
canAnswerAgain: false,
|
||
|
||
//当前的时间（针对定时定题）
|
||
currentDate: moment().format('YYYY-MM-DD'),
|
||
|
||
//当前分数
|
||
currentScore: null,
|
||
|
||
//获取用户已回答的轮数 针对单天随机
|
||
userHasAnswerRandomNum: 0,
|
||
|
||
//倒计时计时器
|
||
timerInterval: null, //答题时间（使用秒）
|
||
countDownSeconds: 0, //剩余时间
|
||
remainder: null,
|
||
|
||
isNull(val) {
|
||
return !val
|
||
},
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
issueList() {
|
||
return this.questionData.issues
|
||
}, titleMsg() {
|
||
const radios = this.issueList.filter(v => v.itx === 1 && v.iisdx)
|
||
const checkBoxes = this.issueList.filter(v => v.itx === 1 && !v.iisdx)
|
||
|
||
const radioScore = radios && radios.length > 0 ? radios[0].fraction : 0
|
||
const checkBoxesScore = checkBoxes && checkBoxes.length > 0 ? checkBoxes[0].fraction : 0
|
||
|
||
const radioScoreSum = radios.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)
|
||
const checkBoxesScoreSum = checkBoxes.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b, 0)
|
||
|
||
const sumScore = radioScoreSum + checkBoxesScoreSum
|
||
|
||
let radiosText = ''
|
||
let checkBoxesText = ''
|
||
|
||
if (radios && radios.length > 0) {
|
||
radiosText = "单选题" + radios.length + "题，每题" + radioScore + "分，合计" + radioScoreSum + "分；"
|
||
}
|
||
if (checkBoxes && checkBoxes.length > 0) {
|
||
checkBoxesText = "多选题" + checkBoxes.length + "题，每题" + checkBoxesScore + "分，合计" + checkBoxesScoreSum + "分；总分" + sumScore + "分。"
|
||
}
|
||
return "说明：" + radiosText + checkBoxesText
|
||
},
|
||
|
||
fullScore() {
|
||
return this.issueList.map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
|
||
}, radioNum() {
|
||
return this.issueList.filter(v => v.idx === 1 && v.iisdx).map(v => v.fraction ? v.fraction : 0).reduce((a, b) => a + b)
|
||
}, checkBoxNum() {
|
||
|
||
},
|
||
|
||
//判断是否为同一天
|
||
isSameDay() {
|
||
if (this.questionData.startTime && this.questionData.endTime) {
|
||
return moment(this.questionData.startTime).isSame(moment(this.questionData.endTime), 'day')
|
||
}
|
||
return false
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
openRandomCount() {
|
||
this.randomCountSheetShow = true
|
||
this.randomActions = []
|
||
|
||
if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
|
||
for (let i = 0; i < this.userHasAnswerRandomNum; i++) {
|
||
this.randomActions.push({
|
||
name: '第' + (i + 1) + '轮', val: i + 1
|
||
})
|
||
}
|
||
} else if (this.questionData.qlx == 2 && (this.questionData.ctMode == 1 || (this.questionData.ctMode == 2 && !this.isSameDay))) {
|
||
const {startTime, endTime} = this.questionData
|
||
const startMoment = moment(startTime)
|
||
const endMoment = moment(endTime)
|
||
const now = moment()
|
||
// 计算两个日期之间相差的天数
|
||
const daysDifference = endMoment.diff(startMoment, 'days')
|
||
for (let i = 0; i <= daysDifference; i++) {
|
||
this.randomActions.push({
|
||
name: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
|
||
val: startMoment.clone().add(i, 'days').format('YYYY-MM-DD'),
|
||
disabled: moment(startMoment.clone().add(i, 'days').format('YYYY-MM-DD')).isAfter(now)
|
||
})
|
||
}
|
||
}
|
||
}, async randomCountSelect(val) {
|
||
if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && this.isSameDay) {
|
||
this.randomCount = val.val
|
||
} else if (this.questionData.qlx == 2 && this.questionData.ctMode == 2 && !this.isSameDay) {
|
||
this.currentDate = val.val
|
||
} else if (this.questionData.qlx == 2 && this.questionData.ctMode == 1) {
|
||
this.currentDate = val.val
|
||
}
|
||
await this.getQuestionData()
|
||
await this.checkUserFinishAnswer()
|
||
await this.checkCanAnswerAgain()
|
||
await this.getScore()
|
||
},
|
||
|
||
async getQuestionData() {
|
||
const resp = await $.get(BASE_URL + '/questionInfo/' + this.id, {
|
||
currentDate: this.currentDate, randomCount: this.randomCount
|
||
})
|
||
this.questionData = resp.data
|
||
},
|
||
|
||
// cellToggle(issue, worId) {
|
||
// if (this.finishAnswer || this.finishAllAnswer) {
|
||
// return
|
||
// }
|
||
// this.toggle(issue, worId)
|
||
// },
|
||
//
|
||
// toggle(issue, worId) {
|
||
// //单选
|
||
// if (issue.iisdx) {
|
||
// this.$refs['checkboxGroup' + issue.iid][0].toggleAll(false)
|
||
// } else {
|
||
//
|
||
// }
|
||
// console.log(issue.userSelect)
|
||
// this.$refs['checkboxes' + worId][0].toggle()
|
||
// setTimeout(() => {
|
||
// console.log(issue.userSelect)
|
||
// })
|
||
// },
|
||
|
||
save() {
|
||
this.$confirm('保存后下次可继续做答，您确定要保存吗？').then(async () => {
|
||
const replies = this.questionData.issues.map(v => {
|
||
return {
|
||
qid: v.iid, issueId: v.iid, userSelect: v.userSelect,
|
||
}
|
||
})
|
||
|
||
const {code} = await $.post(BASE_URL + '/saveAnswer', {
|
||
replies: JSON.stringify(replies),
|
||
questionId: this.questionData.qid,
|
||
isSave: true,
|
||
randomCount: this.randomCount
|
||
})
|
||
this.$modal.closeLoading()
|
||
if (code === 0) {
|
||
this.$message.success('保存成功')
|
||
} else {
|
||
this.$message.success('保存失败')
|
||
}
|
||
})
|
||
},
|
||
|
||
submit() {
|
||
const iids = this.questionData.issues.filter(v => !v.userSelect).map(v => v.iid)
|
||
|
||
if (iids.length > 0) {
|
||
this.$toast('您还有' + iids.length + '题未作答，请答完后再提交！')
|
||
document.getElementById('issue' + iids[0]).scrollIntoView({
|
||
behavior: 'smooth', block: 'center', 'inline': 'start'
|
||
});
|
||
return
|
||
}
|
||
|
||
const msg = '一旦提交不可修改，您确定要提交吗？'
|
||
|
||
this.$modal.confirm(msg).then(async () => {
|
||
this.autoSubmit()
|
||
})
|
||
},
|
||
|
||
async autoSubmit() {
|
||
const replies = this.questionData.issues.map(v => {
|
||
return {
|
||
qid: this.id, issueId: v.iid, userSelect: v.userSelect,
|
||
}
|
||
})
|
||
|
||
let takeTime = null
|
||
if (this.questionData.enableTimer) {
|
||
takeTime = this.questionData.timerMinute * 60 - this.countDownSeconds
|
||
}
|
||
|
||
const {code} = await $.post(BASE_URL + '/saveAnswer', {
|
||
replies: JSON.stringify(replies),
|
||
questionId: this.questionData.qid,
|
||
isSave: false,
|
||
randomCount: this.randomCount,
|
||
takeTime: takeTime
|
||
})
|
||
this.$modal.closeLoading()
|
||
if (code === 0) {
|
||
this.$modal.msg('提交成功')
|
||
await this.getUserHasAnswerRandomNum()
|
||
await this.checkUserFinishAnswer()
|
||
await this.getReply()
|
||
await this.assignmentAnswer()
|
||
await this.checkUserFinishAnswer()
|
||
await this.checkCanAnswerAgain()
|
||
await this.getScore()
|
||
}
|
||
},
|
||
|
||
//获取回答信息
|
||
async getReply() {
|
||
const resp = await $.get(BASE_URL + '/answerInfo/' + this.id, {
|
||
randomCount: this.randomCount, currentDate: this.currentDate
|
||
})
|
||
this.replyInfo = resp.data
|
||
},
|
||
|
||
//用户是否全部答完提交
|
||
async checkUserFinishAnswer() {
|
||
this.mLoading = true
|
||
const resp = await $.get(BASE_URL + '/checkUserFinishAnswer', {
|
||
questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
|
||
})
|
||
this.mLoading = false
|
||
this.finishAnswer = resp.data
|
||
await this.getReply()
|
||
await this.assignmentAnswer()
|
||
},
|
||
|
||
//答案赋值
|
||
assignmentAnswer() {
|
||
this.questionData.issues.forEach((issue,issueIndex) => {
|
||
const rwids = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
|
||
// rwids.forEach(rwid => {
|
||
// // this.toggle(issue, rwid)
|
||
// issue.userSelect = rwid
|
||
// })
|
||
// issue.userSelect = rwids
|
||
this.$set(this.questionData.issues[issueIndex],'userSelect',rwids)
|
||
|
||
const wids = issue.wors.filter(v => v.correct).map(v => v.wid)
|
||
const userSelects = this.replyInfo.filter(v => v.issueId === issue.iid).map(v => v.rwid)
|
||
const isEqual = wids.length === userSelects.length && wids.every(value => userSelects.includes(value))
|
||
issue.isEqual = isEqual
|
||
})
|
||
},
|
||
|
||
async answerAgain() {
|
||
if (this.questionData.ctMode === 3) {
|
||
await this.onOpen(this.id)
|
||
this.finishAnswer = false
|
||
this.questionData.issues.forEach((issue,issueIndex) => {
|
||
issue.wors.forEach(wor => {
|
||
this.$set(this.questionData.issues[issueIndex],'userSelect',[])
|
||
})
|
||
})
|
||
this.checkTimer()
|
||
} else {
|
||
// this.finishAnswer = false
|
||
// setTimeout(() => {
|
||
// this.questionData.issues.forEach(issue => {
|
||
// issue.wors.forEach(wor => {
|
||
// // this.$refs['checkboxes' + wor.wid][0].toggle(false)
|
||
// wor.userSelect = []
|
||
// })
|
||
// })
|
||
// }, 0)
|
||
// this.checkTimer()
|
||
}
|
||
},
|
||
|
||
async getUserHasAnswerRandomNum() {
|
||
const resp = await $.get(BASE_URL + '/getUserHasAnswerRandomNum', {
|
||
questionId: this.id
|
||
})
|
||
this.userHasAnswerRandomNum = resp.data
|
||
this.randomCount = this.userHasAnswerRandomNum
|
||
},
|
||
|
||
async checkCanAnswerAgain() {
|
||
const resp = await $.get(BASE_URL + '/checkCanAnswerAgain', {
|
||
questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
|
||
})
|
||
this.canAnswerAgain = resp.data
|
||
},
|
||
|
||
async getScore() {
|
||
const resp = await $.get(BASE_URL + '/getScore/', {
|
||
questionId: this.id, randomCount: this.randomCount, currentDate: this.currentDate
|
||
})
|
||
this.currentScore = resp.data
|
||
},
|
||
|
||
checkTimer() {
|
||
if (this.questionData.enableTimer) {
|
||
if (this.timerInterval) {
|
||
clearInterval(this.timerInterval)
|
||
}
|
||
if (!this.finishAnswer) {
|
||
this.$alert(
|
||
'本次答题时间' + this.questionData.timerMinute + '分钟，请尽快完成！', '提示'
|
||
).then(() => {
|
||
this.countDownSeconds = this.questionData.timerMinute * 60
|
||
this.updateCountdown()
|
||
this.timerInterval = setInterval(() => {
|
||
this.updateCountdown()
|
||
}, 1000)
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
updateCountdown() {
|
||
// 计算剩余的分钟和秒数
|
||
let mins = Math.floor(this.countDownSeconds / 60)
|
||
let secs = this.countDownSeconds % 60
|
||
// 格式化时间，确保分钟和秒数始终是两位数
|
||
mins = mins < 10 ? '0' + mins : mins;
|
||
secs = secs < 10 ? '0' + secs : secs;
|
||
this.remainder = mins + ':' + secs
|
||
// 如果倒计时结束，显示结束信息
|
||
if (this.countDownSeconds <= 0) {
|
||
this.remainder = '时间到'
|
||
clearInterval(this.timerInterval)
|
||
this.$alert(
|
||
'答题时间到，请点击确认提交答案！', '提示'
|
||
).then(() => {
|
||
this.autoSubmit()
|
||
})
|
||
} else {
|
||
this.countDownSeconds = this.countDownSeconds - 1
|
||
}
|
||
},
|
||
|
||
async onOpen(id) {
|
||
if (this.timerInterval) {
|
||
clearInterval(this.timerInterval)
|
||
}
|
||
this.id = id
|
||
await this.getQuestionData()
|
||
await this.checkCanAnswerAgain()
|
||
await this.getUserHasAnswerRandomNum()
|
||
await this.checkUserFinishAnswer()
|
||
await this.getScore()
|
||
await this.checkTimer()
|
||
}
|
||
|
||
},
|
||
|
||
async created() {
|
||
|
||
},
|
||
|
||
style: /*language=CSS*/ `
|
||
.custom-disabled-checkbox{
|
||
pointer-events: none;
|
||
}
|
||
`
|
||
}
|