Skip to content

Commit a822d76

Browse files
Jose-Alarcon1Jose-Alarcon1
authored
Merge pull request #155 from UNLV-CS472-672/assignment_create
Jose (8th PR): Assignment/Quiz Creation. Front-end only
2 parents 99729c1 + a159c55 commit a822d76

File tree

4 files changed

+421
-2
lines changed

4 files changed

+421
-2
lines changed

‎frontend/src/App.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,16 @@ import Calendar from "./Components/Calendar.jsx";
2525
import Inbox from "./Components/Inbox.jsx";
2626
import TutorView from "./Components/TutorView.jsx";
2727
import AssignmentPage from "./Components/AssignmentPage.jsx";
28+
29+
import AssignmentCreate from "./Components/AssignmentCreate.jsx";
30+
2831
import WhiteboardCanvas from "./Components/WhiteboardCanvas.jsx";
2932
import LandingPage from "./Components/LandingPage.jsx";
3033

3134
import Settings from "./Components/Settings.jsx";
3235

3336

37+
3438
function App() {
3539
const location = useLocation();
3640

@@ -60,8 +64,20 @@ function App() {
6064
<Route path="/faqs" element={<FAQS />} />
6165
<Route path="/findTutor" element={<FindTutor />} />
6266
<Route path="/chat" element={<Chat />} />
67+
68+
<Route path="/videocall" element={<VideoCall />} />
69+
{/* <Route path="/Calendar" element={<Calendar />} /> */}
70+
71+
{/* Jose needs this for this tutorView and inbox to work */}
72+
<Route path="/tutorview" element={<TutorView />} />
73+
<Route path="/Calendar" element={<Calendar />} />
74+
<Route path="/Inbox" element={<Inbox />} />
75+
<Route path="/tutorview" element={<TutorView />} />
76+
<Route path="/assignment_create" element={<AssignmentCreate />} />
77+
6378
<Route path="/WhiteboardCanvas" element={<WhiteboardCanvas/>} />
6479

80+
6581
{/* Student Routes with Layout */}
6682
<Route path="/student/view" element={<StudentLayout><StudentView /></StudentLayout>} />
6783
<Route path="/student/calendar" element={<StudentLayout><Calendar /></StudentLayout>} />
@@ -77,6 +93,12 @@ function App() {
7793
<Route path="/student/learn_more" element={<StudentLayout><Learn_more /></StudentLayout>} />
7894
<Route path="/student/about" element={<StudentLayout><About /></StudentLayout>} />
7995
<Route path="/student/assignment" element={<StudentLayout><AssignmentPage /></StudentLayout>} />
96+
97+
{/*<Route path="/student/assignment_create" element={<StudentLayout><AssignmentCreate /></StudentLayout>} />*/}
98+
{/*<Route path="/student/settings" element={<StudentLayout><Settings /></StudentLayout>} />*/}
99+
{/*<Route path="/student/lessons" element={<StudentLayout><Lessons /></StudentLayout>} />*/}
100+
{/*<Route path="/student/resources" element={<StudentLayout><Resources /></StudentLayout>} />*/}
101+
80102
<Route path="/student/settings" element={<StudentLayout><Settings /></StudentLayout>} />
81103
<Route path="/student/inbox" element={<StudentLayout><Inbox /></StudentLayout>} />
82104
<Route path="/student/WhiteboardCanvas" element={<StudentLayout><WhiteboardCanvas /></StudentLayout>} />
@@ -101,6 +123,7 @@ function App() {
101123
<Route path="/tutor/inbox" element={<StudentLayout><Inbox /></StudentLayout>} />
102124
<Route path="/tutor/WhiteboardCanvas" element={<StudentLayout><WhiteboardCanvas /></StudentLayout>} />
103125
<Route path="/tutor/LandingPage" element={<StudentLayout><LandingPage /></StudentLayout>} />
126+
104127
</Routes>
105128
{(location.pathname !== "/login" && location.pathname !== "/dateofbirth" && location.pathname !== "/SignUp") && <Footer />}
106129
</div>

‎frontend/src/Components/AssignmentCreate.jsx‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
import { useState } from 'react';
2+
import '../Styles/AssignmentCreate.css';
3+
4+
const AssignmentCreate = () => {
5+
const [view, setView] = useState('list');
6+
const [selectedAssignment, setSelectedAssignment] = useState(null);
7+
// const [selectedQuizId, setSelectedQuizId] = useState(1); // Mock quiz ID
8+
const [questionType, setQuestionType] = useState('MC');
9+
const [choices, setChoices] = useState([{ text: '', isCorrect: false }]);
10+
11+
const assignments = [
12+
{ id: 1, title: 'Math Homework', type: 'HW', deadline: '2025-04-30' },
13+
{ id: 2, title: 'Science Quiz', type: 'QZ', deadline: '2025-05-05' }
14+
];
15+
16+
const questions = [
17+
{ id: 1, type: 'MC', text: 'What is 2 + 2?', points: 1, solution: 4 },
18+
{ id: 2, type: 'SA', text: 'Define gravity.', points: 2, solution: 'Ask Newton' },
19+
];
20+
21+
const handleAddChoice = () => {
22+
setChoices([...choices, { text: '', isCorrect: false }]);
23+
};
24+
25+
return (
26+
<div className="assignment-create_container">
27+
{view === 'list' && (
28+
<>
29+
<h1 className="assignment-create_header">Assignments</h1>
30+
<div className="assignment-create_button-container">
31+
<button
32+
className="assignment-create_button"
33+
onClick={() => {
34+
setSelectedAssignment(null);
35+
setView('create');
36+
}}
37+
>
38+
Create New Assignment
39+
</button>
40+
</div>
41+
<table className="assignment-create_table">
42+
<thead>
43+
<tr>
44+
<th className="assignment-create_label">ID</th>
45+
<th className="assignment-create_label">Title</th>
46+
<th className="assignment-create_label">Type</th>
47+
<th className="assignment-create_label">Deadline</th>
48+
<th className="assignment-create_label">Actions</th>
49+
</tr>
50+
</thead>
51+
<tbody>
52+
{assignments.map((a) => (
53+
<tr key={a.id}>
54+
<td className="assignment-create_cell">{a.id}</td>
55+
<td className="assignment-create_cell">{a.title}</td>
56+
<td className="assignment-create_cell">{a.type}</td>
57+
<td className="assignment-create_cell">{a.deadline}</td>
58+
<td className="assignment-create_cell">
59+
<button
60+
className="assignment-create_link"
61+
onClick={() => {
62+
setSelectedAssignment(a);
63+
setView('create');
64+
}}
65+
>
66+
Edit
67+
</button>
68+
<button
69+
className="assignment-create_link"
70+
onClick={() => setView('quiz')}
71+
>
72+
View Quiz
73+
</button>
74+
</td>
75+
</tr>
76+
))}
77+
</tbody>
78+
</table>
79+
</>
80+
)}
81+
82+
{(view === 'create' || view === 'edit') && (
83+
<div className="assignment-create_form">
84+
<h2 className="assignment-create_header">
85+
{selectedAssignment ? 'Edit Assignment' : 'Create Assignment'}
86+
</h2>
87+
<form>
88+
<input
89+
type="text"
90+
placeholder="Title"
91+
className="assignment-create_input"
92+
defaultValue={selectedAssignment?.title || ''}
93+
/>
94+
<textarea
95+
placeholder="Description"
96+
className="assignment-create_input"
97+
/>
98+
<select
99+
className="assignment-create_input"
100+
defaultValue={selectedAssignment?.type || 'HW'}
101+
>
102+
<option value="EX">Exercises</option>
103+
<option value="HW">Homework</option>
104+
<option value="QZ">Quiz</option>
105+
<option value="TT">Test</option>
106+
<option value="EC">Extra Credit</option>
107+
</select>
108+
<input type="datetime-local" className="assignment-create_input" />
109+
<input type="file" className="assignment-create_input" />
110+
<input
111+
type="number"
112+
placeholder="Student ID (optional)"
113+
className="assignment-create_input"
114+
/>
115+
<div className="assignment-create_button-container">
116+
<button className="assignment-create_button" type="submit">
117+
Submit
118+
</button>
119+
<button
120+
className="assignment-create_button"
121+
type="button"
122+
onClick={() => setView('list')}
123+
>
124+
Cancel
125+
</button>
126+
</div>
127+
</form>
128+
</div>
129+
)}
130+
131+
{view === 'quiz' && (
132+
<>
133+
<h2 className="assignment-create_header">Quiz Questions</h2>
134+
<div className="assignment-create_button-container">
135+
<button
136+
className="assignment-create_button"
137+
onClick={() => setView('question')}
138+
>
139+
Add Question
140+
</button>
141+
</div>
142+
<table className="assignment-create_table">
143+
<thead>
144+
<tr>
145+
<th className="assignment-create_label">#</th>
146+
<th className="assignment-create_label">Type</th>
147+
<th className="assignment-create_label">Points</th>
148+
<th className="assignment-create_label">Question</th>
149+
<th className="assignment-create_label">Solution</th>
150+
</tr>
151+
</thead>
152+
<tbody>
153+
{questions.map((q) => (
154+
<tr key={q.id}>
155+
<td className="assignment-create_cell">{q.id}</td>
156+
<td className="assignment-create_cell">{q.type}</td>
157+
<td className="assignment-create_cell">{q.points}</td>
158+
<td className="assignment-create_cell">{q.text}</td>
159+
<td className="assignment-create_cell">{q.solution}</td>
160+
</tr>
161+
))}
162+
</tbody>
163+
</table>
164+
</>
165+
)}
166+
167+
{view === 'question' && (
168+
<div className="assignment-create_form">
169+
<h2 className="assignment-create_header">Create Question</h2>
170+
<form>
171+
<select
172+
className="assignment-create_input"
173+
value={questionType}
174+
onChange={(e) => setQuestionType(e.target.value)}
175+
>
176+
<option value="MC">Multiple Choice</option>
177+
<option value="SA">Short Answer</option>
178+
</select>
179+
<input type="number" placeholder="Order" className="assignment-create_input" />
180+
<textarea placeholder="Question Text" className="assignment-create_input" />
181+
<input type="number" placeholder="Points" className="assignment-create_input" />
182+
183+
{questionType === 'MC' && (
184+
<>
185+
<h4 style={{ marginTop: '20px' }}>Choices</h4>
186+
{choices.map((choice, index) => (
187+
<div
188+
key={index}
189+
className="assignment-create_input"
190+
style={{
191+
display: 'flex',
192+
gap: '10px',
193+
marginBottom: '10px',
194+
}}
195+
>
196+
<input
197+
type="text"
198+
placeholder={`Choice ${index + 1}`}
199+
value={choice.text}
200+
onChange={(e) => {
201+
const newChoices = [...choices];
202+
newChoices[index].text = e.target.value;
203+
setChoices(newChoices);
204+
}}
205+
/>
206+
<label>
207+
<input
208+
type="checkbox"
209+
checked={choice.isCorrect}
210+
onChange={(e) => {
211+
const newChoices = [...choices];
212+
newChoices[index].isCorrect = e.target.checked;
213+
setChoices(newChoices);
214+
}}
215+
/>
216+
Correct
217+
</label>
218+
</div>
219+
))}
220+
</>
221+
)}
222+
223+
<div className="assignment-create_button-container">
224+
<button
225+
type="button"
226+
className="assignment-create_button"
227+
onClick={handleAddChoice}
228+
>
229+
Add Another Choice
230+
</button>
231+
<button className="assignment-create_button" type="submit">
232+
Submit
233+
</button>
234+
<button
235+
className="assignment-create_button"
236+
type="button"
237+
onClick={() => setView('quiz')}
238+
>
239+
Cancel
240+
</button>
241+
</div>
242+
</form>
243+
</div>
244+
)}
245+
</div>
246+
);
247+
};
248+
249+
export default AssignmentCreate;

‎frontend/src/Components/Inbox.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,9 @@ export default function Inbox() {
102102

103103
const navLinks = {
104104
Chat: "/chat",
105-
Calendar: "/calendar",
105+
Calendar: "/tutor/calendar",
106106
Support: "/support",
107-
Profile: "/profile",
107+
Profile: "/tutor/profile",
108108
};
109109

110110
const filteredMessages = messages.filter((msg) =>

0 commit comments

Comments
 (0)