Added integration of jobs to quizzes

nextstep-frontend/src/components/LinkedInIntegration.tsx

@@ -68,6 +68,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 +287,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>

nextstep-frontend/src/pages/Quiz.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import {
   Container,
   Box,
@@ -26,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';
 
@@ -102,7 +104,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,10 +221,29 @@ 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">
-        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 */}
@@ -254,7 +276,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 --- */}