突出题目类型

liuyg

2021-10-13 15180dd90dfb0288e039096905886836b18d79a5

突出题目类型

 src/components/Subjects/Choices/index.vue

@@ -4,7 +4,7 @@
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content">
        <span class="subject-title-content titlesss">
          (&nbsp;单选题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span

 src/components/Subjects/Judgement/index.vue

@@ -3,23 +3,27 @@
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content"
                      v-html="subjectInfo.subjectName" />
                <span class="subject-title-content">
                    (&nbsp;判断题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{subjectInfo.score}}分&nbsp;</span>)
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content titlesss">
          (&nbsp;判断题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
                </span>
            </div>
            <ul class="subject-options"
                v-for="option in options"
                :key="option.id">
      <ul class="subject-options" v-for="option in options" :key="option.id">
                <li class="subject-option">
                    <input class="toggle"
          <input
            class="toggle"
                           type="checkbox"
                           :checked="userAnswer === option.optionName"
                           :id="'option' + option.id"
                           @change="toggleOption(option)">
            @change="toggleOption(option)"
          />
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName }}&nbsp;</span>
            <span class="subject-option-prefix"
              >{{ option.optionName }}&nbsp;</span
            >
                    </label>
                </li>
            </ul>
@@ -29,51 +33,51 @@

<script>
export default {
    name: 'Judgement',
  name: "Judgement",
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: '',
                score: 0
        subjectName: "",
        score: 0,
            },
            options: [
                { id: 1, optionName: '正确' },
                { id: 2, optionName: '错误' }
        { id: 1, optionName: "正确" },
        { id: 2, optionName: "错误" },
            ],
            userAnswer: '',
            index: ''
        }
      userAnswer: "",
      index: "",
    };
    },
    methods: {
        getAnswer () {
            return this.userAnswer
      return this.userAnswer;
        },
        setAnswer (answer) {
            this.userAnswer = answer
      this.userAnswer = answer;
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty('answer')) {
                this.setAnswer(subject.answer)
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("answer")) {
        this.setAnswer(subject.answer);
            }
            this.index = index + '.'
      this.index = index + ".";
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
        },
        // 选中选项
        toggleOption (option) {
            this.userAnswer = option.optionName
        }
    }
}
      this.userAnswer = option.optionName;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../../../assets/css/subject.scss';
@import "../../../assets/css/subject.scss";
.subject-options > li label {
    line-height: 36px !important;
}

 src/components/Subjects/MultipleChoices/index.vue

@@ -3,26 +3,29 @@
        <div class="subject-content">
            <div class="subject-title">
                {{ index }}
                <span class="subject-title-content"
                      v-html="subjectInfo.subjectName" />
                <span class="subject-title-content">
                    (&nbsp;多选题&nbsp;<span v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0">&nbsp;{{subjectInfo.score}}分&nbsp;</span>)
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content titlesss">
          (&nbsp;多选题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span
          >)
                </span>
            </div>

            <ul class="subject-options"
                v-for="option in options"
                :key="option.id">
      <ul class="subject-options" v-for="option in options" :key="option.id">
                <li class="subject-option">
                    <input class="toggle"
          <input
            class="toggle"
                           type="checkbox"
                           :checked="isChecked(option.optionName)"
                           :id="'option' + option.id"
                           @change="toggleOption($event, option)">
            @change="toggleOption($event, option)"
          />
                    <label :for="'option' + option.id">
                        <span class="subject-option-prefix">{{ option.optionName + '.' }}&nbsp;</span>
                        <span v-html="option.optionContent"
                              class="subject-option-prefix" />
            <span class="subject-option-prefix"
              >{{ option.optionName + "." }}&nbsp;</span
            >
            <span v-html="option.optionContent" class="subject-option-prefix" />
                    </label>
                </li>
            </ul>
@@ -32,66 +35,66 @@

<script>
export default {
    name: 'MultipleChoices',
  name: "MultipleChoices",
    data () {
        return {
            subjectCount: 0,
            subjectInfo: {
                subjectName: '',
                score: 0
        subjectName: "",
        score: 0,
            },
            options: [],
            userAnswer: [],
            index: ''
        }
      index: "",
    };
    },
    watch: {

    },
  watch: {},
    methods: {
        getAnswer () {
            return this.userAnswer.join(',')
      return this.userAnswer.join(",");
        },
        setAnswer (answer) {
            // if (isNotEmpty(answer)) {
            this.userAnswer = answer.split(',')
      this.userAnswer = answer.split(",");
            // }
        },
        setSubjectInfo (subject, subjectCount, index) {
            this.subjectCount = subjectCount
            this.subjectInfo = subject
            if (subject.hasOwnProperty('examSubjectOptions')) {
                this.options = subject.examSubjectOptions
      this.subjectCount = subjectCount;
      this.subjectInfo = subject;
      if (subject.hasOwnProperty("examSubjectOptions")) {
        this.options = subject.examSubjectOptions;
            }
            if (subject.hasOwnProperty('answer')) {
                this.setAnswer(subject.answer)
      if (subject.hasOwnProperty("answer")) {
        this.setAnswer(subject.answer);
            }
            this.index = index + '.'
      this.index = index + ".";
        },
        getSubjectInfo () {
            this.subjectInfo.options = this.options
            return this.subjectInfo
      this.subjectInfo.options = this.options;
      return this.subjectInfo;
        },
        // 选中选项
        toggleOption ($event, option) {

            if ($event.target.checked) {
                if (!this.userAnswer.includes(option.optionName)) {
                    this.userAnswer.push(option.optionName)
          this.userAnswer.push(option.optionName);
                }
            } else {
                this.userAnswer.splice(this.userAnswer.findIndex(item => item === option.optionName), 1)
        this.userAnswer.splice(
          this.userAnswer.findIndex((item) => item === option.optionName),
          1
        );
            }
        },
        isChecked (optionName) {
            return this.userAnswer.includes(optionName)
        }
    }
}
      return this.userAnswer.includes(optionName);
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../../../assets/css/subject.scss';
@import "../../../assets/css/subject.scss";
.subject-options > li label {
    line-height: 36px !important;
}

 src/components/Subjects/PracticalOperation/index.vue

@@ -4,7 +4,7 @@
      <div class="subject-title">
        {{ index }}
        <span class="subject-title-content" v-html="subjectInfo.subjectName" />
        <span class="subject-title-content">
        <span class="subject-title-content titlesss">
          (&nbsp;实操题&nbsp;<span
            v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"
            >&nbsp;{{ subjectInfo.score }}分&nbsp;</span

 src/styles/element-ui.scss

@@ -221,3 +221,7 @@

.login-custom {
}

.subject-title-content.titlesss {
    font-weight: 700 !important;
}