123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- <template>
- <!-- 判断题 -->
- <view class="judge-area" v-model="questionData">
- <view class="question_title">
- <text class="question_number">
- {{ questionNumberEndIsBracket(questionData.property.question_number) }}
- </text>
- <text class="question_stem" v-html="sanitizeHTML(questionData.stem)"
- :ref="'richText-1-1'+questionData.question_id"
- @longpress="previewByRichTextImg(-1,-1,questionData.question_id)"></text>
- </view>
- <view class="judge" v-for="(item,index) in questionData.option_list" :key="index" v-if="questionChanged">
- <view class="option-left">
- <view :class="['option-bj', computedIsJudgeRight(item.mark)]">
- <text class="serial-number" :style="{'font-size':questionData.property.option_question_number_font_size}">
- {{ isEnable(isEnableManualModify)?(item.custom_number?item.custom_number+'.':''):computedQuestionNumber(index,questionData.option_number_show_mode) }}
- </text>
- <text v-html="sanitizeHTML(item.content)" :ref="'richText'+index+1+questionData.question_id"
- @longpress="previewByRichTextImg(index,1,questionData.question_id)"></text>
- </view>
- </view>
- <view class="determine-right">
- <view v-for="option_type in questionData.property.option_type_list" :key="option_type"
- @click="determine(item,option_type,index)" :class="[
- 'circle-bj',
- {
- active: isAnswer(item.mark, option_type),
- },
- isAnswer(item.mark, option_type)?'':computedIsShowRightAnswer(item.mark, option_type),
- ]">
- <SvgIcon v-if="option_type===option_type_list[0].value" icon-class="checkmarkempty" size="18" />
- <SvgIcon v-if="option_type===option_type_list[1].value" icon-class="closeempty" size="14" />
- <SvgIcon v-if="option_type===option_type_list[2].value" icon-class="neutral-tone" size="20" />
- </view>
- </view>
- </view>
- <view class="reference" v-if="isViewAnalysis&&answer_control[questionData.question_id].isViewRightAnswer">
- <text class="reference-title">解析</text>
- <text class="reference-answer" v-html="sanitizeHTML(questionData.analysis)"
- :ref="'richText-2-2'+questionData.question_id"
- @longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
- </text>
- </view>
- </view>
- </template>
- <script>
- import {
- questionData,
- option_type_list,
- sanitizeHTML,
- isEnable,
- computedQuestionNumber,
- answer_control,
- } from '@/pages/answer_question/common/data/common.js';
- import {
- changeNumToHan,
- checkNum
- } from '@/utils/transform.js';
- import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
- import {
- GetFileURLMap
- } from '@/api/api.js';
- export default {
- name: "judge-question",
- mixins: [AnswerControlMixin],
- props: {
- questionData: questionData,
- isEnableManualModify: {
- type: String,
- default: 'false',
- },
- },
- data() {
- return {
- computedQuestionNumber,
- isEnable,
- sanitizeHTML,
- option_type_list,
- answer_control,
- }
- },
- watch: {
- 'questionData': {
- handler(val) {
- this.$forceUpdate();
- },
- immediate: true,
- deep: true
- },
- },
- computed: {
- questionChanged: function() {
- this.setUserAnswer()
- return true;
- },
- isViewAnalysis: function() {
- return isEnable(this.questionData.property.is_enable_analysis);
- }
- },
- methods: {
- determine(item, answer, index) {
- if (this.answer_control[this.questionData.question_id].isReadOnly) return;
- var questionId = this.questionData.question_id;
- this.questionData.user_answer[questionId].isEdit = true;
- if (item.answer !== answer)
- item.answer = answer;
- else
- item.answer = '';
- var ans = {
- mark: item.mark,
- option_type: item.answer
- };
- var preAnswer = this.questionData.user_answer[questionId].answer_list.find(p => p.mark === ans.mark);
- if (!preAnswer)
- this.questionData.user_answer[questionId].answer_list.push(ans);
- else
- preAnswer.option_type = item.answer;
- var ansed = this.questionData.user_answer[questionId].answer_list.filter(p => p.option_type != '');
- this.questionData.user_answer[questionId].is_fill_answer = ansed.length > 0;
- this.questionData.user_answer[questionId].content = JSON.stringify(ansed);
- this.$set(this.questionData.user_answer[questionId], 'answer_list', ansed);
- this.$emit("setSubAnswer", this.questionData.user_answer[questionId], questionId);
- },
- setUserAnswer: function() {
- var that = this;
- var callback = function() {
- var userAnswer = [];
- var questionId = that.questionData.question_id;
- var _ua = that.questionData.user_answer[questionId];
- if (_ua && _ua.answer_list && _ua.answer_list.length > 0)
- userAnswer = _ua.answer_list;
- if (userAnswer.length == 0) return;
- that.questionData.option_list.forEach(p => {
- var _ans = userAnswer.find(x => x.mark === p.mark);
- if (_ans)
- p.answer = _ans.option_type
- })
- }
- if (that.questionData.isSubSub) {
- callback();
- } else {
- this.$emit("getUserAnswer", this.questionData.question_id, callback);
- }
- },
- isAnswer(mark, option_type) {
- return this.questionData.user_answer[this.questionData.question_id].answer_list.some((li) => li.mark === mark &&
- li.option_type === option_type);
- },
- /**
- * 计算是否显示正确答案的样式
- * @param {string} mark 选项标识
- * @param {string} option_type 选项类型
- */
- computedIsShowRightAnswer(mark, option_type) {
- var cur = this.commonComputedAnswerControl(this.questionData.question_id);
- if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
- return [];
- }
- if (!cur.isViewRightAnswer) return '';
- // let selectOption = this.questionData.user_answer[this.questionData.question_id].answer_list.find((item) => item
- // .mark === mark); // 查找是否已选中的选项
- // if (!selectOption) return '';
- // return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === option_type &&
- // !(selectOption.option_type === option_type) ?
- // 'answer-right' :
- // '';
- //未答题也显示正确样式
- return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === option_type ?
- 'answer-right' :
- '';
- },
- /**
- * 计算判断题题干的样式
- * @param {string} mark 选项标识
- */
- computedIsJudgeRight(mark) {
- var cur = this.commonComputedAnswerControl(this.questionData.question_id);
- if (!cur.isJudgeAnswer && !cur.isViewRightAnswer) {
- return [];
- }
- if (!cur.isJudgeAnswer) return '';
- let selectOption = this.questionData.user_answer[this.questionData.question_id].answer_list.find((item) => item
- .mark === mark); // 查找是否已选中的选项
- if (!selectOption) return 'wrong';
- return this.questionData.answer.answer_list.find((item) => item.mark === mark).option_type === selectOption
- .option_type ?
- 'right' :
- 'wrong';
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .judge {
- display: flex;
- flex-direction: row;
- align-items: center;
- margin-bottom: 32rpx;
- column-gap: 28rpx;
- .option-left {
- display: flex;
- width: 100%;
- font-size: $font-size-serial;
- .option-bj {
- flex: 1;
- display: flex;
- align-items: center;
- column-gap: 8rpx;
- border-radius: 40rpx;
- background-color: $uni-bg-color-grey;
- padding: 16rpx 24rpx;
- &.right {
- background-color: $right-bc-color;
- }
- &.wrong {
- border: 1px solid $error-color;
- }
- .serial-number {
- align-self: flex-start;
- }
- }
- }
- .determine-right {
- display: flex;
- column-gap: 10rpx;
- .circle-bj {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 80rpx;
- height: 80rpx;
- border-radius: 50%;
- background-color: $uni-bg-color-grey;
- &.active {
- color: #ffffff;
- background-color: $light-main-color;
- }
- &.answer-right {
- color: $right-color;
- border: 1px solid $right-color;
- }
- }
- }
- }
- .reference {
- margin: 32rpx 0;
- background-color: #f9f8f9;
- padding: 24rpx;
- .reference-title {
- display: block;
- line-height: 64rpx;
- color: #4E5969;
- font-size: 28rpx;
- }
- .reference-answer {
- color: #1D2129;
- line-height: 48rpx;
- font-size: 14pt;
- }
- }
- </style>
|