From 6dfe571c0c465f71914b119638b0e84d8dcbb867 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Thu, 13 Mar 2025 14:31:34 -0600 Subject: [PATCH 1/8] remove includeRemove logic from preview exercise card --- src/components/Exercise.stories.tsx | 77 +++++++------ src/components/Exercise/styles.ts | 2 - src/components/ExercisePreview.spec.tsx | 48 ++++++--- src/components/ExercisePreview.tsx | 64 ++++------- .../IncludeRemoveQuestion/index.tsx | 2 - src/components/Print.stories.tsx | 101 ------------------ .../__snapshots__/Exercise.spec.tsx.snap | 14 +-- .../ExercisePreview.spec.tsx.snap | 84 +++++++++------ 8 files changed, 145 insertions(+), 247 deletions(-) diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx index b9fd2667..17084e41 100644 --- a/src/components/Exercise.stories.tsx +++ b/src/components/Exercise.stories.tsx @@ -77,7 +77,7 @@ const exerciseWithStepDataProps: ExerciseWithStepDataProps = { canUpdateCurrentStep: false, }; -const exerciseWithQuestionStatesProps = (uid?: string): ExerciseWithQuestionStatesProps => { +const exerciseWithQuestionStatesProps = (uid?: string, correctness?: string): ExerciseWithQuestionStatesProps => { return { exercise: { uid: uid || '1@1', @@ -104,11 +104,11 @@ const exerciseWithQuestionStatesProps = (uid?: string): ExerciseWithQuestionStat is_answer_order_important: false, answers: [{ id: '1', - correctness: undefined, + correctness: correctness, content_html: 'True', }, { id: '2', - correctness: undefined, + correctness: correctness, content_html: 'False', }], }], @@ -146,12 +146,6 @@ const exerciseWithQuestionStatesProps = (uid?: string): ExerciseWithQuestionStat } }; -const exerciseWithOverlayProps = (overlayChildren: React.ReactNode) => { - return { - overlayChildren, - }; - } - type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3; const textResizerScales = [0.75, 0.9, 1, 1.25, 1.5, 2]; const textResizerValues: TextResizerValue[] = [-2, -1, 0, 1, 2, 3]; @@ -657,12 +651,12 @@ bitterness. The discriminant could perhaps a answers: [ { id: '1', - correctness: undefined, + correctness: '1.0', content_html: ``, }, { id: '2', - correctness: undefined, + correctness: '1.0', content_html: ``, }, ], @@ -677,12 +671,12 @@ bitterness. The discriminant could perhaps a answers: [ { id: '1', - correctness: undefined, + correctness: '1.0', content_html: ``, }, { id: '2', - correctness: undefined, + correctness: '1.0', content_html: ``, }, ], @@ -839,7 +833,6 @@ export const OverlayCard = () => { const randomlyCorrectAnswer = Math.floor(Math.random() * 3) + 1; const props1: ExerciseWithQuestionStatesProps = { ...exerciseWithQuestionStatesProps('1@123'), - ...exerciseWithOverlayProps(), questionStates: { '1': { available_points: '1.0', @@ -938,17 +931,8 @@ export const OverlayCard = () => { }, }; - const [buttonVariant, setButtonVariant] = React.useState<'include' | 'remove'>('include'); - const props2: ExerciseWithQuestionStatesProps = { - ...exerciseWithQuestionStatesProps('1@321'), - ...exerciseWithOverlayProps( - setButtonVariant('remove')} - onRemoveHandler={() => setButtonVariant('include')} - /> - ), + ...exerciseWithQuestionStatesProps('1@321', '1.0'), questionStates: { '1': { available_points: '1.0', @@ -976,29 +960,42 @@ export const OverlayCard = () => { const includeHandler = (exerciseUid: string) => setSelectedQuestions(previous => previous.concat(exerciseUid)); const removeHandler = (exerciseUid: string) => setSelectedQuestions(previous => previous.filter((id) => id !== exerciseUid)); + + const includeRemoveQuestionComponent1 = + includeHandler(props1.exercise.uid)} + onRemoveHandler={() => removeHandler(props1.exercise.uid)} + onClickDetails={() => setShowDetails1((previous) => !previous)} + />; + + const includeRemoveQuestionComponent2 = + includeHandler(props2.exercise.uid)} + onRemoveHandler={() => removeHandler(props2.exercise.uid)} + onClickDetails={() => setShowDetails2((previous) => !previous)} + />; + return (

Exercise cards

- - + Overlay} className='preview-card' previewMode /> + Overlay} className='preview-card' previewMode />

Exercise Preview cards

{showDetails1 &&

Details 1!

} - includeHandler(props1.exercise.uid)} - onRemoveHandler={()=> removeHandler(props1.exercise.uid)} - onClickDetails={()=> setShowDetails1((previous) => !previous)} - enableOverlay - exercise={props1.exercise} + {showDetails2 &&

Details 2!

} - includeHandler(props2.exercise.uid)} - onRemoveHandler={()=> removeHandler(props2.exercise.uid)} - onClickDetails={()=> setShowDetails2((previous) => !previous)} - enableOverlay - exercise={props2.exercise} + ); diff --git a/src/components/Exercise/styles.ts b/src/components/Exercise/styles.ts index 84f35203..8e2bee2b 100644 --- a/src/components/Exercise/styles.ts +++ b/src/components/Exercise/styles.ts @@ -131,7 +131,5 @@ export const exerciseStyles = css` font-weight: bold; font-size: 1.6rem; } - - } `; diff --git a/src/components/ExercisePreview.spec.tsx b/src/components/ExercisePreview.spec.tsx index edb6c7ef..92143c53 100644 --- a/src/components/ExercisePreview.spec.tsx +++ b/src/components/ExercisePreview.spec.tsx @@ -1,11 +1,12 @@ import { ExercisePreview } from './ExercisePreview'; import renderer from 'react-test-renderer'; -import { ExerciseData } from 'src/types'; +import { ExerciseData, ID, QuestionState } from 'src/types'; describe('ExercisePreview', () => { describe('using step data', () => { let exercise: ExerciseData; + let questionStates: { [key: ID]: QuestionState }; beforeEach(() => { exercise = { @@ -33,7 +34,7 @@ describe('ExercisePreview', () => { is_answer_order_important: false, answers: [{ id: '1', - correctness: undefined, + correctness: '1.0', content_html: 'True', }, { id: '2', @@ -42,25 +43,40 @@ describe('ExercisePreview', () => { }], }], }; + questionStates = { + '1234@5': { + available_points: '1.0', + is_completed: true, + answer_id_order: ['1', '2'], + answer_id: undefined, + free_response: 'Free response', + feedback_html: 'Feedback', + correct_answer_id: '1', + correct_answer_feedback_html: 'Feedback for the correct answer', + attempts_remaining: 0, + attempt_number: 1, + incorrectAnswerId: 0, + canAnswer: false, + needsSaved: false, + apiIsPending: false, + }, + }; }); it.each` - enableOverlay | selected | description - ${true} | ${true} | ${'with overlay and selected true'} - ${true} | ${true} | ${'with overlay and selected false'} - ${false} | ${false} | ${'without overlay'} - `('matches snapshot %description', ({ enableOverlay, selected }: { enableOverlay: boolean, selected: boolean }) => { - const onIncludeMock = jest.fn(); - const onRemoveMock = jest.fn(); - const onDetailsMock = jest.fn(); + selected | description | overlay | showFeedback + ${true} | ${'with overlay and selected true'} | ${} | ${undefined} + ${true} | ${'with overlay and selected false'} | ${} | ${false} + ${false} | ${'without overlay'} | ${undefined} | ${true} + `('matches snapshot %description', ( + { selected, overlay, showFeedback }: { selected: boolean, overlay: JSX.Element, showFeedback: boolean }) => { const tree = renderer.create( - ).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/components/ExercisePreview.tsx b/src/components/ExercisePreview.tsx index b21e7148..da3d60ed 100644 --- a/src/components/ExercisePreview.tsx +++ b/src/components/ExercisePreview.tsx @@ -1,49 +1,39 @@ import React from "react"; -import { ExerciseData, ExerciseQuestionData, StepBase } from "src/types"; -import { IncludeRemoveQuestion } from "./IncludeRemoveQuestion"; +import { ExerciseData, ExerciseQuestionData, ID, QuestionState, StepBase } from "src/types"; import { Exercise } from "./Exercise"; export interface ExercisePreviewProps { exercise: ExerciseData; selected: boolean; - onIncludeHandler: () => void; - onRemoveHandler: () => void; - onClickDetails: () => void; - enableOverlay?: boolean; + questionStates?: { [key: ID]: QuestionState }; + showAllFeedback?: boolean; + overlayChildren?: React.ReactNode; } -/** - * An Exercise version with less interaction with card and grants an Overlay with Include/Remove component - */ export const ExercisePreview = ( { exercise, selected, - onIncludeHandler, - onRemoveHandler, - onClickDetails, - enableOverlay = false, + showAllFeedback = false, + questionStates, + overlayChildren, }: ExercisePreviewProps) => { const exercisePreviewProps = (exercise: ExerciseData) => { const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => ( { id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') })); - const questionStateFields = { - available_points: '1.0', - is_completed: true, - answer_id: '1', - free_response: '', - feedback_html: '', - correct_answer_feedback_html: '', - attempts_remaining: 0, - attempt_number: 1, - incorrectAnswerId: 0 - } - - const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => { + const questionStateFields = formatAnswerData(exercise.questions).reduce((acc, answer) => { const { id, correct_answer_id } = answer; - return { ...acc, [id]: { ...questionStateFields, correct_answer_id } }; + const questionValues = questionStates && questionStates[id]; + return { + ...acc, + [id]: { + ...questionValues, + correct_answer_id: showAllFeedback ? correct_answer_id : '', + free_response: showAllFeedback ? questionValues?.free_response : '', + } + }; }, {}); const step: StepBase = { @@ -64,32 +54,16 @@ export const ExercisePreview = ( step: step, questionNumber: exercise.number as number, numberOfQuestions: exercise.questions.length, - questionStates: questionStates, - show_all_feedback: false, // Hide all feedback + questionStates: questionStateFields, }; }; - const includeRemoveQuestionComponent = React.useMemo(() => - - , [selected, onIncludeHandler, onRemoveHandler, onClickDetails]); - return ( ); diff --git a/src/components/IncludeRemoveQuestion/index.tsx b/src/components/IncludeRemoveQuestion/index.tsx index e05e790a..44deaf84 100644 --- a/src/components/IncludeRemoveQuestion/index.tsx +++ b/src/components/IncludeRemoveQuestion/index.tsx @@ -25,8 +25,6 @@ export const IncludeRemoveQuestion = ( case 'remove': onRemoveHandler(); break; - default: - break; } }; diff --git a/src/components/Print.stories.tsx b/src/components/Print.stories.tsx index 280dddda..e69de29b 100644 --- a/src/components/Print.stories.tsx +++ b/src/components/Print.stories.tsx @@ -1,101 +0,0 @@ -import { ExerciseData, ExerciseQueryData, ExerciseQuestionData, StepBase } from '../../src/types'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore -import data from '../../exercises.json'; -import styled from 'styled-components'; -import { Exercise } from './Exercise'; - -const ExerciseWrapper = styled.div` - break-inside: avoid; - - .step-card-body { - padding: 24px 48px !important; - } - - .step-card-footer { - display: none; - } - - .exercise-id { - height: auto; - } - - .exercise-step { - min-height: auto; - } - - .question-feedback { - box-shadow: none !important; - } - - .openstax-answer { - break-inside: avoid; - - .answer-letter-wrapper::after { - content: '' !important; - } - } -`; - -const exercises = (data as ExerciseQueryData).exercises as ExerciseData[]; - -const firstQuestionNumByExercise = exercises.reduce((acc, ex) => ({ - ...acc, - [ex.uuid]: acc.questionCounter + 1, - questionCounter: acc.questionCounter + ex.questions.length - }), {questionCounter: 0}); - -// placeholder until exercise data contains correct answer IDs -const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => ( - {id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '')})); - -const questionStateFields = { - available_points: '1.0', - is_completed: true, - answer_id: '1', - free_response: '', - feedback_html: '', - correct_answer_feedback_html: '', - attempts_remaining: 0, - attempt_number: 1, - incorrectAnswerId: 0 -} - -export const Default = () => ( - <> - {data.title &&

Exercises for {data.title}

} - {exercises.map(((exercise) => { - - const step: StepBase = { - id: 1, - uid: exercise.uid, - available_points: '1.0', - }; - - const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => { - const {id, correct_answer_id} = answer; - return {...acc, [id]: {...questionStateFields, correct_answer_id}}; - }, {}); - - return ( - - undefined} - onAnswerSave={() => undefined} - onNextStep={() => undefined} - apiIsPending={false} - canUpdateCurrentStep={false} - exercise={exercise} - step={step} - questionNumber={firstQuestionNumByExercise[exercise.uuid]} - numberOfQuestions={exercises.length} - questionStates={questionStates} - show_all_feedback={true} /> - - ) - }))} - ); diff --git a/src/components/__snapshots__/Exercise.spec.tsx.snap b/src/components/__snapshots__/Exercise.spec.tsx.snap index fa8747e1..3138aca6 100644 --- a/src/components/__snapshots__/Exercise.spec.tsx.snap +++ b/src/components/__snapshots__/Exercise.spec.tsx.snap @@ -9,7 +9,7 @@ exports[`Exercise using step data matches snapshot 1`] = ` data-task-step-id={1} >

@@ -79,7 +79,7 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = ` className="openstax-answer" >
+
+ Correct + Answer +
@@ -197,14 +202,14 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = ` exports[`ExercisePreview using step data matches snapshot %description 2`] = `

@@ -274,7 +279,7 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = ` className="openstax-answer" >
+
+ Correct + Answer +
@@ -392,21 +402,21 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = ` exports[`ExercisePreview using step data matches snapshot %description 3`] = `

@@ -464,7 +474,7 @@ exports[`ExercisePreview using step data matches snapshot %description 3`] = ` className="openstax-answer" >
+
+ Correct + Answer +
} | ${undefined} ${true} | ${'with overlay and selected false'} | ${} | ${false} ${false} | ${'without overlay'} | ${undefined} | ${true} - `('matches snapshot %description', ( + `('matches snapshot $description', ( { selected, overlay, showFeedback }: { selected: boolean, overlay: JSX.Element, showFeedback: boolean }) => { const tree = renderer.create( @@ -200,7 +200,7 @@ exports[`ExercisePreview using step data matches snapshot %description 1`] = `
`; -exports[`ExercisePreview using step data matches snapshot %description 2`] = ` +exports[`ExercisePreview using step data matches snapshot with overlay and selected true 1`] = `
@@ -400,7 +400,7 @@ exports[`ExercisePreview using step data matches snapshot %description 2`] = `
`; -exports[`ExercisePreview using step data matches snapshot %description 3`] = ` +exports[`ExercisePreview using step data matches snapshot without overlay 1`] = `
From c647b52aa2bc9b85f56b6e30a95344416d459555 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Tue, 18 Mar 2025 08:40:03 -0600 Subject: [PATCH 4/8] added new story for preview exercise, hide all feedback propertly --- src/components/Exercise.stories.tsx | 19 +++- src/components/ExercisePreview.tsx | 19 ++-- src/components/Print.stories.tsx | 101 ------------------ .../ExercisePreview.spec.tsx.snap | 34 +++--- 4 files changed, 40 insertions(+), 133 deletions(-) diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx index 17084e41..cdbd1c2e 100644 --- a/src/components/Exercise.stories.tsx +++ b/src/components/Exercise.stories.tsx @@ -725,12 +725,12 @@ export const PreviewCard = () => { const props1: ExerciseWithQuestionStatesProps = { ...exerciseWithQuestionStatesProps(), questionStates: { - '1': { + '320733': { available_points: '1.0', is_completed: true, answer_id_order: ['1', '2', '3', '4'], answer_id: randomlyCorrectAnswer, - free_response: '', + free_response: 'Feedback info', feedback_html: '', correct_answer_id: randomlyCorrectAnswer.toString(), correct_answer_feedback_html: @@ -798,18 +798,22 @@ export const PreviewCard = () => { { id: 832300, content_html: 'hypothalamus', + correctness: undefined, }, { id: 832303, content_html: 'medulla oblongata', + correctness: '1.0', }, { id: 832301, content_html: 'corpus callosum', + correctness: undefined, }, { id: 832302, content_html: 'cerebellum', + correctness: undefined, }, ], hints: [], @@ -822,9 +826,18 @@ export const PreviewCard = () => { }, }; + const [showFeedback, setShowFeedback] = React.useState(false); + return ( - + + ); }; diff --git a/src/components/ExercisePreview.tsx b/src/components/ExercisePreview.tsx index da3d60ed..bf1fa50b 100644 --- a/src/components/ExercisePreview.tsx +++ b/src/components/ExercisePreview.tsx @@ -4,7 +4,7 @@ import { Exercise } from "./Exercise"; export interface ExercisePreviewProps { exercise: ExerciseData; - selected: boolean; + selected?: boolean; questionStates?: { [key: ID]: QuestionState }; showAllFeedback?: boolean; overlayChildren?: React.ReactNode; @@ -19,19 +19,23 @@ export const ExercisePreview = ( overlayChildren, }: ExercisePreviewProps) => { + const hideAnswerFeedback = (exercise: ExerciseData) => { + exercise.questions.map(question => question.answers.map(a => a.correctness = undefined )); + return exercise; + }; + const exercisePreviewProps = (exercise: ExerciseData) => { const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => ( { id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') })); const questionStateFields = formatAnswerData(exercise.questions).reduce((acc, answer) => { const { id, correct_answer_id } = answer; - const questionValues = questionStates && questionStates[id]; + const questionValues = (questionStates && showAllFeedback) ? questionStates[id] : undefined; return { ...acc, - [id]: { - ...questionValues, - correct_answer_id: showAllFeedback ? correct_answer_id : '', - free_response: showAllFeedback ? questionValues?.free_response : '', + [id]: { + ...questionValues, + correct_answer_id: correct_answer_id, } }; }, {}); @@ -55,12 +59,13 @@ export const ExercisePreview = ( questionNumber: exercise.number as number, numberOfQuestions: exercise.questions.length, questionStates: questionStateFields, + show_all_feedback: showAllFeedback, }; }; return ( ({ - ...acc, - [ex.uuid]: acc.questionCounter + 1, - questionCounter: acc.questionCounter + ex.questions.length - }), {questionCounter: 0}); - -// placeholder until exercise data contains correct answer IDs -const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => ( - {id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '')})); - -const questionStateFields = { - available_points: '1.0', - is_completed: true, - answer_id: '1', - free_response: '', - feedback_html: '', - correct_answer_feedback_html: '', - attempts_remaining: 0, - attempt_number: 1, - incorrectAnswerId: 0 -} - -export const Default = () => ( - <> - {data.title &&

Exercises for {data.title}

} - {exercises.map(((exercise) => { - - const step: StepBase = { - id: 1, - uid: exercise.uid, - available_points: '1.0', - }; - - const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => { - const {id, correct_answer_id} = answer; - return {...acc, [id]: {...questionStateFields, correct_answer_id}}; - }, {}); - - return ( - - undefined} - onAnswerSave={() => undefined} - onNextStep={() => undefined} - apiIsPending={false} - canUpdateCurrentStep={false} - exercise={exercise} - step={step} - questionNumber={firstQuestionNumByExercise[exercise.uuid]} - numberOfQuestions={exercises.length} - questionStates={questionStates} - show_all_feedback={true} /> - - ) - }))} - ); diff --git a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap index 0054a10a..420eba65 100644 --- a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap +++ b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap @@ -79,10 +79,10 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec className="openstax-answer" >
-
- Correct - Answer -
@@ -279,10 +274,10 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec className="openstax-answer" >
-
- Correct - Answer -
From 732754a640d18a865298228dbf29c1495d465e56 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Tue, 18 Mar 2025 08:42:08 -0600 Subject: [PATCH 5/8] revert print delete --- src/components/Print.stories.tsx | 101 +++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/src/components/Print.stories.tsx b/src/components/Print.stories.tsx index e69de29b..280dddda 100644 --- a/src/components/Print.stories.tsx +++ b/src/components/Print.stories.tsx @@ -0,0 +1,101 @@ +import { ExerciseData, ExerciseQueryData, ExerciseQuestionData, StepBase } from '../../src/types'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import data from '../../exercises.json'; +import styled from 'styled-components'; +import { Exercise } from './Exercise'; + +const ExerciseWrapper = styled.div` + break-inside: avoid; + + .step-card-body { + padding: 24px 48px !important; + } + + .step-card-footer { + display: none; + } + + .exercise-id { + height: auto; + } + + .exercise-step { + min-height: auto; + } + + .question-feedback { + box-shadow: none !important; + } + + .openstax-answer { + break-inside: avoid; + + .answer-letter-wrapper::after { + content: '' !important; + } + } +`; + +const exercises = (data as ExerciseQueryData).exercises as ExerciseData[]; + +const firstQuestionNumByExercise = exercises.reduce((acc, ex) => ({ + ...acc, + [ex.uuid]: acc.questionCounter + 1, + questionCounter: acc.questionCounter + ex.questions.length + }), {questionCounter: 0}); + +// placeholder until exercise data contains correct answer IDs +const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => ( + {id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '')})); + +const questionStateFields = { + available_points: '1.0', + is_completed: true, + answer_id: '1', + free_response: '', + feedback_html: '', + correct_answer_feedback_html: '', + attempts_remaining: 0, + attempt_number: 1, + incorrectAnswerId: 0 +} + +export const Default = () => ( + <> + {data.title &&

Exercises for {data.title}

} + {exercises.map(((exercise) => { + + const step: StepBase = { + id: 1, + uid: exercise.uid, + available_points: '1.0', + }; + + const questionStates = formatAnswerData(exercise.questions).reduce((acc, answer) => { + const {id, correct_answer_id} = answer; + return {...acc, [id]: {...questionStateFields, correct_answer_id}}; + }, {}); + + return ( + + undefined} + onAnswerSave={() => undefined} + onNextStep={() => undefined} + apiIsPending={false} + canUpdateCurrentStep={false} + exercise={exercise} + step={step} + questionNumber={firstQuestionNumByExercise[exercise.uuid]} + numberOfQuestions={exercises.length} + questionStates={questionStates} + show_all_feedback={true} /> + + ) + }))} + ); From 73157c396853e46b1165d6503cd8f5bd750f2b67 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Tue, 18 Mar 2025 16:58:10 -0600 Subject: [PATCH 6/8] remove questionState prop, added feedback inside answers for stories purposes --- src/components/Exercise.stories.tsx | 6 ++--- src/components/ExercisePreview.spec.tsx | 23 ++----------------- src/components/ExercisePreview.tsx | 6 +---- .../ExercisePreview.spec.tsx.snap | 20 ++++++++++++++++ 4 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/components/Exercise.stories.tsx b/src/components/Exercise.stories.tsx index cdbd1c2e..f5fe090b 100644 --- a/src/components/Exercise.stories.tsx +++ b/src/components/Exercise.stories.tsx @@ -799,11 +799,13 @@ export const PreviewCard = () => { id: 832300, content_html: 'hypothalamus', correctness: undefined, + feedback_html: 'Feedback response', }, { id: 832303, content_html: 'medulla oblongata', correctness: '1.0', + feedback_html: 'Feedback response', }, { id: 832301, @@ -834,8 +836,7 @@ export const PreviewCard = () => { onClick={()=> setShowFeedback(prev => !prev)}>{`Turn ${showFeedback ? 'off': 'on'} feedback`} @@ -1004,7 +1005,6 @@ export const OverlayCard = () => { /> {showDetails2 &&

Details 2!

} { describe('using step data', () => { let exercise: ExerciseData; - let questionStates: { [key: ID]: QuestionState }; beforeEach(() => { exercise = { @@ -36,6 +35,7 @@ describe('ExercisePreview', () => { id: '1', correctness: '1.0', content_html: 'True', + feedback_html: 'Feedback', }, { id: '2', correctness: undefined, @@ -43,24 +43,6 @@ describe('ExercisePreview', () => { }], }], }; - questionStates = { - '1234@5': { - available_points: '1.0', - is_completed: true, - answer_id_order: ['1', '2'], - answer_id: undefined, - free_response: 'Free response', - feedback_html: 'Feedback', - correct_answer_id: '1', - correct_answer_feedback_html: 'Feedback for the correct answer', - attempts_remaining: 0, - attempt_number: 1, - incorrectAnswerId: 0, - canAnswer: false, - needsSaved: false, - apiIsPending: false, - }, - }; }); it.each` @@ -76,7 +58,6 @@ describe('ExercisePreview', () => { selected={selected} overlayChildren={overlay} showAllFeedback={showFeedback} - questionStates={selected ? questionStates : undefined} /> ).toJSON(); expect(tree).toMatchSnapshot(); diff --git a/src/components/ExercisePreview.tsx b/src/components/ExercisePreview.tsx index bf1fa50b..52c18f1d 100644 --- a/src/components/ExercisePreview.tsx +++ b/src/components/ExercisePreview.tsx @@ -1,11 +1,10 @@ import React from "react"; -import { ExerciseData, ExerciseQuestionData, ID, QuestionState, StepBase } from "src/types"; +import { ExerciseData, ExerciseQuestionData, StepBase } from "src/types"; import { Exercise } from "./Exercise"; export interface ExercisePreviewProps { exercise: ExerciseData; selected?: boolean; - questionStates?: { [key: ID]: QuestionState }; showAllFeedback?: boolean; overlayChildren?: React.ReactNode; } @@ -15,7 +14,6 @@ export const ExercisePreview = ( exercise, selected, showAllFeedback = false, - questionStates, overlayChildren, }: ExercisePreviewProps) => { @@ -30,11 +28,9 @@ export const ExercisePreview = ( const questionStateFields = formatAnswerData(exercise.questions).reduce((acc, answer) => { const { id, correct_answer_id } = answer; - const questionValues = (questionStates && showAllFeedback) ? questionStates[id] : undefined; return { ...acc, [id]: { - ...questionValues, correct_answer_id: correct_answer_id, } }; diff --git a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap index 420eba65..d4243902 100644 --- a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap +++ b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap @@ -467,6 +467,7 @@ exports[`ExercisePreview using step data matches snapshot without overlay 1`] = className="answers-answer disabled answer-selected answer-correct" >
+
From c771097162f4680f5a6fe5343b11a4e7c02912ed Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Wed, 19 Mar 2025 08:51:52 -0600 Subject: [PATCH 7/8] is_completed added into ExercisePreview component --- src/components/ExercisePreview.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/ExercisePreview.tsx b/src/components/ExercisePreview.tsx index 52c18f1d..961105c9 100644 --- a/src/components/ExercisePreview.tsx +++ b/src/components/ExercisePreview.tsx @@ -31,7 +31,8 @@ export const ExercisePreview = ( return { ...acc, [id]: { - correct_answer_id: correct_answer_id, + correct_answer_id, + is_completed: true, } }; }, {}); From 67b52eaf3e018a98aaadb23aa80fc8ba317bab6b Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Wed, 19 Mar 2025 08:54:27 -0600 Subject: [PATCH 8/8] update snapshots --- src/components/__snapshots__/ExercisePreview.spec.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap index d4243902..1fd1003b 100644 --- a/src/components/__snapshots__/ExercisePreview.spec.tsx.snap +++ b/src/components/__snapshots__/ExercisePreview.spec.tsx.snap @@ -453,7 +453,7 @@ exports[`ExercisePreview using step data matches snapshot without overlay 1`] = data-test-id="student-exercise-question" >