Skip to content

Commit 52cd256

Browse files
remotesynthremotesynth
committed
Clean up quiz builder layout
1 parent aa112f1 commit 52cd256

File tree

1 file changed

+175
-165
lines changed

1 file changed

+175
-165
lines changed

‎frontend/src/components/QuizBuilder.js‎

Lines changed: 175 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
Switch,
2020
} from '@mui/material';
2121
import { useNavigate } from 'react-router-dom';
22+
import MainLayout from './MainLayout';
2223

2324
function QuizBuilder() {
2425
const [title, setTitle] = useState('');
@@ -108,7 +109,9 @@ function QuizBuilder() {
108109

109110
if (data.QuizID) {
110111
setQuizID(data.QuizID);
111-
setSuccessMessage(`Quiz created successfully! Quiz ID: ${data.QuizID}`);
112+
setSuccessMessage(
113+
`Quiz created successfully! Quiz ID: ${data.QuizID}`
114+
);
112115
setTitle('');
113116
setVisibility('Public');
114117
setEnableTimer(false);
@@ -143,201 +146,208 @@ function QuizBuilder() {
143146
};
144147

145148
return (
146-
<Container maxWidth="md">
147-
<Typography variant="h4" gutterBottom>
148-
Create a New Quiz
149-
</Typography>
149+
<MainLayout>
150+
<Container maxWidth="sm" className="main-quiz-container">
151+
<Typography variant="h4" gutterBottom>
152+
Create a New Quiz
153+
</Typography>
150154

151-
{errorMessage && (
152-
<Alert severity="error" sx={{ marginBottom: 2 }}>
153-
{errorMessage}
154-
</Alert>
155-
)}
155+
{errorMessage && (
156+
<Alert severity="error" sx={{ marginBottom: 2 }}>
157+
{errorMessage}
158+
</Alert>
159+
)}
156160

157-
{successMessage && (
158-
<Alert severity="success" sx={{ marginBottom: 2 }}>
159-
{successMessage}
160-
</Alert>
161-
)}
161+
{successMessage && (
162+
<Alert severity="success" sx={{ marginBottom: 2 }}>
163+
{successMessage}
164+
</Alert>
165+
)}
162166

163-
{quizID ? (
164-
<Stack spacing={2} marginTop={4}>
165-
<Button variant="contained" color="primary" onClick={handleGoHome}>
166-
Go to Home
167-
</Button>
168-
<Button variant="outlined" onClick={handleCreateAnotherQuiz}>
169-
Create Another Quiz
170-
</Button>
171-
</Stack>
172-
) : (
173-
<>
174-
<TextField
175-
label="Quiz Title"
176-
fullWidth
177-
margin="normal"
178-
value={title}
179-
onChange={(e) => setTitle(e.target.value)}
180-
/>
181-
182-
<FormControl fullWidth margin="normal">
183-
<InputLabel id="visibility-label">Visibility</InputLabel>
184-
<Select
185-
labelId="visibility-label"
186-
value={visibility}
187-
label="Visibility"
188-
onChange={(e) => setVisibility(e.target.value)}
189-
>
190-
<MenuItem value="Public">Public</MenuItem>
191-
<MenuItem value="Private">Private</MenuItem>
192-
</Select>
193-
</FormControl>
194-
195-
<FormControlLabel
196-
control={
197-
<Switch
198-
checked={enableTimer}
199-
onChange={(e) => setEnableTimer(e.target.checked)}
200-
color="primary"
201-
/>
202-
}
203-
label="Enable Timer"
204-
sx={{ marginTop: 2 }}
205-
/>
206-
207-
{enableTimer && (
167+
{quizID ? (
168+
<Stack spacing={2} marginTop={4}>
169+
<Button variant="contained" color="primary" onClick={handleGoHome}>
170+
Go to Home
171+
</Button>
172+
<Button variant="outlined" onClick={handleCreateAnotherQuiz}>
173+
Create Another Quiz
174+
</Button>
175+
</Stack>
176+
) : (
177+
<>
208178
<TextField
209-
label="Timer Seconds per Question"
210-
type="number"
179+
label="Quiz Title"
211180
fullWidth
212181
margin="normal"
213-
value={timerSeconds}
214-
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
215-
inputProps={{ min: 1 }}
182+
value={title}
183+
onChange={(e) => setTitle(e.target.value)}
216184
/>
217-
)}
218185

219-
<Card variant="outlined" sx={{ marginTop: 4 }}>
220-
<CardContent>
221-
<Typography variant="h5" gutterBottom>
222-
Add a Question
223-
</Typography>
186+
<FormControl fullWidth margin="normal">
187+
<InputLabel id="visibility-label">Visibility</InputLabel>
188+
<Select
189+
labelId="visibility-label"
190+
value={visibility}
191+
label="Visibility"
192+
onChange={(e) => setVisibility(e.target.value)}
193+
>
194+
<MenuItem value="Public">Public</MenuItem>
195+
<MenuItem value="Private">Private</MenuItem>
196+
</Select>
197+
</FormControl>
198+
199+
<FormControlLabel
200+
control={
201+
<Switch
202+
checked={enableTimer}
203+
onChange={(e) => setEnableTimer(e.target.checked)}
204+
color="primary"
205+
/>
206+
}
207+
label="Enable Timer"
208+
sx={{ marginTop: 2 }}
209+
/>
224210

211+
{enableTimer && (
225212
<TextField
226-
label="Question Text"
213+
label="Timer Seconds per Question"
214+
type="number"
227215
fullWidth
228216
margin="normal"
229-
value={currentQuestion.QuestionText}
230-
onChange={(e) =>
231-
setCurrentQuestion({
232-
...currentQuestion,
233-
QuestionText: e.target.value,
234-
})
235-
}
217+
value={timerSeconds}
218+
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
219+
inputProps={{ min: 1 }}
236220
/>
221+
)}
237222

238-
<Grid container spacing={2}>
239-
{currentQuestion.Options.map((option, index) => (
240-
<Grid item xs={12} sm={6} key={index}>
241-
<TextField
242-
label={`Option ${index + 1}`}
243-
fullWidth
244-
value={option}
245-
onChange={(e) => handleOptionChange(index, e.target.value)}
246-
/>
247-
</Grid>
248-
))}
249-
</Grid>
223+
<Card variant="outlined" sx={{ marginTop: 4 }}>
224+
<CardContent>
225+
<Typography variant="h5" gutterBottom>
226+
Add a Question
227+
</Typography>
250228

251-
<FormControl component="fieldset" margin="normal">
252-
<Typography variant="subtitle1">Correct Answer</Typography>
253-
<RadioGroup
254-
value={currentQuestion.CorrectAnswer}
229+
<TextField
230+
label="Question Text"
231+
fullWidth
232+
margin="normal"
233+
value={currentQuestion.QuestionText}
255234
onChange={(e) =>
256235
setCurrentQuestion({
257236
...currentQuestion,
258-
CorrectAnswer: e.target.value,
237+
QuestionText: e.target.value,
259238
})
260239
}
261-
>
240+
/>
241+
242+
<Grid container spacing={2}>
262243
{currentQuestion.Options.map((option, index) => (
263-
<FormControlLabel
264-
key={index}
265-
value={option}
266-
control={<Radio />}
267-
label={`Option ${index + 1}`}
268-
disabled={!option.trim()}
269-
/>
244+
<Grid item xs={12} sm={6} key={index}>
245+
<TextField
246+
label={`Option ${index + 1}`}
247+
fullWidth
248+
value={option}
249+
onChange={(e) =>
250+
handleOptionChange(index, e.target.value)
251+
}
252+
/>
253+
</Grid>
270254
))}
271-
</RadioGroup>
272-
</FormControl>
255+
</Grid>
273256

274-
<TextField
275-
label="Trivia (Optional)"
276-
fullWidth
277-
margin="normal"
278-
value={currentQuestion.Trivia}
279-
onChange={(e) =>
280-
setCurrentQuestion({ ...currentQuestion, Trivia: e.target.value })
281-
}
282-
/>
257+
<FormControl component="fieldset" margin="normal">
258+
<Typography variant="subtitle1">Correct Answer</Typography>
259+
<RadioGroup
260+
value={currentQuestion.CorrectAnswer}
261+
onChange={(e) =>
262+
setCurrentQuestion({
263+
...currentQuestion,
264+
CorrectAnswer: e.target.value,
265+
})
266+
}
267+
>
268+
{currentQuestion.Options.map((option, index) => (
269+
<FormControlLabel
270+
key={index}
271+
value={option}
272+
control={<Radio />}
273+
label={`Option ${index + 1}`}
274+
disabled={!option.trim()}
275+
/>
276+
))}
277+
</RadioGroup>
278+
</FormControl>
283279

284-
<Stack direction="row" spacing={2} marginTop={2}>
285-
<Button
286-
variant="contained"
287-
color="primary"
288-
onClick={handleAddQuestion}
289-
>
290-
Add Question
291-
</Button>
292-
<Button
293-
variant="outlined"
294-
color="secondary"
295-
onClick={() =>
280+
<TextField
281+
label="Trivia (Optional)"
282+
fullWidth
283+
margin="normal"
284+
value={currentQuestion.Trivia}
285+
onChange={(e) =>
296286
setCurrentQuestion({
297-
QuestionText: '',
298-
Options: ['', '', '', ''],
299-
CorrectAnswer: '',
300-
Trivia: '',
287+
...currentQuestion,
288+
Trivia: e.target.value,
301289
})
302290
}
303-
>
304-
Clear
305-
</Button>
306-
</Stack>
307-
</CardContent>
308-
</Card>
291+
/>
309292

310-
{questions.length > 0 && (
311-
<Card variant="outlined" sx={{ marginTop: 4 }}>
312-
<CardContent>
313-
<Typography variant="h5" gutterBottom>
314-
Questions Added ({questions.length})
315-
</Typography>
316-
{questions.map((question, index) => (
317-
<Typography key={index} variant="body1" gutterBottom>
318-
{index + 1}. {question.QuestionText}
319-
</Typography>
320-
))}
293+
<Stack direction="row" spacing={2} marginTop={2}>
294+
<Button
295+
variant="contained"
296+
color="primary"
297+
onClick={handleAddQuestion}
298+
>
299+
Add Question
300+
</Button>
301+
<Button
302+
variant="outlined"
303+
color="secondary"
304+
onClick={() =>
305+
setCurrentQuestion({
306+
QuestionText: '',
307+
Options: ['', '', '', ''],
308+
CorrectAnswer: '',
309+
Trivia: '',
310+
})
311+
}
312+
>
313+
Clear
314+
</Button>
315+
</Stack>
321316
</CardContent>
322317
</Card>
323-
)}
324318

325-
<Stack spacing={2} marginTop={4}>
326-
<Button
327-
variant="contained"
328-
color="success"
329-
onClick={handleSubmitQuiz}
330-
disabled={isSubmitting}
331-
>
332-
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
333-
</Button>
334-
<Button variant="outlined" onClick={() => navigate('/')}>
335-
Cancel
336-
</Button>
337-
</Stack>
338-
</>
339-
)}
340-
</Container>
319+
{questions.length > 0 && (
320+
<Card variant="outlined" sx={{ marginTop: 4 }}>
321+
<CardContent>
322+
<Typography variant="h5" gutterBottom>
323+
Questions Added ({questions.length})
324+
</Typography>
325+
{questions.map((question, index) => (
326+
<Typography key={index} variant="body1" gutterBottom>
327+
{index + 1}. {question.QuestionText}
328+
</Typography>
329+
))}
330+
</CardContent>
331+
</Card>
332+
)}
333+
334+
<Stack spacing={2} marginTop={4}>
335+
<Button
336+
variant="contained"
337+
color="success"
338+
onClick={handleSubmitQuiz}
339+
disabled={isSubmitting}
340+
>
341+
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
342+
</Button>
343+
<Button variant="outlined" onClick={() => navigate('/')}>
344+
Cancel
345+
</Button>
346+
</Stack>
347+
</>
348+
)}
349+
</Container>
350+
</MainLayout>
341351
);
342352
}
343353

0 commit comments

Comments
 (0)