File size: 2,179 Bytes
75514b5 58973c7 75514b5 58973c7 75514b5 58973c7 75514b5 58973c7 75514b5 58973c7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import { Container, CssBaseline, ThemeProvider, createTheme, Button, Box } from '@mui/material';
import Header from './components/Header';
import DocumentInput from './components/DocumentInput';
import QuizGenerator from './components/QuizGenerator';
import ProblemAnswer from './components/ProblemAnswer';
import { useState } from 'react';
import { Problem } from './types/Problem';
const theme = createTheme({
palette: {
primary: {
main: '#1976d2',
},
background: {
default: '#f5f5f5',
},
},
});
function App() {
const [problems, setProblems] = useState<Problem[]>([]);
const handleProblemsGenerated = (newProblems: string[]) => {
const problemObjects = newProblems.map(question => ({ question }));
setProblems(problemObjects);
};
const handleAnswerChange = (index: number, answer: string) => {
setProblems(prevProblems => {
const newProblems = [...prevProblems];
newProblems[index] = { ...newProblems[index], userAnswer: answer };
return newProblems;
});
};
const handleSubmit = () => {
// Here you can add the logic to handle the submission
// For now, we'll just log the answers
console.log('Submitted answers:', problems.map(p => ({
question: p.question,
answer: p.userAnswer
})));
};
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Container maxWidth="md" sx={{ py: 4 }}>
<Header />
<DocumentInput />
<QuizGenerator onProblemsGenerated={handleProblemsGenerated} />
{problems.map((problem, index) => (
<ProblemAnswer
key={index}
problem={problem}
index={index}
onAnswerChange={handleAnswerChange}
/>
))}
{problems.length > 0 && (
<Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
<Button
variant="contained"
color="primary"
size="large"
onClick={handleSubmit}
>
Submit for Feedback
</Button>
</Box>
)}
</Container>
</ThemeProvider>
);
}
export default App; |