82 multiple choice questions

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);
   }
@@ -36,6 +41,10 @@
     font-weight: 700;
     font-size: 16px;
     transition: all 0.2s ease;
+    &:disabled{
+      opacity: 60%;
+      cursor: not-allowed;
+    }
   }
 
   .no_items {
@@ -243,6 +252,8 @@
     --secondary: #3d3f3f;
     --secondary-darker: #1f2020;
 
+    --link-blue: #0b8cdb;
+
     --list-item-background: #333333;
     --list-item-background-hover: #303030;
     --list-item-subtext: #e0e0e0;

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);

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'

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

@@ -0,0 +1,79 @@
+@import 'variables';
+
+
+.problem_header{
+    font-size:16px;
+    margin: 0 0 10px 0;
+}
+
+.problem{
+    gap: 10px;
+    padding: 10px 0;
+}
+
+
+.textField{
+    font-family: $font-family;
+    font-size: 16px;
+    background: none;
+    border: 2px solid #ccc;
+    color: $text-color;
+    border-radius: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.mcqLabel{
+    display: block;
+    position: relative;
+    padding-left: 25px;
+    margin-bottom: 5px;
+    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;
+        }
+    }
+    &:last-of-type{
+        margin-bottom: 0;
+    }
+}

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

@@ -0,0 +1,88 @@
+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 styles from './assignmentProblemListItem.scss'
+
+type Props = {
+    problem: AssignmentProblem
+    handleChange?: (e : React.ChangeEvent<HTMLInputElement>) => void
+    disabled?: boolean
+}
+
+const AssignmentProblemListItem = ({problem, handleChange, disabled}: 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))
+    }
+
+    const getMeta = () => {
+        if (ncags && ncags.length > 0){
+            const ncag = ncags.find(ncag => ncag.question == problem.problemName)
+            if (!ncag || !ncag.metadata) {
+                return undefined
+            }
+            return JSON.parse(ncag.metadata)
+        } 
+    }
+
+
+    useEffect(() => {
+        fetchNcags()
+    }, [])
+
+    const meta = getMeta()
+    if (!meta || !meta.type){
+        return (
+        <div className={styles.problem}>
+        </div>)
+    }
+
+    const type = meta.type
+    if (type == "Text") {
+        return (
+        <div key={problem.id} className={styles.problem}>
+            <h4 className={styles.problem_header}>{problem.problemName}</h4>
+            <input className={styles.textField}
+                type='text'
+                placeholder='Answer'
+                onChange={handleChange ?? undefined}
+                disabled={disabled ?? false}
+
+                id={problem.problemName}
+                />
+        </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) => (
+                    <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
+                        <input id={problem.problemName} // actual input
+                        type='checkbox' 
+                        value={key}
+                        onChange={handleChange} 
+                        disabled={disabled ?? false}/> {options[key]}
+
+                        <span className={styles.checkbox}></span>{/* custom checkbox */}
+                    </label>))}
+            </div>)
+    }
+    else {
+        return(
+            <div>Unknown type, something is wrong on the backend!</div>)
+        }
+}
+
+
+export default AssignmentProblemListItem

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>
 

devU-client/src/components/misc/footer.scss

@@ -31,3 +31,8 @@
     }
   }
 }
+@media (max-width: $extreme){
+  .footer{
+    padding: 10px $phonePadding;
+  }
+}

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;

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;
 }
@@ -21,6 +20,7 @@
     width: 100%;
     text-align: left;
     flex-direction: column;
+    overflow-wrap: anywhere;
     display: flex;
     align-items: flex-start;
 }
@@ -29,10 +29,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,28 +63,20 @@
     flex-direction: row;
     align-items: center;
     gap:10px;
+    flex-wrap: wrap;
     justify-content: flex-end;
 }
 
 .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,13 +87,20 @@
 .affirmation{
     display: flex;
     align-items: center;
+    margin-top: 10px;
     align-self: flex-start;
     gap: 10px;
 }
+
 .affirmText{
     color: $text-color;
 }
 
+.handinHistory{
+    text-decoration: underline;
+    cursor: pointer
+}
+
 
 .line {
     border: none;
@@ -249,7 +250,7 @@
     padding: 10px;
 }
 
-@media (max-width: 768px) {
+@media (max-width: $extreme) {
     .wrap {
         flex-direction: column;
         align-items: center;
@@ -284,6 +285,9 @@
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	    margin: 20px;
     }
+    .problems_list{
+        width: 100%;
+    }
 }
 
 @media (max-width: 370px) {