89 - Single/Multiple answer multiple choice questions

devU-client/src/components/listItems/assignmentProblemListItem.scss

@@ -31,15 +31,15 @@
     margin-bottom: 5px;
     cursor: pointer;
     width: fit-content;
+
     input {
         position: absolute;
         opacity: 0;
         height: 0;
         width: 0;
     }
 
-
-    .checkbox {
+    .radio {
         position: absolute;
         transition: all .1s ease;
         top: 3px;
@@ -52,27 +52,62 @@
         margin-left: 0;
       }
 
+
 
-    .checkbox::after {
+    .radio::after {
         width: 12px;
         height: 12px;
         border-radius: 100%;
         content: "";
         position: absolute;
         display: none;
+    }
+
+      .checkbox {
+        position: absolute;
+        transition: all .1s ease;
+        top: 3px;
+        left: 0;
+        height: 18px;
+        width: 18px;
+        background-color: $background;
+        border: 1px solid #999;
+        border-radius: 5px;
+        margin-left: 0;
+      }
+
+      .checkboxCheck {
+        width: 15px;
+        height: 15px;
+        top: 2px;
+        left: 2px;
+        border-radius: 5px;
+        color: white;
+        position: absolute;
       }
 
 
     input:checked {
+        ~ .radio  {
+            background-color: $primary;
+            border: 1px solid $primary;
+        }
+
         ~ .checkbox{
-        background-color: $primary;
-        border: 1px solid $primary;
+            background-color: $primary;
+            border: 1px solid $primary;
         }
-        ~ .checkbox::after {
+
+        ~ .radio::after {
             display: block;
             border: 3px solid #fff;
         }
+        ~ .checkboxCheck{
+            display: block;
+        }
+
     }
+
     &:last-of-type{
         margin-bottom: 0;
     }

devU-client/src/components/listItems/assignmentProblemListItem.tsx

@@ -4,6 +4,7 @@ import RequestService from 'services/request.service'
 import {AssignmentProblem, NonContainerAutoGrader} from 'devu-shared-modules'
 
 import styles from './assignmentProblemListItem.scss'
+import FaIcon from 'components/shared/icons/faIcon'
 
 type Props = {
     problem: AssignmentProblem
@@ -23,7 +24,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
 
     const getMeta = () => {
         if (ncags && ncags.length > 0){
-            const ncag = ncags.find(ncag => ncag.question == problem.problemName)
+            const ncag = ncags.find(ncag => ((ncag.question == problem.problemName) && (ncag.createdAt === problem.createdAt))) // currently checking against createdAt since if two non-code questions have the same name they can be confused otherwise, can be removed once meta string added to assignemntproblem
             if (!ncag || !ncag.metadata) {
                 return undefined
             }
@@ -40,14 +41,15 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
     if (!meta || !meta.type){
         return (
         <div className={styles.problem}>
-            <span>Metadata missing, error!</span>
+            <div>File Input Problems are not done yet pending backend changes! :D</div>
         </div>)
     }
 
     const type = meta.type
     if (type == "Text") {
         return (
         <div key={problem.id} className={styles.problem}>
+            <div>{type}</div>
             <h4 className={styles.problem_header}>{problem.problemName}</h4>
             <input className={styles.textField}
                 type='text'
@@ -58,28 +60,46 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                 id={problem.problemName}
                 />
         </div>
-    )} 
-    else if(type == "MCQ") {
+    )} else if(type == "MCQ-mult") {
         const options = meta.options
         if (!options){
             return <div></div>
         }
         return (
             <div key={problem.id} className={styles.problem}>
+                            <div>{type}</div>
                 <h4 className={styles.problem_header}>{problem.problemName}</h4>
                 {Object.keys(options).map((key : string) => (
                     <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
-                        <input id={problem.problemName} // actual input
+                        <input id={problem.problemName} 
                         type='checkbox' 
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
 
-                        <span className={styles.checkbox}></span>{/* custom checkbox */}
+                        <span className={styles.checkbox}><FaIcon icon='check' className={styles.checkboxCheck}/></span>{/* custom checkbox */}
                     </label>))}
             </div>)
-    }
-    else {
+    } else if(type == "MCQ-single") {
+        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) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} 
+                        type='radio' 
+                        name='correct'
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
+                        <span className={styles.radio}></span>{/* custom radio button */}
+                    </label>))}
+            </div>)
+    } else {
         return(
             <div>Unknown type, something is wrong on the backend!</div>)
         }

devU-client/src/components/pages/assignments/assignmentDetailPage.tsx

@@ -104,8 +104,8 @@ const AssignmentDetailPage = () => {
         const type = e.target.type;
         const value = e.target.value;
         const key = e.target.id;
+        if (type === 'checkbox') { // behavior for multiple choice - multiple answer questions
 
-        if (type === 'checkbox') { // behavior for multiple choic questions
             const newState = e.target.checked;
 
             setFormData(prevState => {
@@ -122,12 +122,13 @@ const AssignmentDetailPage = () => {
                     [key]: res
                 };
             });
-
-        } else {
+        } 
+        else {
             setFormData(prevState => ({
                 ...prevState,
                 [key]: value
             }));
+            console.log(formData)
         }
     };
 

devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx

@@ -39,7 +39,6 @@ const AssignmentUpdatePage = () => {
   const [containerAutograders, setContainerAutograders] = useState<ContainerAutoGrader[]>([])
 
 
-
   const [assignments, setAssignments] = useState<Assignment[]>([])
   const [categoryOptions, setAllCategoryOptions] = useState<Option<String>[]>([])
   const [currentCategory, setCurrentCategory] = useState<Option<String>>()
@@ -124,7 +123,9 @@ const AssignmentUpdatePage = () => {
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments/${assignmentId}`).then((res) => { setFormData(res) })}, [])
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`).then((res) => { setAssignmentProblems(res) })}, [])
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`).then((res) => { setNonContainerAutograders(res) })}, [])
+
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`).then((res) => { setContainerAutograders(res) })}, [])
+  console.log(containerAutograders)
   useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
 
   useEffect(() => {
@@ -138,6 +139,7 @@ const AssignmentUpdatePage = () => {
     setCurrentCategory(categoryOptions.find((category) => (category.value === formData.categoryName)))
 }, [assignments])
 
+
 
   const handleAssignmentUpdate = () => {
     const finalFormData = {
@@ -403,8 +405,8 @@ const AssignmentUpdatePage = () => {
             {nonContainerAutograders.length != 0 && nonContainerAutograders.map((nonContainerAutograder) => (<div>
               <span style={{fontStyle:'italic'}}>{nonContainerAutograder.question}</span> - 
               <span style={{color: 'var(--grey)'}}> Non-Code Grader</span></div>))}
-            {containerAutograders.length != 0 && containerAutograders.map((_) => (<div>
-            <span style={{fontStyle:'italic'}}>{"todo CAG model has been updated imagetag field does not exist"}</span> -
+            {containerAutograders.length != 0 && containerAutograders.map((containerAutograder) => (<div>
+            <span style={{fontStyle:'italic'}}>Code Grader {containerAutograder.id}</span> -
             <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>

devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx

@@ -16,6 +16,8 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     const { assignmentId } = useParams<{ assignmentId: string }>();
     const { courseId } = useParams<{ courseId: string }>();
 
+
+
     const [formData, setFormData] = useState({
         title: '',
         maxScore: '',
@@ -29,6 +31,7 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     const handleSubmit = () => {
         if (!submittable) return;
 
+
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
             problemName: formData.title,
@@ -44,17 +47,25 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
                 setAlert({ autoDelete: false, type: 'error', message });
             });
 
-        onClose();
+        closeModal();
     };
 
+    const closeModal = () => {
+        setFormData({
+            title: '',
+            maxScore: ''
+        })   
+        onClose()
+    }
+
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const key = e.target.id;
         const value = e.target.value;
         setFormData(prevState => ({ ...prevState, [key]: value }));
     };
 
     return (
-        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={onClose} isSubmittable={submittable}>
+        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={closeModal} isSubmittable={submittable}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
                 <input