Skip to content

Commit

Permalink
Clean up quiz builder layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@remotesynth
remotesynth committed Nov 21, 2024
1 parent aa112f1 commit 52cd256
Showing 1 changed file with 175 additions and 165 deletions.
340 changes: 175 additions & 165 deletions frontend/src/components/QuizBuilder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
Switch,
} from '@mui/material';
import { useNavigate } from 'react-router-dom';
import MainLayout from './MainLayout';

function QuizBuilder() {
const [title, setTitle] = useState('');
Expand Down Expand Up @@ -108,7 +109,9 @@ function QuizBuilder() {

if (data.QuizID) {
setQuizID(data.QuizID);
setSuccessMessage(`Quiz created successfully! Quiz ID: ${data.QuizID}`);
setSuccessMessage(
`Quiz created successfully! Quiz ID: ${data.QuizID}`
);
setTitle('');
setVisibility('Public');
setEnableTimer(false);
Expand Down Expand Up @@ -143,201 +146,208 @@ function QuizBuilder() {
};

return (
<Container maxWidth="md">
<Typography variant="h4" gutterBottom>
Create a New Quiz
</Typography>
<MainLayout>
<Container maxWidth="sm" className="main-quiz-container">
<Typography variant="h4" gutterBottom>
Create a New Quiz
</Typography>

{errorMessage && (
<Alert severity="error" sx={{ marginBottom: 2 }}>
{errorMessage}
</Alert>
)}
{errorMessage && (
<Alert severity="error" sx={{ marginBottom: 2 }}>
{errorMessage}
</Alert>
)}

{successMessage && (
<Alert severity="success" sx={{ marginBottom: 2 }}>
{successMessage}
</Alert>
)}
{successMessage && (
<Alert severity="success" sx={{ marginBottom: 2 }}>
{successMessage}
</Alert>
)}

{quizID ? (
<Stack spacing={2} marginTop={4}>
<Button variant="contained" color="primary" onClick={handleGoHome}>
Go to Home
</Button>
<Button variant="outlined" onClick={handleCreateAnotherQuiz}>
Create Another Quiz
</Button>
</Stack>
) : (
<>
<TextField
label="Quiz Title"
fullWidth
margin="normal"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>

<FormControl fullWidth margin="normal">
<InputLabel id="visibility-label">Visibility</InputLabel>
<Select
labelId="visibility-label"
value={visibility}
label="Visibility"
onChange={(e) => setVisibility(e.target.value)}
>
<MenuItem value="Public">Public</MenuItem>
<MenuItem value="Private">Private</MenuItem>
</Select>
</FormControl>

<FormControlLabel
control={
<Switch
checked={enableTimer}
onChange={(e) => setEnableTimer(e.target.checked)}
color="primary"
/>
}
label="Enable Timer"
sx={{ marginTop: 2 }}
/>

{enableTimer && (
{quizID ? (
<Stack spacing={2} marginTop={4}>
<Button variant="contained" color="primary" onClick={handleGoHome}>
Go to Home
</Button>
<Button variant="outlined" onClick={handleCreateAnotherQuiz}>
Create Another Quiz
</Button>
</Stack>
) : (
<>
<TextField
label="Timer Seconds per Question"
type="number"
label="Quiz Title"
fullWidth
margin="normal"
value={timerSeconds}
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
inputProps={{ min: 1 }}
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
)}

<Card variant="outlined" sx={{ marginTop: 4 }}>
<CardContent>
<Typography variant="h5" gutterBottom>
Add a Question
</Typography>
<FormControl fullWidth margin="normal">
<InputLabel id="visibility-label">Visibility</InputLabel>
<Select
labelId="visibility-label"
value={visibility}
label="Visibility"
onChange={(e) => setVisibility(e.target.value)}
>
<MenuItem value="Public">Public</MenuItem>
<MenuItem value="Private">Private</MenuItem>
</Select>
</FormControl>

<FormControlLabel
control={
<Switch
checked={enableTimer}
onChange={(e) => setEnableTimer(e.target.checked)}
color="primary"
/>
}
label="Enable Timer"
sx={{ marginTop: 2 }}
/>

{enableTimer && (
<TextField
label="Question Text"
label="Timer Seconds per Question"
type="number"
fullWidth
margin="normal"
value={currentQuestion.QuestionText}
onChange={(e) =>
setCurrentQuestion({
...currentQuestion,
QuestionText: e.target.value,
})
}
value={timerSeconds}
onChange={(e) => setTimerSeconds(parseInt(e.target.value, 10))}
inputProps={{ min: 1 }}
/>
)}

<Grid container spacing={2}>
{currentQuestion.Options.map((option, index) => (
<Grid item xs={12} sm={6} key={index}>
<TextField
label={`Option ${index + 1}`}
fullWidth
value={option}
onChange={(e) => handleOptionChange(index, e.target.value)}
/>
</Grid>
))}
</Grid>
<Card variant="outlined" sx={{ marginTop: 4 }}>
<CardContent>
<Typography variant="h5" gutterBottom>
Add a Question
</Typography>

<FormControl component="fieldset" margin="normal">
<Typography variant="subtitle1">Correct Answer</Typography>
<RadioGroup
value={currentQuestion.CorrectAnswer}
<TextField
label="Question Text"
fullWidth
margin="normal"
value={currentQuestion.QuestionText}
onChange={(e) =>
setCurrentQuestion({
...currentQuestion,
CorrectAnswer: e.target.value,
QuestionText: e.target.value,
})
}
>
/>

<Grid container spacing={2}>
{currentQuestion.Options.map((option, index) => (
<FormControlLabel
key={index}
value={option}
control={<Radio />}
label={`Option ${index + 1}`}
disabled={!option.trim()}
/>
<Grid item xs={12} sm={6} key={index}>
<TextField
label={`Option ${index + 1}`}
fullWidth
value={option}
onChange={(e) =>
handleOptionChange(index, e.target.value)
}
/>
</Grid>
))}
</RadioGroup>
</FormControl>
</Grid>

<TextField
label="Trivia (Optional)"
fullWidth
margin="normal"
value={currentQuestion.Trivia}
onChange={(e) =>
setCurrentQuestion({ ...currentQuestion, Trivia: e.target.value })
}
/>
<FormControl component="fieldset" margin="normal">
<Typography variant="subtitle1">Correct Answer</Typography>
<RadioGroup
value={currentQuestion.CorrectAnswer}
onChange={(e) =>
setCurrentQuestion({
...currentQuestion,
CorrectAnswer: e.target.value,
})
}
>
{currentQuestion.Options.map((option, index) => (
<FormControlLabel
key={index}
value={option}
control={<Radio />}
label={`Option ${index + 1}`}
disabled={!option.trim()}
/>
))}
</RadioGroup>
</FormControl>

<Stack direction="row" spacing={2} marginTop={2}>
<Button
variant="contained"
color="primary"
onClick={handleAddQuestion}
>
Add Question
</Button>
<Button
variant="outlined"
color="secondary"
onClick={() =>
<TextField
label="Trivia (Optional)"
fullWidth
margin="normal"
value={currentQuestion.Trivia}
onChange={(e) =>
setCurrentQuestion({
QuestionText: '',
Options: ['', '', '', ''],
CorrectAnswer: '',
Trivia: '',
...currentQuestion,
Trivia: e.target.value,
})
}
>
Clear
</Button>
</Stack>
</CardContent>
</Card>
/>

{questions.length > 0 && (
<Card variant="outlined" sx={{ marginTop: 4 }}>
<CardContent>
<Typography variant="h5" gutterBottom>
Questions Added ({questions.length})
</Typography>
{questions.map((question, index) => (
<Typography key={index} variant="body1" gutterBottom>
{index + 1}. {question.QuestionText}
</Typography>
))}
<Stack direction="row" spacing={2} marginTop={2}>
<Button
variant="contained"
color="primary"
onClick={handleAddQuestion}
>
Add Question
</Button>
<Button
variant="outlined"
color="secondary"
onClick={() =>
setCurrentQuestion({
QuestionText: '',
Options: ['', '', '', ''],
CorrectAnswer: '',
Trivia: '',
})
}
>
Clear
</Button>
</Stack>
</CardContent>
</Card>
)}

<Stack spacing={2} marginTop={4}>
<Button
variant="contained"
color="success"
onClick={handleSubmitQuiz}
disabled={isSubmitting}
>
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
</Button>
<Button variant="outlined" onClick={() => navigate('/')}>
Cancel
</Button>
</Stack>
</>
)}
</Container>
{questions.length > 0 && (
<Card variant="outlined" sx={{ marginTop: 4 }}>
<CardContent>
<Typography variant="h5" gutterBottom>
Questions Added ({questions.length})
</Typography>
{questions.map((question, index) => (
<Typography key={index} variant="body1" gutterBottom>
{index + 1}. {question.QuestionText}
</Typography>
))}
</CardContent>
</Card>
)}

<Stack spacing={2} marginTop={4}>
<Button
variant="contained"
color="success"
onClick={handleSubmitQuiz}
disabled={isSubmitting}
>
{isSubmitting ? 'Submitting...' : 'Submit Quiz'}
</Button>
<Button variant="outlined" onClick={() => navigate('/')}>
Cancel
</Button>
</Stack>
</>
)}
</Container>
</MainLayout>
);
}

Expand Down

0 comments on commit 52cd256

Please sign in to comment.