Skip to content

Commit b7f8536

Browse files
dqna64dqna64
committed
problem difficulties
1 parent 57a76ad commit b7f8536

File tree

14 files changed

+329
-115
lines changed

14 files changed

+329
-115
lines changed

‎README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,10 +47,16 @@ CSESoc Learn also focuses strongly on delightful UI/UX, driving engagement and r
4747
- Content: [MDX](https://mdxjs.com/) + [Contentlayer](https://www.contentlayer.dev/)
4848
- Language: [TypeScript](https://stackoverflow.com/questions/12694530/what-is-typescript-and-why-would-i-use-it-in-place-of-javascript/35048303#35048303)
4949
- Styling: [Stitches](https://stitches.dev/)
50+
- Markdown plugins (see [contentlayer.config.js](contentlayer.config.js)`)
51+
- rehypeCodeTitles,
52+
- rehypeHighlight,
53+
- rehypePrismPlus,
54+
- rehypeAutolinkHeadings,
55+
- rehypeSlug
5056

5157
## Documentation
5258

53-
See the [wiki](https://github.com/csesoc/learning-platform/wiki). Documentation is currently being written.
59+
See the [wiki](https://github.com/csesoc/learning-platform/wiki).
5460

5561
## Our team
5662

‎components/CourseRevisionSidebar.tsx

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎components/course-revision/ContentContainer.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { styled } from "@stitches/react"
2+
3+
const ExerciseContainer = styled("div", {
4+
marginTop: "62px",
5+
'@media (min-width: 768px)': {
6+
marginLeft: "266px",
7+
marginTop: "0",
8+
},
9+
})
10+
11+
export default ExerciseContainer

‎components/CourseRevisionCard.tsx renamed to ‎components/course-revision/CourseRevisionCard.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { styled } from "@stitches/react";
22

33

4-
export const CourseRevisionCard = styled('div', {
4+
const CourseRevisionCard = styled('div', {
55
color: "#ebf2ff",
66
padding: '1.2rem 1.6rem',
77
display: 'flex',
@@ -27,4 +27,6 @@ export const CourseRevisionCard = styled('div', {
2727
'&:active': {
2828
background: 'linear-gradient(0.25turn, #4287f5, #4386f0);',
2929
}
30-
})
30+
})
31+
32+
export default CourseRevisionCard

‎components/course-revision/CourseRevisionSidebar.tsx

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
import { styled } from "@stitches/react"
2+
import { CourseRevisionExercise, CourseRevisionOffering } from "contentlayer/generated"
3+
import Link from "next/link"
4+
import { ArrowLeft, CaretDown, CaretUp } from "phosphor-react"
5+
import { useState } from "react"
6+
import { Button } from "../Button"
7+
import DifficultyLegend, { DifficultyIndicator } from "./DifficultyLegend"
8+
9+
type PropTypes = {
10+
/* Name of the revision session for this course offering */
11+
courseOfferingTitle: string,
12+
13+
courseOfferingContent: CourseRevisionOffering,
14+
15+
/* First in list must be the course offering, the rest are exercises */
16+
contentList: CourseRevisionExercise[],
17+
18+
/* Index of the currently selected content in contentList*/
19+
currentContentIdx: number,
20+
}
21+
22+
const CourseRevisionSidebarStyled = styled("div", {
23+
// width: "calc(100% - 2*0.8rem)",
24+
maxHeight: "calc(80vh - 66px)", // 80% of viewport height excluding navbar
25+
overflowY: "scroll",
26+
position: "fixed",
27+
top: "62px",
28+
left: "0",
29+
right: "0",
30+
padding: "0.8rem 1rem",
31+
background: "rgba(244,244,244,0.78)",
32+
backdropFilter: 'blur(8px)',
33+
34+
'@media (min-width: 768px)': {
35+
left: "unset",
36+
right: "unset",
37+
width: "250px",
38+
maxHeight: "calc(100vh - 62px)",
39+
scrollbarGutter: "auto",
40+
padding: "0",
41+
}
42+
})
43+
44+
const ContentList = styled("ul", {
45+
padding: "0",
46+
listStyle: "none",
47+
variants: {
48+
isOpen: {
49+
true: {
50+
display: "block",
51+
},
52+
false: {
53+
display: "none",
54+
'@media (min-width: 768px)': {
55+
display: "block",
56+
}
57+
}
58+
}
59+
},
60+
})
61+
62+
const BackButton = styled("button", {
63+
color: "#000",
64+
padding: "0.6rem 1.2rem",
65+
backgroundColor: "#b3c1c9",
66+
cursor: "pointer",
67+
border: "none",
68+
borderRadius: '100vh',
69+
width: "fit-content",
70+
display: "flex",
71+
alignItems: "center",
72+
'&:hover': {
73+
backgroundColor: "#bdcdd9",
74+
}
75+
})
76+
77+
const ToggleContent = styled("button", {
78+
padding: "0.6rem 1.2rem",
79+
color: "#edf8ff",
80+
backgroundColor: "#0d86d6",
81+
cursor: "pointer",
82+
border: "none",
83+
borderRadius: '100vh',
84+
width: "fit-content",
85+
display: "flex",
86+
alignItems: "center",
87+
'@media (min-width: 768px)': {
88+
display: "none",
89+
},
90+
'&:hover': {
91+
backgroundColor: "#5294ff",
92+
}
93+
94+
})
95+
96+
const ExerciseButton = styled("button", {
97+
paddingTop: "0.9rem",
98+
paddingBottom: "0.9rem",
99+
paddingLeft: "1.2rem",
100+
paddingRight: "0.4rem",
101+
color: "#edf8ff",
102+
backgroundColor: "#0d86d6",
103+
borderRadius: "0.6rem",
104+
cursor: "pointer",
105+
border: "none",
106+
width: "100%",
107+
textAlign: "left",
108+
'&:hover': {
109+
backgroundColor: "#31a7f5",
110+
},
111+
})
112+
113+
const CourseRevisionSidebar = ({ courseOfferingTitle, courseOfferingContent, contentList, currentContentIdx }: PropTypes) => {
114+
/* ONLY applies when width < 768px (in mobile view) */
115+
const [showContent, setShowContent] = useState(false)
116+
return (<CourseRevisionSidebarStyled>
117+
<div style={{
118+
display: "flex",
119+
justifyContent: "space-between",
120+
alignItems: "center",
121+
}}>
122+
<Link href={`/course-revision`}>
123+
<BackButton>
124+
<ArrowLeft style={{ marginRight: "0.4rem" }} />Other Courses
125+
</BackButton>
126+
</Link>
127+
<ToggleContent onClick={() => setShowContent((val) => !val)}>
128+
{showContent ? (<><CaretDown size={16} style={{ marginRight: "0.4rem" }} />Hide Exercises</>) : <><CaretUp size={16} style={{ marginRight: "0.4rem" }} />Show Exercises</>}
129+
</ToggleContent>
130+
131+
</div>
132+
<Subtitle>{courseOfferingTitle}</Subtitle>
133+
134+
135+
<ContentList isOpen={showContent}>
136+
<DifficultyLegend />
137+
<Link href={`/${courseOfferingContent._raw.flattenedPath}`} passHref>
138+
<ExerciseButton key={courseOfferingContent.slug} css={{
139+
backgroundColor: currentContentIdx === -1 ? "#31a7f5" : "#2285c7",
140+
fontWeight: currentContentIdx === -1 ? "bold" : "normal",
141+
}}>
142+
"Getting Started"
143+
144+
</ExerciseButton>
145+
</Link>
146+
{contentList.map((content, idx) => (
147+
<li
148+
key={content.slug}
149+
style={{
150+
listStyle: "none",
151+
margin: "0.9rem 0",
152+
}}>
153+
<Link href={`/${content._raw.flattenedPath}`} passHref>
154+
<ExerciseButton key={content.slug} css={{
155+
backgroundColor: idx === currentContentIdx ? "#31a7f5" : "#2285c7",
156+
fontWeight: idx === currentContentIdx ? "bold" : "normal",
157+
}}>
158+
<div style={{
159+
display: "flex",
160+
alignItems: "center",
161+
justifyContent: "space-between",
162+
}}>
163+
<div>
164+
{content.title}
165+
166+
</div>
167+
168+
<DifficultyIndicator difficulty={content.difficulty} />
169+
</div>
170+
</ExerciseButton>
171+
</Link>
172+
</li>
173+
174+
)
175+
)}
176+
</ContentList>
177+
</CourseRevisionSidebarStyled>)
178+
}
179+
180+
export default CourseRevisionSidebar
181+
182+
const Subtitle = styled('h2', {
183+
fontWeight: 700,
184+
fontSize: "0.8rem",
185+
marginBottom: "0.2rem",
186+
lineHeight: "1.2rem",
187+
'@media (min-width: 640px)': {
188+
fontSize: "1rem",
189+
marginBottom: "0.2rem",
190+
lineHeight: "1.4rem",
191+
},
192+
})

‎components/course-revision/DifficultyLegend.tsx

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { styled } from "@stitches/react"
2+
3+
const DifficultyLegendStyled = styled("div", {
4+
margin: "1rem 0",
5+
display: "flex",
6+
justifyContent: "flex-start",
7+
'@media (min-width: 768px)': {
8+
justifyContent: "space-between",
9+
}
10+
})
11+
12+
const DifficultyRating = styled("div", {
13+
fontSize: "0.7rem",
14+
fontWeight: "bold",
15+
color: "#000",
16+
padding: "0.5rem 1rem",
17+
borderRadius: "100vw",
18+
textAlign: "center",
19+
minWidth: "70px",
20+
variants: {
21+
difficulty: {
22+
1: {
23+
backgroundColor: "#7ff0a3",
24+
},
25+
2: {
26+
backgroundColor: "#ebc07c",
27+
},
28+
3: {
29+
backgroundColor: "#ed748e",
30+
},
31+
32+
}
33+
},
34+
'&:not(:last-child)': {
35+
marginRight: "0.6rem",
36+
}
37+
})
38+
39+
export const DifficultyIndicator = styled("div", {
40+
width: "12px",
41+
height: "12px",
42+
borderRadius: "100vw",
43+
marginRight: "0.5rem",
44+
variants: {
45+
difficulty: {
46+
"1": {
47+
backgroundColor: "#7ff0a3",
48+
},
49+
"2": {
50+
backgroundColor: "#ebc07c",
51+
},
52+
"3": {
53+
backgroundColor: "#ed748e",
54+
},
55+
}
56+
}
57+
})
58+
59+
const DifficultyLegend = () => {
60+
61+
return (
62+
<DifficultyLegendStyled>
63+
<DifficultyRating difficulty={1}>Easy</DifficultyRating>
64+
<DifficultyRating difficulty={2}>Medium</DifficultyRating>
65+
<DifficultyRating difficulty={3}>Hard</DifficultyRating>
66+
</DifficultyLegendStyled>
67+
)
68+
}
69+
70+
export default DifficultyLegend

‎data/course-revision/1511.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ offering: 22T3
77

88
# CSESoc COMP1511 Revision Practice Problems
99

10-
This is a set of ### practical programming problems designed to help you prepare for your COMP1511 22T3 final exam.
10+
This is a set of practical programming problems designed to help you prepare for your COMP1511 22T3 final exam.
1111

1212
There are autotests for each problem on cse servers which you can use to check your solutions.
1313

0 commit comments

Comments
 (0)