Skip to content

Commit 66ce132

Browse files
jiachen247jiachen247
authored
grading results tab for students (#426)
Added grading tab for students to see grading results * enhanced grading results tab for students * change tab icon * make pretty * made changes from review * reflect markdown in comments * refactor
1 parent 4923ebf commit 66ce132

File tree

5 files changed

+174
-14
lines changed

5 files changed

+174
-14
lines changed

‎src/components/assessment/AssessmentWorkspace.tsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
Library,
2020
QuestionTypes
2121
} from './assessmentShape'
22+
import GradingResult from './GradingResult'
2223

2324
export type AssessmentWorkspaceProps = DispatchProps & OwnProps & StateProps
2425

@@ -221,12 +222,22 @@ class AssessmentWorkspace extends React.Component<
221222
body: <Markdown content={props.assessment!.longSummary} />
222223
}
223224
]
224-
const comment = props.assessment!.questions[questionId].comment
225-
if (comment !== null) {
225+
const isGraded = props.assessment!.questions[questionId].grader !== null
226+
if (isGraded) {
226227
tabs.push({
227-
label: `Comments`,
228-
icon: IconNames.CHAT,
229-
body: <Markdown content={comment} />
228+
label: `Grading`,
229+
icon: IconNames.TICK,
230+
body: (
231+
<GradingResult
232+
comment={props.assessment!.questions[questionId].comment}
233+
graderName={props.assessment!.questions[questionId].grader.name}
234+
gradedAt={props.assessment!.questions[questionId].gradedAt}
235+
xp={props.assessment!.questions[questionId].xp}
236+
grade={props.assessment!.questions[questionId].grade}
237+
maxGrade={props.assessment!.questions[questionId].maxGrade}
238+
maxXp={props.assessment!.questions[questionId].maxXp}
239+
/>
240+
)
230241
})
231242
}
232243

‎src/components/assessment/GradingResult.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { Text } from '@blueprintjs/core'
2+
import * as React from 'react'
3+
import { getPrettyDate } from '../../utils/dateHelpers'
4+
import Markdown from '../commons/Markdown'
5+
6+
type GradingResultProps = OwnProps
7+
8+
export type OwnProps = {
9+
comment: string | null
10+
graderName: string
11+
gradedAt: string
12+
xp: number
13+
grade: number
14+
maxGrade: number
15+
maxXp: number
16+
}
17+
18+
class GradingResult extends React.Component<GradingResultProps, {}> {
19+
constructor(props: GradingResultProps) {
20+
super(props)
21+
}
22+
23+
public render() {
24+
return (
25+
<div className="GradingResult">
26+
<div className="grading-result-table">
27+
<table>
28+
<tbody>
29+
<tr>
30+
<th>Grade:</th>
31+
<td>
32+
<Text>
33+
{this.props.grade} / {this.props.maxGrade}
34+
</Text>
35+
</td>
36+
</tr>
37+
38+
<tr>
39+
<th>XP:</th>
40+
<td>
41+
<Text>
42+
{this.props.xp} / {this.props.maxXp}
43+
</Text>
44+
</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
49+
{this.props.comment !== null ? (
50+
<div>
51+
<br />
52+
<th>Comment:</th>
53+
<p>
54+
<pre>
55+
<Markdown content={this.props.comment} />
56+
</pre>
57+
</p>
58+
</div>
59+
) : null}
60+
61+
<br />
62+
63+
<div className="grading-result-info">
64+
<Text>
65+
Graded by <b>{this.props.graderName}</b> on {getPrettyDate(this.props.gradedAt)}
66+
</Text>
67+
</div>
68+
</div>
69+
</div>
70+
)
71+
}
72+
}
73+
74+
export default GradingResult

‎src/components/assessment/assessmentShape.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,15 @@ export interface IQuestion {
8282
id: number
8383
library: Library
8484
type: QuestionType
85+
grader: {
86+
name: string
87+
id: number
88+
}
89+
gradedAt: string
90+
xp: number
91+
grade: number
92+
maxGrade: number
93+
maxXp: number
8594
}
8695

8796
export type MCQChoice = {

‎src/mocks/assessmentAPI.ts‎

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,16 @@ What's your favourite dinner food?
209209
id: 0,
210210
library: mockSoundLibrary,
211211
solutionTemplate: '0th question mock solution template',
212-
type: 'programming'
212+
type: 'programming',
213+
grader: {
214+
name: 'avenger',
215+
id: 1
216+
},
217+
gradedAt: '2038-06-18T05:24:26.026Z',
218+
xp: 0,
219+
grade: 0,
220+
maxGrade: 2,
221+
maxXp: 2
213222
},
214223
{
215224
answer: null,
@@ -218,7 +227,16 @@ What's your favourite dinner food?
218227
id: 1,
219228
library: mock3DRuneLibrary,
220229
solutionTemplate: '1st question mock solution template',
221-
type: 'programming'
230+
type: 'programming',
231+
grader: {
232+
name: 'avenger',
233+
id: 1
234+
},
235+
gradedAt: '2038-06-18T05:24:26.026Z',
236+
xp: 0,
237+
grade: 0,
238+
maxGrade: 2,
239+
maxXp: 2
222240
},
223241
{
224242
answer: 3,
@@ -246,7 +264,16 @@ What's your favourite dinner food?
246264
id: 2,
247265
library: mockCurveLibrary,
248266
type: 'mcq',
249-
solution: 0
267+
solution: 0,
268+
grader: {
269+
name: 'avenger',
270+
id: 1
271+
},
272+
gradedAt: '2038-06-18T05:24:26.026Z',
273+
xp: 0,
274+
grade: 0,
275+
maxGrade: 2,
276+
maxXp: 2
250277
},
251278
{
252279
answer: 3,
@@ -274,7 +301,16 @@ What's your favourite dinner food?
274301
id: 2,
275302
library: mockCurveLibrary,
276303
type: 'mcq',
277-
solution: null
304+
solution: null,
305+
grader: {
306+
name: 'avenger',
307+
id: 1
308+
},
309+
gradedAt: '2038-06-18T05:24:26.026Z',
310+
xp: 0,
311+
grade: 0,
312+
maxGrade: 2,
313+
maxXp: 2
278314
},
279315
{
280316
answer: null,
@@ -283,7 +319,16 @@ What's your favourite dinner food?
283319
id: 1,
284320
library: mockToneMatrixLibrary,
285321
solutionTemplate: '5th question mock solution template',
286-
type: 'programming'
322+
type: 'programming',
323+
grader: {
324+
name: 'avenger',
325+
id: 1
326+
},
327+
gradedAt: '2038-06-18T05:24:26.026Z',
328+
xp: 0,
329+
grade: 0,
330+
maxGrade: 2,
331+
maxXp: 2
287332
}
288333
]
289334

‎src/mocks/gradingAPI.ts‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,21 @@ Hello and welcome to this assessment! This is the *0th question*.
9898
solution: 'This is how the 0th question is `solved`',
9999
type: 'programming',
100100
maxGrade: 1000,
101-
maxXp: 1000
101+
maxXp: 1000,
102+
grader: {
103+
name: 'avenger',
104+
id: 1
105+
},
106+
gradedAt: '2038-06-18T05:24:26.026Z',
107+
xp: 1,
108+
grade: 1
102109
},
103110
grade: {
104111
gradeAdjustment: 0,
105112
xpAdjustment: 0,
106113
grade: 0,
107114
xp: 0,
108-
comment: ''
115+
comment: 'Good job!!'
109116
},
110117
student: {
111118
name: 'Al Gorithm',
@@ -123,7 +130,14 @@ Hello and welcome to this assessment! This is the *0th question*.
123130
solution: null,
124131
type: 'programming',
125132
maxGrade: 200,
126-
maxXp: 200
133+
maxXp: 200,
134+
grader: {
135+
name: 'avenger',
136+
id: 1
137+
},
138+
gradedAt: '2038-06-18T05:24:26.026Z',
139+
xp: 1,
140+
grade: 1
127141
},
128142
grade: {
129143
gradeAdjustment: 0,
@@ -167,7 +181,14 @@ Hello and welcome to this assessment! This is the *0th question*.
167181
library: mockLibrary,
168182
type: 'mcq',
169183
maxGrade: 100,
170-
maxXp: 100
184+
maxXp: 100,
185+
grader: {
186+
name: 'avenger',
187+
id: 1
188+
},
189+
gradedAt: '2038-06-18T05:24:26.026Z',
190+
xp: 1,
191+
grade: 1
171192
},
172193
grade: {
173194
gradeAdjustment: 0,

0 commit comments

Comments
 (0)