Assessments: Add Multiple Choice Answer Table Component #22054
Conversation
|
Looks like you'll need to merge staging into this branch: |
| answerOptionTwo: PropTypes.string, | ||
| }); | ||
|
|
||
| class MultipleChoiceAnswerTable extends Component { |
There was a problem hiding this comment.
The name of this is a bit confusing. It'd expect it to be a table that shows me the answers, but really it shows me an overview of my students results. Maybe MultipleChoiceOverviewTable?
There was a problem hiding this comment.
Thanks for the suggestion.
| { | ||
| id: 2, | ||
| question: 'What is a 4-bit number for the decimal number Ten(10)', | ||
| answerOptionOne: '40%', |
There was a problem hiding this comment.
nit: It'd be nice to have different percent breakdowns for each to show that the table works with all different values.
| ...tableLayoutStyles.headerCell, | ||
| width: 90, | ||
| }}, | ||
| transforms: [sortable], |
There was a problem hiding this comment.
The spec doesn't actually show any of the columns as sortable. Did Poorva ask for a change? I'm guessing we might only want the question column sortable for now?
|
|
||
| export const COLUMNS = { | ||
| QUESTION: 0, | ||
| A: 1, |
There was a problem hiding this comment.
I think it would make more sense to call these answerOptionOne and answerOptionTwo since that's how you refer to them in code. A and B seem to be more of display strings.
| const questionAnswerDataPropType = PropTypes.shape({ | ||
| id: PropTypes.number.isRequired, | ||
| question: PropTypes.string, | ||
| answerOptionOne: PropTypes.string, |
There was a problem hiding this comment.
With this name it seems like this will be A. The best answer.
Can this be someone that makes it more obvious that it's a percent, like percentAnsweredOption1?
This PR is to create a table thats shows the assessment overview for a class.
Step 1: create a multiple choice answer table react component
Step 2: Add to storybook
Next step:
-Add text prop (percent of students who select the correct answer) and correct answer icon (green check mark circle that is visible when the answer is correct).