1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <template>
| <div>
| <div class="subject-content">
| <div class="subject-title">
| {{ index }}
| <span class="subject-title-content" v-html="subjectInfo.subjectName"/>
| <span class="subject-title-content" v-if="subjectInfo.score !== undefined && subjectInfo.score !== 0"> ({{subjectInfo.score}})分</span>
| <div class="subject-tinymce">
| <tinymce ref="editor" :height="height" v-model="userAnswer"/>
| </div>
| </div>
| </div>
| </div>
| </template>
|
| <script>
| import Tinymce from '@/components/Tinymce'
|
| export default {
| name: 'ShortAnswer',
| components: {
| Tinymce
| },
| props: {
| height: {
| type: Number,
| required: false,
| default: 300
| }
| },
| data () {
| return {
| subjectCount: 0,
| subjectInfo: {
| subjectName: '',
| score: 0
| },
| userAnswer: '',
| index: ''
| }
| },
| methods: {
| getAnswer () {
| return this.userAnswer
| },
| setAnswer (answer) {
| this.userAnswer = answer
| },
| setSubjectInfo (subject, subjectCount, index) {
| this.subjectCount = subjectCount
| this.subjectInfo = subject
| if (subject.hasOwnProperty('answer')) {
| this.setAnswer(subject.answer.answer)
| }
| this.index = index + '.'
| },
| getSubjectInfo () {
| return this.subjectInfo
| }
| }
| }
| </script>
|
| <style lang="scss" scoped>
| @import "../../../assets/css/subject.scss";
| .subject-tinymce {
| margin: 12px;
| }
| .subject-options > li label {
| line-height: 36px !important;
| }
| </style>
|
|