Skip to content

Commit 6f17fce

Browse files
rockstarr-programmerrrockstarr-programmerr
committed
student see report
1 parent de511d2 commit 6f17fce

File tree

1 file changed

+109
-51
lines changed

1 file changed

+109
-51
lines changed

‎src/views/classroom/ReadingExerciseSubmitResult.vue

Lines changed: 109 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,109 @@
1111
</p>
1212

1313
<div v-else>
14-
<h1>Your result</h1>
15-
<p>Exercise: {{ report.exercise.identifier }}</p>
14+
<h1>{{ report.exercise.identifier }}</h1>
1615
<v-divider></v-divider>
1716

18-
<v-card
19-
v-for="(results, index) of [report.passage_1_detail, report.passage_2_detail, report.passage_3_detail]"
20-
:key="index"
21-
class="mt-5"
22-
>
23-
<v-card-title>
24-
Passage {{ index + 1 }}
25-
</v-card-title>
26-
<v-card-text>
27-
<v-simple-table class="result-table">
28-
<colgroup>
29-
<col span="1" style="width: 15%">
30-
<col span="1" style="width: 15%">
31-
<col span="1" style="width: 30%">
32-
<col span="1" style="width: 30%">
33-
</colgroup>
34-
<thead>
35-
<tr>
36-
<th>Question</th>
37-
<th>Result</th>
38-
<th>Your answer</th>
39-
<th>Correct answer</th>
40-
</tr>
41-
</thead>
42-
<tbody>
43-
<tr
44-
v-for="result of results"
45-
:key="result.question_number"
46-
>
47-
<td>{{ result.question_number }}</td>
48-
<td>
49-
<div v-if="result.is_correct">
50-
<v-icon class="mr-3" color="success">
51-
mdi-check
52-
</v-icon>
53-
</div>
54-
<div v-else>
55-
<v-icon class="mr-3" color="error">
56-
mdi-close
57-
</v-icon>
58-
</div>
59-
</td>
60-
<td>{{ formatAnswer(result.submitted_answer) }}</td>
61-
<td>{{ formatCorrectAnswer(result.possible_answers) }}</td>
62-
</tr>
63-
</tbody>
64-
</v-simple-table>
65-
</v-card-text>
66-
</v-card>
17+
<v-row class="mt-0">
18+
<v-col cols="6" class="result-col">
19+
<div v-html="exercise.content"></div>
20+
</v-col>
21+
<v-col cols="6" class="result-col">
22+
<v-card class="mb-5">
23+
<v-card-title>
24+
Overall
25+
</v-card-title>
26+
<v-card-text>
27+
<v-row>
28+
<v-col cols="6">
29+
<v-row>
30+
<v-col cols="auto">
31+
<p>Passage 1:</p>
32+
<p>Passage 2:</p>
33+
<p>Passage 3:</p>
34+
</v-col>
35+
<v-col cols="auto" class="font-weight-bold">
36+
<p>{{ report.passage_1_total }}</p>
37+
<p>{{ report.passage_2_total }}</p>
38+
<p>{{ report.passage_3_total }}</p>
39+
</v-col>
40+
</v-row>
41+
</v-col>
42+
<v-col cols="6">
43+
<v-row>
44+
<v-col cols="auto">
45+
<p>Total:</p>
46+
<p>Band score:</p>
47+
</v-col>
48+
<v-col cols="auto" class="font-weight-bold">
49+
<p>{{ report.total }}</p>
50+
<p>{{ report.band_score }}</p>
51+
</v-col>
52+
</v-row>
53+
</v-col>
54+
</v-row>
55+
</v-card-text>
56+
</v-card>
57+
58+
<v-card
59+
v-for="(results, index) of [report.passage_1_detail, report.passage_2_detail, report.passage_3_detail]"
60+
:key="index"
61+
class="mb-5"
62+
>
63+
<v-card-title>
64+
Passage {{ index + 1 }}
65+
</v-card-title>
66+
<v-card-text>
67+
<v-simple-table class="result-table">
68+
<colgroup>
69+
<col span="1" style="width: 15%">
70+
<col span="1" style="width: 15%">
71+
<col span="1" style="width: 30%">
72+
<col span="1" style="width: 30%">
73+
</colgroup>
74+
<thead>
75+
<tr>
76+
<th>Question</th>
77+
<th>Result</th>
78+
<th>Your answer</th>
79+
<th>Correct answer</th>
80+
</tr>
81+
</thead>
82+
<tbody>
83+
<tr
84+
v-for="result of results"
85+
:key="result.question_number"
86+
>
87+
<td>{{ result.question_number }}</td>
88+
<td>
89+
<div v-if="result.is_correct">
90+
<v-icon class="mr-3" color="success">
91+
mdi-check
92+
</v-icon>
93+
</div>
94+
<div v-else>
95+
<v-icon class="mr-3" color="error">
96+
mdi-close
97+
</v-icon>
98+
</div>
99+
</td>
100+
<td>{{ formatAnswer(result.submitted_answer) }}</td>
101+
<td>{{ formatCorrectAnswer(result.possible_answers) }}</td>
102+
</tr>
103+
</tbody>
104+
</v-simple-table>
105+
</v-card-text>
106+
</v-card>
107+
</v-col>
108+
</v-row>
67109
</div>
68110
</v-container>
69111
</template>
70112

71113
<script lang="ts">
72114
import { Api } from '@/api'
73115
import { Classroom, ReadingExerciseReport } from '@/interfaces/classroom'
116+
import { ReadingExercise } from '@/interfaces/reading-exercise'
74117
import { User } from '@/interfaces/user'
75118
import { unexpectedExc } from '@/utils'
76119
import { Vue, Component, Prop } from 'vue-property-decorator'
@@ -83,6 +126,9 @@ import { mapState } from 'vuex'
83126
}),
84127
...mapState('classroom', {
85128
classroom: 'currentClassroom'
129+
}),
130+
...mapState('readingExercise', {
131+
exercise: 'currentReadingExercise'
86132
})
87133
}
88134
})
@@ -92,6 +138,7 @@ export default class ReadingExerciseSubmitResult extends Vue {
92138
93139
user!: User
94140
classroom!: Classroom
141+
exercise!: ReadingExercise
95142
report: ReadingExerciseReport | null = null
96143
97144
loading = false
@@ -100,6 +147,7 @@ export default class ReadingExerciseSubmitResult extends Vue {
100147
this.loading = true
101148
102149
try {
150+
await this.setExercise()
103151
await this.setClassroom()
104152
const reports = await this.setReport()
105153
if (reports.length > 0) {
@@ -116,6 +164,10 @@ export default class ReadingExerciseSubmitResult extends Vue {
116164
return this.$store.dispatch('classroom/detail', this.pk)
117165
}
118166
167+
setExercise (): Promise<unknown> {
168+
return this.$store.dispatch('readingExercise/detail', this.exercisePk)
169+
}
170+
119171
setReport (): Promise<ReadingExerciseReport[]> {
120172
return Api.classroom.getStudentReport(this.classroom.pk, {
121173
student_pk: this.user.pk,
@@ -147,4 +199,10 @@ export default class ReadingExerciseSubmitResult extends Vue {
147199
.result-table {
148200
table-layout: fixed;
149201
}
202+
203+
.result-col {
204+
height: 80vh;
205+
overflow-y: auto;
206+
overflow-x: hidden;
207+
}
150208
</style>

0 commit comments

Comments
 (0)