Core 675 refactor exercise preview #92
Conversation
There was a problem hiding this comment.
The preview in the main Exercise story doesn't show correctness and it requires all the questionState stuff, so can you add a new set of stories for the ExercisePreview component? I'd like for people to see how they can use it by only passing in the exercise data, and optionally turning on the feedback.
src/components/ExercisePreview.tsx
Outdated
| const { id, correct_answer_id } = answer; | ||
| return { ...acc, [id]: { ...questionStateFields, correct_answer_id } }; | ||
| const questionValues = (questionStates && showAllFeedback) ? questionStates[id] : undefined; |
There was a problem hiding this comment.
Is there a way to make it work so that when show all feedback is true, and we don't send questionStates, that it still renders the feedback_html if it's in the exercise data? It can be a field directly on the question in the exercise: https://github.com/openstax/assessment-components/blob/main/src/types/index.ts#L10
There was a problem hiding this comment.
Done, I removed questionStates at all. Feedback_html inside exercise(for each answer) works fine.
There was a problem hiding this comment.
The interface is much simpler now, thanks for the updates.
One final thing - with the new changes, the correct answer is no longer green, can that be restored? I see blue over here, which I think means selected:
Unfortunately I can't remember the right set of props to turn on that css class, it may depend on setting the correct answer id?
src/components/ExercisePreview.tsx
Outdated
| return { | ||
| ...acc, | ||
| [id]: { | ||
| correct_answer_id: correct_answer_id, |
For what I look, correct answers are green according the value of is_completed(inside questionState object). For ExercisePreview I added it as true in my last commit |
There was a problem hiding this comment.
That did it, thank you! Can you make a new build and let @TomWoodward know about it so he can use the ExercisePreview for something he's working on?
* card styles * Overlay option added in exercise component and new component IncludeRemoveQuestion created (#86) * overlay option added in exercise component and new component includeremovequestion created * resolve comments * update snapshots * move overlay logic into Card component * remove focus on card when overlay is up and add autoFocus for first interactive element on overlay * Add export for IncludRemoveQuestion (#87) add export of IncludRemoveQuestion * Modify preview-card styles (#88) * modify preview card styles * change color of card when is included * resolve comments - fix style issues * change props in storybook of Exercise * Add prop method for details button * Refactor props of ExercisePreview * export ExercisePreview * remove focus first for screenreaders, style tweaks * Remove aria attributes in order to read card body content (#90) * remove aria attributes in order to read card body content * conditional aria attributes for cardbody * previewMode in storybook * missing previewMode prop * fix some type issues * disable eslint rule for ts-ignore just for this case * Core 675 refactor exercise preview (#92) * remove includeRemove logic from preview exercise card * print stories deleted by mistake * test description fixed * added new story for preview exercise, hide all feedback propertly * revert print delete * remove questionState prop, added feedback inside answers for stories purposes * is_completed added into ExercisePreview component * update snapshots * New prop showCorrectAnswer (#93) * new prop showCorrectAnswer * fix exercise stories * ExercisePreview now shows question detailed (#94) * ExercisePreview now shows question detailed * Restore print * hide footer with new condition * Restore print * fix indentation in ExerciseQuestion * set answer_id as empty * set new margin for preview card * update snaps * resolve test duplicity --------- Co-authored-by: jomcarvajal <[email protected]> Co-authored-by: jomcarvajal <[email protected]>
No description provided.