Skip to content

Commit 449f640

Browse files
dvcabiyadvcabiya
authored
Merge pull request #243 from makeopensource/92-mcq-options
92 - increase/decrease mcq options number
2 parents 3e95525 + aab54f2 commit 449f640

17 files changed

Lines changed: 203 additions & 134 deletions

‎devU-client/src/assets/global.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@
206206
--input-field-background: #fff;
207207
--input-field-label: var(--grey);
208208

209-
--table-row-even: var(--grey-lighter);
209+
--table-row-even: var(--background);
210210
--table-row-odd: var(--grey-lightest);
211211

212212
--red-text: var(--red);

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565

6666
.checkbox {
6767
position: absolute;
68-
transition: all .1s ease;
68+
transition: all .2s ease;
6969
top: 3px;
7070
left: 0;
7171
height: 18px;
@@ -74,17 +74,19 @@
7474
border: 1px solid #999;
7575
border-radius: 5px;
7676
margin-left: 0;
77+
.checkboxCheck {
78+
opacity: 0;
79+
width: 15px;
80+
left: 2px;
81+
top: 2px;
82+
height: 15px;
83+
border-radius: 5px;
84+
color: #fff;
85+
position: absolute;
86+
}
7787
}
7888

79-
.checkboxCheck {
80-
width: 15px;
81-
height: 15px;
82-
top: 2px;
83-
left: 2px;
84-
border-radius: 5px;
85-
color: white;
86-
position: absolute;
87-
}
89+
8890

8991

9092
input:checked {
@@ -96,16 +98,17 @@
9698
~ .checkbox{
9799
background-color: $primary;
98100
border: 1px solid $primary;
101+
.checkboxCheck{
102+
opacity: 100%;
103+
}
99104
}
100105

106+
107+
101108
~ .radio::after {
102109
display: block;
103110
border: 3px solid #fff;
104111
}
105-
~ .checkboxCheck{
106-
display: block;
107-
}
108-
109112
}
110113

111114
&:last-of-type{

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
4949
if (type == "Text") {
5050
return (
5151
<div key={problem.id} className={styles.problem}>
52-
<div>{type}</div>
5352
<h4 className={styles.problem_header}>{problem.problemName}</h4>
5453
<input className={styles.textField}
5554
type='text'
@@ -67,7 +66,6 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
6766
}
6867
return (
6968
<div key={problem.id} className={styles.problem}>
70-
<div>{type}</div>
7169
<h4 className={styles.problem_header}>{problem.problemName}</h4>
7270
{Object.keys(options).map((key : string) => (
7371
<label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
@@ -76,8 +74,10 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
7674
value={key}
7775
onChange={handleChange}
7876
disabled={disabled ?? false}/> {options[key]}
79-
80-
<span className={styles.checkbox}><FaIcon icon='check' className={styles.checkboxCheck}/></span>{/* custom checkbox */}
77+
78+
<span className={styles.checkbox}>
79+
<FaIcon icon='check' className={styles.checkboxCheck}/>
80+
</span>{/* custom checkbox */}
8181
</label>))}
8282
</div>)
8383
} else if(type == "MCQ-single") {
@@ -92,7 +92,7 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
9292
<label key={key} className={styles.mcqLabel} style={disabled ? {cursor: 'default'} : undefined}>
9393
<input id={problem.problemName}
9494
type='radio'
95-
name='correct'
95+
name={`${problem.id}_answer`}
9696
value={key}
9797
onChange={handleChange}
9898
disabled={disabled ?? false}/> {options[key]}

‎devU-client/src/components/pages/assignments/assignmentDetailPage.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
width: 100%;
3535
box-sizing: border-box;
3636
font-size: 16px;
37+
transition: ease .2s background-color;
3738
background-color: $list-item-background-hover;
3839
border-radius: 20px
3940
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,8 +202,8 @@ const AssignmentDetailPage = () => {
202202
return (
203203
<PageWrapper>
204204
<div className={styles.header}>
205-
<h1 style={{ gridColumnStart: 2 }}>Submit Assignment</h1>
206-
<button style={{ marginLeft: 'auto' }} className='btnPrimary' onClick={() => { history.goBack() }}>Back to Course</button>
205+
<h1 style={{gridColumnStart:2}}>Submit Assignment</h1>
206+
<button style={{marginLeft:'auto'}} className='btnPrimary' onClick={() => {history.push(`/course/${courseId}`)}}>Back to Course</button>
207207
</div>
208208

209209
<div className={styles.details}>

‎devU-client/src/components/pages/courses/courseDetailPage.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,13 @@
121121
display: block;
122122
width: 100%;
123123
margin: 5px auto;
124-
border-bottom: 1px solid #ddd;
124+
}
125125

126+
.border{
127+
border-bottom: 1px solid #ddd;
128+
&:last-of-type{
129+
border-bottom: none;
130+
}
126131
}
127132

128133
.due_end{

‎devU-client/src/components/pages/courses/courseDetailPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -133,9 +133,9 @@ const CourseDetailPage = () => {
133133
{category}
134134
</Typography>
135135
</CardContent>
136-
<List disablePadding style={{backgroundColor:'var(--background)'}}>
136+
<List disablePadding style={{backgroundColor:'var(--background)', transition: 'ease .2s background-color'}}>
137137
{categoryMap[category].map((assignment, index) => (
138-
<ListItem key={index} disablePadding>
138+
<ListItem key={index} disablePadding className={styles.border}>
139139
<ListItemButton sx={{padding: 0}} onClick={() => {
140140
history.push(`/course/${courseId}/assignment/${assignment.id}`)
141141
}}>

‎devU-client/src/components/pages/forms/assignments/assignmentFormPage.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,11 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
140140
onChange={handleCategoryChange}
141141
onCreate={handleCategoryCreate}
142142
options={categoryOptions}
143-
custom={{control: () => ({border:'none', padding:'3px 0'}),
144-
placeholder: () => ({color: '#555555'}),
145-
input: () => ({fontSize: '14px'}),
143+
custom={{control: () => ({border:'none', padding:'3px 0', backgroundColor: 'var(--input-field-background)'}),
144+
placeholder: () => ({color: 'var(--input-field-label)'}),
145+
input: () => ({fontSize: '14px', backgroundColor: 'var(--input-field-background)'}),
146+
option: (_, state) => ({ backgroundColor: state.isFocused ? 'var(--grey-darker)' : 'var(--input-field-background)',}),
147+
menu: () => ({ backgroundColor: 'var(--input-field-background)', overflow:'hidden'}),
146148
singleValue: () => ({fontSize: '14px'})}}
147149
value={currentCategory ?? undefined}/>
148150
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ const AssignmentUpdatePage = () => {
125125
useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/non-container-auto-graders`).then((res) => { setNonContainerAutograders(res) })}, [])
126126

127127
useEffect(() => {RequestService.get(`/api/course/${courseId}/assignment/${assignmentId}/container-auto-graders`).then((res) => { setContainerAutograders(res) })}, [])
128-
console.log(containerAutograders)
129128
useEffect(() => {RequestService.get(`/api/course/${courseId}/assignments`).then((res) => { setAssignments(res) })}, [formData])
130129

131130
useEffect(() => {

‎devU-client/src/components/pages/forms/assignments/multipleChoiceModal.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
@import 'variables';
3+
4+
.btn{
5+
background-color: var(--btn-secondary-background);
6+
color: var(--btn-secondary-text);
7+
border: 2px solid var(--btn-secondary-border);
8+
font-weight: 700;
9+
min-width: 20px;
10+
&:hover {
11+
background-color: var(--hover-lighter);
12+
}
13+
&:active{
14+
background-color: #c9bef9;
15+
}
16+
&:disabled{
17+
opacity: 50%;
18+
cursor: not-allowed;
19+
}
20+
}
21+
.addButton{
22+
border-top-left-radius: 5px;
23+
border-bottom-left-radius: 5px;
24+
border-top-right-radius: 0;
25+
border-bottom-right-radius: 0;
26+
border-right: 1px solid var(--btn-secondary-border);;
27+
}
28+
29+
.subtractButton{
30+
border-top-left-radius: 0;
31+
border-bottom-left-radius: 0;
32+
border-top-right-radius: 5px;
33+
border-bottom-right-radius: 5px;
34+
border-left: 1px solid var(--btn-secondary-border);;
35+
}

0 commit comments

Comments
 (0)