From d25f60d1b7d2276b2125ea77062060e7e21f259a Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Tue, 25 Mar 2025 19:48:23 -0400
Subject: [PATCH 01/12] new file for mcq modal, basic functionality done.
 options will be stored in json of NCAG, should retroactively add type:'text'
 to other questions

---
 .../src/components/authenticatedRouter.tsx    |   2 +-
 .../assignments/assignmentDetailPage.tsx      |   2 +-
 .../assignments/assignmentUpdatePage.tsx      |  29 ++--
 ...dProblemModal.tsx => codeProblemModal.tsx} |  23 ++-
 .../forms/assignments/multipleChoiceModal.tsx | 134 ++++++++++++++++++
 .../forms/assignments/textProblemModal.tsx    |   2 +-
 ...Modal.tsx => containerAutoGraderModal.tsx} |   7 +-
 .../src/components/shared/inputs/button.tsx   |   1 -
 8 files changed, 171 insertions(+), 29 deletions(-)
 rename devU-client/src/components/pages/forms/assignments/{AddProblemModal.tsx => codeProblemModal.tsx} (75%)
 create mode 100644 devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
 rename devU-client/src/components/pages/forms/containers/{ContainerAutoGraderModal.tsx => containerAutoGraderModal.tsx} (94%)

diff --git a/devU-client/src/components/authenticatedRouter.tsx b/devU-client/src/components/authenticatedRouter.tsx
index 8913409d..1a3de3fe 100644
--- a/devU-client/src/components/authenticatedRouter.tsx
+++ b/devU-client/src/components/authenticatedRouter.tsx
@@ -14,7 +14,7 @@ import NonContainerAutoGraderForm from './pages/forms/containers/nonContainerAut
 import GradebookStudentPage from './pages/gradebook/gradebookStudentPage'
 import GradebookInstructorPage from './pages/gradebook/gradebookInstructorPage'
 import SubmissionFeedbackPage from './pages/submissions/submissionFeedbackPage'
-import ContainerAutoGraderForm from './pages/forms/containers/ContainerAutoGraderModal'
+import ContainerAutoGraderForm from './pages/forms/containers/containerAutoGraderModal'
 import CoursePreviewPage from './pages/courses/coursePreviewPage'
 import CoursesListPage from "./pages/listPages/courses/coursesListPage";
 import AssignmentProblemFormPage from './pages/forms/assignments/assignmentProblemFormPage'
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 62c5dae0..da65d030 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -238,7 +238,7 @@ const AssignmentDetailPage = () => {
                         <div className = {styles.submit_container}>
                             <div className={styles.affirmation}>
                                 <input type='checkbox' onClick={handleCheckboxChange}/>
-                                <span className={styles.affirmText}>I affirm that I have complied with this course’s academic integrity policy as defined in the syllabus.</span>
+                                <span className={styles.affirmText}>I affirm that I have complied with this course's academic integrity policy as defined in the syllabus.</span>
                             </div>
                             <button className='btnPrimary'
                             style={{marginTop:'40px'}} 
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index f0108297..8d88da85 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -15,11 +15,13 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import { getCssVariables } from 'utils/theme.utils'
 import { Button as MuiButton, StyledEngineProvider } from '@mui/material'
-import TextProblemModal from './textProblemModal'
 /*import Dropdown, { Option } from 'components/shared/inputs/dropdown';*/
 //import Select from 'react-select/src/Select'
-import ContainerAutoGraderModal from '../containers/ContainerAutoGraderModal';
-import AddProblemModal from './AddProblemModal'
+import ContainerAutoGraderModal from '../containers/containerAutoGraderModal';
+import TextProblemModal from './textProblemModal'
+import CodeProblemModal from './codeProblemModal'
+import MultipleChoiceModal from './multipleChoiceModal'
+
 
 
 type UrlParams = { assignmentId: string }
@@ -34,8 +36,6 @@ const AssignmentUpdatePage = () => {
   const [containerAutoGraderModal, setContainerAutoGraderModal] = useState(false);
   const handleCloseContainerAutoGraderModal = () => setContainerAutoGraderModal(false);
   const [containerAutograders, setContainerAutograders] = useState<ContainerAutoGrader[]>([])
-  const [addProblemModal, setAddProblemModal] = useState(false);
-  const handleCloseAddProblemModal = () => setAddProblemModal(false);
 
   
 
@@ -182,8 +182,7 @@ const AssignmentUpdatePage = () => {
         setInvalidFields(newFields)
         setAlert({ autoDelete: false, type: 'error', message })
       })
-      .finally(() => {
-      })
+
   }
 
   const handleProblemUpdate = () => {
@@ -212,13 +211,19 @@ const AssignmentUpdatePage = () => {
     }
   }*/
 
-  const [textModal, setTextModal] = useState(false)
   // const [addProblemForm, setAddProblemForm] = useState({
   //   assignmentId: currentAssignmentId,
   //   problemName: '',
   //   maxScore: 0,
   // })
+
+  const [textModal, setTextModal] = useState(false)
   const handleCloseTextModal = () => {setTextModal(false)}
+  const [codeModal, setCodeModal] = useState(false);
+  const handleCloseCodeModal = () => {setCodeModal(false)};
+  const [mcqModal, setMcqModal] = useState(false);
+  const handleCloseMcqModal = () => {setMcqModal(false)};
+
 
   // const handleAddProblemChange = (value: String, e: React.ChangeEvent<HTMLInputElement>) => {
   //   const key = e.target.id
@@ -265,7 +270,9 @@ const AssignmentUpdatePage = () => {
       </Dialog>
 
       <TextProblemModal open={textModal} onClose={handleCloseTextModal}/>
-      <AddProblemModal open={addProblemModal} onClose={handleCloseAddProblemModal} />
+      <CodeProblemModal open={codeModal} onClose={handleCloseCodeModal}/>
+      <MultipleChoiceModal open={mcqModal} onClose={handleCloseMcqModal} />
+
 
       <div className={styles.pageHeader}>
         <h1 style={{gridColumnStart:2}}>Edit Assignment</h1>
@@ -366,9 +373,9 @@ const AssignmentUpdatePage = () => {
         <div className={styles.problemsList}>
         <h2 className={styles.header}>Add Problems</h2>
           <div className={styles.buttonContainer}>
-          <Button onClick={() => setAddProblemModal(true)} className='btnSecondary'>Code/File Input</Button>
+          <Button onClick={() => setCodeModal(true)} className='btnSecondary'>Code/File Input</Button>
             <Button onClick={() => {setTextModal(true)}} className='btnSecondary'>Text Input</Button>
-            <Button onClick={() => setAlert({ autoDelete: true, type: 'error', message: 'Setup Multiple Choice creation modal' })} className='btnSecondary'>Multiple Choice</Button>
+            <Button onClick={() => {setMcqModal(true)}} className='btnSecondary'>Multiple Choice</Button>
           </div>
           <h2 className={styles.header}>Add Graders</h2>
           <div className={styles.buttonContainer}>
diff --git a/devU-client/src/components/pages/forms/assignments/AddProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
similarity index 75%
rename from devU-client/src/components/pages/forms/assignments/AddProblemModal.tsx
rename to devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
index 28e46c75..fdde2f23 100644
--- a/devU-client/src/components/pages/forms/assignments/AddProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
@@ -5,14 +5,13 @@ import { SET_ALERT } from 'redux/types/active.types';
 import { useActionless } from 'redux/hooks';
 import RequestService from 'services/request.service';
 import Modal from 'components/shared/layouts/modal';
-import styles from './modal.module.scss';
 
 interface Props {
     open: boolean;
     onClose: () => void;
 }
 
-const AddProblemModal = ({ open, onClose }: Props) => {
+const CodeProblemModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT);
     const { assignmentId } = useParams<{ assignmentId: string }>();
     const { courseId } = useParams<{ courseId: string }>();
@@ -50,31 +49,29 @@ const AddProblemModal = ({ open, onClose }: Props) => {
     };
 
     return (
-        <Modal title="Add Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
-            <div className={styles.modalContainer}>
-                <label htmlFor="title" className={styles.inputLabel}>Problem Title:</label>
+        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+            <div className="input-group">
+                <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input 
                     type="text" 
                     id="title" 
-                    className={styles.inputField} 
                     placeholder="e.g. Application Objective 3" 
                     onChange={handleChange} 
                 />
-
-                <label htmlFor="maxScore" className={styles.inputLabel}>Maximum Score:</label>
+            </div>
+            
+            <div className="input-group">
+                <label htmlFor="maxScore" className="input-label">Maximum Score:</label>
                 <input 
                     type="number" 
                     id="maxScore" 
-                    className={styles.inputField} 
-                    placeholder="10" 
+                    placeholder="e.g. 10" 
                     min="0" 
                     onChange={handleChange} 
                 />
-
-                <button className={styles.submitButton} onClick={handleSubmit}>Add Problem</button>
             </div>
         </Modal>
     );
 };
 
-export default AddProblemModal;
+export default CodeProblemModal;
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
new file mode 100644
index 00000000..af94bb91
--- /dev/null
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -0,0 +1,134 @@
+import React, { useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { ExpressValidationError } from 'devu-shared-modules'
+import { SET_ALERT } from 'redux/types/active.types'
+import { useActionless } from 'redux/hooks'
+import RequestService from 'services/request.service'
+import Modal from 'components/shared/layouts/modal'
+
+interface Props {
+    open: boolean;
+    onClose: () => void;
+}
+
+const TextProblemModal = ({ open, onClose }: Props) => {
+    const [setAlert] = useActionless(SET_ALERT)
+    const { assignmentId } = useParams<{ assignmentId: string }>()
+    const { courseId } = useParams<{ courseId: string }>()
+    const [options, setOptions] = useState({
+        a: '',
+        b: '',
+        c: ''
+    })
+    const [formData, setFormData] = useState({
+        title: '',
+        maxScore: '',
+        correctAnswer: '',
+        regex: false
+    });
+
+    const handleSubmit = () => {
+        // early return if form not fully filled out
+        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return }
+
+        const problemFormData = {
+            assignmentId: parseInt(assignmentId),
+            problemName: formData.title,
+            maxScore: parseInt(formData.maxScore),
+        };
+
+        const graderFormData = {
+            assignmentId: parseInt(assignmentId),
+            question: formData.title,
+            correctString: formData.correctAnswer,
+            score: Number(formData.maxScore),
+            isRegex: formData.regex,
+            metadata: {
+                type: 'MCQ',
+                options: options
+            } // bad js. did as  a quick fix lmk how to do better :D
+        }
+
+        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
+            .then(() => {
+                console.log("PROBLEM CREATED")
+                console.log(problemFormData)
+
+            })
+            .catch((err: ExpressValidationError[] | Error) => {
+                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
+                setAlert({ autoDelete: false, type: 'error', message })
+                console.log(problemFormData)
+            })
+
+        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
+            .then(() => {
+                console.log("GRADER CREATED")
+                console.log(graderFormData)
+            })
+            .catch((err: ExpressValidationError[] | Error) => {
+                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
+                setAlert({ autoDelete: false, type: 'error', message })
+            })
+        
+        // close modal
+        onClose();
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const key = e.target.id
+        const value = e.target.value
+
+        setFormData(prevState => ({ ...prevState, [key]: value }))
+    }
+
+    const handleQuestionTextChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const key = e.target.id
+        const value = e.target.value
+
+        setOptions(prevState => ({ ...prevState, [key]: value }))
+    }
+
+    const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const value = e.target.id
+        console.log("AAAAAAAA")
+        setFormData(prevState => ({ ...prevState, correctAnswer: value }))
+    }
+
+    return (
+        <Modal title="Add Text Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+            <div className="input-group">
+                <label htmlFor="title" className="input-label">Problem Title:</label>
+                <input type="text" id="title" onChange={handleChange}
+                    placeholder='e.g. What is the time complexity of MergeSort?' />
+            </div>
+            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                <div>a.</div>
+                <input type="text" id="a" onChange={handleQuestionTextChange} 
+                placeholder='Answer A...' />
+                <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
+            </div>
+            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                <div>b.</div>
+                <input type="text" id="b" onChange={handleQuestionTextChange} 
+                placeholder='Answer B...' />
+                <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
+
+            </div>
+            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                <div>c.</div>
+                <input type="text" id="c" onChange={handleQuestionTextChange} 
+                placeholder='Answer C...' />
+                <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
+            </div>
+            <div className="input-group">
+                <label htmlFor="maxScore" className="input-label">Maximum Score:</label>
+                <input type="number" id="maxScore" onChange={handleChange}
+                    placeholder='e.g. 10' min="0" />
+            </div>
+            <label htmlFor="regex">Correct Answer is Regex <input type="checkbox" id="regex" /></label>
+        </Modal>
+    )
+}
+
+export default TextProblemModal;
\ No newline at end of file
diff --git a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
index 55081a57..bebcfd7c 100644
--- a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
@@ -86,7 +86,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 <input type="number" id="maxScore" onChange={handleChange}
                     placeholder='e.g. 10' min="0" />
             </div>
-            <label htmlFor="regex">Correct answer is regex <input type="checkbox" id="regex" /></label>
+            <label htmlFor="regex">Correct Answer is Regex <input type="checkbox" id="regex" /></label>
         </Modal>
     )
 }
diff --git a/devU-client/src/components/pages/forms/containers/ContainerAutoGraderModal.tsx b/devU-client/src/components/pages/forms/containers/containerAutoGraderModal.tsx
similarity index 94%
rename from devU-client/src/components/pages/forms/containers/ContainerAutoGraderModal.tsx
rename to devU-client/src/components/pages/forms/containers/containerAutoGraderModal.tsx
index 25550ca2..8d539f62 100644
--- a/devU-client/src/components/pages/forms/containers/ContainerAutoGraderModal.tsx
+++ b/devU-client/src/components/pages/forms/containers/containerAutoGraderModal.tsx
@@ -45,6 +45,11 @@ const ContainerAutoGraderForm = ({ open, onClose }: Props) => {
     const handleMakefileChange = (e : React.ChangeEvent<HTMLInputElement>) => {
         setMakefile(e.target.files?.item(0))
     }
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const key = e.target.id;
+        const value = e.target.value;
+        setFormData(prevState => ({ ...prevState, [key]: value }));
+    };
 
 
 
@@ -89,7 +94,7 @@ const ContainerAutoGraderForm = ({ open, onClose }: Props) => {
             </div>
             <div className="input-group">
                 <label htmlFor="timeout">Timeout (ms):</label>
-                <input type="number" id="timeout" value={formData.timeout} placeholder="e.g. 3000"  />
+                <input type="number" id="timeout" value={formData.timeout} placeholder="e.g. 3000" onChange={handleChange}/>
             </div>
             <div className="input-group">
                 <label htmlFor="graderFile">Graderfile*:</label>
diff --git a/devU-client/src/components/shared/inputs/button.tsx b/devU-client/src/components/shared/inputs/button.tsx
index 5cc98dac..e3e6386b 100644
--- a/devU-client/src/components/shared/inputs/button.tsx
+++ b/devU-client/src/components/shared/inputs/button.tsx
@@ -10,7 +10,6 @@ type Props = {
 }
 
 const Button = ({ className = '', children, loading = false, onClick }: Props) => {
-  console.log(loading ? styles.isLoading : '')
   return (
     <button
       disabled={loading}

From e976a6d3aff9c019626a98afcaa5c6a4fd3af6b6 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Tue, 25 Mar 2025 21:03:01 -0400
Subject: [PATCH 02/12] modal done, will need future updates but works for
 basic functionality

---
 .../forms/assignments/multipleChoiceModal.tsx | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index af94bb91..43bc4f8f 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -46,7 +46,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
             metadata: {
                 type: 'MCQ',
                 options: options
-            } // bad js. did as  a quick fix lmk how to do better :D
+            } 
         }
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
@@ -91,7 +91,6 @@ const TextProblemModal = ({ open, onClose }: Props) => {
 
     const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const value = e.target.id
-        console.log("AAAAAAAA")
         setFormData(prevState => ({ ...prevState, correctAnswer: value }))
     }
 
@@ -102,25 +101,27 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 <input type="text" id="title" onChange={handleChange}
                     placeholder='e.g. What is the time complexity of MergeSort?' />
             </div>
-            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+            <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
                 <div>a.</div>
-                <input type="text" id="a" onChange={handleQuestionTextChange} 
+                <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
                 placeholder='Answer A...' />
                 <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
             </div>
-            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                <div>b.</div>
-                <input type="text" id="b" onChange={handleQuestionTextChange} 
-                placeholder='Answer B...' />
-                <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
 
+            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                    <div>b.</div>
+                    <input type="text" id="b" onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder='Answer B...' />
+                    <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
             </div>
+
             <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                 <div>c.</div>
-                <input type="text" id="c" onChange={handleQuestionTextChange} 
+                <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
                 placeholder='Answer C...' />
                 <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
             </div>
+
             <div className="input-group">
                 <label htmlFor="maxScore" className="input-label">Maximum Score:</label>
                 <input type="number" id="maxScore" onChange={handleChange}

From cfd5383851adec83e22ec79b1175e3f9430ef18f Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 26 Mar 2025 11:18:10 -0400
Subject: [PATCH 03/12] some page padding changes, added text to modal

---
 devU-client/src/components/misc/footer.scss         |  5 +++++
 .../pages/forms/assignments/assignmentFormPage.scss |  2 +-
 .../forms/assignments/assignmentUpdatePage.tsx      | 10 ++++++----
 .../pages/forms/assignments/multipleChoiceModal.tsx | 13 ++++++++-----
 devU-client/src/components/shared/layouts/modal.tsx |  2 +-
 .../src/components/shared/layouts/pageWrapper.scss  |  2 +-
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/devU-client/src/components/misc/footer.scss b/devU-client/src/components/misc/footer.scss
index 7cd48741..4b288854 100644
--- a/devU-client/src/components/misc/footer.scss
+++ b/devU-client/src/components/misc/footer.scss
@@ -31,3 +31,8 @@
     }
   }
 }
+@media (max-width: $extreme){
+  .footer{
+    padding: 10px $phonePadding;
+  }
+}
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
index b815473f..3735c575 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.scss
@@ -8,7 +8,7 @@ h2 {
 }
 
 p {
-  text-align: center;
+  //text-align: center; got rid of this since it's left aligned on home page, all good if we want to do this, but should probably change all pages to match
   margin-left: 0;
 }
 
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 8d88da85..46124e63 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -244,6 +244,9 @@ const AssignmentUpdatePage = () => {
   // }
 
   const handleDeleteProblem = (problemId: number) => {
+    const problem = RequestService.get(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problemId}`)
+    console.log(problem)
+  //  const idsToDelete = nonContainerAutograders.filter(ncag => ncag.)
     RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problemId}`)
       .then(() => {
         setAlert({ autoDelete: true, type: 'success', message: 'Problem Deleted' })
@@ -276,7 +279,7 @@ const AssignmentUpdatePage = () => {
 
       <div className={styles.pageHeader}>
         <h1 style={{gridColumnStart:2}}>Edit Assignment</h1>
-        <Button className={`btnPrimary ${styles.backToCourse}`} onClick={() => {history.goBack()}}>back to course</Button>
+        <Button className={`btnPrimary ${styles.backToCourse}`} onClick={() => {history.goBack()}}>Back to Course</Button>
       </div>
       <div className={styles.grid}>
         <div className={styles.form}>
@@ -357,14 +360,13 @@ const AssignmentUpdatePage = () => {
                 <div key={files.length-1}>
                   <span>&nbsp;{`${files[files.length-1].name}`}</span>
               </div>
-                
               </div>) 
            : <div className={styles.filesList} style={{fontStyle:'italic'}}>No files attached</div>}
           <input type='file' id='fileUp' onChange={handleFile} hidden/>
           <label htmlFor="fileUp">
           <StyledEngineProvider injectFirst>
             <MuiButton disableRipple component="span" className={styles.fileUpload}>
-              choose files
+              Choose Files
             </MuiButton>
           </StyledEngineProvider>
           </label> 
@@ -412,7 +414,7 @@ const AssignmentUpdatePage = () => {
         </div>
       </div>
       <div style={{ display: 'flex', justifyContent: 'center', margin: '20px'}}>
-            <Button onClick={handleAssignmentUpdate} className='btnPrimary'>save and exit</Button>
+            <Button onClick={handleAssignmentUpdate} className='btnPrimary'>Save and Exit</Button>
       </div>
       </PageWrapper>
     </>
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 43bc4f8f..7179f87e 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -101,11 +101,14 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 <input type="text" id="title" onChange={handleChange}
                     placeholder='e.g. What is the time complexity of MergeSort?' />
             </div>
-            <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
-                <div>a.</div>
-                <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                placeholder='Answer A...' />
-                <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
+            <div className="input-group" >
+                <div>Answer Choices:</div>
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
+                    <div>a.</div>
+                    <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder='Answer A...' />
+                    <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>
             </div>
 
             <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
diff --git a/devU-client/src/components/shared/layouts/modal.tsx b/devU-client/src/components/shared/layouts/modal.tsx
index 7d792aa9..b2444396 100644
--- a/devU-client/src/components/shared/layouts/modal.tsx
+++ b/devU-client/src/components/shared/layouts/modal.tsx
@@ -38,7 +38,7 @@ const Modal = ({ title, children, buttonAction, open, onClose }: ModalProps) =>
                 <button onClick={onClose} aria-label='close' title='close'>✕</button>
             </div>
             {children}
-            <button onClick={buttonAction} className='btnPrimary modalAction'>{title.toLowerCase()}</button>
+            <button onClick={buttonAction} className='btnPrimary modalAction'>{title}</button>
         </Dialog>
     )
 }
diff --git a/devU-client/src/components/shared/layouts/pageWrapper.scss b/devU-client/src/components/shared/layouts/pageWrapper.scss
index a021b3da..c33e9453 100644
--- a/devU-client/src/components/shared/layouts/pageWrapper.scss
+++ b/devU-client/src/components/shared/layouts/pageWrapper.scss
@@ -14,7 +14,7 @@
 
 .content {
   flex-grow: 1;
-  padding: 0px 100px 50px 100px;
+  padding: 0px $pagePadding 70px $pagePadding;
 }
 
 @media (max-width: $extreme){

From 4407c751fab095fa26792d6c407da5b74d68906c Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 26 Mar 2025 11:37:33 -0400
Subject: [PATCH 04/12] changed number of options to 5

---
 .../assignments/assignmentDetailPage.tsx      |  1 -
 .../forms/assignments/multipleChoiceModal.tsx | 44 +++++++++++--------
 .../forms/assignments/textProblemModal.tsx    |  4 +-
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index da65d030..8d74c740 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -103,7 +103,6 @@ const AssignmentDetailPage = () => {
     if (error) return <ErrorPage error={error} />
 
     const handleChange = (value: string, e : React.ChangeEvent<HTMLInputElement>) => {
-        console.log(e)
         console.log(value)
         const key = e.target.id
         setFormData(prevState => ({...prevState,[key] : e.target.value}))    
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 7179f87e..0d0233ed 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -52,19 +52,16 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
             .then(() => {
                 console.log("PROBLEM CREATED")
-                console.log(problemFormData)
-
+                setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
             })
             .catch((err: ExpressValidationError[] | Error) => {
                 const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
                 setAlert({ autoDelete: false, type: 'error', message })
-                console.log(problemFormData)
             })
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders/`, graderFormData)
             .then(() => {
                 console.log("GRADER CREATED")
-                console.log(graderFormData)
             })
             .catch((err: ExpressValidationError[] | Error) => {
                 const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message
@@ -91,38 +88,49 @@ const TextProblemModal = ({ open, onClose }: Props) => {
 
     const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const value = e.target.id
+        console.log("CORRECT: " + value)
         setFormData(prevState => ({ ...prevState, correctAnswer: value }))
     }
 
     return (
-        <Modal title="Add Text Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+        <Modal title="Add Multiple Choice Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input type="text" id="title" onChange={handleChange}
                     placeholder='e.g. What is the time complexity of MergeSort?' />
             </div>
-            <div className="input-group" >
+            <div className="input-group" style={{gap: '5px'}} >
                 <div>Answer Choices:</div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
                     <div>a.</div>
                     <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='Answer A...' />
+                    placeholder='e.g. Java' />
                     <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
-            </div>
-
-            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                     <div>b.</div>
                     <input type="text" id="b" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='Answer B...' />
+                    placeholder='e.g. Python' />
                     <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
-            </div>
-
-            <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                <div>c.</div>
-                <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                placeholder='Answer C...' />
-                <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                    <div>c.</div>
+                    <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder='e.g. C' />
+                    <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                    <div>d.</div>
+                    <input type="text" id="d" onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder='e.g. JavaScript' />
+                    <input type="radio" id="d" onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
+                    <div>e.</div>
+                    <input type="text" id="e" onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder='e.g. ...Matlab?' />
+                    <input type="radio" id="e" onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>
             </div>
 
             <div className="input-group">
diff --git a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
index bebcfd7c..0d8b4cf1 100644
--- a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
@@ -42,7 +42,9 @@ const TextProblemModal = ({ open, onClose }: Props) => {
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
             .then(() => {
-                console.log("PROBLEM CREATED")
+                console.log("PROBLEM CREATED");
+                setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
+
             })
             .catch((err: ExpressValidationError[] | Error) => {
                 const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message

From 3e5d0d36375bc2bc2dddc2506e4feb2551c2e1e7 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 26 Mar 2025 20:13:24 -0400
Subject: [PATCH 05/12] made buttons have lower opacity on disabled, moved
 assignment problems to a list item file, updated modal behaviors for when not
 all info not filled out

---
 devU-client/src/assets/global.scss            |  6 ++
 .../listItems/assignmentProblemListItem.scss  | 20 ++++++
 .../listItems/assignmentProblemListItem.tsx   | 30 +++++++++
 .../src/components/misc/globalToolbar.scss    |  2 +-
 .../assignments/assignmentDetailPage.scss     | 12 +---
 .../assignments/assignmentDetailPage.tsx      | 13 +---
 .../pages/courses/courseDetailPage.scss       | 23 ++++---
 .../pages/courses/courseDetailPage.tsx        |  2 +-
 .../assignments/assignmentUpdatePage.scss     |  5 --
 .../assignments/assignmentUpdatePage.tsx      |  4 +-
 .../forms/assignments/codeProblemModal.tsx    |  9 ++-
 .../forms/assignments/multipleChoiceModal.tsx | 24 ++++---
 .../forms/assignments/textProblemModal.tsx    | 13 +++-
 .../src/components/shared/layouts/modal.tsx   |  6 +-
 .../components/utils/userOptionsDropdown.scss | 65 +++++++++++--------
 .../components/utils/userOptionsDropdown.tsx  | 12 ++--
 16 files changed, 159 insertions(+), 87 deletions(-)
 create mode 100644 devU-client/src/components/listItems/assignmentProblemListItem.scss
 create mode 100644 devU-client/src/components/listItems/assignmentProblemListItem.tsx

diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
index 8ffb1e5a..9a7847e2 100644
--- a/devU-client/src/assets/global.scss
+++ b/devU-client/src/assets/global.scss
@@ -36,6 +36,10 @@
     font-weight: 700;
     font-size: 16px;
     transition: all 0.2s ease;
+    &:disabled{
+      opacity: 60%;
+      cursor: not-allowed;
+    }
   }
 
   .no_items {
@@ -243,6 +247,8 @@
     --secondary: #3d3f3f;
     --secondary-darker: #1f2020;
 
+    --link-blue: #0b8cdb;
+
     --list-item-background: #333333;
     --list-item-background-hover: #303030;
     --list-item-subtext: #e0e0e0;
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
new file mode 100644
index 00000000..f41e0694
--- /dev/null
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -0,0 +1,20 @@
+
+
+.problem_header{
+    font-size:16px;
+    margin: 0 0 10px 0;
+}
+
+.problem{
+    gap: 10px;
+    padding: 15px 0;
+    border-bottom: 1px solid #ddd;
+}
+
+
+.textField{
+    align-items: center;
+    margin-bottom: 0;
+    background: none;
+    border: 2px solid #ccc;
+}
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
new file mode 100644
index 00000000..a9875137
--- /dev/null
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import {AssignmentProblem} from 'devu-shared-modules'
+
+import TextField from 'components/shared/inputs/textField'
+
+
+import styles from './assignmentProblemListItem.scss'
+
+type Props = {
+    problem: AssignmentProblem
+    handleChange: (value: string, e : React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
+
+    return (
+        <div key={problem.id} className={styles.problem}>
+            <h4 className={styles.problem_header}>{problem.problemName}</h4>
+            <TextField className={styles.textField}
+                placeholder='Answer'
+                onChange={handleChange}
+                id={problem.problemName}
+                sx={{width: '100%', marginLeft : 1/10}}/>
+        </div>
+    )
+}
+
+
+export default AssignmentProblemListItem
\ No newline at end of file
diff --git a/devU-client/src/components/misc/globalToolbar.scss b/devU-client/src/components/misc/globalToolbar.scss
index bee326f1..eee6a4f2 100644
--- a/devU-client/src/components/misc/globalToolbar.scss
+++ b/devU-client/src/components/misc/globalToolbar.scss
@@ -34,7 +34,7 @@ $font-size: 16px;
 }
 
 .bar {
-  height: $bar-height;
+  min-height: $bar-height;
   background-color: $primary;
   font-size: 40px;
   color: #D9D9D9;
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index e7658399..16822a2d 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -66,23 +66,14 @@
 
 .problems_list{
     width: 50%;
+    gap: 10px;
 }
 
-.problem_header{
-    font-size:16px;
-    margin: 0 0 10px 0;
-}
 .no_problems{
     font-style: italic;
     text-align: center;
     margin-top: 10px;
 }
-.textField{
-    align-items: center;
-    margin-bottom: 0;
-    background: none;
-    border: 2px solid #ccc;
-}
 
 .submit_container{
 	display: flex;
@@ -93,6 +84,7 @@
 .affirmation{
     display: flex;
     align-items: center;
+    margin-top: 10px;
     align-self: flex-start;
     gap: 10px;
 }
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 8d74c740..edf4ec9b 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react'
 import {useHistory, useParams} from 'react-router-dom'
 import PageWrapper from 'components/shared/layouts/pageWrapper'
-import TextField from 'components/shared/inputs/textField'
+import AssignmentProblemListItem from 'components/listItems/assignmentProblemListItem'
 import {Assignment, AssignmentProblem, Course, Submission, /*SubmissionScore NonContainerAutoGrader, /*ContainerAutoGrader*/} from 'devu-shared-modules'
 import RequestService from 'services/request.service'
 import ErrorPage from '../errorPage/errorPage'
@@ -222,16 +222,9 @@ const AssignmentDetailPage = () => {
             
             <div className={styles.problems_section}>
                 <div className={styles.problems_list}>
-                    <h3 style={{textAlign:'center'}}>Problems</h3>
+                    <h2>Problems</h2>
                     {assignmentProblems.length != 0 ? (assignmentProblems.map((problem) => (
-                        <div key={problem.id} className={styles.problem}>
-                        <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                        <TextField className={styles.textField}
-                                    placeholder='Answer'
-                                    onChange={handleChange}
-                                    id={problem.problemName}
-                                    sx={{width: '100%', marginLeft : 1/10}}/>
-                        </div>
+                        <AssignmentProblemListItem problem={problem} handleChange={handleChange}/>
                     ))) : <div style={{fontStyle:'italic', textAlign: 'center', marginTop: '10px'}}> No problems yet...</div>}
                     {!(isSubmissionDisabled()) &&assignmentProblems && assignmentProblems.length > 0 ? (
                         <div className = {styles.submit_container}>
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss
index 93fbce60..979f0e57 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.scss
+++ b/devU-client/src/components/pages/courses/courseDetailPage.scss
@@ -1,5 +1,18 @@
 @import 'variables';
 
+.pageWrapper{
+    h3 {
+        font-size: 24px;
+        margin: 10px 0 0 0;
+    }
+    
+    h4 {
+        font-size: 1.0rem;
+        margin: 0;
+        display: inline;
+    }
+}
+
 .courseFormWrapper {
     display: flex;
     margin: 16px 50px;
@@ -78,16 +91,6 @@
     margin-bottom: 20px;
 }
 
-h3 {
-    font-size: 24px;
-    margin: 10px 0 0 0;
-}
-
-h4 {
-    font-size: 1.0rem;
-    margin: 0;
-    display: inline;
-}
 .class_title{
     grid-column-start: 2;
     padding: 0 20px;
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index 0d31fa89..0a583cc1 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -73,7 +73,7 @@ const CourseDetailPage = () => {
     }, []);
 
     return (
-        <PageWrapper>
+        <PageWrapper className={styles.pageWrapper}>
             <div className={styles.courseDetailPage}>
                 {courseInfo ? (
                     <div>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
index a9a5d51c..3085ef7d 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
@@ -120,11 +120,6 @@ input[type='datetime-local'] {
 
 .problem{
     border-bottom: 1px solid #ddd;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    align-items: flex-start;
-    justify-content:center;
 }
 
 
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 46124e63..0b5620db 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -405,8 +405,8 @@ const AssignmentUpdatePage = () => {
                         placeholder='Answer'
                         sx={{width: '100%', marginLeft : 1/10, pointerEvents: 'none'}}/>
               <div style={{margin: '5px 0 10px 0'}}>
-                <Button className={styles.editProblem} onClick={() => { if (problem !== undefined) { handleOpenEditModal(problem) } }}>edit</Button>|
-                <Button className={styles.deleteButton} onClick={() => { if (problem !== undefined && problem.id !== undefined) { handleDeleteProblem(problem.id) } }}>delete</Button>
+                <Button className={styles.editProblem} onClick={() => { if (problem !== undefined) { handleOpenEditModal(problem) } }}>Edit</Button>|
+                <Button className={styles.deleteButton} onClick={() => { if (problem !== undefined && problem.id !== undefined) { handleDeleteProblem(problem.id) } }}>Delete</Button>
               </div>
             </div>
           ))) : <div style={{fontStyle:'italic'}}>No problems yet</div>}
diff --git a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
index fdde2f23..f26e5463 100644
--- a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
@@ -21,8 +21,13 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
         maxScore: '',
     });
 
+    const submittable = () => {
+        if (!formData.title || !formData.maxScore) {return false}
+        else {return true}
+    }
+
     const handleSubmit = () => {
-        if (!formData.title || !formData.maxScore) return;
+        if (!submittable) return;
 
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
@@ -49,7 +54,7 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     };
 
     return (
-        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={onClose} isSubmittable={submittable}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input 
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 0d0233ed..6edd525d 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -26,10 +26,14 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         correctAnswer: '',
         regex: false
     });
+    const submittable = () => {
+        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return false }
+        else { return true }
+    }
 
     const handleSubmit = () => {
         // early return if form not fully filled out
-        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return }
+        if (!submittable) { return }
 
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
@@ -93,42 +97,42 @@ const TextProblemModal = ({ open, onClose }: Props) => {
     }
 
     return (
-        <Modal title="Add Multiple Choice Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+        <Modal title="Add Multiple Choice Problem" isSubmittable={submittable} buttonAction={handleSubmit} open={open} onClose={onClose}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input type="text" id="title" onChange={handleChange}
-                    placeholder='e.g. What is the time complexity of MergeSort?' />
+                    placeholder='e.g. What is the best programming language?' />
             </div>
             <div className="input-group" style={{gap: '5px'}} >
-                <div>Answer Choices:</div>
+                <label>Answer Choices:</label>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
-                    <div>a.</div>
+                    <label>a.</label>
                     <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. Java' />
                     <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <div>b.</div>
+                    <label>b.</label>
                     <input type="text" id="b" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. Python' />
                     <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <div>c.</div>
+                    <label>c.</label>
                     <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. C' />
                     <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <div>d.</div>
+                    <label>d.</label>
                     <input type="text" id="d" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. JavaScript' />
                     <input type="radio" id="d" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
-                    <div>e.</div>
+                    <label>e.</label>
                     <input type="text" id="e" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. ...Matlab?' />
+                    placeholder='e.g. ...MATLAB?' />
                     <input type="radio" id="e" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
index 0d8b4cf1..b8f6faf7 100644
--- a/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/textProblemModal.tsx
@@ -22,9 +22,14 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         regex: false
     });
 
+    const submittable = () => {
+        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return false }
+        else {return true}
+    }
+
     const handleSubmit = () => {
         // early return if form not fully filled out
-        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return }
+        if (!submittable) { return }
 
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
@@ -38,6 +43,10 @@ const TextProblemModal = ({ open, onClose }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
+            metadata: {
+                type: 'Text'
+            } 
+            
         }
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
@@ -72,7 +81,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
     }
 
     return (
-        <Modal title="Add Text Problem" buttonAction={handleSubmit} open={open} onClose={onClose}>
+        <Modal title="Add Text Problem" buttonAction={handleSubmit} open={open} onClose={onClose} isSubmittable={submittable}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input type="text" id="title" onChange={handleChange}
diff --git a/devU-client/src/components/shared/layouts/modal.tsx b/devU-client/src/components/shared/layouts/modal.tsx
index b2444396..1cfe1d46 100644
--- a/devU-client/src/components/shared/layouts/modal.tsx
+++ b/devU-client/src/components/shared/layouts/modal.tsx
@@ -8,9 +8,10 @@ interface ModalProps {
     buttonAction: () => void;
     open: boolean;
     onClose: () => void;
+    isSubmittable?: () => boolean;
 }
 
-const Modal = ({ title, children, buttonAction, open, onClose }: ModalProps) => {
+const Modal = ({ title, children, buttonAction, open, onClose, isSubmittable }: ModalProps) => {
     const [theme, setTheme] = useState(getCssVariables)
 
     useEffect(() => {
@@ -18,7 +19,6 @@ const Modal = ({ title, children, buttonAction, open, onClose }: ModalProps) =>
         observer.observe(document.body, { attributes: true })
         return () => observer.disconnect()
     })
-
     return (
         <Dialog open={open} onClose={onClose} className='modal'
             sx={{
@@ -38,7 +38,7 @@ const Modal = ({ title, children, buttonAction, open, onClose }: ModalProps) =>
                 <button onClick={onClose} aria-label='close' title='close'>✕</button>
             </div>
             {children}
-            <button onClick={buttonAction} className='btnPrimary modalAction'>{title}</button>
+            <button onClick={buttonAction} disabled={isSubmittable ? !isSubmittable() : false} className='btnPrimary modalAction'>{title}</button>
         </Dialog>
     )
 }
diff --git a/devU-client/src/components/utils/userOptionsDropdown.scss b/devU-client/src/components/utils/userOptionsDropdown.scss
index fa742fb8..6391230e 100644
--- a/devU-client/src/components/utils/userOptionsDropdown.scss
+++ b/devU-client/src/components/utils/userOptionsDropdown.scss
@@ -5,6 +5,9 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  //padding: 0 10px;
+  min-width: 100px;
+
 
   outline: none;
 
@@ -30,13 +33,15 @@
 .trigger {
   @extend .button;
 
-  color: #D9D9D9;
-  border-radius: 20px;
-  margin:5px;
-  height: 40px;
+  color: #fff;
+  height: 60px;
+  margin: 0;
+  padding: 0 10px;
+
+  transition: background-color 0.2s ease;
 
   &:hover {
-    opacity: 0.7;
+    background-color: var(--hover-darker);
   }
 }
 
@@ -56,17 +61,19 @@
 }
 
 .menu {
-  width: 100%;
-
+  min-width: 97%;
+  width: inherit;
   position: absolute;
-  top: 50px;
+  top: 60px;
 
   display: flex;
   flex-direction: column;
+  border: 3px solid $primary;
+  border-top: none;
 
-  gap: 2px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
 
-  box-shadow: $box-shadow;
 
   visibility: hidden;
   opacity: 0;
@@ -81,34 +88,38 @@
 
   display: flex;
   align-items: center;
-  padding: 0 6px;
+  padding: 0 10px;
 
-  background-color: $primary;
-  color: $background;
+  background-color: $background;
+  color: $text-color;
 
   height: 50px;
   text-align: left;
+  border-bottom: 1px solid #ddd;
 
   text-decoration: none;
+  transition: background-color 0.2s ease;
 
   &:hover {
-    background: $purple-darker;
+      background-color: var(--hover-darker);
   }
+  
 }
-.dropCourse {
-  @extend .option;
-  background-color: $primary; /* Same as Account and Logout */
-  color: $background; /* Matching the text color */
-  border: none;
-  font-size: 16px;
-  height: 50px;
-  text-align: left;
-  text-decoration: none;
 
-  &:hover {
-    background: $purple-darker;
-  }
-}
+// .dropCourse {
+//   @extend .option;
+//   background-color: $primary; /* Same as Account and Logout */
+//   color: $background; /* Matching the text color */
+//   border: none;
+//   font-size: 16px;
+//   height: 50px;
+//   text-align: left;
+//   text-decoration: none;
+
+//   &:hover {
+//     background: $purple-darker;
+//   }
+// }
 
 @media (max-width: $small) {
   .name {
diff --git a/devU-client/src/components/utils/userOptionsDropdown.tsx b/devU-client/src/components/utils/userOptionsDropdown.tsx
index 2c4290ba..ee505f53 100644
--- a/devU-client/src/components/utils/userOptionsDropdown.tsx
+++ b/devU-client/src/components/utils/userOptionsDropdown.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+//import { Link } from 'react-router-dom';
 import FaIcon from 'components/shared/icons/faIcon';
 import { useAppSelector } from 'redux/hooks';
 import RequestService from 'services/request.service';
@@ -7,6 +7,8 @@ import styles from './userOptionsDropdown.scss';
 import { useParams, useHistory } from 'react-router-dom'
 import { SET_ALERT } from 'redux/types/active.types';
 import { useActionless } from 'redux/hooks';
+import { Link } from 'react-router-dom';
+
 
 const UserOptionsDropdown = () => {
     const name = useAppSelector((state) => state.user.preferredName || state.user.email);
@@ -44,14 +46,16 @@ const UserOptionsDropdown = () => {
             </button>
 
             <div className={styles.menu}>
-                <Link to={`/user/${userId}/update`} className={styles.option}>
+                <Link className={styles.option} to={`/user/${userId}/update`}>
                     Account
                 </Link>
-
                 <button className={styles.option} onClick={handleDropCourse}>
                    Drop Course
                 </button>
-                <button onClick={handleLogout} className={styles.option}>
+                <button onClick={handleLogout} className={styles.option} style={{borderBottom: 'none',
+                    borderBottomRightRadius: '7px',
+                    borderBottomLeftRadius: '7px'
+                    }}>
                     Logout
                 </button>
             </div>

From 0d7495e7541bfb205da7115f96e1e34bbc408df1 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Wed, 26 Mar 2025 21:06:56 -0400
Subject: [PATCH 06/12] progress on getting type from assignment, for some
 reason ncag has metadata as a string which makes this harder, will try to
 troubleshoot tmrw

---
 .../listItems/assignmentProblemListItem.tsx   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index a9875137..44fb990b 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
-
-import {AssignmentProblem} from 'devu-shared-modules'
+import React, { useState, useEffect} from 'react'
+import { useParams } from 'react-router-dom'
+import RequestService from 'services/request.service'
+import {AssignmentProblem, NonContainerAutoGrader} from 'devu-shared-modules'
 
 import TextField from 'components/shared/inputs/textField'
 
@@ -13,6 +14,24 @@ type Props = {
 }
 
 const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
+    const { courseId } = useParams<{ courseId: string }>()
+    const [ncags, setNcags] = useState<NonContainerAutoGrader[]>([])
+    //const type = ncags.at(0)?.metadata
+
+    const fetchNcags = async() => {
+        await RequestService.get(`/api/course/${courseId}/assignment/${problem.assignmentId}/non-container-auto-graders`).then((res) => setNcags(res))
+    }
+
+    useEffect(() => {
+        fetchNcags()
+    }, [])
+    useEffect(() => {
+        if (ncags && ncags.length > 0){
+            console.log(ncags)
+            const meta = ncags.at(0)?.metadata // need help here
+            console.log(meta)
+        }
+    }, [ncags])
 
     return (
         <div key={problem.id} className={styles.problem}>

From 34efc8bf50c0848124ab7be58d19f4ba3242cb05 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Thu, 27 Mar 2025 11:59:57 -0400
Subject: [PATCH 07/12] typing worksgit add . now just need to make the
 interface D:

---
 .../listItems/assignmentProblemListItem.tsx   | 32 ++++++++++++++-----
 .../forms/assignments/assignmentFormPage.tsx  |  2 +-
 .../forms/assignments/multipleChoiceModal.tsx | 10 +++---
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 44fb990b..12fc44d7 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -25,15 +25,26 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
     useEffect(() => {
         fetchNcags()
     }, [])
-    useEffect(() => {
+
+    const getMeta = () => {
         if (ncags && ncags.length > 0){
-            console.log(ncags)
-            const meta = ncags.at(0)?.metadata // need help here
-            console.log(meta)
-        }
-    }, [ncags])
+            const ncag = ncags.find(ncag => ncag.question == problem.problemName)
+            if (!ncag) {
+                return undefined
+            }
+            return JSON.parse(ncag.metadata)
+        } 
+    }
 
-    return (
+    const getType = () => {
+        const meta = getMeta()
+        if (meta){
+            return meta.type
+        } 
+    }
+
+    if (getType() == "Text") {
+        return (
         <div key={problem.id} className={styles.problem}>
             <h4 className={styles.problem_header}>{problem.problemName}</h4>
             <TextField className={styles.textField}
@@ -42,7 +53,12 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
                 id={problem.problemName}
                 sx={{width: '100%', marginLeft : 1/10}}/>
         </div>
-    )
+    )}
+    else {
+        return (<div>
+            Not a text problem!
+        </div>)
+    }
 }
 
 
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
index 849d375b..104a955d 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
@@ -144,7 +144,7 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
                     <input type='date' id="due_date" onChange={handleDueDateChange} />
                 </div>
                 <div>
-                    <label htmlFor="end_date">End Date:<span>(optional)</span></label>
+                    <label htmlFor="end_date">End Date:</label>
                     <br />
                     <input type='date' id="end_date" onChange={handleEndDateChange} />
                 </div>
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 6edd525d..38b714c4 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -35,6 +35,10 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         // early return if form not fully filled out
         if (!submittable) { return }
 
+        const meta = new Map()
+        meta.set("type", "MCQ")
+        meta.set("options", options)
+
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
             problemName: formData.title,
@@ -47,10 +51,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
-            metadata: {
-                type: 'MCQ',
-                options: options
-            } 
+            metadata: meta
         }
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
@@ -92,7 +93,6 @@ const TextProblemModal = ({ open, onClose }: Props) => {
 
     const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const value = e.target.id
-        console.log("CORRECT: " + value)
         setFormData(prevState => ({ ...prevState, correctAnswer: value }))
     }
 

From cb00552475c14fe857b18f828cf2c0db72efd145 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Thu, 27 Mar 2025 16:24:49 -0400
Subject: [PATCH 08/12] started mcq rendering, type distinction finished

---
 .../listItems/assignmentProblemListItem.tsx   | 38 ++++++++++++-------
 .../assignments/assignmentUpdatePage.tsx      |  2 +-
 .../forms/assignments/multipleChoiceModal.tsx |  6 +--
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 12fc44d7..af16b5f0 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -16,11 +16,13 @@ type Props = {
 const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
     const { courseId } = useParams<{ courseId: string }>()
     const [ncags, setNcags] = useState<NonContainerAutoGrader[]>([])
+
     //const type = ncags.at(0)?.metadata
 
     const fetchNcags = async() => {
         await RequestService.get(`/api/course/${courseId}/assignment/${problem.assignmentId}/non-container-auto-graders`).then((res) => setNcags(res))
     }
+    
 
     useEffect(() => {
         fetchNcags()
@@ -29,21 +31,21 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
     const getMeta = () => {
         if (ncags && ncags.length > 0){
             const ncag = ncags.find(ncag => ncag.question == problem.problemName)
-            if (!ncag) {
+            if (!ncag || !ncag.metadata) {
                 return undefined
             }
             return JSON.parse(ncag.metadata)
         } 
     }
-
-    const getType = () => {
-        const meta = getMeta()
-        if (meta){
-            return meta.type
-        } 
+    const meta = getMeta()
+    if (!meta || !meta.type){
+        return (<div className={styles.problem}>
+            <h4></h4>
+        </div>)
     }
 
-    if (getType() == "Text") {
+    const type = meta.type
+    if (type == "Text") {
         return (
         <div key={problem.id} className={styles.problem}>
             <h4 className={styles.problem_header}>{problem.problemName}</h4>
@@ -53,12 +55,22 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
                 id={problem.problemName}
                 sx={{width: '100%', marginLeft : 1/10}}/>
         </div>
-    )}
-    else {
-        return (<div>
-            Not a text problem!
-        </div>)
+    )} 
+    else if(type == "MCQ") {
+        const options = meta.options
+        if (!options){
+            return <div></div>
+        }
+        return (
+            <div key={problem.id} className={styles.problem}>
+                <h4 className={styles.problem_header}>{problem.problemName}</h4>
+                {Object.keys(options).map((key : string) => (<div key={key}><input type='checkbox'></input> {options[key]}</div>))}
+            </div>)
     }
+    else {
+        return(
+            <div>Unknown type, something is wrong on the backend!</div>)
+        }
 }
 
 
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 0b5620db..5e930f10 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -353,7 +353,7 @@ const AssignmentUpdatePage = () => {
             {(files.length != 0) ? (
               <div className={styles.filesList}>
                 <span>Files:</span> 
-                {files.slice(0,-1).map((file, index) => (
+                {files.slice(0,-1).map((file, index) => ( // I forget why I did this, yell at me if I forget to clarify this in a comment - Diego
                 <div key={index}>
                   <span>&nbsp;{`${file.name},`}</span>
                 </div>))}
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index 38b714c4..e501070d 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -35,10 +35,6 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         // early return if form not fully filled out
         if (!submittable) { return }
 
-        const meta = new Map()
-        meta.set("type", "MCQ")
-        meta.set("options", options)
-
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
             problemName: formData.title,
@@ -51,7 +47,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
-            metadata: meta
+            metadata: {type: "MCQ", options: options}
         }
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)

From 463d349d8963b76f703d47efcf0821beeedde4a4 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Fri, 28 Mar 2025 10:23:23 -0400
Subject: [PATCH 09/12] works! selecting the correct mcq answer provides proper
 points

---
 .../listItems/assignmentProblemListItem.scss  |  9 ++++-
 .../listItems/assignmentProblemListItem.tsx   | 37 ++++++++++++-------
 .../assignments/assignmentDetailPage.tsx      | 14 +++----
 3 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
index f41e0694..24667fdb 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.scss
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -1,3 +1,4 @@
+@import 'variables';
 
 
 .problem_header{
@@ -14,7 +15,13 @@
 
 .textField{
     align-items: center;
-    margin-bottom: 0;
+    font-family: $font-family;
+    font-size: 16px;
     background: none;
     border: 2px solid #ccc;
+    width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    min-height: 50px;
+    padding: 10px
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index af16b5f0..c0251714 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -3,17 +3,15 @@ import { useParams } from 'react-router-dom'
 import RequestService from 'services/request.service'
 import {AssignmentProblem, NonContainerAutoGrader} from 'devu-shared-modules'
 
-import TextField from 'components/shared/inputs/textField'
-
-
 import styles from './assignmentProblemListItem.scss'
 
 type Props = {
     problem: AssignmentProblem
-    handleChange: (value: string, e : React.ChangeEvent<HTMLInputElement>) => void
+    handleChange: (e : React.ChangeEvent<HTMLInputElement>) => void
+    disabled?: boolean
 }
 
-const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
+const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) => {
     const { courseId } = useParams<{ courseId: string }>()
     const [ncags, setNcags] = useState<NonContainerAutoGrader[]>([])
 
@@ -22,11 +20,6 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
     const fetchNcags = async() => {
         await RequestService.get(`/api/course/${courseId}/assignment/${problem.assignmentId}/non-container-auto-graders`).then((res) => setNcags(res))
     }
-    
-
-    useEffect(() => {
-        fetchNcags()
-    }, [])
 
     const getMeta = () => {
         if (ncags && ncags.length > 0){
@@ -37,6 +30,12 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
             return JSON.parse(ncag.metadata)
         } 
     }
+    
+
+    useEffect(() => {
+        fetchNcags()
+    }, [])
+
     const meta = getMeta()
     if (!meta || !meta.type){
         return (<div className={styles.problem}>
@@ -49,11 +48,13 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
         return (
         <div key={problem.id} className={styles.problem}>
             <h4 className={styles.problem_header}>{problem.problemName}</h4>
-            <TextField className={styles.textField}
+            <input className={styles.textField}
+                type='text'
                 placeholder='Answer'
-                onChange={handleChange}
+                onChange={(e) => handleChange(e)}
+                disabled={disabled ?? false}
                 id={problem.problemName}
-                sx={{width: '100%', marginLeft : 1/10}}/>
+                />
         </div>
     )} 
     else if(type == "MCQ") {
@@ -64,7 +65,15 @@ const AssignmentProblemListItem = ({problem, handleChange}: Props) => {
         return (
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
-                {Object.keys(options).map((key : string) => (<div key={key}><input type='checkbox'></input> {options[key]}</div>))}
+                {Object.keys(options).map((key : string) => (
+                    <div key={key}>
+                        <input id={problem.problemName} 
+                        type='radio' 
+                        name='answer'
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
+                    </div>))}
             </div>)
     }
     else {
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index edf4ec9b..485e29b9 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -27,7 +27,6 @@ const AssignmentDetailPage = () => {
     const { assignmentId, courseId } = useParams<{assignmentId: string, courseId: string}>()
     const userId = useAppSelector((store) => store.user.id)
     const role = useAppSelector((store) => store.roleMode)
-    role;
 
     const [error, setError] = useState(null)
     const [loading, setLoading] = useState(true)
@@ -35,8 +34,6 @@ const AssignmentDetailPage = () => {
     const [file, setFile] = useState<File | null>()
     const [assignmentProblems, setAssignmentProblems] = useState(new Array<AssignmentProblem>())
     const [submissions, setSubmissions] = useState(new Array<Submission>())
-    //const [submissionScores, setSubmissionScores] = useState(new Array<SubmissionScore>())
-    // const [submissionProblemScores, setSubmissionProblemScores] = useState(new Array<SubmissionProblemScore>())
     const [assignment, setAssignment] = useState<Assignment>()
     const [course, setCourse] = useState<Course>()
     const [notClickable, setClickable] = useState(true);
@@ -48,7 +45,6 @@ const AssignmentDetailPage = () => {
     // const [ setNonContainerAutograders] = useState(new Array <NonContainerAutoGrader>())
     const [showScoreboard, setShowScoreboard] = useState(false);
     setShowScoreboard;
-    assignmentProblems;
     const location = useLocation();
 
     useEffect(() => {
@@ -101,14 +97,14 @@ const AssignmentDetailPage = () => {
 
     if (loading) return <LoadingOverlay delay={250} />
     if (error) return <ErrorPage error={error} />
-
-    const handleChange = (value: string, e : React.ChangeEvent<HTMLInputElement>) => {
-        console.log(value)
+    
+    const handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value
         const key = e.target.id
-        setFormData(prevState => ({...prevState,[key] : e.target.value}))    
+        setFormData(prevState => ({...prevState,[key] : value}))    
+        console.log(formData)
     }
 
-
     const handleFileChange = (e : React.ChangeEvent<HTMLInputElement>) => {
         setFile(e.target.files?.item(0))
     }

From f3e61cf95baa1485e258837dc62aaa82b1f9da4e Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Fri, 28 Mar 2025 11:49:07 -0400
Subject: [PATCH 10/12] made a pretty checkbox and it works good but still
 doesn't support multiple correct answers but lowkey might just leave that for
 later

---
 devU-client/src/assets/variables.scss         |  1 +
 .../listItems/assignmentProblemListItem.scss  | 60 +++++++++++++++++--
 .../listItems/assignmentProblemListItem.tsx   |  9 +--
 .../listItems/simpleAssignmentListItem.tsx    |  3 +-
 .../assignments/assignmentDetailPage.scss     | 19 ++++--
 .../assignments/assignmentDetailPage.tsx      |  3 +-
 .../pages/courses/courseDetailPage.tsx        |  3 +-
 7 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/devU-client/src/assets/variables.scss b/devU-client/src/assets/variables.scss
index cdc4cb9b..aa48e2ce 100644
--- a/devU-client/src/assets/variables.scss
+++ b/devU-client/src/assets/variables.scss
@@ -39,6 +39,7 @@ $grey: var(--grey);
 
 $blue-lighter: var(--blue-lighter);
 $blue: var(--blue);
+$link-blue: var(--link-blue);
 
 $red-lighter: var(--red-lighter);
 $red: var(--red);
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
index 24667fdb..c5174ab8 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.scss
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -14,14 +14,64 @@
 
 
 .textField{
-    align-items: center;
     font-family: $font-family;
     font-size: 16px;
     background: none;
     border: 2px solid #ccc;
-    width: 100%;
+    color: $text-color;
     border-radius: 10px;
-    overflow: hidden;
-    min-height: 50px;
-    padding: 10px
+    padding: 10px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.mcqLabel{
+    display: block;
+    position: relative;
+    padding-left: 25px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    width: fit-content;
+    input {
+        position: absolute;
+        opacity: 0;
+        height: 0;
+        width: 0;
+    }
+
+
+    .checkbox {
+        position: absolute;
+        transition: all .1s ease;
+        top: 3px;
+        left: 0;
+        height: 18px;
+        width: 18px;
+        background-color: $background;
+        border: 1px solid #999;
+        border-radius: 100px;
+        margin-left: 0;
+      }
+
+    
+    .checkbox::after {
+        width: 12px;
+        height: 12px;
+        border-radius: 100%;
+        content: "";
+        position: absolute;
+        display: none;
+      }
+
+
+    input:checked {
+        ~ .checkbox{
+        background-color: $primary;
+        border: 1px solid $primary;
+        }
+        ~ .checkbox::after {
+            display: block;
+            border: 3px solid #fff;
+        }
+    }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index c0251714..4ae980ee 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -66,14 +66,15 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
                 {Object.keys(options).map((key : string) => (
-                    <div key={key}>
+                    <label key={key} className={styles.mcqLabel}>
                         <input id={problem.problemName} 
-                        type='radio' 
-                        name='answer'
+                        type='checkbox' 
+                        name={`${key}_answer`}
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
-                    </div>))}
+                        <span className={styles.checkbox}></span>
+                    </label>))}
             </div>)
     }
     else {
diff --git a/devU-client/src/components/listItems/simpleAssignmentListItem.tsx b/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
index a1dd63ef..137d4489 100644
--- a/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
+++ b/devU-client/src/components/listItems/simpleAssignmentListItem.tsx
@@ -14,7 +14,8 @@ const SimpleAssignmentListItem = ({assignment}: Props) => (
                      className={styles.title} tagStyle={styles.tag} containerStyle={styles.container}>
         <div className={styles.subText}>{assignment.name}</div>
         <div className={styles.meta}>
-            <span style={{fontWeight:'700'}}>Due:&nbsp;</span>{wordPrintDate(assignment.dueDate)} | &nbsp;
+            <span style={{fontWeight:'700'}}>Due:&nbsp;</span>{wordPrintDate(assignment.dueDate)}
+            <span>&nbsp;|&nbsp;</span>
             <span style={{fontWeight:'700'}}>End:&nbsp;</span>{wordPrintDate(assignment.endDate)}
         </div>
 
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index 16822a2d..9379b170 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -12,7 +12,6 @@
 .details{
     display: grid;
     grid-template-columns: 1fr 1fr;
-    width: 100%;
     gap: 10px;
     margin-top: 10px;
 }
@@ -29,10 +28,12 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
-    width: 95%;
+    margin-left: auto;
     padding: 20px;
+    width: 100%;
+    box-sizing: border-box;
     font-size: 16px;
-    background-color: $secondary-lighter;
+    background-color: $list-item-background-hover;
     border-radius: 20px
 }
 
@@ -61,6 +62,7 @@
     flex-direction: row;
     align-items: center;
     gap:10px;
+    flex-wrap: wrap;
     justify-content: flex-end;
 }
 
@@ -88,10 +90,16 @@
     align-self: flex-start;
     gap: 10px;
 }
+
 .affirmText{
     color: $text-color;
 }
 
+.handinHistory{
+    text-decoration: underline;
+    cursor: pointer
+}
+
 
 .line {
     border: none;
@@ -241,7 +249,7 @@
     padding: 10px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: $extreme) {
     .wrap {
         flex-direction: column;
         align-items: center;
@@ -276,6 +284,9 @@
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	    margin: 20px;
     }
+    .problems_list{
+        width: 100%;
+    }
 }
 
 @media (max-width: 370px) {
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 485e29b9..31cb7f4e 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -102,7 +102,6 @@ const AssignmentDetailPage = () => {
         const value = e.target.value
         const key = e.target.id
         setFormData(prevState => ({...prevState,[key] : value}))    
-        console.log(formData)
     }
 
     const handleFileChange = (e : React.ChangeEvent<HTMLInputElement>) => {
@@ -194,7 +193,7 @@ const AssignmentDetailPage = () => {
                     </span>
                     <span>
                         <a onClick={() => history.push(`/course/${courseId}/assignment/${assignmentId}/submissions`)}
-                        style={{color:'#075D92', textDecoration: 'underline', cursor: 'pointer'}}>View Handin History</a>
+                        className={styles.handinHistory}>View Handin History</a>
                     </span>
                 </div>
             </div>
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
index 0a583cc1..0f5b9420 100644
--- a/devU-client/src/components/pages/courses/courseDetailPage.tsx
+++ b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -149,7 +149,8 @@ const CourseDetailPage = () => {
                                                                   secondary={
                                                                       <React.Fragment>
                                                                           <div className={styles.due_end}>
-                                                                            <span style={{fontWeight:'700'}}>Due:&nbsp;</span>{wordPrintDate(assignment.dueDate)} | &nbsp;
+                                                                            <span style={{fontWeight:'700'}}>Due:&nbsp;</span>{wordPrintDate(assignment.dueDate)}
+                                                                            <span>&nbsp;|&nbsp;</span>
                                                                             <span style={{fontWeight:'700'}}>End:&nbsp;</span>{wordPrintDate(assignment.endDate)}
                                                                         </div>
                                                                       </React.Fragment>

From d6fae10260db2e83bd4179e7504d9e63df3f6df0 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Fri, 28 Mar 2025 13:44:02 -0400
Subject: [PATCH 11/12] added new mcq to edit page awww yeah

---
 devU-client/src/assets/global.scss            |  5 ++++
 .../listItems/assignmentProblemListItem.scss  |  8 +++---
 .../listItems/assignmentProblemListItem.tsx   | 12 +++++----
 .../assignments/assignmentDetailPage.tsx      |  7 ++++--
 .../assignments/assignmentUpdatePage.tsx      | 25 +++++++++----------
 5 files changed, 34 insertions(+), 23 deletions(-)

diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
index 9a7847e2..3ae2d520 100644
--- a/devU-client/src/assets/global.scss
+++ b/devU-client/src/assets/global.scss
@@ -23,6 +23,11 @@
     text-align: center;
   }
 
+  hr{
+    border: 1px solid #ddd;
+    margin: 0;
+  }
+
   a {
     color: var(--link-blue);
   }
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
index c5174ab8..901655fc 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.scss
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -8,8 +8,7 @@
 
 .problem{
     gap: 10px;
-    padding: 15px 0;
-    border-bottom: 1px solid #ddd;
+    padding: 10px 0;
 }
 
 
@@ -29,7 +28,7 @@
     display: block;
     position: relative;
     padding-left: 25px;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
     cursor: pointer;
     width: fit-content;
     input {
@@ -74,4 +73,7 @@
             border: 3px solid #fff;
         }
     }
+    &:last-of-type{
+        margin-bottom: 0;
+    }
 }
\ No newline at end of file
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index 4ae980ee..b6df020c 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -7,7 +7,7 @@ import styles from './assignmentProblemListItem.scss'
 
 type Props = {
     problem: AssignmentProblem
-    handleChange: (e : React.ChangeEvent<HTMLInputElement>) => void
+    handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
     disabled?: boolean
 }
 
@@ -51,8 +51,9 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
             <input className={styles.textField}
                 type='text'
                 placeholder='Answer'
-                onChange={(e) => handleChange(e)}
+                onChange={handleChange ?? undefined}
                 disabled={disabled ?? false}
+                
                 id={problem.problemName}
                 />
         </div>
@@ -66,14 +67,15 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
             <div key={problem.id} className={styles.problem}>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
                 {Object.keys(options).map((key : string) => (
-                    <label key={key} className={styles.mcqLabel}>
-                        <input id={problem.problemName} 
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} // actual input
                         type='checkbox' 
                         name={`${key}_answer`}
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
-                        <span className={styles.checkbox}></span>
+
+                        <span className={styles.checkbox}></span>{/* custom checkbox */}
                     </label>))}
             </div>)
     }
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 31cb7f4e..0b9065f9 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -219,9 +219,12 @@ const AssignmentDetailPage = () => {
                 <div className={styles.problems_list}>
                     <h2>Problems</h2>
                     {assignmentProblems.length != 0 ? (assignmentProblems.map((problem) => (
-                        <AssignmentProblemListItem problem={problem} handleChange={handleChange}/>
+                        <>
+                            <AssignmentProblemListItem problem={problem} handleChange={handleChange}/>
+                            <hr/>
+                        </>
                     ))) : <div style={{fontStyle:'italic', textAlign: 'center', marginTop: '10px'}}> No problems yet...</div>}
-                    {!(isSubmissionDisabled()) &&assignmentProblems && assignmentProblems.length > 0 ? (
+                    {!(isSubmissionDisabled()) && assignmentProblems && assignmentProblems.length > 0 ? (
                         <div className = {styles.submit_container}>
                             <div className={styles.affirmation}>
                                 <input type='checkbox' onClick={handleCheckboxChange}/>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index 5e930f10..e7c9a347 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -21,6 +21,7 @@ import ContainerAutoGraderModal from '../containers/containerAutoGraderModal';
 import TextProblemModal from './textProblemModal'
 import CodeProblemModal from './codeProblemModal'
 import MultipleChoiceModal from './multipleChoiceModal'
+import AssignmentProblemListItem from 'components/listItems/assignmentProblemListItem'
 
 
 
@@ -397,20 +398,18 @@ const AssignmentUpdatePage = () => {
             <span style={{color: 'var(--grey)'}}> Code Grader</span></div>))}
             {nonContainerAutograders.length == 0 && containerAutograders.length == 0 && <div style={{fontStyle:'italic'}}>No graders yet</div>}
           <h2 className={styles.header}>Problems</h2>
-
-          {assignmentProblems.length != 0 ? (assignmentProblems.map((problem) => (
-            <div key={problem.id} className={styles.problem}>
-              <h3 style={{margin: '0 0 10px 0'}}>{problem.problemName}</h3>
-              <TextField className={styles.textField}
-                        placeholder='Answer'
-                        sx={{width: '100%', marginLeft : 1/10, pointerEvents: 'none'}}/>
-              <div style={{margin: '5px 0 10px 0'}}>
-                <Button className={styles.editProblem} onClick={() => { if (problem !== undefined) { handleOpenEditModal(problem) } }}>Edit</Button>|
-                <Button className={styles.deleteButton} onClick={() => { if (problem !== undefined && problem.id !== undefined) { handleDeleteProblem(problem.id) } }}>Delete</Button>
+          <div>
+            {assignmentProblems.length != 0 ? (assignmentProblems.map((problem) => (
+              <div>
+              <AssignmentProblemListItem problem={problem} disabled={true}/>
+                <div style={{margin: '5px 0 10px 0'}}>
+                  <Button className={styles.editProblem} onClick={() => { if (problem !== undefined) { handleOpenEditModal(problem) } }}>Edit</Button>|
+                  <Button className={styles.deleteButton} onClick={() => { if (problem !== undefined && problem.id !== undefined) { handleDeleteProblem(problem.id) } }}>Delete</Button>
+                </div>
+                <hr/>
               </div>
-            </div>
-          ))) : <div style={{fontStyle:'italic'}}>No problems yet</div>}
-
+            ))) : <div style={{fontStyle:'italic'}}>No problems yet</div>}
+          </div>
         </div>
       </div>
       <div style={{ display: 'flex', justifyContent: 'center', margin: '20px'}}>

From 6ba41083e52546f1c90b0e2af584dc0ce7bba869 Mon Sep 17 00:00:00 2001
From: Diego Cabiya <dvcabiya@gmail.com>
Date: Sat, 29 Mar 2025 13:29:35 -0400
Subject: [PATCH 12/12] multiple answers now supported bb yeaaahhhhhhh

---
 .../listItems/assignmentProblemListItem.tsx   |  5 +-
 .../assignments/assignmentDetailPage.scss     |  1 +
 .../assignments/assignmentDetailPage.tsx      | 53 ++++++++++++++-----
 .../assignments/assignmentUpdatePage.scss     |  6 +--
 .../assignments/assignmentUpdatePage.tsx      |  6 +--
 .../forms/assignments/multipleChoiceModal.tsx | 51 +++++++++++-------
 .../components/utils/userOptionsDropdown.scss |  2 +-
 7 files changed, 81 insertions(+), 43 deletions(-)

diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
index b6df020c..a2b811c8 100644
--- a/devU-client/src/components/listItems/assignmentProblemListItem.tsx
+++ b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -38,8 +38,8 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
 
     const meta = getMeta()
     if (!meta || !meta.type){
-        return (<div className={styles.problem}>
-            <h4></h4>
+        return (
+        <div className={styles.problem}>
         </div>)
     }
 
@@ -70,7 +70,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                     <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
                         <input id={problem.problemName} // actual input
                         type='checkbox' 
-                        name={`${key}_answer`}
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
index 9379b170..dfe21f0d 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.scss
@@ -20,6 +20,7 @@
     width: 100%;
     text-align: left;
     flex-direction: column;
+    overflow-wrap: anywhere;
     display: flex;
     align-items: flex-start;
 }
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
index 0b9065f9..2866b4bd 100644
--- a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
+++ b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'
 import {useHistory, useParams} from 'react-router-dom'
 import PageWrapper from 'components/shared/layouts/pageWrapper'
 import AssignmentProblemListItem from 'components/listItems/assignmentProblemListItem'
-import {Assignment, AssignmentProblem, Course, Submission, /*SubmissionScore NonContainerAutoGrader, /*ContainerAutoGrader*/} from 'devu-shared-modules'
+import {Assignment, AssignmentProblem, Course, Submission,  NonContainerAutoGrader /*SubmissionScore, /*ContainerAutoGrader*/} from 'devu-shared-modules'
 import RequestService from 'services/request.service'
 import ErrorPage from '../errorPage/errorPage'
 import LoadingOverlay from 'components/shared/loaders/loadingOverlay'
@@ -30,7 +30,7 @@ const AssignmentDetailPage = () => {
 
     const [error, setError] = useState(null)
     const [loading, setLoading] = useState(true)
-    const [formData, setFormData] = useState({})
+    const [formData, setFormData] = useState<{ [key: string]: string }>({})
     const [file, setFile] = useState<File | null>()
     const [assignmentProblems, setAssignmentProblems] = useState(new Array<AssignmentProblem>())
     const [submissions, setSubmissions] = useState(new Array<Submission>())
@@ -42,7 +42,7 @@ const AssignmentDetailPage = () => {
 
     // const [containerAutograder, setContainerAutograder] = useState<ContainerAutoGrader | null>()
     // const contaierAutograder = false; //TODO: Use the above commented out code to get the container autograder
-    // const [ setNonContainerAutograders] = useState(new Array <NonContainerAutoGrader>())
+    const [nonContainerAutograders, setNonContainerAutograders] = useState(new Array <NonContainerAutoGrader>())
     const [showScoreboard, setShowScoreboard] = useState(false);
     setShowScoreboard;
     const location = useLocation();
@@ -82,9 +82,9 @@ const AssignmentDetailPage = () => {
             // const containerAutograder = (await RequestService.get<ContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`)).pop() ?? null
             // setContainerAutograder(containerAutograder)
 
-            // const nonContainers = await RequestService.get<NonContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`)
-            // setNonContainerAutograders(nonContainers)
-
+            const nonContainers = await RequestService.get<NonContainerAutoGrader[]>(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`)
+            setNonContainerAutograders(nonContainers)
+            nonContainerAutograders
 
         } catch (err:any) {
             setError(err)
@@ -98,11 +98,37 @@ const AssignmentDetailPage = () => {
     if (loading) return <LoadingOverlay delay={250} />
     if (error) return <ErrorPage error={error} />
     
-    const handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {
-        const value = e.target.value
-        const key = e.target.id
-        setFormData(prevState => ({...prevState,[key] : value}))    
-    }
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const type = e.target.type;
+        const value = e.target.value;
+        const key = e.target.id;
+    
+        if (type === 'checkbox') { // behavior for multiple choic questions
+            const newState = e.target.checked;
+    
+            setFormData(prevState => {
+                const currentValue = prevState[key] || ""; 
+                let res = '';
+                if (newState) {
+                    res = currentValue + value
+                } else {
+                    res = currentValue.replace(value, "")
+                }
+                res = res.split('').sort().join('') // makes selecting answers in any order correct
+                return {
+                    ...prevState,
+                    [key]: res
+                };
+            });
+
+        } else {
+            setFormData(prevState => ({
+                ...prevState,
+                [key]: value
+            }));
+        }
+    };
+
 
     const handleFileChange = (e : React.ChangeEvent<HTMLInputElement>) => {
         setFile(e.target.files?.item(0))
@@ -116,7 +142,7 @@ const AssignmentDetailPage = () => {
         let response;
         const contentField = {
             filepaths : [],
-            form : formData,
+            form : formData
         }
         const submission = {
             userId : userId,
@@ -125,6 +151,8 @@ const AssignmentDetailPage = () => {
             content : JSON.stringify(contentField),
         }
 
+        console.log(contentField)
+
         setLoading(true)
 
         try {
@@ -166,7 +194,6 @@ const AssignmentDetailPage = () => {
     };
     isSubmissionDisabled;
     handleFileChange;
-    handleSubmit;
 
 
     return(
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
index 3085ef7d..25ba08f4 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.scss
@@ -118,10 +118,6 @@ input[type='datetime-local'] {
     border-radius: 10px;
 }
 
-.problem{
-    border-bottom: 1px solid #ddd;
-}
-
 
 .header {
     text-align: left;
@@ -131,7 +127,7 @@ input[type='datetime-local'] {
 
 .editProblem {
     margin-right: 5px;
-    color: #075D92;
+    color: $link-blue;
     padding: 0;
     background: none;
     text-decoration: underline;
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
index e7c9a347..7173c189 100644
--- a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
+++ b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -116,6 +116,8 @@ const AssignmentUpdatePage = () => {
       if(files.length < 5) {
         setFiles([...files, file])
       }
+      console.log(files)
+
     }
   }
 
@@ -245,8 +247,6 @@ const AssignmentUpdatePage = () => {
   // }
 
   const handleDeleteProblem = (problemId: number) => {
-    const problem = RequestService.get(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problemId}`)
-    console.log(problem)
   //  const idsToDelete = nonContainerAutograders.filter(ncag => ncag.)
     RequestService.delete(`/api/course/${courseId}/assignment/${currentAssignmentId}/assignment-problems/${problemId}`)
       .then(() => {
@@ -354,7 +354,7 @@ const AssignmentUpdatePage = () => {
             {(files.length != 0) ? (
               <div className={styles.filesList}>
                 <span>Files:</span> 
-                {files.slice(0,-1).map((file, index) => ( // I forget why I did this, yell at me if I forget to clarify this in a comment - Diego
+                {files.slice(0,-1).map((file, index) => ( // For some reason the most recent file appears twice, so I did this as a quick fix, should be fixed in future
                 <div key={index}>
                   <span>&nbsp;{`${file.name},`}</span>
                 </div>))}
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
index e501070d..25f8d841 100644
--- a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
+++ b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -11,26 +11,35 @@ interface Props {
     onClose: () => void;
 }
 
-const TextProblemModal = ({ open, onClose }: Props) => {
+const MultipleChoiceModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT)
     const { assignmentId } = useParams<{ assignmentId: string }>()
     const { courseId } = useParams<{ courseId: string }>()
-    const [options, setOptions] = useState({
-        a: '',
-        b: '',
-        c: ''
-    })
+    const [options, setOptions] = useState({})
     const [formData, setFormData] = useState({
         title: '',
         maxScore: '',
-        correctAnswer: '',
+        correctAnswer: new Map(),
+        numCorrect: 0,
         regex: false
     });
+
     const submittable = () => {
-        if (!formData.title || !formData.maxScore || !formData.correctAnswer) { return false }
+        if (!formData.title || !formData.maxScore || formData.numCorrect == 0) { return false }
         else { return true }
     }
 
+    const createCorrectString = () => {
+        var correctString = ''
+        formData.correctAnswer.forEach((val, key ) => {
+            if (val === true){
+                correctString += key
+            }
+        })
+        correctString = correctString.split('').sort().join('') // makes selecting answers in any order correct
+        return(correctString)
+    }
+
     const handleSubmit = () => {
         // early return if form not fully filled out
         if (!submittable) { return }
@@ -44,7 +53,7 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         const graderFormData = {
             assignmentId: parseInt(assignmentId),
             question: formData.title,
-            correctString: formData.correctAnswer,
+            correctString: createCorrectString(),
             score: Number(formData.maxScore),
             isRegex: formData.regex,
             metadata: {type: "MCQ", options: options}
@@ -69,6 +78,8 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 setAlert({ autoDelete: false, type: 'error', message })
             })
         
+        console.log(graderFormData)
+
         // close modal
         onClose();
     }
@@ -87,9 +98,14 @@ const TextProblemModal = ({ open, onClose }: Props) => {
         setOptions(prevState => ({ ...prevState, [key]: value }))
     }
 
-    const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const value = e.target.id
-        setFormData(prevState => ({ ...prevState, correctAnswer: value }))
+        const newState = e.target.checked
+        setFormData(prevState => {
+            const correctAnswers = new Map (prevState.correctAnswer)
+            correctAnswers.set(value, newState)
+            return { ...prevState, correctAnswer: correctAnswers, numCorrect: formData.numCorrect + (newState ? 1 : -1)}
+        })
     }
 
     return (
@@ -105,31 +121,31 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                     <label>a.</label>
                     <input type="text" id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. Java' />
-                    <input type="radio" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
+                    <input type="checkbox" id="a" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                     <label>b.</label>
                     <input type="text" id="b" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. Python' />
-                    <input type="radio" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
+                    <input type="checkbox" id="b" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                     <label>c.</label>
                     <input type="text" id="c" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. C' />
-                    <input type="radio" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
+                    <input type="checkbox" id="c" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                     <label>d.</label>
                     <input type="text" id="d" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. JavaScript' />
-                    <input type="radio" id="d" onChange={handleCorrectAnswerChange} name="correct"/>
+                    <input type="checkbox" id="d" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
                 <div className="input-group" style={{flexDirection:"row", alignItems:"center"}}>
                     <label>e.</label>
                     <input type="text" id="e" onChange={handleQuestionTextChange} style={{width:'100%'}}
                     placeholder='e.g. ...MATLAB?' />
-                    <input type="radio" id="e" onChange={handleCorrectAnswerChange} name="correct"/>
+                    <input type="checkbox" id="e" onChange={handleCorrectAnswerChange} name="correct"/>
                 </div>
             </div>
 
@@ -138,9 +154,8 @@ const TextProblemModal = ({ open, onClose }: Props) => {
                 <input type="number" id="maxScore" onChange={handleChange}
                     placeholder='e.g. 10' min="0" />
             </div>
-            <label htmlFor="regex">Correct Answer is Regex <input type="checkbox" id="regex" /></label>
         </Modal>
     )
 }
 
-export default TextProblemModal;
\ No newline at end of file
+export default MultipleChoiceModal;
\ No newline at end of file
diff --git a/devU-client/src/components/utils/userOptionsDropdown.scss b/devU-client/src/components/utils/userOptionsDropdown.scss
index 6391230e..47564664 100644
--- a/devU-client/src/components/utils/userOptionsDropdown.scss
+++ b/devU-client/src/components/utils/userOptionsDropdown.scss
@@ -101,7 +101,7 @@
   transition: background-color 0.2s ease;
 
   &:hover {
-      background-color: var(--hover-darker);
+      background-color: var(--hover-lighter);
   }
   
 }