Skip to content

Commit 196cba5

Browse files
HarshCasperHarshCasper
committed
show the quiz id before navigating to the main page
1 parent 29658f1 commit 196cba5

File tree

1 file changed

+183
-151
lines changed

1 file changed

+183
-151
lines changed

‎frontend/src/components/QuizBuilder.js‎

Lines changed: 183 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ function QuizBuilder() {
3535
const [errorMessage, setErrorMessage] = useState('');
3636
const [successMessage, setSuccessMessage] = useState('');
3737
const [isSubmitting, setIsSubmitting] = useState(false);
38+
const [quizID, setQuizID] = useState(null);
3839
const navigate = useNavigate();
3940

4041
const handleOptionChange = (index, value) => {
@@ -84,7 +85,8 @@ function QuizBuilder() {
8485
Questions: questions,
8586
};
8687

87-
setIsSubmitting(true); // Start submission
88+
setIsSubmitting(true);
89+
setErrorMessage('');
8890

8991
fetch(`${process.env.REACT_APP_API_ENDPOINT}/createquiz`, {
9092
method: 'POST',
@@ -105,11 +107,19 @@ function QuizBuilder() {
105107
}
106108

107109
if (data.QuizID) {
110+
setQuizID(data.QuizID);
108111
setSuccessMessage(`Quiz created successfully! Quiz ID: ${data.QuizID}`);
109-
// Optionally, navigate to another page after a short delay
110-
setTimeout(() => {
111-
navigate('/');
112-
}, 2000);
112+
setTitle('');
113+
setVisibility('Public');
114+
setEnableTimer(false);
115+
setTimerSeconds(30);
116+
setQuestions([]);
117+
setCurrentQuestion({
118+
QuestionText: '',
119+
Options: ['', '', '', ''],
120+
CorrectAnswer: '',
121+
Trivia: '',
122+
});
113123
} else {
114124
throw new Error('Quiz ID not returned from server.');
115125
}
@@ -123,6 +133,15 @@ function QuizBuilder() {
123133
});
124134
};
125135

136+
const handleGoHome = () => {
137+
navigate('/');
138+
};
139+
140+
const handleCreateAnotherQuiz = () => {
141+
setSuccessMessage('');
142+
setQuizID(null);
143+
};
144+
126145
return (
127146
<Container maxWidth="md">
128147
<Typography variant="h4" gutterBottom>
@@ -141,170 +160,183 @@ function QuizBuilder() {
141160
</Alert>
142161
)}
143162

144-
<TextField
145-
label="Quiz Title"
146-
fullWidth
147-
margin="normal"
148-
value={title}
149-
onChange={(e) => setTitle(e.target.value)}
150-
/>
151-
152-
<FormControl fullWidth margin="normal">
153-
<InputLabel id="visibility-label">Visibility</InputLabel>
154-
<Select
155-
labelId="visibility-label"
156-
value={visibility}
157-
label="Visibility"
158-
onChange={(e) => setVisibility(e.target.value)}
159-
>
160-
<MenuItem value="Public">Public</MenuItem>
161-
<MenuItem value="Private">Private</MenuItem>
162-
</Select>
163-
</FormControl>
164-
165-
<FormControlLabel
166-
control={
167-
<Switch
168-
checked={enableTimer}
169-
onChange={(e) => setEnableTimer(e.target.checked)}
170-
color="primary"
171-
/>
172-
}
173-
label="Enable Timer"
174-
sx={{ marginTop: 2 }}
175-
/>
176-
177-
{enableTimer && (
178-
<TextField
179-
label="Timer Seconds per Question"
180-
type="number"
181-
fullWidth
182-
margin="normal"
183-
value={timerSeconds}
184-
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
185-
inputProps={{ min: 1 }}
186-
/>
187-
)}
188-
189-
<Card variant="outlined" sx={{ marginTop: 4 }}>
190-
<CardContent>
191-
<Typography variant="h5" gutterBottom>
192-
Add a Question
193-
</Typography>
194-
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+
<>
195174
<TextField
196-
label="Question Text"
175+
label="Quiz Title"
197176
fullWidth
198177
margin="normal"
199-
value={currentQuestion.QuestionText}
200-
onChange={(e) =>
201-
setCurrentQuestion({
202-
...currentQuestion,
203-
QuestionText: e.target.value,
204-
})
205-
}
178+
value={title}
179+
onChange={(e) => setTitle(e.target.value)}
206180
/>
207181

208-
<Grid container spacing={2}>
209-
{currentQuestion.Options.map((option, index) => (
210-
<Grid item xs={12} sm={6} key={index}>
211-
<TextField
212-
label={`Option ${index + 1}`}
213-
fullWidth
214-
value={option}
215-
onChange={(e) => handleOptionChange(index, e.target.value)}
216-
/>
217-
</Grid>
218-
))}
219-
</Grid>
220-
221-
<FormControl component="fieldset" margin="normal">
222-
<Typography variant="subtitle1">Correct Answer</Typography>
223-
<RadioGroup
224-
value={currentQuestion.CorrectAnswer}
225-
onChange={(e) =>
226-
setCurrentQuestion({
227-
...currentQuestion,
228-
CorrectAnswer: e.target.value,
229-
})
230-
}
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)}
231189
>
232-
{currentQuestion.Options.map((option, index) => (
233-
<FormControlLabel
234-
key={index}
235-
value={option}
236-
control={<Radio />}
237-
label={`Option ${index + 1}`}
238-
disabled={!option.trim()}
239-
/>
240-
))}
241-
</RadioGroup>
190+
<MenuItem value="Public">Public</MenuItem>
191+
<MenuItem value="Private">Private</MenuItem>
192+
</Select>
242193
</FormControl>
243194

244-
<TextField
245-
label="Trivia (Optional)"
246-
fullWidth
247-
margin="normal"
248-
value={currentQuestion.Trivia}
249-
onChange={(e) =>
250-
setCurrentQuestion({ ...currentQuestion, Trivia: e.target.value })
195+
<FormControlLabel
196+
control={
197+
<Switch
198+
checked={enableTimer}
199+
onChange={(e) => setEnableTimer(e.target.checked)}
200+
color="primary"
201+
/>
251202
}
203+
label="Enable Timer"
204+
sx={{ marginTop: 2 }}
252205
/>
253206

254-
<Stack direction="row" spacing={2} marginTop={2}>
207+
{enableTimer && (
208+
<TextField
209+
label="Timer Seconds per Question"
210+
type="number"
211+
fullWidth
212+
margin="normal"
213+
value={timerSeconds}
214+
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
215+
inputProps={{ min: 1 }}
216+
/>
217+
)}
218+
219+
<Card variant="outlined" sx={{ marginTop: 4 }}>
220+
<CardContent>
221+
<Typography variant="h5" gutterBottom>
222+
Add a Question
223+
</Typography>
224+
225+
<TextField
226+
label="Question Text"
227+
fullWidth
228+
margin="normal"
229+
value={currentQuestion.QuestionText}
230+
onChange={(e) =>
231+
setCurrentQuestion({
232+
...currentQuestion,
233+
QuestionText: e.target.value,
234+
})
235+
}
236+
/>
237+
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>
250+
251+
<FormControl component="fieldset" margin="normal">
252+
<Typography variant="subtitle1">Correct Answer</Typography>
253+
<RadioGroup
254+
value={currentQuestion.CorrectAnswer}
255+
onChange={(e) =>
256+
setCurrentQuestion({
257+
...currentQuestion,
258+
CorrectAnswer: e.target.value,
259+
})
260+
}
261+
>
262+
{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+
/>
270+
))}
271+
</RadioGroup>
272+
</FormControl>
273+
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+
/>
283+
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={() =>
296+
setCurrentQuestion({
297+
QuestionText: '',
298+
Options: ['', '', '', ''],
299+
CorrectAnswer: '',
300+
Trivia: '',
301+
})
302+
}
303+
>
304+
Clear
305+
</Button>
306+
</Stack>
307+
</CardContent>
308+
</Card>
309+
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+
))}
321+
</CardContent>
322+
</Card>
323+
)}
324+
325+
<Stack spacing={2} marginTop={4}>
255326
<Button
256327
variant="contained"
257-
color="primary"
258-
onClick={handleAddQuestion}
328+
color="success"
329+
onClick={handleSubmitQuiz}
330+
disabled={isSubmitting}
259331
>
260-
Add Question
332+
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
261333
</Button>
262-
<Button
263-
variant="outlined"
264-
color="secondary"
265-
onClick={() =>
266-
setCurrentQuestion({
267-
QuestionText: '',
268-
Options: ['', '', '', ''],
269-
CorrectAnswer: '',
270-
Trivia: '',
271-
})
272-
}
273-
>
274-
Clear
334+
<Button variant="outlined" onClick={() => navigate('/')}>
335+
Cancel
275336
</Button>
276337
</Stack>
277-
</CardContent>
278-
</Card>
279-
280-
{questions.length > 0 && (
281-
<Card variant="outlined" sx={{ marginTop: 4 }}>
282-
<CardContent>
283-
<Typography variant="h5" gutterBottom>
284-
Questions Added ({questions.length})
285-
</Typography>
286-
{questions.map((question, index) => (
287-
<Typography key={index} variant="body1" gutterBottom>
288-
{index + 1}. {question.QuestionText}
289-
</Typography>
290-
))}
291-
</CardContent>
292-
</Card>
338+
</>
293339
)}
294-
295-
<Stack spacing={2} marginTop={4}>
296-
<Button
297-
variant="contained"
298-
color="success"
299-
onClick={handleSubmitQuiz}
300-
disabled={isSubmitting}
301-
>
302-
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
303-
</Button>
304-
<Button variant="outlined" onClick={() => navigate('/')}>
305-
Cancel
306-
</Button>
307-
</Stack>
308340
</Container>
309341
);
310342
}

0 commit comments

Comments
 (0)