From a7777ba1d06edad205b7651a5bcc76f6368294de Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 21:41:00 +0300
Subject: [PATCH 01/11] Add Initial Quiz Frontend Page

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/App.tsx               |   2 +
 nextstep-frontend/src/components/TopBar.tsx |   7 +-
 nextstep-frontend/src/pages/Quiz.tsx        | 378 ++++++++++++++++++++
 3 files changed, 386 insertions(+), 1 deletion(-)
 create mode 100644 nextstep-frontend/src/pages/Quiz.tsx

diff --git a/nextstep-frontend/src/App.tsx b/nextstep-frontend/src/App.tsx
index 525d2b2..0aa4d26 100644
--- a/nextstep-frontend/src/App.tsx
+++ b/nextstep-frontend/src/App.tsx
@@ -14,6 +14,7 @@ import Resume from './pages/Resume';
 import TopBar from './components/TopBar';
 import Layout from './components/Layout';
 import MainDashboard from './pages/MainDashboard';
+import Quiz from './pages/Quiz';
 
 const App: React.FC = () => {
   return (
@@ -30,6 +31,7 @@ const App: React.FC = () => {
           <Route path="/chat" element={<RequireAuth><TopBar /><Layout className="chat"><Chat /></Layout></RequireAuth>} />
           <Route path="/resume" element={<RequireAuth><TopBar /><Layout className="resume"><Resume /></Layout></RequireAuth>} />
           <Route path="/main-dashboard" element={<RequireAuth><TopBar /><Layout className="main-dashboard"><MainDashboard /></Layout></RequireAuth>} />
+          <Route path="/quiz" element={<RequireAuth><TopBar /><Layout className="quiz"><Quiz /></Layout></RequireAuth>} />
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
       </Router>
diff --git a/nextstep-frontend/src/components/TopBar.tsx b/nextstep-frontend/src/components/TopBar.tsx
index c717820..949e3d3 100644
--- a/nextstep-frontend/src/components/TopBar.tsx
+++ b/nextstep-frontend/src/components/TopBar.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AppBar, Toolbar, IconButton, Tooltip, Box } from '@mui/material';
-import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed } from '@mui/icons-material';
+import { Home, Person, Message, Logout, DocumentScannerTwoTone, Feed, Quiz } from '@mui/icons-material';
 import {getUserAuth, removeUserAuth} from "../handlers/userAuth.ts";
 import api from "../serverApi.ts";
 
@@ -32,6 +32,11 @@ const TopBar: React.FC = () => {
             <DocumentScannerTwoTone fontSize='large'/>
           </IconButton>
         </Tooltip>
+        <Tooltip title="Quiz">
+          <IconButton color="inherit" onClick={() => navigate('/quiz')} sx={{ mx: 1 }}>
+            <Quiz fontSize='large'/>
+          </IconButton>
+        </Tooltip>
         <Tooltip title="Feed">
           <IconButton color="inherit" onClick={() => navigate('/feed')} sx={{ mx: 1 }}>
             <Feed fontSize='large'/>
diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
new file mode 100644
index 0000000..b4941db
--- /dev/null
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -0,0 +1,378 @@
+import React, { useState } from 'react';
+import {
+  Container,
+  Box,
+  Typography,
+  TextField,
+  Button,
+  CircularProgress,
+  IconButton,
+  Tooltip,
+  Paper,
+  Slider,
+  Stack,
+  Divider,
+} from '@mui/material';
+import {
+  Visibility,
+  VisibilityOff,
+  LightbulbOutlined as LightbulbOutlinedIcon,
+} from '@mui/icons-material';
+import api from '../serverApi'; // Assuming you have a configured axios instance
+
+// Define interfaces for the API response schemas
+interface GeneratedQuestion {
+  question: string;
+}
+
+interface QuizGenerationResponse {
+  _id: string;
+  title: string;
+  tags: string[];
+  content: string;
+  job_role: string;
+  company_name_en: string;
+  company_name_he: string;
+  process_details: string;
+  question_list: string[];
+  answer_list: string[];
+  keywords: string[];
+  interviewer_mindset: string;
+}
+
+interface UserAnsweredQuiz {
+  _id: string;
+  title: string;
+  tags: string[];
+  content: string;
+  job_role: string;
+  company_name_en: string;
+  company_name_he: string;
+  process_details: string;
+  question_list: string[];
+  answer_list: string[];
+  user_answer_list: string[]; // New field for user answers
+  keywords: string[];
+  interviewer_mindset: string;
+}
+
+interface GradedAnswer {
+  question: string;
+  user_answer: string;
+  grade: number;
+  tip: string;
+}
+
+interface QuizGradingResponse {
+  graded_answers: GradedAnswer[];
+  final_quiz_grade: number;
+  final_summary_tip: string;
+}
+
+// Internal state structure for the quiz, combining generated and graded data
+interface QuizStateQuestion {
+  originalQuestion: string;
+  userAnswer: string;
+  correctAnswer?: string; // Will be populated after grading
+  grade?: number; // Will be populated after grading
+  tip?: string; // Will be populated after grading
+}
+
+interface QuizState {
+  _id: string;
+  subject: string;
+  questions: QuizStateQuestion[];
+  finalGrade?: number;
+  finalTip?: string;
+  // Potentially store other fields from the initial generation response if needed for display
+  title?: string;
+  tags?: string[];
+  content?: string;
+  jobRole?: string;
+}
+
+const Quiz: React.FC = () => {
+  const [subject, setSubject] = useState<string>('');
+  const [quiz, setQuiz] = useState<QuizState | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [showAnswer, setShowAnswer] = useState<{ [key: number]: boolean }>({}); // To toggle answer visibility
+  const [quizSubmitted, setQuizSubmitted] = useState<boolean>(false); // To control UI after submission
+
+  const handleGenerateQuiz = async () => {
+    if (!subject) return;
+    setLoading(true);
+    setQuiz(null); // Clear previous quiz
+    setQuizSubmitted(false); // Reset submission status
+    setShowAnswer({}); // Reset answer visibility
+    try {
+      const response = await api.post<QuizGenerationResponse>('http://localhost:3000/quiz/generate', { subject });
+
+      const generatedQuestions: QuizStateQuestion[] = response.data.question_list.map((q: string) => ({
+        originalQuestion: q,
+        userAnswer: '', // Initialize empty user answer
+      }));
+
+      setQuiz({
+        _id: response.data._id,
+        subject: subject, // Use the input subject for consistency
+        questions: generatedQuestions,
+        title: response.data.title,
+        tags: response.data.tags,
+        content: response.data.content,
+        jobRole: response.data.job_role,
+        // ... include other fields from response.data if you want to display them
+      });
+    } catch (error) {
+      console.error('Error generating quiz:', error);
+      alert('Failed to generate quiz. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUserAnswerChange = (index: number, answer: string) => {
+    if (quiz) {
+      const updatedQuestions = [...quiz.questions];
+      updatedQuestions[index].userAnswer = answer;
+      setQuiz({ ...quiz, questions: updatedQuestions });
+    }
+  };
+
+  const handleToggleAnswerVisibility = (index: number) => {
+    setShowAnswer(prev => ({
+      ...prev,
+      [index]: !prev[index],
+    }));
+  };
+
+  const handleSubmitQuiz = async () => {
+    if (!quiz || quizSubmitted) return; // Prevent multiple submissions
+    setLoading(true);
+
+    const answeredQuizData: UserAnsweredQuiz = {
+      _id: quiz._id,
+      title: quiz.title || '',
+      tags: quiz.tags || [],
+      content: quiz.content || '',
+      job_role: quiz.jobRole || '',
+      company_name_en: '', // These are not directly from the quiz state, you might need to fetch/store them
+      company_name_he: '', // Or adjust your backend to not require them for grading
+      process_details: '', // Or adjust your backend to not require them for grading
+      question_list: quiz.questions.map(q => q.originalQuestion),
+      answer_list: quiz.questions.map(q => q.correctAnswer || ''), // Send known correct answers if available, otherwise empty
+      user_answer_list: quiz.questions.map(q => q.userAnswer),
+      keywords: [], // These are not directly from the quiz state, you might need to fetch/store them
+      interviewer_mindset: '', // These are not directly from the quiz state, you might need to fetch/store them
+    };
+
+    try {
+      // Send the entire schema with user_answer_list
+      const response = await api.post<QuizGradingResponse>('http://localhost:3000/quiz/grade', answeredQuizData);
+
+      const gradedQuizData = response.data;
+      const updatedQuestions = quiz.questions.map((q, index) => {
+        const gradedAnswer = gradedQuizData.graded_answers.find(ga => ga.question === q.originalQuestion);
+        return {
+          ...q,
+          grade: gradedAnswer?.grade,
+          tip: gradedAnswer?.tip,
+          // The correct answer from the initial generation might not be sent back
+          // with 'graded_answers'. If your backend sends it, update this line.
+          // For now, we'll assume the original 'answer_list' from generation is the correct answer
+          correctAnswer: quiz.answer_list?.[index], // Assuming answer_list was stored from generation
+        };
+      });
+
+      setQuiz({
+        ...quiz,
+        questions: updatedQuestions,
+        finalGrade: gradedQuizData.final_quiz_grade,
+        finalTip: gradedQuizData.final_summary_tip,
+      });
+      setQuizSubmitted(true); // Mark quiz as submitted
+
+      // Automatically show all answers after grading
+      const initialShowAnswer: { [key: number]: boolean } = {};
+      updatedQuestions.forEach((_, index) => {
+        initialShowAnswer[index] = true;
+      });
+      setShowAnswer(initialShowAnswer);
+
+    } catch (error) {
+      console.error('Error submitting quiz:', error);
+      alert('Failed to submit quiz for grading. Please try again.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ py: 4 }}>
+      <Typography variant="h4" component="h1" gutterBottom align="center">
+        Quiz Generator & Grader
+      </Typography>
+
+      {/* Subject Input */}
+      {!quiz && (
+        <Box sx={{ mb: 4, p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
+          <Typography variant="h6" gutterBottom>
+            Enter a Quiz Subject
+          </Typography>
+          <TextField
+            fullWidth
+            label="e.g., Java Spring Boot Microservices, React Hooks, Quantum Physics"
+            variant="outlined"
+            value={subject}
+            onChange={e => setSubject(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleGenerateQuiz()}
+            sx={{ mb: 2 }}
+          />
+          <Button
+            variant="contained"
+            onClick={handleGenerateQuiz}
+            disabled={loading || !subject.trim()} // Disable if subject is empty or only whitespace
+            fullWidth
+          >
+            {loading ? <CircularProgress size={24} /> : 'Generate Quiz'}
+          </Button>
+        </Box>
+      )}
+
+      {/* Generated Quiz Display */}
+      {quiz && (
+        <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
+          <Typography variant="h5" gutterBottom align="center" sx={{ mb: 3 }}>
+            Quiz on: {quiz.subject}
+          </Typography>
+          {quiz.title && (
+            <Typography variant="subtitle1" align="center" color="text.secondary" sx={{ mb: 2 }}>
+              Topic: {quiz.title}
+            </Typography>
+          )}
+
+          <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+            Your answers may get better grades for broad, in-depth explanations. You can answer in any language you want!
+          </Typography>
+          {quiz.questions.map((q, index) => (
+            <Paper key={index} sx={{ p: 2, mb: 3, border: '1px solid #e0e0e0' }}>
+              <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+                <Typography variant="h6" sx={{ flexGrow: 1 }}>
+                  Question {index + 1}: {q.originalQuestion}
+                </Typography>
+                {quizSubmitted && ( // Only show the eye icon after submission
+                  <Tooltip title={showAnswer[index] ? 'Hide Answer' : 'Show Answer'} arrow>
+                    <IconButton onClick={() => handleToggleAnswerVisibility(index)} size="small">
+                      {showAnswer[index] ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </Tooltip>
+                )}
+              </Box>
+              <TextField
+                fullWidth
+                multiline
+                rows={3}
+                variant="outlined"
+                label="Your Answer"
+                value={q.userAnswer}
+                onChange={e => handleUserAnswerChange(index, e.target.value)}
+                sx={{ mb: 2 }}
+                disabled={quizSubmitted} // Disable input after submission
+              />
+
+              {quizSubmitted && (
+                <>
+                  <Box sx={{ mt: 2 }}>
+                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+                      Your Grade:
+                    </Typography>
+                    {/* Optional: Gauge for grade */}
+                    <Slider
+                      value={q.grade || 0}
+                      aria-label="Question grade"
+                      valueLabelDisplay="on"
+                      min={0}
+                      max={100}
+                      sx={{ width: '90%', mx: 'auto' }}
+                      disabled // Make it non-interactive
+                    />
+                  </Box>
+                  <Box sx={{ mt: 2 }}>
+                    <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
+                      Tip:
+                    </Typography>
+                    <Stack direction="row" alignItems="flex-start" spacing={1}>
+                      <LightbulbOutlinedIcon color="info" sx={{ mt: 0.5 }} />
+                      <Typography variant="body2" color="text.secondary">
+                        {q.tip}
+                      </Typography>
+                    </Stack>
+                  </Box>
+                  {showAnswer[index] && q.correctAnswer && (
+                    <Box sx={{ mt: 2, p: 1.5, bgcolor: '#f0f0f0', borderRadius: 1 }}>
+                      <Typography variant="subtitle2">Correct Answer:</Typography>
+                      <Typography variant="body2">{q.correctAnswer}</Typography>
+                    </Box>
+                  )}
+                </>
+              )}
+            </Paper>
+          ))}
+
+          {!quizSubmitted && (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleSubmitQuiz}
+              // Disable if no answers are provided (or only whitespace)
+              disabled={loading || !quiz.questions.some(q => q.userAnswer.trim() !== '')}
+              fullWidth
+              sx={{ mt: 3 }}
+            >
+              {loading ? <CircularProgress size={24} /> : 'Calculate Grade'}
+            </Button>
+          )}
+
+          {quizSubmitted && quiz.finalGrade !== undefined && (
+            <Box sx={{ mt: 4, p: 3, bgcolor: '#e8f5e9', borderRadius: 2, boxShadow: 2, textAlign: 'center' }}>
+              <Typography variant="h5" gutterBottom>
+                Final Quiz Grade:
+              </Typography>
+              {/* Optional: Gauge for final grade */}
+              <Slider
+                value={quiz.finalGrade || 0}
+                aria-label="Final quiz grade"
+                valueLabelDisplay="on"
+                min={0}
+                max={100}
+                sx={{ width: '80%', mx: 'auto', mb: 2 }}
+                disabled
+              />
+              <Typography variant="h6" sx={{ mt: 2 }}>
+                Overall Tip:
+              </Typography>
+              <Stack direction="row" alignItems="flex-start" spacing={1} justifyContent="center">
+                <LightbulbOutlinedIcon color="success" sx={{ mt: 0.5 }} />
+                <Typography variant="body1" color="text.primary">
+                  {quiz.finalTip}
+                </Typography>
+              </Stack>
+              <Button
+                variant="outlined"
+                onClick={() => {
+                  setSubject('');
+                  setQuiz(null);
+                  setQuizSubmitted(false);
+                }}
+                sx={{ mt: 3 }}
+              >
+                Generate New Quiz
+              </Button>
+            </Box>
+          )}
+        </Box>
+      )}
+    </Container>
+  );
+};
+
+export default Quiz;
\ No newline at end of file

From b9c677681b13cbe4f01192929a4e15e25ba17c72 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 21:49:04 +0300
Subject: [PATCH 02/11] Showcase More Fields In The Quiz

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 153 ++++++++++++++++++++++-----
 1 file changed, 129 insertions(+), 24 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index b4941db..199109e 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -1,3 +1,5 @@
+// src/pages/Quiz.tsx
+
 import React, { useState } from 'react';
 import {
   Container,
@@ -11,12 +13,19 @@ import {
   Paper,
   Slider,
   Stack,
+  Chip,
   Divider,
+  Grid,
 } from '@mui/material';
 import {
   Visibility,
   VisibilityOff,
   LightbulbOutlined as LightbulbOutlinedIcon,
+  WorkOutline as WorkOutlineIcon, // For Job Role
+  InfoOutlined as InfoOutlinedIcon, // For Content/Process Details
+  ForumOutlined as ForumOutlinedIcon, // For Interviewer Mindset
+  BusinessOutlined as BusinessOutlinedIcon, // For Company Name
+  LocalOfferOutlined as LocalOfferOutlinedIcon, // For Tags/Keywords
 } from '@mui/icons-material';
 import api from '../serverApi'; // Assuming you have a configured axios instance
 
@@ -32,7 +41,7 @@ interface QuizGenerationResponse {
   content: string;
   job_role: string;
   company_name_en: string;
-  company_name_he: string;
+  company_name_he: string; // Not used in display, but included for completeness
   process_details: string;
   question_list: string[];
   answer_list: string[];
@@ -84,11 +93,16 @@ interface QuizState {
   questions: QuizStateQuestion[];
   finalGrade?: number;
   finalTip?: string;
-  // Potentially store other fields from the initial generation response if needed for display
+  // --- Additional fields from QuizGenerationResponse for display ---
   title?: string;
   tags?: string[];
   content?: string;
   jobRole?: string;
+  companyNameEn?: string;
+  processDetails?: string;
+  keywords?: string[];
+  interviewerMindset?: string;
+  answer_list?: string[]; // Store the original answer list for display after grading
 }
 
 const Quiz: React.FC = () => {
@@ -99,7 +113,7 @@ const Quiz: React.FC = () => {
   const [quizSubmitted, setQuizSubmitted] = useState<boolean>(false); // To control UI after submission
 
   const handleGenerateQuiz = async () => {
-    if (!subject) return;
+    if (!subject.trim()) return; // Ensure subject is not empty or just whitespace
     setLoading(true);
     setQuiz(null); // Clear previous quiz
     setQuizSubmitted(false); // Reset submission status
@@ -120,7 +134,11 @@ const Quiz: React.FC = () => {
         tags: response.data.tags,
         content: response.data.content,
         jobRole: response.data.job_role,
-        // ... include other fields from response.data if you want to display them
+        companyNameEn: response.data.company_name_en,
+        processDetails: response.data.process_details,
+        keywords: response.data.keywords,
+        interviewerMindset: response.data.interviewer_mindset,
+        answer_list: response.data.answer_list, // Store for later use as correct answers
       });
     } catch (error) {
       console.error('Error generating quiz:', error);
@@ -149,24 +167,24 @@ const Quiz: React.FC = () => {
     if (!quiz || quizSubmitted) return; // Prevent multiple submissions
     setLoading(true);
 
+    // Construct the request body as per the UserAnsweredQuiz schema
     const answeredQuizData: UserAnsweredQuiz = {
       _id: quiz._id,
       title: quiz.title || '',
       tags: quiz.tags || [],
       content: quiz.content || '',
       job_role: quiz.jobRole || '',
-      company_name_en: '', // These are not directly from the quiz state, you might need to fetch/store them
-      company_name_he: '', // Or adjust your backend to not require them for grading
-      process_details: '', // Or adjust your backend to not require them for grading
+      company_name_en: quiz.companyNameEn || '',
+      company_name_he: '', // Assuming this isn't strictly required for grading or can be empty
+      process_details: quiz.processDetails || '',
       question_list: quiz.questions.map(q => q.originalQuestion),
-      answer_list: quiz.questions.map(q => q.correctAnswer || ''), // Send known correct answers if available, otherwise empty
+      answer_list: quiz.answer_list || [], // Send the original correct answers if available
       user_answer_list: quiz.questions.map(q => q.userAnswer),
-      keywords: [], // These are not directly from the quiz state, you might need to fetch/store them
-      interviewer_mindset: '', // These are not directly from the quiz state, you might need to fetch/store them
+      keywords: quiz.keywords || [],
+      interviewer_mindset: quiz.interviewerMindset || '',
     };
 
     try {
-      // Send the entire schema with user_answer_list
       const response = await api.post<QuizGradingResponse>('http://localhost:3000/quiz/grade', answeredQuizData);
 
       const gradedQuizData = response.data;
@@ -176,10 +194,7 @@ const Quiz: React.FC = () => {
           ...q,
           grade: gradedAnswer?.grade,
           tip: gradedAnswer?.tip,
-          // The correct answer from the initial generation might not be sent back
-          // with 'graded_answers'. If your backend sends it, update this line.
-          // For now, we'll assume the original 'answer_list' from generation is the correct answer
-          correctAnswer: quiz.answer_list?.[index], // Assuming answer_list was stored from generation
+          correctAnswer: quiz.answer_list?.[index], // Use the stored answer_list from generation
         };
       });
 
@@ -230,7 +245,7 @@ const Quiz: React.FC = () => {
           <Button
             variant="contained"
             onClick={handleGenerateQuiz}
-            disabled={loading || !subject.trim()} // Disable if subject is empty or only whitespace
+            disabled={loading || !subject.trim()}
             fullWidth
           >
             {loading ? <CircularProgress size={24} /> : 'Generate Quiz'}
@@ -244,11 +259,104 @@ const Quiz: React.FC = () => {
           <Typography variant="h5" gutterBottom align="center" sx={{ mb: 3 }}>
             Quiz on: {quiz.subject}
           </Typography>
-          {quiz.title && (
-            <Typography variant="subtitle1" align="center" color="text.secondary" sx={{ mb: 2 }}>
-              Topic: {quiz.title}
-            </Typography>
-          )}
+
+          {/* --- Enhanced Display of Quiz Metadata --- */}
+          <Paper elevation={2} sx={{ p: 3, mb: 4, bgcolor: '#f5f5f5', borderRadius: 2 }}>
+            <Grid container spacing={2}>
+              {quiz.title && (
+                <Grid item xs={12}>
+                  <Typography variant="h6" color="primary" sx={{ mb: 1 }}>
+                    <InfoOutlinedIcon sx={{ verticalAlign: 'middle', mr: 1 }} />
+                    Quiz Title: {quiz.title}
+                  </Typography>
+                </Grid>
+              )}
+
+              {quiz.jobRole && (
+                <Grid item xs={12} sm={6}>
+                  <Typography variant="body1" color="text.secondary">
+                    <WorkOutlineIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Job Role: <strong>{quiz.jobRole}</strong>
+                  </Typography>
+                </Grid>
+              )}
+
+              {quiz.companyNameEn && (
+                <Grid item xs={12} sm={6}>
+                  <Typography variant="body1" color="text.secondary">
+                    <BusinessOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Company: <strong>{quiz.companyNameEn}</strong>
+                  </Typography>
+                </Grid>
+              )}
+
+              {quiz.tags && quiz.tags.length > 0 && (
+                <Grid item xs={12}>
+                  <Typography variant="body2" sx={{ mb: 1 }}>
+                    <LocalOfferOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Tags:
+                  </Typography>
+                  <Stack direction="row" flexWrap="wrap" spacing={1}>
+                    {quiz.tags.map((tag, i) => (
+                      <Chip key={i} label={tag} size="small" variant="outlined" color="primary" />
+                    ))}
+                  </Stack>
+                </Grid>
+              )}
+
+              {quiz.keywords && quiz.keywords.length > 0 && (
+                <Grid item xs={12}>
+                  <Typography variant="body2" sx={{ mb: 1 }}>
+                    <LocalOfferOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Keywords:
+                  </Typography>
+                  <Stack direction="row" flexWrap="wrap" spacing={1}>
+                    {quiz.keywords.map((keyword, i) => (
+                      <Chip key={i} label={keyword} size="small" variant="outlined" color="secondary" />
+                    ))}
+                  </Stack>
+                </Grid>
+              )}
+
+              {quiz.processDetails && (
+                <Grid item xs={12}>
+                  <Typography variant="body1" sx={{ mt: 1 }}>
+                    <InfoOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Process Details:
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ ml: 3 }}>
+                    {quiz.processDetails}
+                  </Typography>
+                </Grid>
+              )}
+
+              {quiz.content && (
+                <Grid item xs={12}>
+                  <Typography variant="body1" sx={{ mt: 1 }}>
+                    <InfoOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Context/Content:
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ ml: 3 }}>
+                    {quiz.content}
+                  </Typography>
+                </Grid>
+              )}
+
+              {quiz.interviewerMindset && (
+                <Grid item xs={12}>
+                  <Typography variant="body1" sx={{ mt: 1 }}>
+                    <ForumOutlinedIcon sx={{ verticalAlign: 'middle', mr: 0.5 }} />
+                    Interviewer Mindset:
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary" sx={{ fontStyle: 'italic', ml: 3 }}>
+                    "{quiz.interviewerMindset}"
+                  </Typography>
+                </Grid>
+              )}
+            </Grid>
+          </Paper>
+          <Divider sx={{ my: 4 }} />
+          {/* --- End Enhanced Display of Quiz Metadata --- */}
 
           <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
             Your answers may get better grades for broad, in-depth explanations. You can answer in any language you want!
@@ -285,7 +393,6 @@ const Quiz: React.FC = () => {
                     <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
                       Your Grade:
                     </Typography>
-                    {/* Optional: Gauge for grade */}
                     <Slider
                       value={q.grade || 0}
                       aria-label="Question grade"
@@ -323,7 +430,6 @@ const Quiz: React.FC = () => {
               variant="contained"
               color="primary"
               onClick={handleSubmitQuiz}
-              // Disable if no answers are provided (or only whitespace)
               disabled={loading || !quiz.questions.some(q => q.userAnswer.trim() !== '')}
               fullWidth
               sx={{ mt: 3 }}
@@ -337,7 +443,6 @@ const Quiz: React.FC = () => {
               <Typography variant="h5" gutterBottom>
                 Final Quiz Grade:
               </Typography>
-              {/* Optional: Gauge for final grade */}
               <Slider
                 value={quiz.finalGrade || 0}
                 aria-label="Final quiz grade"

From 2bf134b0eab1d9e06522451645d874b1e36eeb65 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 22:06:00 +0300
Subject: [PATCH 03/11] Fix Hidden Answers Toggle

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 36 +++++++++++++++++++---------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 199109e..d5ce82b 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -121,9 +121,10 @@ const Quiz: React.FC = () => {
     try {
       const response = await api.post<QuizGenerationResponse>('http://localhost:3000/quiz/generate', { subject });
 
-      const generatedQuestions: QuizStateQuestion[] = response.data.question_list.map((q: string) => ({
+      const generatedQuestions: QuizStateQuestion[] = response.data.question_list.map((q: string, idx: number) => ({
         originalQuestion: q,
         userAnswer: '', // Initialize empty user answer
+        correctAnswer: response.data.answer_list[idx], // Populate correct answer immediately
       }));
 
       setQuiz({
@@ -138,8 +139,17 @@ const Quiz: React.FC = () => {
         processDetails: response.data.process_details,
         keywords: response.data.keywords,
         interviewerMindset: response.data.interviewer_mindset,
-        answer_list: response.data.answer_list, // Store for later use as correct answers
+        answer_list: response.data.answer_list, // Store for later use if needed, but questions now have it
       });
+
+      // Do NOT automatically show answers here. User should toggle.
+      // const initialShowAnswer: { [key: number]: boolean } = {};
+      // generatedQuestions.forEach((_, index) => {
+      //   initialShowAnswer[index] = true;
+      // });
+      // setShowAnswer(initialShowAnswer);
+
+
     } catch (error) {
       console.error('Error generating quiz:', error);
       alert('Failed to generate quiz. Please try again.');
@@ -189,12 +199,13 @@ const Quiz: React.FC = () => {
 
       const gradedQuizData = response.data;
       const updatedQuestions = quiz.questions.map((q, index) => {
+        // Find the corresponding graded answer by matching the question string
         const gradedAnswer = gradedQuizData.graded_answers.find(ga => ga.question === q.originalQuestion);
         return {
           ...q,
           grade: gradedAnswer?.grade,
           tip: gradedAnswer?.tip,
-          correctAnswer: quiz.answer_list?.[index], // Use the stored answer_list from generation
+          // correctAnswer is already present from generation, no need to set again here
         };
       });
 
@@ -206,7 +217,7 @@ const Quiz: React.FC = () => {
       });
       setQuizSubmitted(true); // Mark quiz as submitted
 
-      // Automatically show all answers after grading
+      // After submission, it's generally good UX to show all correct answers and grades
       const initialShowAnswer: { [key: number]: boolean } = {};
       updatedQuestions.forEach((_, index) => {
         initialShowAnswer[index] = true;
@@ -367,7 +378,8 @@ const Quiz: React.FC = () => {
                 <Typography variant="h6" sx={{ flexGrow: 1 }}>
                   Question {index + 1}: {q.originalQuestion}
                 </Typography>
-                {quizSubmitted && ( // Only show the eye icon after submission
+                {/* REMOVED: quizSubmitted condition here */}
+                {q.correctAnswer && ( // Only show if a correct answer exists
                   <Tooltip title={showAnswer[index] ? 'Hide Answer' : 'Show Answer'} arrow>
                     <IconButton onClick={() => handleToggleAnswerVisibility(index)} size="small">
                       {showAnswer[index] ? <VisibilityOff /> : <Visibility />}
@@ -387,6 +399,7 @@ const Quiz: React.FC = () => {
                 disabled={quizSubmitted} // Disable input after submission
               />
 
+              {/* Grade and Tip are still shown only after submission */}
               {quizSubmitted && (
                 <>
                   <Box sx={{ mt: 2 }}>
@@ -414,14 +427,15 @@ const Quiz: React.FC = () => {
                       </Typography>
                     </Stack>
                   </Box>
-                  {showAnswer[index] && q.correctAnswer && (
-                    <Box sx={{ mt: 2, p: 1.5, bgcolor: '#f0f0f0', borderRadius: 1 }}>
-                      <Typography variant="subtitle2">Correct Answer:</Typography>
-                      <Typography variant="body2">{q.correctAnswer}</Typography>
-                    </Box>
-                  )}
                 </>
               )}
+              {/* Correct answer display is now independent of quizSubmitted for showing */}
+              {showAnswer[index] && q.correctAnswer && (
+                <Box sx={{ mt: 2, p: 1.5, bgcolor: '#f0f0f0', borderRadius: 1 }}>
+                  <Typography variant="subtitle2">Correct Answer:</Typography>
+                  <Typography variant="body2">{q.correctAnswer}</Typography>
+                </Box>
+              )}
             </Paper>
           ))}
 

From a2513a873e1b17573ebdc1904351c5fb96f0522a Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 22:08:02 +0300
Subject: [PATCH 04/11] Replace Hardcoded Backend Url With Config

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index d5ce82b..7796a13 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -28,6 +28,7 @@ import {
   LocalOfferOutlined as LocalOfferOutlinedIcon, // For Tags/Keywords
 } from '@mui/icons-material';
 import api from '../serverApi'; // Assuming you have a configured axios instance
+import { config } from '../config';
 
 // Define interfaces for the API response schemas
 interface GeneratedQuestion {
@@ -119,7 +120,7 @@ const Quiz: React.FC = () => {
     setQuizSubmitted(false); // Reset submission status
     setShowAnswer({}); // Reset answer visibility
     try {
-      const response = await api.post<QuizGenerationResponse>('http://localhost:3000/quiz/generate', { subject });
+      const response = await api.post<QuizGenerationResponse>(`${config.app.backend_url()}/quiz/generate`, { subject });
 
       const generatedQuestions: QuizStateQuestion[] = response.data.question_list.map((q: string, idx: number) => ({
         originalQuestion: q,
@@ -195,7 +196,7 @@ const Quiz: React.FC = () => {
     };
 
     try {
-      const response = await api.post<QuizGradingResponse>('http://localhost:3000/quiz/grade', answeredQuizData);
+      const response = await api.post<QuizGradingResponse>(`${config.app.backend_url()}/quiz/grade`, answeredQuizData);
 
       const gradedQuizData = response.data;
       const updatedQuestions = quiz.questions.map((q, index) => {

From ecb19606bd03619d87e4fbc190ae1b576ff78306 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 22:14:42 +0300
Subject: [PATCH 05/11] Reorder Questions Numbers

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 95 ++++++++++++++--------------
 1 file changed, 49 insertions(+), 46 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 7796a13..e1cfa78 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -16,25 +16,22 @@ import {
   Chip,
   Divider,
   Grid,
+  Avatar, // <--- Ensure Avatar is imported
 } from '@mui/material';
 import {
   Visibility,
   VisibilityOff,
   LightbulbOutlined as LightbulbOutlinedIcon,
-  WorkOutline as WorkOutlineIcon, // For Job Role
-  InfoOutlined as InfoOutlinedIcon, // For Content/Process Details
-  ForumOutlined as ForumOutlinedIcon, // For Interviewer Mindset
-  BusinessOutlined as BusinessOutlinedIcon, // For Company Name
-  LocalOfferOutlined as LocalOfferOutlinedIcon, // For Tags/Keywords
+  WorkOutline as WorkOutlineIcon,
+  InfoOutlined as InfoOutlinedIcon,
+  ForumOutlined as ForumOutlinedIcon,
+  BusinessOutlined as BusinessOutlinedIcon,
+  LocalOfferOutlined as LocalOfferOutlinedIcon,
 } from '@mui/icons-material';
 import api from '../serverApi'; // Assuming you have a configured axios instance
 import { config } from '../config';
 
 // Define interfaces for the API response schemas
-interface GeneratedQuestion {
-  question: string;
-}
-
 interface QuizGenerationResponse {
   _id: string;
   title: string;
@@ -42,7 +39,7 @@ interface QuizGenerationResponse {
   content: string;
   job_role: string;
   company_name_en: string;
-  company_name_he: string; // Not used in display, but included for completeness
+  company_name_he: string;
   process_details: string;
   question_list: string[];
   answer_list: string[];
@@ -61,7 +58,7 @@ interface UserAnsweredQuiz {
   process_details: string;
   question_list: string[];
   answer_list: string[];
-  user_answer_list: string[]; // New field for user answers
+  user_answer_list: string[];
   keywords: string[];
   interviewer_mindset: string;
 }
@@ -83,9 +80,9 @@ interface QuizGradingResponse {
 interface QuizStateQuestion {
   originalQuestion: string;
   userAnswer: string;
-  correctAnswer?: string; // Will be populated after grading
-  grade?: number; // Will be populated after grading
-  tip?: string; // Will be populated after grading
+  correctAnswer?: string;
+  grade?: number;
+  tip?: string;
 }
 
 interface QuizState {
@@ -110,27 +107,27 @@ const Quiz: React.FC = () => {
   const [subject, setSubject] = useState<string>('');
   const [quiz, setQuiz] = useState<QuizState | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
-  const [showAnswer, setShowAnswer] = useState<{ [key: number]: boolean }>({}); // To toggle answer visibility
-  const [quizSubmitted, setQuizSubmitted] = useState<boolean>(false); // To control UI after submission
+  const [showAnswer, setShowAnswer] = useState<{ [key: number]: boolean }>({});
+  const [quizSubmitted, setQuizSubmitted] = useState<boolean>(false);
 
   const handleGenerateQuiz = async () => {
-    if (!subject.trim()) return; // Ensure subject is not empty or just whitespace
+    if (!subject.trim()) return;
     setLoading(true);
-    setQuiz(null); // Clear previous quiz
-    setQuizSubmitted(false); // Reset submission status
-    setShowAnswer({}); // Reset answer visibility
+    setQuiz(null);
+    setQuizSubmitted(false);
+    setShowAnswer({});
     try {
       const response = await api.post<QuizGenerationResponse>(`${config.app.backend_url()}/quiz/generate`, { subject });
 
       const generatedQuestions: QuizStateQuestion[] = response.data.question_list.map((q: string, idx: number) => ({
         originalQuestion: q,
-        userAnswer: '', // Initialize empty user answer
+        userAnswer: '',
         correctAnswer: response.data.answer_list[idx], // Populate correct answer immediately
       }));
 
       setQuiz({
         _id: response.data._id,
-        subject: subject, // Use the input subject for consistency
+        subject: subject,
         questions: generatedQuestions,
         title: response.data.title,
         tags: response.data.tags,
@@ -140,17 +137,9 @@ const Quiz: React.FC = () => {
         processDetails: response.data.process_details,
         keywords: response.data.keywords,
         interviewerMindset: response.data.interviewer_mindset,
-        answer_list: response.data.answer_list, // Store for later use if needed, but questions now have it
+        answer_list: response.data.answer_list,
       });
 
-      // Do NOT automatically show answers here. User should toggle.
-      // const initialShowAnswer: { [key: number]: boolean } = {};
-      // generatedQuestions.forEach((_, index) => {
-      //   initialShowAnswer[index] = true;
-      // });
-      // setShowAnswer(initialShowAnswer);
-
-
     } catch (error) {
       console.error('Error generating quiz:', error);
       alert('Failed to generate quiz. Please try again.');
@@ -175,10 +164,9 @@ const Quiz: React.FC = () => {
   };
 
   const handleSubmitQuiz = async () => {
-    if (!quiz || quizSubmitted) return; // Prevent multiple submissions
+    if (!quiz || quizSubmitted) return;
     setLoading(true);
 
-    // Construct the request body as per the UserAnsweredQuiz schema
     const answeredQuizData: UserAnsweredQuiz = {
       _id: quiz._id,
       title: quiz.title || '',
@@ -186,10 +174,10 @@ const Quiz: React.FC = () => {
       content: quiz.content || '',
       job_role: quiz.jobRole || '',
       company_name_en: quiz.companyNameEn || '',
-      company_name_he: '', // Assuming this isn't strictly required for grading or can be empty
+      company_name_he: '',
       process_details: quiz.processDetails || '',
       question_list: quiz.questions.map(q => q.originalQuestion),
-      answer_list: quiz.answer_list || [], // Send the original correct answers if available
+      answer_list: quiz.answer_list || [],
       user_answer_list: quiz.questions.map(q => q.userAnswer),
       keywords: quiz.keywords || [],
       interviewer_mindset: quiz.interviewerMindset || '',
@@ -200,13 +188,12 @@ const Quiz: React.FC = () => {
 
       const gradedQuizData = response.data;
       const updatedQuestions = quiz.questions.map((q, index) => {
-        // Find the corresponding graded answer by matching the question string
         const gradedAnswer = gradedQuizData.graded_answers.find(ga => ga.question === q.originalQuestion);
         return {
           ...q,
           grade: gradedAnswer?.grade,
           tip: gradedAnswer?.tip,
-          // correctAnswer is already present from generation, no need to set again here
+          // correctAnswer is already present from generation
         };
       });
 
@@ -216,9 +203,9 @@ const Quiz: React.FC = () => {
         finalGrade: gradedQuizData.final_quiz_grade,
         finalTip: gradedQuizData.final_summary_tip,
       });
-      setQuizSubmitted(true); // Mark quiz as submitted
+      setQuizSubmitted(true);
 
-      // After submission, it's generally good UX to show all correct answers and grades
+      // After submission, automatically show all correct answers and grades
       const initialShowAnswer: { [key: number]: boolean } = {};
       updatedQuestions.forEach((_, index) => {
         initialShowAnswer[index] = true;
@@ -375,14 +362,30 @@ const Quiz: React.FC = () => {
           </Typography>
           {quiz.questions.map((q, index) => (
             <Paper key={index} sx={{ p: 2, mb: 3, border: '1px solid #e0e0e0' }}>
-              <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+              <Box display="flex" justifyContent="space-between" alignItems="flex-start" mb={1}>
+                {/* Circled Numbering (Option 2) */}
+                <Avatar
+                  sx={{
+                    bgcolor: 'primary.main',
+                    width: 32,
+                    height: 32,
+                    fontSize: '0.9rem',
+                    fontWeight: 'bold',
+                    mr: 1.5,
+                    boxShadow: 2,
+                    flexShrink: 0, // Prevent shrinking on small screens
+                  }}
+                >
+                  {index + 1}
+                </Avatar>
+                {/* Question Text */}
                 <Typography variant="h6" sx={{ flexGrow: 1 }}>
-                  Question {index + 1}: {q.originalQuestion}
+                  {q.originalQuestion}
                 </Typography>
-                {/* REMOVED: quizSubmitted condition here */}
-                {q.correctAnswer && ( // Only show if a correct answer exists
+                {/* Blinking Eye Icon (now always visible if answer exists) */}
+                {q.correctAnswer && (
                   <Tooltip title={showAnswer[index] ? 'Hide Answer' : 'Show Answer'} arrow>
-                    <IconButton onClick={() => handleToggleAnswerVisibility(index)} size="small">
+                    <IconButton onClick={() => handleToggleAnswerVisibility(index)} size="small" sx={{ flexShrink: 0, ml: 1 }}>
                       {showAnswer[index] ? <VisibilityOff /> : <Visibility />}
                     </IconButton>
                   </Tooltip>
@@ -397,7 +400,7 @@ const Quiz: React.FC = () => {
                 value={q.userAnswer}
                 onChange={e => handleUserAnswerChange(index, e.target.value)}
                 sx={{ mb: 2 }}
-                disabled={quizSubmitted} // Disable input after submission
+                disabled={quizSubmitted}
               />
 
               {/* Grade and Tip are still shown only after submission */}
@@ -414,7 +417,7 @@ const Quiz: React.FC = () => {
                       min={0}
                       max={100}
                       sx={{ width: '90%', mx: 'auto' }}
-                      disabled // Make it non-interactive
+                      disabled
                     />
                   </Box>
                   <Box sx={{ mt: 2 }}>

From 7e5c2e25fb90b9fd129241a2c43a8e2115b6a60c Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sat, 24 May 2025 22:19:53 +0300
Subject: [PATCH 06/11] Fix Build Linter Error. Mute Unused Index

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index e1cfa78..11a28fd 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -187,7 +187,7 @@ const Quiz: React.FC = () => {
       const response = await api.post<QuizGradingResponse>(`${config.app.backend_url()}/quiz/grade`, answeredQuizData);
 
       const gradedQuizData = response.data;
-      const updatedQuestions = quiz.questions.map((q, index) => {
+      const updatedQuestions = quiz.questions.map((q, _) => {
         const gradedAnswer = gradedQuizData.graded_answers.find(ga => ga.question === q.originalQuestion);
         return {
           ...q,

From 4fa50e37256495ef698bfe2d32d25476986bc4e0 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sun, 25 May 2025 09:25:26 +0300
Subject: [PATCH 07/11] Reorder Quiz Subject In Form

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 11a28fd..0470d8c 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -16,7 +16,7 @@ import {
   Chip,
   Divider,
   Grid,
-  Avatar, // <--- Ensure Avatar is imported
+  Avatar,
 } from '@mui/material';
 import {
   Visibility,
@@ -230,11 +230,11 @@ const Quiz: React.FC = () => {
       {!quiz && (
         <Box sx={{ mb: 4, p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
           <Typography variant="h6" gutterBottom>
-            Enter a Quiz Subject
           </Typography>
           <TextField
             fullWidth
-            label="e.g., Java Spring Boot Microservices, React Hooks, Quantum Physics"
+            label="Quiz Subject"
+            placeholder="e.g., Java Spring Boot Microservices, React Hooks, Quantum Physics"
             variant="outlined"
             value={subject}
             onChange={e => setSubject(e.target.value)}

From 36b0145034fc9965cb98be933e9568f84af33bb2 Mon Sep 17 00:00:00 2001
From: Tal Jacob <taljacob2@gmail.com>
Date: Sun, 25 May 2025 09:28:19 +0300
Subject: [PATCH 08/11] Remove Redundant Comments

Signed-off-by: Tal Jacob <taljacob2@gmail.com>
---
 nextstep-frontend/src/pages/Quiz.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index 0470d8c..be0029b 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -1,5 +1,3 @@
-// src/pages/Quiz.tsx
-
 import React, { useState } from 'react';
 import {
   Container,
@@ -28,7 +26,7 @@ import {
   BusinessOutlined as BusinessOutlinedIcon,
   LocalOfferOutlined as LocalOfferOutlinedIcon,
 } from '@mui/icons-material';
-import api from '../serverApi'; // Assuming you have a configured axios instance
+import api from '../serverApi';
 import { config } from '../config';
 
 // Define interfaces for the API response schemas

From 15ef151fb800bcad99fd8f5deca0e35b5ad94dd2 Mon Sep 17 00:00:00 2001
From: lina elman <lina.elman7@gmail.com>
Date: Sun, 25 May 2025 22:24:11 +0300
Subject: [PATCH 09/11] Added integration of jobs to quizzes

---
 .../src/components/LinkedInIntegration.tsx    | 31 ++++++++++++++-----
 nextstep-frontend/src/pages/Quiz.tsx          | 18 +++++++++--
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/nextstep-frontend/src/components/LinkedInIntegration.tsx b/nextstep-frontend/src/components/LinkedInIntegration.tsx
index a5e0929..56f30d2 100644
--- a/nextstep-frontend/src/components/LinkedInIntegration.tsx
+++ b/nextstep-frontend/src/components/LinkedInIntegration.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button, Grid, CircularProgress, IconButton, TextField, MenuItem, Select, FormControl, InputLabel, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Stack } from '@mui/material';
 import { ExpandLess, LinkedIn, Settings } from '@mui/icons-material';
+import { useNavigate } from 'react-router-dom';
 
 interface Job {
   position: string;
@@ -68,6 +69,12 @@ const LinkedInIntegration: React.FC<LinkedInIntegrationProps> = ({
     setJobDetails(null);
   };
 
+  const handleGenerateQuiz = (job: Job) => {
+    const subject = `${job.position} at ${job.company}`;
+    const quizUrl = `/quiz?subject=${encodeURIComponent(subject)}`;
+    window.open(quizUrl, '_blank');
+  };
+
   return (
     <Box sx={{ bgcolor: 'background.paper', p: 3, borderRadius: 2, boxShadow: 1, mt: 4 }}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
@@ -281,14 +288,22 @@ const LinkedInIntegration: React.FC<LinkedInIntegrationProps> = ({
                 Close
               </Button>
               {selectedJob?.jobUrl && (
-                <Button
-                  href={selectedJob.jobUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  color="primary"
-                >
-                  Open in LinkedIn
-                </Button>
+                <div>
+                  <Button
+                    onClick={() => handleGenerateQuiz(selectedJob)}
+                    color="primary"
+                  >
+                    Generate a quiz
+                  </Button>
+                  <Button
+                    href={selectedJob.jobUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    color="primary"
+                  >
+                    Open in LinkedIn
+                  </Button>
+                </div>
               )}
             </DialogActions>
           </Dialog>
diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index be0029b..c68af5e 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import {
   Container,
   Box,
@@ -102,7 +103,8 @@ interface QuizState {
 }
 
 const Quiz: React.FC = () => {
-  const [subject, setSubject] = useState<string>('');
+  const [searchParams] = useSearchParams();
+  const [subject, setSubject] = useState<string>(searchParams.get('subject') || '');
   const [quiz, setQuiz] = useState<QuizState | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [showAnswer, setShowAnswer] = useState<{ [key: number]: boolean }>({});
@@ -218,6 +220,11 @@ const Quiz: React.FC = () => {
     }
   };
 
+  const handleEditSubject = (newSubject: string) => {
+    setSubject(newSubject);
+    setQuiz(null); // Reset the quiz to allow generating a new one with the updated subject
+  };
+
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
       <Typography variant="h4" component="h1" gutterBottom align="center">
@@ -254,7 +261,14 @@ const Quiz: React.FC = () => {
       {quiz && (
         <Box sx={{ p: 3, bgcolor: 'background.paper', borderRadius: 2, boxShadow: 1 }}>
           <Typography variant="h5" gutterBottom align="center" sx={{ mb: 3 }}>
-            Quiz on: {quiz.subject}
+            Quiz on: 
+            <TextField
+              value={subject}
+              onChange={(e) => handleEditSubject(e.target.value)}
+              variant="outlined"
+              size="small"
+              sx={{ ml: 2, width: '50%' }}
+            />
           </Typography>
 
           {/* --- Enhanced Display of Quiz Metadata --- */}

From 4ab2d59981a61d633ab18f3b27d9ebb3cde24437 Mon Sep 17 00:00:00 2001
From: lina elman <lina.elman7@gmail.com>
Date: Sun, 25 May 2025 22:25:55 +0300
Subject: [PATCH 10/11] removed unnecessary

---
 nextstep-frontend/src/components/LinkedInIntegration.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/nextstep-frontend/src/components/LinkedInIntegration.tsx b/nextstep-frontend/src/components/LinkedInIntegration.tsx
index 56f30d2..c13e7d5 100644
--- a/nextstep-frontend/src/components/LinkedInIntegration.tsx
+++ b/nextstep-frontend/src/components/LinkedInIntegration.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Box, Typography, Button, Grid, CircularProgress, IconButton, TextField, MenuItem, Select, FormControl, InputLabel, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Stack } from '@mui/material';
 import { ExpandLess, LinkedIn, Settings } from '@mui/icons-material';
-import { useNavigate } from 'react-router-dom';
 
 interface Job {
   position: string;

From 41d2330d286cda105ce92fc22b3af470445ff5dc Mon Sep 17 00:00:00 2001
From: lina elman <lina.elman7@gmail.com>
Date: Sun, 25 May 2025 22:38:47 +0300
Subject: [PATCH 11/11] added icon

---
 nextstep-frontend/src/pages/Quiz.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/nextstep-frontend/src/pages/Quiz.tsx b/nextstep-frontend/src/pages/Quiz.tsx
index c68af5e..6847b32 100644
--- a/nextstep-frontend/src/pages/Quiz.tsx
+++ b/nextstep-frontend/src/pages/Quiz.tsx
@@ -27,6 +27,7 @@ import {
   BusinessOutlined as BusinessOutlinedIcon,
   LocalOfferOutlined as LocalOfferOutlinedIcon,
 } from '@mui/icons-material';
+import SchoolIcon from '@mui/icons-material/School'; // Import graduation hat icon
 import api from '../serverApi';
 import { config } from '../config';
 
@@ -227,8 +228,22 @@ const Quiz: React.FC = () => {
 
   return (
     <Container maxWidth="md" sx={{ py: 4 }}>
-      <Typography variant="h4" component="h1" gutterBottom align="center">
-        Quiz Generator & Grader
+      <Typography variant="h4" component="h1" gutterBottom align="center" sx={{ position: 'relative' }}>
+        Quiz Generator &{' '}
+        <Box sx={{ display: 'inline-block', position: 'relative' }}>
+          <SchoolIcon
+            sx={{
+              position: 'absolute',
+              top: '-10px',
+              left: '110%',
+              size: 'large',
+              transform: 'translateX(-50%) rotate(30deg)',
+              fontSize: 30,
+              color: 'primary.main',
+            }}
+          />
+          Grader
+        </Box>
       </Typography>
 
       {/* Subject Input */}