Skip to content

Commit ff64d02

Browse files
ji-mmyliuji-mmyliu
committed
Start Short Answer UI
1 parent b893dfc commit ff64d02

File tree

8 files changed

+940
-74
lines changed

8 files changed

+940
-74
lines changed

‎backend/types/activityTypes.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export enum QuestionType {
66
Matching = "Matching",
77
Table = "Table",
88
TextInput = "TextInput",
9-
Custom = "Custom",
109
}
1110

1211
export interface ActivityDTO extends CoursePageDTO {

‎backend/utilities/activityModelMapper.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
MultipleChoiceActivityModel,
44
MultiSelectActivityModel,
55
TableActivityModel,
6+
TextInputActivityModel,
67
} from "../models/activity.mgmodel";
78
import { QuestionType } from "../types/activityTypes";
89

@@ -11,4 +12,5 @@ export const activityModelMapper = {
1112
[QuestionType.MultiSelect]: MultiSelectActivityModel,
1213
[QuestionType.Table]: TableActivityModel,
1314
[QuestionType.Matching]: MatchingActivityModel,
15+
[QuestionType.TextInput]: TextInputActivityModel,
1416
};

‎frontend/src/components/course_authoring/text-input/TextInputEditor.tsx‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
import { AddPhotoAlternate } from "@mui/icons-material";
2+
import { Box, Button, Typography, useTheme } from "@mui/material";
3+
import { VisuallyHidden } from "@reach/visually-hidden";
4+
import React from "react";
5+
import ActivityAPIClient from "../../../APIClients/ActivityAPIClient";
6+
import { Activity, TextInputActivity } from "../../../types/CourseTypes";
7+
import TitleEditor from "../editorComponents/TitleEditor";
8+
import { BodySmallTextField } from "../editorComponents/TypographyTextField";
9+
10+
const TextInputMainEditor = ({
11+
activity,
12+
setActivity,
13+
hasImage,
14+
hasAdditionalContext,
15+
}: {
16+
activity: TextInputActivity;
17+
setActivity: React.Dispatch<React.SetStateAction<Activity | undefined>>;
18+
hasImage: boolean;
19+
hasAdditionalContext: boolean;
20+
}) => {
21+
const theme = useTheme();
22+
23+
return (
24+
<Box
25+
sx={{
26+
display: "flex",
27+
height: "582px",
28+
padding: "0 32px 0 33px",
29+
justifyContent: "center",
30+
alignItems: "center",
31+
alignSelf: "stretch",
32+
33+
borderRadius: "8px",
34+
border: `1px solid ${theme.palette.Neutral[400]}`,
35+
background: theme.palette.Neutral[100],
36+
}}
37+
>
38+
<Box
39+
sx={{
40+
display: "flex",
41+
width: "711px",
42+
height: "582px",
43+
padding: "24px 0",
44+
flexDirection: "column",
45+
alignItems: "flex-start",
46+
gap: "24px",
47+
}}
48+
>
49+
<Box
50+
sx={{
51+
display: "flex",
52+
width: "705px",
53+
flexDirection: "column",
54+
alignItems: "flex-start",
55+
gap: "8px",
56+
}}
57+
>
58+
<TitleEditor
59+
title={activity.title}
60+
setTitle={(newTitle) => {
61+
setActivity((prev) => prev && { ...prev, title: newTitle });
62+
}}
63+
/>
64+
<Typography
65+
variant="bodyMedium"
66+
sx={{ color: theme.palette.Neutral[500] }}
67+
>
68+
Type one word or a short phrase in the box.
69+
</Typography>
70+
</Box>
71+
<Box
72+
sx={{
73+
display: "flex",
74+
alignItems: "flex-start",
75+
gap: "24px",
76+
alignSelf: "stretch",
77+
}}
78+
>
79+
{hasImage && (
80+
<Box
81+
sx={{
82+
display: "flex",
83+
width: "250px",
84+
minWidth: "250px",
85+
maxWidth: "300px",
86+
minHeight: "250px",
87+
maxHeight: "300px",
88+
padding: "24px 16px",
89+
flexDirection: "column",
90+
justifyContent: "center",
91+
alignItems: "center",
92+
gap: "24px",
93+
alignSelf: "stretch",
94+
aspectRatio: "1 / 1",
95+
96+
border: "1px dashed #000",
97+
...(activity.imageUrl
98+
? {
99+
backgroundImage: `url(${activity.imageUrl})`,
100+
backgroundSize: "cover",
101+
}
102+
: {}),
103+
}}
104+
>
105+
<Button
106+
component="label"
107+
sx={{
108+
display: "flex",
109+
padding: "10px 24px 10px 16px",
110+
justifyContent: "center",
111+
alignItems: "center",
112+
gap: "8px",
113+
borderRadius: "4px",
114+
border: "1px solid #6F797B",
115+
backgroundColor: "transparent",
116+
textTransform: "none",
117+
minWidth: "auto",
118+
width: "auto",
119+
"&:hover": {
120+
backgroundColor: "rgba(0, 0, 0, 0.04)",
121+
},
122+
}}
123+
>
124+
<AddPhotoAlternate
125+
sx={{
126+
width: "18px",
127+
height: "18px",
128+
color: theme.palette.Administrator.Dark.Default,
129+
}}
130+
/>
131+
<Typography
132+
variant="labelLarge"
133+
sx={{
134+
color: theme.palette.Administrator.Dark.Default,
135+
}}
136+
>
137+
Add image
138+
</Typography>
139+
<VisuallyHidden>
140+
<input
141+
type="file"
142+
accept="image/*"
143+
onChange={(e) => {
144+
const file: File | undefined = e.target.files?.[0];
145+
if (file) {
146+
ActivityAPIClient.updateActivityMainPicture(
147+
activity.id,
148+
activity.type,
149+
file,
150+
).then(setActivity);
151+
}
152+
}}
153+
/>
154+
</VisuallyHidden>
155+
</Button>
156+
</Box>
157+
)}
158+
{hasAdditionalContext && (
159+
<Box
160+
sx={{
161+
display: "flex",
162+
padding: "12px 16px",
163+
flexDirection: "column",
164+
alignItems: "center",
165+
gap: "8px",
166+
flex: "1 0 0",
167+
alignSelf: "stretch",
168+
169+
border: `1px solid ${theme.palette.Neutral[400]}`,
170+
background: theme.palette.Neutral[100],
171+
}}
172+
>
173+
<Typography
174+
sx={{
175+
alignSelf: "stretch",
176+
177+
color: theme.palette.Neutral[700],
178+
fontSize: "16px",
179+
fontStyle: "normal",
180+
fontWeight: 700,
181+
lineHeight: "140%",
182+
letterSpacing: "0.2px",
183+
}}
184+
>
185+
Additional context:
186+
</Typography>
187+
188+
<BodySmallTextField
189+
defaultValue={activity.additionalContext || ""}
190+
onChange={(newValue) => {
191+
setActivity(
192+
(prev) =>
193+
prev && {
194+
...prev,
195+
additionalContext: newValue,
196+
},
197+
);
198+
}}
199+
placeholder="Add additional context..."
200+
rows={9}
201+
/>
202+
</Box>
203+
)}
204+
</Box>
205+
<Box
206+
sx={{
207+
display: "flex",
208+
flexDirection: "row",
209+
rowGap: "24px",
210+
columnGap: "34px",
211+
flexWrap: "wrap",
212+
}}
213+
>
214+
{" "}
215+
</Box>
216+
</Box>
217+
</Box>
218+
);
219+
};
220+
221+
export default TextInputMainEditor;

0 commit comments

Comments
 (0)