Skip to content

Commit 7b1de20

Browse files
Shaurya MagoShaurya Mago
Shaurya Mago
authored and
Shaurya Mago
committed
Merge branch 'dev' into feat-createcourse
2 parents a58020a + ff76894 commit 7b1de20

File tree

10 files changed

+29752
-30
lines changed

10 files changed

+29752
-30
lines changed

‎docs/defect_reporting.md‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,5 @@
11
# Defect Reporting
22

3-
Please follow the following steps to report any defects you find in the prototype.
4-
5-
First go to JIRA board homepage at [Here](http://platinum.cscaws.com:8080/secure/RapidBoard.jspa?rapidView=52&view=planning.nodetail&issueLimit=100), then
6-
7-
1. Click the `Create` Button in the navigation bar.
8-
2. In the pop up window, select `Bug` for `Issue Type`.
9-
3. Click the `Create` at the right bottom corner of the pop up window to submit the bug when you are done inputing,
10-
11-
![report issue](.gitbook/assets/report_issue.png)
3+
Please use this google form link to report any defect you find in the prototype.
124

5+
https://forms.gle/aTeX2EaxwV6vFZPq9

‎docs/report_issue.png‎

-139 KB
Binary file not shown.

‎package-lock.json‎

Lines changed: 29542 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Components/Content/Content.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ import ViewTaskSubmission from '../ViewTaskSubmission';
77
import SingleStudentOverview from '../SingleStudentOverview/SingleStudentOverview';
88
import SingleStudentMasteryOverview from '../SingleStudentMasteryOverview/SingleStudentMasteryOverview';
99
import CourseHome from '../CourseHome/CourseHome';
10-
11-
import './Content.css';
1210
import TaskView from '../../Screens/TaskView/TaskView';
11+
import { ClassMastery } from '../../Screens/ClassMastery';
12+
import './Content.css';
1313

1414
export default function Content() {
1515
return (
@@ -39,6 +39,9 @@ export default function Content() {
3939
<Route path="/viewTask">
4040
<TaskView taskId="90e0c730e56" />
4141
</Route>
42+
<Route path="/classMastery">
43+
<ClassMastery />
44+
</Route>
4245
<Route path="/">
4346
<Dashboard />
4447
</Route>

‎src/Components/SingleStudentMasteryOverview/SingleStudentMasteryOverview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export interface LearningTarget {
8888
learningObjectives: Objective[];
8989
}
9090

91-
export default function SingleStudentMasteryOveriew() {
91+
export default function SingleStudentMasteryOverview() {
9292
const classes = useStyles();
9393
const history = useHistory();
9494
const test: any = history.location.state;

‎src/Components/constants.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"color": {
3+
"red": "#EA6868",
4+
"yellow": "#F2C94C",
5+
"green": "#30CC30",
6+
"bgGrey": "#C4C4C4",
7+
"textBlack": "#000000",
8+
"textBlue": "#2F80ED"
9+
}
10+
}

‎src/Screens/ClassMastery/ClassMastery.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { useState } from 'react';
2+
import styled from 'styled-components';
3+
import { color } from '../../Components/constants.json';
4+
5+
import StudentMasteryRow, { StudentMasteryHeader } from './StudentMasteryRow';
6+
7+
import { MOCK_LOBJ_NAMES, MOCK_LOBJ_MASTERY } from '../../clients/mock';
8+
9+
const Page = styled.div`
10+
margin: 33px 90px;
11+
`;
12+
const Header = styled.div`
13+
color: ${color.textBlue};
14+
font-size: 36px;
15+
font-weight: 550;
16+
margin-bottom: 32px;
17+
`;
18+
19+
const Content = styled.div``;
20+
21+
function ClassMastery() {
22+
//TODO Get real data
23+
return (
24+
<Page>
25+
<Header>Class Mastery</Header>
26+
<Content>
27+
<StudentMasteryHeader learningObjectiveNames={MOCK_LOBJ_NAMES} />
28+
{MOCK_LOBJ_MASTERY.map(({ name, learningObjectives }) => (
29+
<StudentMasteryRow name={name} learningObjectives={learningObjectives} />
30+
))}
31+
</Content>
32+
</Page>
33+
);
34+
}
35+
36+
export default ClassMastery;

‎src/Screens/ClassMastery/StudentMasteryRow.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { useState } from 'react';
2+
import styled from 'styled-components';
3+
import { color } from '../../Components/constants.json';
4+
5+
type MasteryBarProps = { percentage: number };
6+
7+
const MasteryBar = styled.div`
8+
position: relative;
9+
border-radius: 11px;
10+
background-color: ${color.bgGrey};
11+
overflow: hidden;
12+
`;
13+
14+
const InnerBar = styled.div<MasteryBarProps>`
15+
position: absolute;
16+
top: 0;
17+
left: 0;
18+
bottom: 0;
19+
background-color: ${({ percentage }) =>
20+
percentage > 0.66 ? color.green : percentage > 0.33 ? color.yellow : color.red};
21+
right: ${({ percentage }) => 100 - percentage * 100 + '%'};
22+
> span {
23+
position: absolute;
24+
color: white;
25+
top: 4px;
26+
font-size: 14px;
27+
right: ${({ percentage }) => (percentage > 0.25 ? '5px' : '-33px')};
28+
}
29+
`;
30+
31+
function Mastery({ percentage }: MasteryBarProps) {
32+
return (
33+
<MasteryBar>
34+
<InnerBar percentage={percentage}>
35+
<span>{Math.floor(percentage * 100)}%</span>
36+
</InnerBar>
37+
</MasteryBar>
38+
);
39+
}
40+
41+
const Container = styled.div`
42+
display: flex;
43+
align-items: center;
44+
width: 100%;
45+
margin-bottom: 6px;
46+
`;
47+
48+
const Header = styled.div`
49+
display: flex;
50+
align-items: center;
51+
color: black;
52+
font-size: 16px;
53+
font-weight: 700;
54+
min-width: 150px;
55+
margin-right: 16px;
56+
`;
57+
58+
const Dot = styled.div`
59+
background-color: ${color.green};
60+
border-radius: 999px;
61+
width: 8px;
62+
height: 8px;
63+
margin-right: 6px;
64+
`;
65+
66+
const Content = styled.div`
67+
display: flex;
68+
align-items: center;
69+
overflow: horizontal;
70+
> :not(last-child) {
71+
margin-right: 21px;
72+
height: 32px;
73+
min-width: 100px;
74+
}
75+
`;
76+
77+
function StudentMasteryRow({ name, learningObjectives }: any) {
78+
return (
79+
<Container>
80+
<Header>
81+
<Dot />
82+
{name}
83+
</Header>
84+
<Content>
85+
{learningObjectives.map(({ percentage }: any) => (
86+
<Mastery percentage={percentage} />
87+
))}
88+
</Content>
89+
</Container>
90+
);
91+
}
92+
93+
const LearningObjectiveName = styled.span`
94+
text-align: center;
95+
`;
96+
97+
function StudentMasteryHeader({ learningObjectiveNames }: { learningObjectiveNames: string[] }) {
98+
return (
99+
<Container style={{ marginBottom: 24 }}>
100+
<Header>Student</Header>
101+
<Content>
102+
{learningObjectiveNames.map((name) => (
103+
<LearningObjectiveName>{name}</LearningObjectiveName>
104+
))}
105+
</Content>
106+
</Container>
107+
);
108+
}
109+
110+
export default StudentMasteryRow;
111+
export { StudentMasteryHeader };

‎src/Screens/ClassMastery/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as ClassMastery } from './ClassMastery';

‎src/clients/mock.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,3 +213,47 @@ export const quizblockSubmissionVar = makeVar<QuizBlockSubmission>(quizblockSubm
213213
export const quizblockSubmissionsVar = makeVar<QuizBlockSubmission[]>(quizblockSubmissions);
214214

215215
export const mockTaskVar = makeVar<Task>(mockTask);
216+
217+
export const MOCK_LOBJ_NAMES = ['Objective 1', 'Objective 2'];
218+
219+
export const MOCK_LOBJ_MASTERY = [
220+
{
221+
name: 'Ryan Fay',
222+
learningObjectives: [
223+
{
224+
objectiveName: 'Objective 1',
225+
percentage: 1,
226+
},
227+
{
228+
objectiveName: 'Objective 2',
229+
percentage: 0.9,
230+
},
231+
],
232+
},
233+
{
234+
name: 'Robert Middleton',
235+
learningObjectives: [
236+
{
237+
objectiveName: 'Objective 1',
238+
percentage: 0.6,
239+
},
240+
{
241+
objectiveName: 'Objective 2',
242+
percentage: 0.7,
243+
},
244+
],
245+
},
246+
{
247+
name: 'Darian Nguyen',
248+
learningObjectives: [
249+
{
250+
objectiveName: 'Objective 1',
251+
percentage: 0.24,
252+
},
253+
{
254+
objectiveName: 'Objective 2',
255+
percentage: 0.14,
256+
},
257+
],
258+
},
259+
];

0 commit comments

Comments
 (0)