Merge pull request #243 from makeopensource/92-mcq-options

dvcabiya · web-flow · commit 449f640ccac3 · 2025-04-04T21:09:58.000-04:00
92 - increase/decrease mcq options number
diff --git a/devU-client/src/assets/global.scss b/devU-client/src/assets/global.scss
@@ -206,7 +206,7 @@
     --input-field-background: #fff;
     --input-field-label: var(--grey);
 
-    --table-row-even: var(--grey-lighter);
+    --table-row-even: var(--background);
     --table-row-odd: var(--grey-lightest);
 
     --red-text: var(--red);
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.scss b/devU-client/src/components/listItems/assignmentProblemListItem.scss
@@ -65,7 +65,7 @@
 
       .checkbox {
         position: absolute;
-        transition: all .1s ease;
+        transition: all .2s ease;
         top: 3px;
         left: 0;
         height: 18px;
@@ -74,17 +74,19 @@
         border: 1px solid #999;
         border-radius: 5px;
         margin-left: 0;
+        .checkboxCheck {
+            opacity: 0;
+            width: 15px;
+            left: 2px;
+            top: 2px;
+            height: 15px;
+            border-radius: 5px;
+            color: #fff;
+            position: absolute;
+          }
       }
 
-      .checkboxCheck {
-        width: 15px;
-        height: 15px;
-        top: 2px;
-        left: 2px;
-        border-radius: 5px;
-        color: white;
-        position: absolute;
-      }
+      
 
 
     input:checked {
@@ -96,16 +98,17 @@
         ~ .checkbox{
             background-color: $primary;
             border: 1px solid $primary;
+            .checkboxCheck{
+                opacity: 100%;
+            }
         }
 
+       
+
         ~ .radio::after {
             display: block;
             border: 3px solid #fff;
         }
-        ~ .checkboxCheck{
-            display: block;
-        }
-        
     }
 
     &:last-of-type{
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -49,7 +49,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
     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'
@@ -67,7 +66,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
         }
         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}>
@@ -76,8 +74,10 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                         value={key}
                         onChange={handleChange} 
                         disabled={disabled ?? false}/> {options[key]}
-
-                        <span className={styles.checkbox}><FaIcon icon='check' className={styles.checkboxCheck}/></span>{/* custom checkbox */}
+                        
+                        <span className={styles.checkbox}>
+                             <FaIcon icon='check' className={styles.checkboxCheck}/>
+                        </span>{/* custom checkbox */}
                     </label>))}
             </div>)
     } else if(type == "MCQ-single") {
@@ -92,7 +92,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                     <label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
                         <input id={problem.problemName} 
                         type='radio' 
-                        name='correct'
+                        name={`${problem.id}_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
@@ -34,6 +34,7 @@
     width: 100%;
     box-sizing: border-box;
     font-size: 16px;
+    transition: ease .2s background-color;
     background-color: $list-item-background-hover;
     border-radius: 20px
 }
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -202,8 +202,8 @@ const AssignmentDetailPage = () => {
     return (
         <PageWrapper>
             <div className={styles.header}>
-                <h1 style={{ gridColumnStart: 2 }}>Submit Assignment</h1>
-                <button style={{ marginLeft: 'auto' }} className='btnPrimary' onClick={() => { history.goBack() }}>Back to Course</button>
+                <h1 style={{gridColumnStart:2}}>Submit Assignment</h1> 
+                <button style={{marginLeft:'auto'}} className='btnPrimary' onClick={() => {history.push(`/course/${courseId}`)}}>Back to Course</button>
             </div>
 
             <div className={styles.details}>
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.scss b/devU-client/src/components/pages/courses/courseDetailPage.scss
@@ -121,8 +121,13 @@
     display: block;
     width: 100%;
     margin: 5px auto;
-    border-bottom: 1px solid #ddd;
+}
 
+.border{
+    border-bottom: 1px solid #ddd;
+    &:last-of-type{
+        border-bottom: none;
+    }
 }
 
 .due_end{
diff --git a/devU-client/src/components/pages/courses/courseDetailPage.tsx b/devU-client/src/components/pages/courses/courseDetailPage.tsx
@@ -133,9 +133,9 @@ const CourseDetailPage = () => {
                                             {category}
                                         </Typography>
                                     </CardContent>
-                                    <List disablePadding style={{backgroundColor:'var(--background)'}}>
+                                    <List disablePadding style={{backgroundColor:'var(--background)', transition: 'ease .2s background-color'}}>
                                         {categoryMap[category].map((assignment, index) => (
-                                            <ListItem key={index}  disablePadding>
+                                            <ListItem key={index}  disablePadding className={styles.border}>
                                                 <ListItemButton sx={{padding: 0}} onClick={() => {
                                                     history.push(`/course/${courseId}/assignment/${assignment.id}`)
                                                 }}>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx
@@ -140,9 +140,11 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
                 onChange={handleCategoryChange}
                 onCreate={handleCategoryCreate}
                 options={categoryOptions}
-                custom={{control: () => ({border:'none', padding:'3px 0'}),
-                        placeholder: () => ({color: '#555555'}),
-                        input: () => ({fontSize: '14px'}),
+                custom={{control: () => ({border:'none', padding:'3px 0', backgroundColor: 'var(--input-field-background)'}),
+                        placeholder: () => ({color: 'var(--input-field-label)'}),
+                        input: () => ({fontSize: '14px', backgroundColor: 'var(--input-field-background)'}),
+                        option: (_, state) => ({ backgroundColor: state.isFocused ? 'var(--grey-darker)' : 'var(--input-field-background)',}),
+                        menu: () => ({ backgroundColor: 'var(--input-field-background)', overflow:'hidden'}),
                         singleValue: () => ({fontSize: '14px'})}}
                 value={currentCategory ?? undefined}/>
             </div>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -125,7 +125,6 @@ const AssignmentUpdatePage = () => {
   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(() => {
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss
@@ -0,0 +1,35 @@
+
+@import 'variables';
+
+.btn{
+    background-color: var(--btn-secondary-background);
+    color: var(--btn-secondary-text);
+    border: 2px solid var(--btn-secondary-border);
+    font-weight: 700;
+    min-width: 20px;
+    &:hover {
+      background-color: var(--hover-lighter);
+    }
+    &:active{
+        background-color: #c9bef9;
+    }
+    &:disabled{
+        opacity: 50%;
+        cursor: not-allowed;
+    }
+}
+.addButton{
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 1px solid var(--btn-secondary-border);;
+}
+
+.subtractButton{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-left: 1px solid var(--btn-secondary-border);;
+}
diff --git a/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx b/devU-client/src/components/pages/forms/assignments/multipleChoiceModal.tsx
@@ -5,6 +5,7 @@ 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 './multipleChoiceModal.scss'
 
 interface Props {
     open: boolean;
@@ -15,7 +16,7 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
     const [setAlert] = useActionless(SET_ALERT)
     const { assignmentId } = useParams<{ assignmentId: string }>()
     const { courseId } = useParams<{ courseId: string }>()
-    const [options, setOptions] = useState({})
+    const [options, setOptions] = useState<Map<string,string>>(new Map<string,string>([['a',''],['b',''],['c','']]))
     const [formData, setFormData] = useState({
         type: 'MCQ-mult',
         title: '',
@@ -50,9 +51,10 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
             correctString: formData.correctAnswer,
             score: Number(formData.maxScore),
             isRegex: formData.regex,
-            metadata: {type: formData.type, options: options},
+            metadata: {type: formData.type, options: Object.fromEntries(options)},
             createdAt: createdAt
         }
+        console.log(graderFormData)
 
         RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
             .then(() => {
@@ -77,7 +79,7 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         closeModal()
     }
 
-    const resetData = () => { // reset data whenever question submitted/hits error, so data is not carried over, shows erroneous messages
+    const resetData = () => { // reset data whenever question submitted/hits error, so data is not carried over next time modal opened and potentially result in text not inputted being assigned
         setFormData({
             type: 'MCQ-mult',
             title: '',
@@ -103,7 +105,10 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         const key = e.target.id
         const value = e.target.value
 
-        setOptions(prevState => ({ ...prevState, [key]: value }))
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.set(key, value)
+            return newMap})
     }
 
     const handleCorrectAnswerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -132,6 +137,48 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
         
     }
 
+    const getPlaceholder = (key: string) => {
+        const choices = new Map([['a', 'e.g. Java'], 
+            ['b', 'e.g. Python'],
+            ['c', 'e.g. C'],
+            ['d', 'e.g. JavaScript'],
+            ['e', 'e.g. C++'],
+            ['f', 'e.g. Rust'],
+            ['g', 'e.g. OCaml'],
+            ['h', 'e.g. FORTRAN'],
+            ['i', 'e.g. COBOL'],
+            ['j', 'e.g. ...MATLAB?'],])
+        return choices.get(key)
+    }
+
+    const increaseOptions = () => {
+        const insert = options.size
+        const index = String.fromCharCode("a".charCodeAt(0) + insert)
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.set(index, '')
+            return newMap})
+    }
+
+    const decreaseOptions = () => { 
+        const remove = options.size - 1 // gets index of last element, which we want to remove
+        const index = String.fromCharCode("a".charCodeAt(0) + remove) // translates that into a char to actually remove this element
+        setOptions(prevState => {
+            const newMap = new Map(prevState)
+            newMap.delete(index)
+            return newMap})
+        setFormData(prevState => { // make sure element getting removed is no longer in correctAnswer
+            const currentValue = prevState.correctAnswer || ""; 
+            let res = currentValue.replace(index, "")
+            res = res.split('').sort().join('') // makes selecting answers in any order correct
+            return {
+                ...prevState,
+                correctAnswer: res
+            };
+        });
+    }
+
+
     const switchBoxType = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newState = e.target.checked
         if (newState === true) { // if box checked, then we're only accepting one answer, switch inputs to radio.
@@ -160,37 +207,27 @@ const MultipleChoiceModal = ({ open, onClose }: Props) => {
                     placeholder='e.g. What is the best programming language?' />
             </div>
             <div className="input-group" style={{gap: '5px'}} >
-                <label>Answer Choices:</label>
-                <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
-                    <label>a.</label>
-                    <input type='text' id="a" onChange={handleQuestionTextChange} style={{width:'100%'}}
-                    placeholder='e.g. Java' />
-                    <input type={`${boxType}`} 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={`${boxType}`} 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={`${boxType}`} 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={`${boxType}`} 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={`${boxType}`} id="e" onChange={handleCorrectAnswerChange} name="correct"/>
+                <div style={{display:'flex', justifyContent:'space-between'}}>
+                    <label>Answer Choices:</label> 
+                    <div>
+                        <button 
+                        className={`${styles.btn} ${styles.addButton}`} 
+                        onClick={increaseOptions}
+                        disabled={options.size >= 10}>+</button>
+
+                        <button className={`${styles.btn} ${styles.subtractButton}`}
+                        onClick={decreaseOptions}
+                        disabled={options.size <= 2}>-</button>
+                    </div>
                 </div>
+                
+                {[...options].map(([key, text]) => 
+                <div className="input-group" style={{flexDirection:"row", alignItems:"center", width: '100%'}}>
+                    <label style={{width: '15px'}}>{key}.</label>
+                    <input type='text' id={key} value={text} onChange={handleQuestionTextChange} style={{width:'100%'}}
+                    placeholder={getPlaceholder(key)} />
+                    <input type={`${boxType}`} id={key} onChange={handleCorrectAnswerChange} name="correct"/>
+                </div>)}
             </div>
             <div style={{display:'flex', alignItems: 'center'}}>
                 <input type='checkbox' onChange={switchBoxType}/><label>Allow only one answer</label>
diff --git a/devU-client/src/components/pages/homePage/homePage.tsx b/devU-client/src/components/pages/homePage/homePage.tsx
@@ -113,7 +113,7 @@ const HomePage = () => {
                         <UserCourseListItem course={course} assignments={assignments.get(course)} key={course.id} />
                     </div>
                 ))}
-                {enrollCourses.length === 0 && instructorCourses.length == 0 && <div className='no_items'>You do not have current enrollment yet</div>}
+                {enrollCourses.length === 0 && instructorCourses.length == 0 && <div className='no_items'>No current courses</div>}
             </div>
 
             <h2 className={styles.courses_heading}>Completed Courses</h2>
diff --git a/devU-client/src/components/pages/listPages/courses/coursesListPage.scss b/devU-client/src/components/pages/listPages/courses/coursesListPage.scss
diff --git a/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx b/devU-client/src/components/pages/listPages/courses/coursesListPage.tsx
diff --git a/devU-client/src/components/pages/submissions/submissionDetailPage.tsx b/devU-client/src/components/pages/submissions/submissionDetailPage.tsx
diff --git a/devU-client/src/components/shared/inputs/textDropDown.tsx b/devU-client/src/components/shared/inputs/textDropDown.tsx
diff --git a/devU-client/src/components/utils/userOptionsDropdown.tsx b/devU-client/src/components/utils/userOptionsDropdown.tsx

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@`
`34`	`34`	`width: 100%;`
`35`	`35`	`box-sizing: border-box;`
`36`	`36`	`font-size: 16px;`
	`37`	`+ transition: ease .2s background-color;`
`37`	`38`	`background-color: $list-item-background-hover;`
`38`	`39`	`border-radius: 20px`
`39`	`40`	`}`