-
Notifications
You must be signed in to change notification settings - Fork 174
Redesign MCQ choosing #263
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
- One option on each line, spaced out. - minimal button that only shows a differnce when it is active.
Additionally: - Spread out the options
* @param chosenOption the mcq option that is chosen in the state, i.e what should show up as "selected" | ||
* @param solution the solution to the mcq, if any | ||
*/ | ||
private getButtonIntent = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If possible could you review this with a bit more care? It looks ok to me, but feels like there might be come edge cases I haven't accounted for @ningyuansg
src/mocks/assessmentAPI.ts
Outdated
choices: [ | ||
{ | ||
content: 'A', | ||
hint: 'hint A' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Remove hints for ungraded question. Inconsequential, but semantics matter.
margin-bottom: 20px; | ||
.pt-card { | ||
background-color: $cadet-color-3; | ||
.mcq-options-parent { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nested some classes here, let me know if it's alright
Pull Request Test Coverage Report for Build 547
💛 - Coveralls |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Consider if
minimal={false}
buttons for the options look better - Space between options and the left/right borders of the card should be the same as the space between options and the top/bottom borders of the card
- Disable the highlight after click on options using CSS (refer to the end of
_workspace.scss
)
</div> | ||
<div className="MCQChooser row"> | ||
<Card className="mcq-content-parent col-xs-12 middle-xs"> | ||
<div className="row mcq-options-parent between-xs">{options}</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Put in button group to avoid weird gaps between the options.
* Updated tests - /grading should show group * Augmented database query - now groups are visible * Updated Swagger Documentation * Updated tests - changed group to groupName * Style change to API - group now is groupName * Swagger Documentation Change for group to groupName
Features
solution
(and hints):