Skip to content

Commit e960e6a

Browse files
rmfay1rmfay1
authored
Merge pull request #45 from CPSECapstone/individual-q-grading
Individual q grading
2 parents af4a008 + c5facdb commit e960e6a

File tree

7 files changed

+191
-47
lines changed

7 files changed

+191
-47
lines changed

‎src/Components/TaskBlocks/FrBlock/FrBlock.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#pointsAwarded {
2+
width: 25% !important;
3+
float: left;
4+
}
5+
6+
.right {
7+
float: right;
8+
}

‎src/Components/TaskBlocks/FrBlock/FrBlock.tsx‎

Lines changed: 88 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
import { InputGroup, FormControl } from 'react-bootstrap';
1+
import { InputGroup, FormControl, Button, Form } from 'react-bootstrap';
2+
import { useState } from 'react';
3+
import { useMutation } from '@apollo/client';
4+
import { Formik } from 'formik';
25
import { AnswerFieldsFragment } from '../../../__generated__/types';
6+
import { EDIT_QUESTION_GRADE } from '../../../queries/grade';
7+
import './FrBlock.css';
38

49
function FrBlock({
510
title,
@@ -8,36 +13,99 @@ function FrBlock({
813
cssKey,
914
studentAnswer,
1015
points,
16+
studentId,
1117
}: {
1218
title: string;
1319
question: string;
1420
answer: string;
1521
cssKey: number;
1622
studentAnswer: AnswerFieldsFragment | undefined;
1723
points: number;
24+
studentId: string;
1825
}) {
26+
const [editQuestionGrade] = useMutation(EDIT_QUESTION_GRADE);
27+
1928
return (
2029
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
21-
<div className="col-md-6 text-center py-5 mx-auto">
22-
<h3 className="text-left mb-3">{title}</h3>
23-
<InputGroup className="mb-3">
24-
<div className="question-container p-4 shadow w-100">
25-
<p className="text-left">{question}</p>
26-
<span>
27-
{`${
28-
studentAnswer?.pointsAwarded ? studentAnswer.pointsAwarded : 0
29-
} / ${points}`}
30-
</span>
31-
<br />
32-
<FormControl
33-
value={studentAnswer?.answer ? studentAnswer.answer : ''}
34-
disabled
35-
as="textarea"
36-
rows={3}
37-
/>
30+
<Formik
31+
initialValues={{
32+
student: studentId,
33+
questionId: studentAnswer?.questionId,
34+
pointsAwarded: studentAnswer?.pointsAwarded || 0,
35+
teacherComment: studentAnswer?.teacherComment || '',
36+
}}
37+
onSubmit={(values, { setSubmitting }) => {
38+
setTimeout(() => {
39+
setSubmitting(false);
40+
editQuestionGrade({
41+
variables: {
42+
answerGradeInput: {
43+
student: values.student,
44+
questionId: values.questionId,
45+
pointsAwarded: values.pointsAwarded,
46+
teacherComment: values.teacherComment,
47+
},
48+
},
49+
})
50+
.then((data) => {
51+
alert('Question Grade Change Submitted.');
52+
location.reload();
53+
})
54+
.catch((error) => {
55+
alert(error);
56+
location.reload();
57+
});
58+
}, 400);
59+
}}
60+
>
61+
{({ values, handleChange, handleBlur, handleSubmit }) => (
62+
<div className="col-md-6 text-center py-5 mx-auto">
63+
<Form onSubmit={handleSubmit}>
64+
<div className="text-right">
65+
<Button type="submit">Submit Changes</Button>
66+
</div>
67+
68+
<h3 className="text-left mb-3">{title}</h3>
69+
<InputGroup className="mb-3">
70+
<div className="question-container p-4 shadow w-100">
71+
<p className="text-left">{question}</p>
72+
<div className="d-inline-block">
73+
<Form.Control
74+
as="input"
75+
type="number"
76+
value={values.pointsAwarded}
77+
bsCustomPrefix="d-inline"
78+
id="pointsAwarded"
79+
onChange={handleChange}
80+
onBlur={handleBlur}
81+
/>
82+
<Form.Text
83+
as="h4"
84+
className="w-25 text-left right"
85+
>{` / ${points}`}</Form.Text>
86+
</div>
87+
<Form.Control
88+
as="textarea"
89+
onChange={handleChange}
90+
onBlur={handleBlur}
91+
id="teacherComment"
92+
placeholder="Awaiting feedback..."
93+
value={values.teacherComment}
94+
rows={1}
95+
/>
96+
<br />
97+
<Form.Control
98+
value={studentAnswer?.answer ? studentAnswer.answer : ''}
99+
disabled
100+
as="textarea"
101+
rows={3}
102+
/>
103+
</div>
104+
</InputGroup>
105+
</Form>
38106
</div>
39-
</InputGroup>
40-
</div>
107+
)}
108+
</Formik>
41109
</div>
42110
);
43111
}

‎src/Components/TaskBlocks/McBlock/McBlock.tsx‎

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
import { useMutation } from '@apollo/client';
2+
import { Formik } from 'formik';
3+
import { Form, Button } from 'react-bootstrap';
4+
import { EDIT_QUESTION_GRADE } from '../../../queries/grade';
15
import { AnswerFieldsFragment, QuestionOption } from '../../../__generated__/types';
26

37
function renderQuestionOptions(
@@ -37,6 +41,7 @@ function McBlock({
3741
cssKey,
3842
studentAnswer,
3943
points,
44+
studentId,
4045
}: {
4146
title: string;
4247
question: string;
@@ -45,27 +50,89 @@ function McBlock({
4550
cssKey: number;
4651
points: number;
4752
studentAnswer: AnswerFieldsFragment | undefined;
53+
studentId: string;
4854
}) {
55+
const [editQuestionGrade] = useMutation(EDIT_QUESTION_GRADE);
56+
4957
return (
5058
<div className={`${cssKey % 2 === 1 ? 'white ' : 'gray '}row`}>
51-
<div className="col-md-6 text-center py-5 mx-auto">
52-
<h3 className="text-left mb-3">{title}</h3>
53-
<div className="question-container p-4 shadow w-100">
54-
<p className="text-left">{question}</p>
55-
<span className="text-left">
56-
{`${studentAnswer?.pointsAwarded ? studentAnswer.pointsAwarded : 0} / ${points}`}
57-
</span>
58-
<span />
59-
<br />
60-
<div className="mx-4">
61-
{renderQuestionOptions(
62-
options,
63-
answers,
64-
studentAnswer?.answer ? studentAnswer.answer : '-1'
65-
)}
59+
<Formik
60+
initialValues={{
61+
student: studentId,
62+
questionId: studentAnswer?.questionId,
63+
pointsAwarded: studentAnswer?.pointsAwarded || 0,
64+
teacherComment: studentAnswer?.teacherComment || '',
65+
}}
66+
onSubmit={(values, { setSubmitting }) => {
67+
setTimeout(() => {
68+
setSubmitting(false);
69+
editQuestionGrade({
70+
variables: {
71+
answerGradeInput: {
72+
student: values.student,
73+
questionId: values.questionId,
74+
pointsAwarded: values.pointsAwarded,
75+
teacherComment: values.teacherComment,
76+
},
77+
},
78+
})
79+
.then((data) => {
80+
alert('Question Grade Change Submitted.');
81+
location.reload();
82+
})
83+
.catch((error) => {
84+
alert(error);
85+
location.reload();
86+
});
87+
}, 400);
88+
}}
89+
>
90+
{({ values, handleChange, handleBlur, handleSubmit }) => (
91+
<div className="col-md-6 text-center py-5 mx-auto">
92+
<Form onSubmit={handleSubmit}>
93+
<div className="text-right">
94+
<Button type="submit">Submit Changes</Button>
95+
</div>
96+
<h3 className="text-left mb-3">{title}</h3>
97+
<div className="question-container p-4 shadow w-100">
98+
<p className="text-left">{question}</p>
99+
<div className="d-inline-block">
100+
<Form.Control
101+
as="input"
102+
type="number"
103+
value={values.pointsAwarded}
104+
bsCustomPrefix="d-inline"
105+
id="pointsAwarded"
106+
onChange={handleChange}
107+
onBlur={handleBlur}
108+
/>
109+
<Form.Text
110+
as="h4"
111+
className="w-25 text-left right"
112+
>{` / ${points}`}</Form.Text>
113+
</div>
114+
<Form.Control
115+
as="textarea"
116+
onChange={handleChange}
117+
onBlur={handleBlur}
118+
id="teacherComment"
119+
placeholder="Awaiting feedback..."
120+
value={values.teacherComment}
121+
rows={1}
122+
/>
123+
<br />
124+
<div className="mx-4">
125+
{renderQuestionOptions(
126+
options,
127+
answers,
128+
studentAnswer?.answer ? studentAnswer.answer : '-1'
129+
)}
130+
</div>
131+
</div>
132+
</Form>
66133
</div>
67-
</div>
68-
</div>
134+
)}
135+
</Formik>
69136
</div>
70137
);
71138
}

‎src/Screens/TaskView/BlockPageHandler/BlockPageHandler.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ function BlockPageHandler({
122122
key={tempIndex}
123123
points={question.points}
124124
cssKey={tempIndex}
125+
studentId={studentId}
125126
/>
126127
);
127128
tempIndex += 1;
@@ -139,6 +140,7 @@ function BlockPageHandler({
139140
key={tempIndex}
140141
points={question.points}
141142
cssKey={tempIndex}
143+
studentId={studentId}
142144
/>
143145
);
144146
tempIndex += 1;

‎src/Screens/TaskView/InstructorDetail/InstructorDetail.css‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +0,0 @@
1-
#pointsAwarded {
2-
width: 50% !important;
3-
}

‎src/Screens/TaskView/TaskView.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,6 @@ function TaskView() {
1515
const { taskId } = useParams<Record<string, string>>();
1616
const { username } = useParams<Record<string, string>>();
1717

18-
console.log(taskId);
19-
console.log(username);
20-
2118
const { data: taskSubmissionQuery } = useTaskSubmissionResultQuery({
2219
variables: {
2320
taskId,
@@ -29,9 +26,6 @@ function TaskView() {
2926
variables: { taskId },
3027
});
3128

32-
console.log(taskSubmissionQuery);
33-
console.log(taskByIdQuery);
34-
3529
const maxPage: number =
3630
taskByIdQuery === undefined || taskByIdQuery.task.pages === undefined
3731
? 0
@@ -57,7 +51,7 @@ function TaskView() {
5751
taskInformation={taskByIdQuery}
5852
page={page}
5953
taskSubmissionResult={taskSubmissionQuery}
60-
studentId="Google_114813486146105420824"
54+
studentId={username}
6155
/>
6256
</div>
6357
</div>

‎src/queries/grade.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,11 @@ export const EDIT_GRADE = gql`
77
}
88
}
99
`;
10+
11+
export const EDIT_QUESTION_GRADE = gql`
12+
mutation editAnswerGrade($answerGradeInput: AnswerGradeInput!) {
13+
gradeAnswer(grade: $answerGradeInput) {
14+
questionId
15+
}
16+
}
17+
`;

0 commit comments

Comments
 (0)