Updated FE to allow for user solutions

frontend/src/App.tsx

@@ -1,9 +1,10 @@
-import { Container, CssBaseline, ThemeProvider, createTheme } from '@mui/material';
+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 ProblemList from './components/ProblemList';
+import ProblemAnswer from './components/ProblemAnswer';
 import { useState } from 'react';
+import { Problem } from './types/Problem';
 
 const theme = createTheme({
   palette: {
@@ -17,7 +18,29 @@ const theme = createTheme({
 });
 
 function App() {
-  const [problems, setProblems] = useState<string[]>([]);
+  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}>
@@ -25,8 +48,27 @@ function App() {
       <Container maxWidth="md" sx={{ py: 4 }}>
         <Header />
         <DocumentInput />
-        <QuizGenerator onProblemsGenerated={setProblems} />
-        <ProblemList problems={problems} />
+        <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>
   );

frontend/src/components/ProblemAnswer.tsx

@@ -0,0 +1,30 @@
+import { TextField, Box, Typography } from '@mui/material';
+import { Problem } from '../types/Problem';
+
+interface ProblemAnswerProps {
+  problem: Problem;
+  index: number;
+  onAnswerChange: (index: number, answer: string) => void;
+}
+
+function ProblemAnswer({ problem, index, onAnswerChange }: ProblemAnswerProps) {
+  return (
+    <Box sx={{ mb: 3 }}>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Question {index + 1}:
+      </Typography>
+      <Typography sx={{ mb: 2 }}>{problem.question}</Typography>
+      <TextField
+        fullWidth
+        multiline
+        rows={3}
+        label="Your Answer"
+        value={problem.userAnswer || ''}
+        onChange={(e) => onAnswerChange(index, e.target.value)}
+        variant="outlined"
+      />
+    </Box>
+  );
+}
+
+export default ProblemAnswer; 

frontend/src/components/QuizGenerator.tsx

@@ -1,4 +1,4 @@
-import { TextField, Button, Box } from '@mui/material';
+import { TextField, Button, Box, CircularProgress } from '@mui/material';
 import { useState } from 'react';
 
 interface QuizGeneratorProps {
@@ -7,9 +7,11 @@ interface QuizGeneratorProps {
 
 function QuizGenerator({ onProblemsGenerated }: QuizGeneratorProps) {
   const [query, setQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleGenerate = async () => {
     try {
+      setIsLoading(true);
       const response = await fetch('/api/problems/', {
         method: 'POST',
         headers: {
@@ -23,6 +25,8 @@ function QuizGenerator({ onProblemsGenerated }: QuizGeneratorProps) {
       setQuery('');
     } catch (error) {
       console.error('Error:', error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -33,9 +37,15 @@ function QuizGenerator({ onProblemsGenerated }: QuizGeneratorProps) {
         label="Quiz topic?"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
+        disabled={isLoading}
       />
-      <Button variant="contained" onClick={handleGenerate}>
-        Generate
+      <Button 
+        variant="contained" 
+        onClick={handleGenerate}
+        disabled={isLoading}
+        startIcon={isLoading ? <CircularProgress size={20} color="inherit" /> : null}
+      >
+        {isLoading ? 'Generating...' : 'Generate'}
       </Button>
     </Box>
   );

frontend/src/types/Problem.ts

@@ -0,0 +1,4 @@
+export interface Problem {
+  question: string;
+  userAnswer?: string;
+}