最近项目中使用到很多答题卡，实现了一个可以复用的答题卡组件。
项目使用HbuilderX，uniapp，uview进行开发。
代码中有些地方判断写的没必要，懒得改了，xdm看不惯自己改吧 hhhhhhh ^_^。
HTML代码：微信小程序页面，如果要修改为H5，直接把view标签修改为div，
并把 :style="[getBackgroundColor(item)]"，修改为:style="getBackgroundColor(item)"
<template>
<view style="background: #f9f9f9;min-height: 100%">
<view v-if="!isFinal">
<view class="questTypeBox">
<view class="questionType">{{ questionType }}题</view>
<view class="questionAmount">
<view>
<span style="color: #1e88e5">{{ current }}</span>
|{{ list.length }}
</view>
</view>
</view>
<view class="questionBox">
<template v-if="currentQuestion.isM" style="margin: 10px 0;">
<view class="titleBox">
<view class="titleMain"><view class="titleContent" v-html="materialList[currentQuestion.mid]"></view></view>
</view>
</template>
<view class="titleBox">
<view class="titleMain"><view class="titleContent" v-html="currentQuestion.title"></view></view>
</view>
<view class="answersBox">
<view v-if="currentQuestion.type === 1">
<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
<u-radio :bgcolor="getBackgroundColor(item)" v-for="(item, index) in currentQuestion.formOptions || []" :key="index" :name="item.value" border>
<span style="width: 100%;height: 100%;" :style="[getBackgroundColor(item)]" class="span_label" v-html="item.label"></span>
</u-radio>
</u-radio-group>
</view>
<template v-else-if="currentQuestion.type === 5">
<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
<u-radio name="1" label="正确" :bgcolor="getBackgroundColor(1)" border></u-radio>
<u-radio name="0" label="错误" :bgcolor="getBackgroundColor(0)" border></u-radio>
</u-radio-group>
</template>
<template v-else-if="currentQuestion.type === 2">
<u-checkbox-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-model="form.answer" placement="column">
<u-checkbox
shape="circle"
border
v-for="(item, index) in currentQuestion.formOptions || []"
:key="index"
:name="item.value"
:label="item.label"
></u-checkbox>
</u-checkbox-group>
<u-button style="width: 100%;height: 40px;font-size: 14px;font-weight: 500" round size="medium" type="primary" @click="handleSubmit">提交答案</u-button>
</template>
<template v-else-if="currentQuestion.type === 3">
<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
<u-button
style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
round
size="medium"
type="primary"
@click="handleSubmit"
>
提交答案
</u-button>
</template>
<template v-else-if="currentQuestion.type === 6">
<u--textarea :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" :rows="3" placeholder="请输入内容" />
<u-button
style="width: 100%;height: 40px;font-size: 14px;font-weight: 500;margin-top: 10px;margin-bottom: 50px;"
round
size="medium"
type="primary"
@click="handleSubmit"
>
提交答案
</u-button>
</template>
<template v-if="currentQuestion.type === 4">
<u-radio-group :disabled="currentQuestion.stuAnswer == '' ? false : true" v-if="isAnswer" v-model="form.answer" placement="column" @change="handleSubmit">
<u-radio name="1" label="正确" :style="[getBackgroundColor(1)]" border></u-radio>
<u-radio name="0" label="错误" :style="[getBackgroundColor(0)]" border></u-radio>
</u-radio-group>
</template>
<!-- 按钮区域 -->
</view>
</view>
<view class="answerBox" v-if="tip">
<view style="display: flex;flex: 1;" v-if="currentQuestion.type !== 3 && currentQuestion.type !== 6">
<view class="answerIcon" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">
<img :src="statusIcon" style="position: absolute;left: 0;top: 0;height:20px" />
</view>
<view class="answerBoxAnswers">
<view class="resultCompareText" v-if="currentQuestion.type === 1 || currentQuestion.type === 2">{{ resultText }}</view>
<view style="display: flex;flex: 1">
<view class="answerBoxAnswersList">
<view class="answers">正确答案</view>
<view class="answers">
{{
outputList(currentQuestion.rightAnswer) == 1
? '正确'
: outputList(currentQuestion.rightAnswer) == 0
? '错误'
: outputList(currentQuestion.rightAnswer)
}}
</view>
</view>
<view class="answerBoxAnswersList">
<view class="answers">您的答案</view>
<view class="answers">
{{
outputList(currentQuestion.stuAnswer) == 1
? '正确'
: outputList(currentQuestion.stuAnswer) == 0
? '错误'
: outputList(currentQuestion.stuAnswer)
}}
</view>
</view>
</view>
</view>
</view>
<view v-if="currentQuestion.type === 3">
<view class="answerBoxAnswers">
<view style="display: flex;flex: 1">
<view class="answerBoxAnswersList">
<view class="answers">正确答案</view>
<view
style="white-space: pre-wrap;"
class="answers"
v-for="(answer, index) in currentQuestion.rightAnswer"
:key="index"
v-show="answer != ''"
v-html="answer"
></view>
</view>
</view>
</view>
</view>
<view v-if="currentQuestion.type === 6">
<view class="answerBoxAnswers">
<view style="display: flex;flex: 1">
<view class="answerBoxAnswersList">
<view class="answers">正确答案</view>
<view class="answers" v-for="(answer, index) in currentQuestion.rightAnswer" :key="index" v-show="answer != ''">{{ answer }};</view>
</view>
</view>
</view>
</view>
</view>
<view class="questionAnalysis" v-if="tip">
<view class="analysisTitle">
答案解析
<view class="analysis_AI" @click="toAi">
<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/icon_4a6pvlsjrq8/%E6%9C%BA%E5%99%A8%E4%BA%BA.png" alt="" />
AI智能解析
</view>
</view>
<view style="white-space: pre-wrap;" class="analysisContent" v-html="currentQuestion.analysis"></view>
</view>
<view style="height: 20vh;width: 100%;"></view>
<view class="bottomButton">
<view class="buttonGroup">
<view class="lButton" @click="lookAnswerClick()">
<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A34checkAnswer.svg" />
<p>查看答案</p>
</view>
<view class="lButton" @click="addCollection">
<van-icon :name="collectIds.includes(currentQuestion.id) ? 'star' : 'star-o'" />
<p>收藏</p>
</view>
<view class="lButton" @click="openAside">
<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A57questionsCard.svg" />
<p>答题卡</p>
</view>
<view class="lButton" @click="handlePreNextClick(-1)">
<img src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A28up.svg" />
<p>上一题</p>
</view>
<view class="rButtonBox">
<view class="rButton" @click="handlePreNextClick(1)">{{ list.length === current ? '完成' : '下一题' }}</view>
</view>
</view>
</view>
<view class="aside" :class="{ openAside: answerPanel }">
<view style="padding: 20px;border-radius: 5px;">
<view style="display: flex;justify-content: space-between">
<view class="card-title">答题卡</view>
<view>
<span class="titleDeText">
未做
<i class="titleText"></i>
</span>
<span class="titleDeText">
已做
<i class="titleText titleAnswered"></i>
</span>
<span class="titleDeText">
正确
<i class="titleText titleRight"></i>
</span>
<span class="titleDeText">
错误
<i class="titleText titleError"></i>
</span>
</view>
</view>
<view style="padding: 20px 0 10px 0;overflow-y:auto;min-height: 260px;max-height: 400px;">
<view
v-for="(item, index) in list"
:key="index"
:class="{
'picker-item': true,
error: !answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0,
right: answerEqual(item.stuAnswer, item.rightAnswer, item.type) && item.stuAnswer.length > 0,
normal: answerEqual(item.type, 3) && item.stuAnswer.length > 0
}"
@click="answerPanelClick(index)"
>
{{ index + 1 }}
</view>
</view>
</view>
</view>
</view>
<view class="accomplish" v-if="isFinal">
<view class="detailBox">
<img class="detailIcon" src="https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A10accomplish.png" />
<view class="detailTitle">答题完成</view>
<view class="detailTitle">{{ examName }}</view>
<view class="detailTitle">正确率{{ (right / list.length).toFixed(2) * 100 }}%</view>
<view class="detailButton detailButtonTop" @click="viewAnalysis">查看解析</view>
<view class="detailButton detailButtonBottom" @click="goBack">返回列表</view>
</view>
</view>
</view>
</template>js代码：使用了lodash，需要先安装lodash npm install lodash，
项目中包含很多题型，可以根据自己的题型进行修改，每个题型都由对应的数字type表达：
1: '单项选择'，2: '多项选择'，3: '问答'，4: '材料'，5: '判断'，6: '填空'。
关键信息：currentQuestion：当前题目信息，list：题目列表，collectionList：收藏列表
data中的数据：
data() {
const type = Number(this.$route == undefined ? 1 : this.$route.query.type);
return {
examquestionSource: {},
tokenDetail: {},
type,
isEqual,
form: {
answer: [''],
questionId: ''
},
radio: 3,
tip: type === 2,
list: [],
current: 1,
submitLoading: false,
loading: false,
examName: this.$route == undefined ? '' : this.$route.query.name,
answerPanel: false,
redoExam: false,
showAnalysis: false,
statusIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
rightIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A33%3A25rightn.png',
errorIcon: 'https://hgkj-image.oss-cn-shenzhen.aliyuncs.com/test/2023-08-25%2014%3A32%3A49errorn.png',
resultText: '',
rightText: '回答正确',
errorText: '回答错误',
isFinal: false,
materialList: [],
strategy: '',
collectionList: [],
collectIds: [],
everyDay: '',
selectRight: 0,
right: 0,
error: 0,
submitList: [],
// 错题
errChild: [],
paperId: '',
collectList: [],
imitateTest: uni.getStorageSync('imitateTest')
// // 0 综合知识
// // 1 案例分析
};
},计算属性 computed：
computed: {
currentQuestion() {
return this.getCurrentQuestion();
},
questionType() {
return {
1: '单项选择',
2: '多项选择',
3: '问答',
4: '材料',
5: '判断',
6: '填空'
}[this.currentQuestion.type || 3];
},
isAnswer() {
return this.type === 1;
},
getBackgroundColor() {
return function(item = {}) {
if (this.currentQuestion.type == 1) {
if (this.tip && this.currentQuestion.rightAnswer === item.value && item.value === this.currentQuestion.stuAnswer)
return {
backgroundColor: 'rgb(168 255 173)'
};
else if (this.tip && this.currentQuestion.rightAnswer !== item.value && item.value === this.currentQuestion.stuAnswer)
return {
backgroundColor: '#ffbaba'
};
else if (this.tip && this.currentQuestion.rightAnswer == item.value)
return {
backgroundColor: 'rgb(168 255 173)'
};
else return {};
}
if (this.currentQuestion.type == 4) {
if (this.tip && parseInt(this.currentQuestion.rightAnswer) === item)
return {
backgroundColor: 'rgb(168 255 173)'
};
else if (this.tip && this.currentQuestion.rightAnswer != item)
return {
backgroundColor: '#ffbaba'
};
else return {};
}
if (this.currentQuestion.type == 5) {
let YorN = '';
if (item == 0) {
YorN = '错误';
} else {
YorN = '正确';
}
console.log(this.currentQuestion.rightAnswer[0] === YorN);
if (this.tip && this.currentQuestion.rightAnswer[0] === YorN)
return {
backgroundColor: 'rgb(168 255 173)'
};
else if (this.tip && this.currentQuestion.rightAnswer[0] != YorN)
return {
backgroundColor: '#ffbaba'
};
else return {};
}
};
},
answerEqual() {
return function(a, b, c) {
if (c == 1) {
return a[0] === b[0];
} else if (typeof a === 'object' && typeof b === 'object') {
return JSON.stringify(a) === JSON.stringify(b);
}
return a === b;
};
}
},
监听数据变化 watch:
watch: {
form: {
handler(old, news) {},
deep: true
},
currentQuestion(value) {//题目信息
if (value.type === 1) {
if (value.stuAnswer.length > 0) {
this.form.answer = value.stuAnswer;
this.checkAnswer();
} else {
this.form.answer = '';
}
}
if (value.type === 2) {
if (value.stuAnswer.length > 0) {
this.form.answer = value.stuAnswer;
this.checkAnswer();
} else this.form.answer = [];
}
if (value.type === 3) {
this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
if (value.stuAnswer.length > 0) this.checkAnswer();
}
if (value.type === 6) {
this.form.answer = value.stuAnswer.length > 0 ? value.stuAnswer : '';
if (value.stuAnswer.length > 0) this.checkAnswer();
}
if (value.type === 4) {
// console.log(value);
if (value.stuAnswer.length > 0) {
this.form.answer = value.stuAnswer;
this.checkAnswer();
} else this.form.answer = '';
}
if (value.type === 5) {
console.log(value);
console.log(value.stuAnswer);
if (value.stuAnswer.length > 0) {
this.form.answer = value.stuAnswer;
this.checkAnswer();
} else this.form.answer = '';
}
}
},onLoad()生命周期:
根据自己的页面传参，在onLoad中获取，并根据options中的数据进行判断获取的是什么题目，例如：从每日一练、模拟考试、收藏、错题等跳转传参不同，获取的题目也不同。
onLoad(options) {
this.getList(1);
this.getCollectionList();
},methods方法：
toAi() {
// 跳转文心一言，并携带题目。
uni.navigateTo({
url: `/pages/wenxin/index?question=${this.currentQuestion.title}`
});
},
// 获取收藏列表
async getCollectionList(id) {
this.collectIds = [];
this.collectionList = [];
let res = await this.$request.request({
url: `/student/collect`,
method: 'GET'
});
let collectionList = res.data;
for (let collect of collectionList) {
if (collect.paperId == this.currentQuestion.paperId) {
this.collectionList = collect.collectChildren;
for (let question of collect.collectChildren) {
this.collectIds.push(question.questionId);
}
}
}
},
// 收藏
async addCollection() {
// 如果获取的收藏列表中包含点击的题目id，就取消收藏
if (this.collectIds.includes(this.currentQuestion.id)) {
await this.$request
.request({
url: `/student/collect?questionId=${this.currentQuestion.id}`,
method: 'DELETE'
})
.then(res => {
// 重新获取收藏列表
this.getCollectionList();
// 提示
uni.showToast({
title: '取消收藏',
icon: 'none',
duration: 1500
});
});
} else {
// 否则添加收藏
await this.$request
.request({
url: `/student/collect`,
method: 'POST',
data: {
questionId: this.currentQuestion.id,
paperId: this.currentQuestion.paperId
}
})
.then(res => {
// 重新获取收藏列表
this.getCollectionList();
// 提示
uni.showToast({
title: '收藏成功',
icon: 'none',
duration: 1500
});
});
}
},
// 下一题
async handlePreNextClick(p) {
if (this.list.length === this.current) {
if (this.right + this.error == this.list.length) {
// 提交答案
this.isFinal = true;
if (this.everyDay == true) {
// 如果每日一练还要添加每日一练记录
this.postDays();
}
} else {
// 最后一道题
uni.showToast({
title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,
icon: 'none',
duration: 1500
});
}
}
if (p === 1 && (!this.isAnswer || this.currentQuestion.type === 3)) {
await this.submit();
}
if (this.isAnswer) {
this.tip = false;
}
// 查看解析
if (this.redoExam === true) this.tip = true;
// current为题目序号
this.current = Math.max(1, Math.min(this.current + p, this.list.length));
this.checkAnswer();
if (this.redoExam === false) this.tip = false;
},
// 添加每日一练记录
postDays() {
this.$request
.request({
url: `/student/dailyParactice?accuracy=${(this.selectRight / this.list.length).toFixed(2)}`,
method: 'POST'
})
.then(res => {
// console.log(res);
// 显示返回结果
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
// 等待一下之后跳转首页
setTimeout(function() {
uni.reLaunch({
url: '/pages/chapters/index'
});
}, 2000);
});
},
getCurrentQuestion() {
const data = _.cloneDeep(this.list).find((_, i) => i === this.current - 1) || {};
data.formOptions = Object.entries(data.options || {}).map(([key, value]) => ({
label: key + '、' + value,
value: key
}));
if (data.type === 1 && Array.isArray(data.rightAnswer) && data.rightAnswer.length > 0) {
data.rightAnswer = data.rightAnswer[0];
}
return data;
},
// 答题记录
async noteTitle(correct, userAnswer) {
// 缓存中的course，在点击课程的时候会保存课程的信息在缓存中。
if (uni.getStorageSync('course')) {
var course = JSON.parse(uni.getStorageSync('course'));
// 添加刷题记录到数据库
await this.$request
.request({
url: `/student/pascal/count`,
method: 'POST',
data: {
courseId: course.coursesId, //课程id
courseName: course.paperName, //课程名称
pascalId: this.currentQuestion.id, //试题ID
answer: userAnswer, //用户作答
isRigth: correct, //是否正确
paperId: this.currentQuestion.paperId //套题id
}
})
.then(res => {
// console.log('答题记录', res);
});
}
},
handleSubmit() {
let isRight = false;
if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) {
this.list[this.current - 1].stuAnswer = this.form.answer;
if (this.currentQuestion.type === 2) this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
if (this.outputList(this.currentQuestion.rightAnswer, 'this.currentQuestion.rightAnswer') !== this.outputList(this.form.answer, 'this.form.answer')) {
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
this.currentQuestion.isRight = false;
let answer = [];
answer.push(this.currentQuestion.stuAnswer);
this.noteTitle(0, JSON.stringify(answer));
if (!this.submitList.includes(this.currentQuestion.id)) {
this.submitList.push(this.currentQuestion.id);
this.error++;
}
} else {
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.currentQuestion.isRight = true;
if (this.current !== this.list.length) {
uni.showToast({
title: '回答正确，正在跳转第' + (this.current + 1) + '题',
icon: 'none',
duration: 2000
});
}
let answer = [];
answer.push(this.currentQuestion.stuAnswer);
this.noteTitle(1, JSON.stringify(answer));
if (!this.submitList.includes(this.currentQuestion.id)) {
this.submitList.push(this.currentQuestion.id);
this.right++;
}
let _this = this;
setTimeout(function() {
_this.handlePreNextClick(1);
}, 1000);
}
}
if (this.currentQuestion.type === 3) {
this.list[this.current - 1].stuAnswer = this.form.answer;
this.tip = true;
this.noteTitle(1, JSON.stringify(this.form.answer));
}
if (this.currentQuestion.type === 6) {
this.list[this.current - 1].stuAnswer = this.form.answer;
this.tip = true;
this.noteTitle(1, JSON.stringify(this.form.answer));
this.right++;
}
if (this.currentQuestion.type === 4) {
this.list[this.current - 1].stuAnswer = this.form.answer;
if (this.list[this.current - 1].stuAnswer === this.list[this.current - 1].rightAnswer) {
uni.showToast({
title: '回答正确，正在跳转第' + (this.current + 1) + '题',
icon: 'none',
duration: 2000
});
let _this = this;
setTimeout(function() {
_this.handlePreNextClick(1);
}, 1000);
}
}
if (this.currentQuestion.type === 5) {
if (this.form.answer == 1) {
this.list[this.current - 1].stuAnswer = '正确';
// 正确
this.tip = true;
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.currentQuestion.isRight = true;
} else if (this.form.answer == 0) {
this.list[this.current - 1].stuAnswer = '错误';
// 错误
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
this.currentQuestion.isRight = false;
}
if (this.list[this.current - 1].stuAnswer == this.list[this.current - 1].rightAnswer) {
uni.showToast({
title: '回答正确，正在跳转第' + (this.current + 1) + '题',
icon: 'none',
duration: 2000
});
setTimeout(() => {
this.handlePreNextClick(1);
}, 1000);
this.noteTitle(1, JSON.stringify(this.form.answer));
} else {
this.noteTitle(0, JSON.stringify(this.form.answer));
}
}
this.$forceUpdate();
this.submit();
uni.setStorageSync('questionList', this.list);
},
async submit() {
const form = {
...this.form
};
if (this.currentQuestion.type === 2 && form.answer && form.answer.length) {
// 答案排序
form.answer = form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
}
this.submitLoading = true;
// 显示答题完成界面
if (this.list.length === this.current) {
if (this.right + this.error == this.list.length) {
this.isFinal = true;
if (this.everyDay) {
this.postDays();
}
} else {
uni.showToast({
title: `当前最后一题，您还有${this.list.length - (this.right + this.error)}道题目未作答`,
icon: 'none',
duration: 2000
});
}
}
},
checkToken(res) {
if (res.code == 500) {
Dialog.confirm({
title: '广东自考题库',
message: '登录状态已过期，请重新登录'
})
.then(() => {
// 页面跳转
uni.navigateTo({
url: '/pages/Login/index'
});
})
.catch(() => {
console.log('取消');
});
}
},
async getList(isFirstFetch) {
if (this.everyDay) {
let course = uni.getStorageSync('course');
await this.$request
.request({
url: `/student/dailyParactice/days/questions?courseId=2`,
method: 'GET'
})
.then(res => {
this.examquestionSource = res.data;
// 获取题目列表
this.getquestionList();
});
} else if (this.errChild.length > 0) {
this.examquestionSource = this.errChild;
this.getquestionList();
} else if (this.collectList.length > 0) {
this.examquestionSource = this.collectList;
this.getquestionList();
} else if (uni.getStorageSync('questionList')) {
this.examquestionSource = uni.getStorageSync('questionList');
// 获取题目列表
this.getquestionList();
} else if (uni.getStorageSync('imitateTest')) {
if (uni.getStorageSync('imitateTest') == 0) {
// 获取机考选择题
await this.$request
.request({
url: `/student/dailyParactice/get/testSgin`,
method: 'GET'
})
.then(res => {
this.examquestionSource = res.data;
// 获取题目列表
this.getquestionList();
});
} else {
// 案例分析
await this.$request
.request({
url: `/student/dailyParactice/get/case`,
method: 'GET'
})
.then(res => {
this.examquestionSource = res.data;
// 获取题目列表
this.getquestionList();
});
}
} else {
await this.$request
.request({
url: `/student/paper/question/list?paperId=${this.paperId}`,
method: 'GET'
})
.then(res => {
this.checkToken(res);
this.examquestionSource = res.rows;
// 获取题目列表
this.getquestionList();
});
}
},
getquestionList() {
this.list = this.handleQuestion(this.examquestionSource);
if (this.strategy == 1) {
this.$request
.request({
url: `/student/pascal/count/getPascale/record`,
data: {
paperId: this.paperId,
strategy: this.strategy
},
method: 'GET'
})
.then(res => {
for (let question of res.data) {
for (let item of this.list) {
if (item.id == question.pascalId) {
if (typeof JSON.parse(question.answer) == 'string') {
item.stuAnswer = JSON.parse(question.answer);
} else {
item.stuAnswer = JSON.parse(question.answer)[0];
}
}
}
}
});
} else if (this.strategy == 0) {
// 点击取消清空用户答题记录
this.$request
.request({
// paperType为1测试章节套题
url: `/student/pascal/count/getPascale/record`,
data: {
paperId: this.paperId,
strategy: this.strategy
},
method: 'GET'
})
.then(res => {
// console.log('题目列表', this.list);
// console.log('清空答题记录', res);
});
}
},
isJSON(str) {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
console.log('error：' + str + '!!!' + e);
return false;
}
}
},
// 对题目进行处理
handleQuestion(singleList, mid = 0, isM = false) {
let delist = [];
for (let i = 0; i < singleList.length; i++) {
if (singleList[i].options != '') {
singleList[i].options = JSON.parse(singleList[i].options);
}
let examp = {
analysis: singleList[i].analysis,
analysisImgKey: '',
analysisImgUrl: '',
id: singleList[i].questionId,
isAnswer: true,
options: {
A: singleList[i].options.A,
B: singleList[i].options.B,
C: singleList[i].options.C,
D: singleList[i].options.D,
E: singleList[i].options.E ? singleList[i].options.E : null,
F: singleList[i].options.F ? singleList[i].options.F : null
},
questionImgKey: '',
questionImgUrl: '',
rightAnswer: this.isJSON(singleList[i].rightAnswer) ? JSON.parse(singleList[i].rightAnswer) : singleList[i].rightAnswer,
stuAnswer: '',
title: singleList[i].title,
type: singleList[i].type,
isM: false,
mid: mid,
paperId: singleList[i].paperId
};
console.log();
if (!singleList[i].options.E) {
delete examp.options.E;
delete examp.options.F;
}
if (!singleList[i].options.F) {
delete examp.options.F;
}
if (isM) examp.isM = true;
delist.push(examp);
}
// console.log(delist);
return delist;
},
openAside() {
this.$forceUpdate();
this.answerPanel = !this.answerPanel;
},
answerPanelClick(index) {
this.current = index + 1;
this.tip = false;
// uniapp获取微信小程序窗口信息
let getWindowInfo = uni.getWindowInfo();
if (getWindowInfo.screenWidth <= 768) {
this.openAside();
}
},
outputList(list, source = 'default') {
let outputStr = '';
if (typeof list == 'string' || typeof list == 'number') return list;
if (list != null)
for (let i = 0; i < list.length; i++) {
outputStr += list[i] + '';
}
return outputStr;
},
viewAnalysis() {
this.isFinal = false;
this.current = 1;
this.redoExam = true;
this.tip = true;
},
goBack() {
this.$router.go(-1);
},
checkAnswer() {
if (this.currentQuestion.type === 1 || this.currentQuestion.type === 2) {
if (this.currentQuestion.type === 2) {
if (this.form.answer == [] || this.form.answer.length === 0) return;
// console.log(this.outputList(this.form.answer));
this.form.answer = this.form.answer.sort((a, b) => a.charCodeAt() - b.charCodeAt());
if (this.outputList(this.currentQuestion.rightAnswer) !== this.outputList(this.form.answer)) {
if (this.form.answer == [] || this.form.answer.length === 0) return;
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
} else {
this.tip = true;
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.selectRight++;
}
}
if (this.currentQuestion.type === 1) {
if (this.form.answer == [] || this.form.answer.length === 0) return;
if (this.form.answer == this.currentQuestion.rightAnswer) {
this.tip = true;
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.selectRight++;
} else {
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
}
}
}
if (this.currentQuestion.type === 3 || this.currentQuestion.type === 6) {
this.tip = true;
}
if (this.currentQuestion.type === 4) {
if (this.form.answer == [] || this.form.answer.length === 0) return;
if (this.form.answer === this.currentQuestion.rightAnswer) {
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.selectRight++;
} else {
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
}
}
if (this.currentQuestion.type === 5) {
if (this.form.answer == [] || this.form.answer.length === 0) return;
if (this.form.answer === this.currentQuestion.rightAnswer) {
this.resultText = this.rightText;
this.statusIcon = this.rightIcon;
this.selectRight++;
} else {
this.tip = true;
this.statusIcon = this.errorIcon;
this.resultText = this.errorText;
}
}
this.$forceUpdate();
},
getAnswerPanelColor(item) {
if (this.tip && this.currentQuestion.rightAnswer === item.value) return '#68ff72';
else if (this.tip && this.currentQuestion.rightAnswer !== item.value) return '#ff5555';
else return '';
},
lookAnswerClick() {
this.tip = !this.tip;
this.checkAnswer();
}scss样式：
<style lang="scss" scoped>
$right: green;
$error: red;
$normal: #03a9f4ab;
.span_label /deep/ p {
display: inline;
}
.container {
max-width: 1200px;
margin: auto;
/deep/ .el-checkbox {
display: block;
margin-bottom: 32px;
}
}
.aside {
width: 330px;
display: flex;
position: fixed;
right: -330px;
top: 154px;
transition: right 0.3s ease;
z-index: 1001;
background-color: white;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}
.openAside {
right: 0 !important;
}
.answer {
display: flex;
.main {
flex: 1;
}
&__type {
display: flex;
justify-content: space-between;
padding-right: 20px;
color: #333;
.text {
font-weight: bold;
font-size: 16px;
margin-bottom: 16px;
}
.progress {
color: #999;
&__content {
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}
span {
font-size: 16px;
font-weight: bold;
color: #1890ff;
}
}
}
&__content {
margin-bottom: 20px;
font-weight: bold;
}
&__form {
}
}
.el-radio-group {
.el-radio {
display: block;
margin-top: 10px;
width: 100%;
}
}
.el-radio.is-bordered + .el-radio.is-bordered {
margin-left: 0;
}
.card-title {
font-weight: bold;
color: #0d0e10;
text-align: left;
padding-left: 10px;
font-size: 14px;
border-left: #1e88e5 3px solid;
}
.answer-type {
color: #666;
margin-top: 46px;
padding-bottom: 14px;
border-bottom: solid 1px #ebecf2;
}
.picker-item {
cursor: pointer;
width: 38px;
height: 38px;
line-height: 38px;
text-align: center;
border: 1px solid #dddddd;
border-radius: 5px;
background: #ffffff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float: left;
margin: 4px 6px;
position: relative;
overflow: hidden;
&.error {
background: $error;
color: #fff;
}
&.right {
background: $right;
color: #fff;
}
&.normal {
background: $normal;
color: #fff;
}
}
.bottom {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.tip-box {
margin-top: 32px;
padding: 16px;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
border-radius: 6px;
position: relative;
.title {
color: #333;
font-weight: bold;
}
.desc {
margin-top: 16px;
color: #7f7f7f;
span {
color: #333;
font-weight: bold;
}
}
.arrow {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: -6px;
left: 32px;
margin-right: 3px;
border-top-color: #ebeef5;
border-bottom-width: 0;
&::after {
content: ' ';
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 6px;
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
}
}
.bread {
padding: 20px 0;
}
.answer-container {
background: initial;
}
.titleText {
position: relative;
display: inline-block;
border: 1px solid #bfbfbf;
width: 12px;
height: 12px;
text-indent: 0;
margin-left: 3px;
top: 2px;
}
.titleRight {
background: $right;
}
.titleError {
background: $error;
}
.titleAnswered {
border: 1px solid #5a82ff;
background: #5a82ff;
}
.titleDeText {
font-size: 12px;
color: #9cb2cd;
text-indent: 0;
margin-left: 5px;
}
.openAfix {
font-size: 16px;
margin-top: 20px;
color: white;
border-radius: 5px;
width: 18px;
height: 120px;
display: none;
background: #1e88e5;
padding: 14px;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 786px) {
.bread {
padding: 20px;
}
.openAfix {
display: flex;
}
}
.questTypeBox {
height: 41px;
line-height: 41px;
padding: 0 14px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.questionType {
font-size: 13px;
color: #666;
}
.questionAmount {
font-size: 12px;
color: #999;
}
.questionBox {
background: #fff;
padding: 14px;
}
.titleBox {
color: #333;
padding-bottom: 14px;
}
.titleMain {
height: auto;
}
.titleContent {
margin-bottom: 10px;
font-size: 15px;
}
.titleImg {
width: 100%;
max-height: 200px;
object-fit: contain;
object-position: left;
}
.answerBox {
padding: 14px 16px;
background-color: #fff;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.answerIcon {
width: 20px;
margin-right: 10px;
position: relative;
}
.answerIcon img {
width: 100%;
margin-top: 2px;
}
.answerBoxText {
flex: 1;
}
.answerBoxContent {
font-weight: 500;
font-size: 14px;
color: #666;
line-height: 22px;
margin-bottom: 9px;
}
.answerBoxAnswers {
flex: 1;
}
.resultCompareText {
font-weight: 500;
font-size: 14px;
color: #666;
line-height: 22px;
margin-bottom: 9px;
}
.answerBoxAnswersList {
flex: 1;
}
.answers {
font-size: 14px;
line-height: 22px;
color: #666;
}
.questionAnalysis {
padding: 14px;
background-color: #fff;
margin-top: 10px;
}
.analysisTitle {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
color: #666;
line-height: 22px;
font-weight: 700;
.analysis_AI {
display: flex;
align-items: center;
img {
width: 25px;
height: 25px;
}
}
}
.analysisContent {
padding: 6px 0 12px;
border-bottom: 1px dashed #ddd;
margin-bottom: 11px;
}
.bottomButton {
position: fixed;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: flex;
background: #fff;
z-index: 1000;
}
.buttonGroup {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.rButtonBox {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
display: flex;
align-items: center;
padding-right: 14px;
}
.lButton {
flex: 1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
justify-items: center;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
}
.lButton img {
width: 18px;
height: 18px;
text-align: center;
}
.lButton p {
text-align: center;
width: 100%;
font-size: 11px;
color: #666;
line-height: 15px;
}
.rButton {
height: 33px;
width: 122px;
border-radius: 74px;
background-color: #0096ff;
color: #fff;
text-align: center;
line-height: 33px;
cursor: pointer;
}
.accomplish {
padding-top: 45px;
background: linear-gradient(#0096ff, rgb(159, 207, 241), rgba(254, 159, 16, 0) 90%);
height: calc(100vh - 45px);
}
.detailBox {
text-align: center;
height: calc(100vh - 200px);
border-radius: 10px;
background-color: #fff;
padding-top: 67px;
margin: 0 20px;
}
.detailIcon {
width: 99px;
height: 99px;
overflow: visible;
opacity: 1;
transition: opacity 0.5s ease-in-out 0s;
background-color: transparent;
margin: 0 auto 24px;
}
.detailTitle {
width: 300px;
margin: 0 auto;
font-size: 16px;
line-height: 20px;
font-weight: 500;
margin-bottom: 20px;
}
.detailButton {
text-align: center;
width: 290px;
height: 37px;
border-radius: 74px;
font-size: 14px;
}
.detailButtonTop {
line-height: 37px;
background-color: #0096ff;
color: #fff;
margin: 0 auto 24px;
}
.detailButtonBottom {
border: 1px solid #0096ff;
color: #20a3fd;
line-height: 35px;
margin: 0 auto;
}
</style>
<style lang="scss">
.u-radio {
min-height: 41px;
width: 100%;
padding: 0 7px;
box-sizing: border-box;
background: #f6f6f6;
margin-bottom: 14px;
border-radius: 4px;
font-size: 14px;
}
.u-radio__label {
font-size: 14px !important;
white-space: normal;
padding: 7px;
}
.u-checkbox {
width: 100%;
min-height: 41px;
padding: 0 7px;
box-sizing: border-box;
background: #f6f6f6;
margin-bottom: 14px;
border-radius: 4px;
border: initial;
display: flex;
align-items: center;
height: initial;
}
.u-checkbox__label {
white-space: normal;
padding: 7px;
font-size: 14px !important;
}
.u-checkbox .is-checked {
background-color: #e5f1ff;
}
</style>答题卡作答之后不可以继续作答
选择题：
材料题：
答题卡：文章来源：https://www.toymoban.com/news/detail-780656.html
文章来源地址https://www.toymoban.com/news/detail-780656.html
到了这里，关于uniapp实现微信小程序/H5答题卡的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
