Skip to content

Commit 2456d6c

Browse files
jomcarvajaljomcarvajal
authored
New prop showCorrectAnswer (#93)
* new prop showCorrectAnswer * fix exercise stories
1 parent e6720bd commit 2456d6c

File tree

4 files changed

+232
-11
lines changed

4 files changed

+232
-11
lines changed

‎src/components/Exercise.stories.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -829,15 +829,20 @@ export const PreviewCard = () => {
829829
};
830830

831831
const [showFeedback, setShowFeedback] = React.useState<boolean>(false);
832+
const [showCorrectAnswer, setShowCorrectAnswer] = React.useState<boolean>(false);
832833

833834
return (
834835
<TextResizerProvider>
835836
<button
836837
onClick={()=> setShowFeedback(prev => !prev)}>{`Turn ${showFeedback ? 'off': 'on'} feedback`}
837838
</button>
839+
<button
840+
onClick={()=> setShowCorrectAnswer(prev => !prev)}>{`Turn ${showCorrectAnswer ? 'off': 'on'} correct answer`}
841+
</button>
838842
<ExercisePreview
839843
exercise={props1.exercise}
840844
showAllFeedback={showFeedback}
845+
showCorrectAnswer={showCorrectAnswer}
841846
/>
842847
</TextResizerProvider>
843848
);

‎src/components/ExercisePreview.spec.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,21 @@ describe('ExercisePreview', () => {
4646
});
4747

4848
it.each`
49-
selected | description | overlay | showFeedback
50-
${true} | ${'with overlay and selected true'} | ${<button>Over</button>} | ${undefined}
51-
${true} | ${'with overlay and selected false'} | ${<button>Over</button>} | ${false}
52-
${false} | ${'without overlay'} | ${undefined} | ${true}
49+
selected | description | overlay | showFeedback | showCorrect
50+
${true} | ${'with overlay and selected true'} | ${<button>Over</button>} | ${undefined} | ${true}
51+
${true} | ${'with overlay and correctness'} | ${<button>Over</button>} | ${undefined} | ${true}
52+
${true} | ${'with overlay and selected false'} | ${<button>Over</button>} | ${false} | ${false}
53+
${false} | ${'without overlay'} | ${undefined} | ${true} | ${true}
5354
`('matches snapshot $description', (
54-
{ selected, overlay, showFeedback }: { selected: boolean, overlay: JSX.Element, showFeedback: boolean }) => {
55+
{ selected, overlay, showFeedback, showCorrect }:
56+
{ selected: boolean, overlay: JSX.Element, showFeedback: boolean, showCorrect: boolean }) => {
5557
const tree = renderer.create(
5658
<ExercisePreview
5759
exercise={exercise}
5860
selected={selected}
5961
overlayChildren={overlay}
6062
showAllFeedback={showFeedback}
63+
showCorrectAnswer={showCorrect}
6164
/>
6265
).toJSON();
6366
expect(tree).toMatchSnapshot();

‎src/components/ExercisePreview.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export interface ExercisePreviewProps {
66
exercise: ExerciseData;
77
selected?: boolean;
88
showAllFeedback?: boolean;
9+
showCorrectAnswer?: boolean;
910
overlayChildren?: React.ReactNode;
1011
}
1112

@@ -14,11 +15,16 @@ export const ExercisePreview = (
1415
exercise,
1516
selected,
1617
showAllFeedback = false,
18+
showCorrectAnswer = false,
1719
overlayChildren,
1820
}: ExercisePreviewProps) => {
1921

2022
const hideAnswerFeedback = (exercise: ExerciseData) => {
21-
exercise.questions.map(question => question.answers.map(a => a.correctness = undefined ));
23+
exercise.questions.map(question =>
24+
question.answers.map(a => {
25+
a.feedback_html = '';
26+
a.correctness = showCorrectAnswer ? a.correctness : undefined;
27+
} ));
2228
return exercise;
2329
};
2430

@@ -32,7 +38,7 @@ export const ExercisePreview = (
3238
...acc,
3339
[id]: {
3440
correct_answer_id,
35-
is_completed: true,
41+
is_completed: showCorrectAnswer,
3642
}
3743
};
3844
}, {});

‎src/components/__snapshots__/ExercisePreview.spec.tsx.snap

Lines changed: 211 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,206 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`ExercisePreview using step data matches snapshot with overlay and correctness 1`] = `
4+
<div
5+
className="sc-ksZaOG gLzA-Dq"
6+
>
7+
<div
8+
className="sc-gsnTZi dxdISE"
9+
data-task-step-id={1}
10+
>
11+
<div
12+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb preview-card is-selected"
13+
>
14+
<div
15+
onBlur={[Function]}
16+
onMouseLeave={[Function]}
17+
onMouseOver={[Function]}
18+
tabIndex={0}
19+
>
20+
<div
21+
id="step-card"
22+
>
23+
<div
24+
className="sc-dkzDqf eYRLRg step-card-header"
25+
>
26+
<div>
27+
<h2
28+
className="question-info"
29+
>
30+
<span>
31+
Question 1
32+
</span>
33+
<span
34+
className="separator"
35+
>
36+
|
37+
</span>
38+
<span
39+
className="question-id"
40+
>
41+
ID:
42+
1@1
43+
</span>
44+
</h2>
45+
</div>
46+
</div>
47+
<div
48+
className="sc-hKMtZM bwRTaS"
49+
>
50+
<div>
51+
<div
52+
className="step-card-body exercise-context"
53+
dangerouslySetInnerHTML={
54+
Object {
55+
"__html": "Context",
56+
}
57+
}
58+
/>
59+
<div
60+
className="step-card-body exercise-stimulus"
61+
dangerouslySetInnerHTML={
62+
Object {
63+
"__html": "<b>Stimulus HTML</b>",
64+
}
65+
}
66+
/>
67+
<div
68+
data-test-id="student-exercise-question"
69+
>
70+
<div
71+
className="sc-iBkjds lXypw openstax-question step-card-body has-correct-answer"
72+
data-question-number={1}
73+
data-test-id="question"
74+
>
75+
<div
76+
className="answers-table"
77+
>
78+
<div
79+
className="openstax-answer"
80+
>
81+
<section
82+
className="answers-answer disabled answer-selected answer-correct"
83+
>
84+
<input
85+
checked={true}
86+
className="answer-input-box"
87+
disabled={true}
88+
id="1234@5-option-0"
89+
name="1234@5-options"
90+
onChange={[Function]}
91+
type="radio"
92+
/>
93+
<label
94+
className="answer-label"
95+
htmlFor="1234@5-option-0"
96+
>
97+
<span
98+
aria-label="Selected Choice A:"
99+
className="answer-letter-wrapper"
100+
data-answer-choice="A"
101+
data-test-id="answer-choice-A"
102+
/>
103+
<div
104+
className="answer-answer"
105+
>
106+
<div
107+
className="sc-gKXOVf QPaPs"
108+
>
109+
Correct
110+
Answer
111+
</div>
112+
<span
113+
className="answer-content"
114+
dangerouslySetInnerHTML={
115+
Object {
116+
"__html": "True",
117+
}
118+
}
119+
/>
120+
</div>
121+
</label>
122+
</section>
123+
</div>
124+
<div
125+
className="openstax-answer"
126+
>
127+
<section
128+
className="answers-answer disabled"
129+
>
130+
<input
131+
checked={false}
132+
className="answer-input-box"
133+
disabled={true}
134+
id="1234@5-option-1"
135+
name="1234@5-options"
136+
onChange={[Function]}
137+
type="radio"
138+
/>
139+
<label
140+
className="answer-label"
141+
htmlFor="1234@5-option-1"
142+
>
143+
<span
144+
aria-label="Choice B:"
145+
className="answer-letter-wrapper"
146+
data-answer-choice="B"
147+
data-test-id="answer-choice-B"
148+
/>
149+
<div
150+
className="answer-answer"
151+
>
152+
<span
153+
className="answer-content"
154+
dangerouslySetInnerHTML={
155+
Object {
156+
"__html": "False",
157+
}
158+
}
159+
/>
160+
</div>
161+
</label>
162+
</section>
163+
</div>
164+
</div>
165+
</div>
166+
<div
167+
className="sc-ftvSup fUvOut step-card-footer"
168+
>
169+
<div
170+
className="step-card-footer-inner"
171+
>
172+
<div
173+
className="points"
174+
role="status"
175+
>
176+
<span
177+
className="attempts-left"
178+
/>
179+
</div>
180+
<div
181+
className="controls"
182+
>
183+
<button
184+
className="sc-jSMfEi hsxEPT"
185+
data-test-id="submit-answer-btn"
186+
disabled={true}
187+
onClick={[Function]}
188+
>
189+
Submit & continue
190+
</button>
191+
</div>
192+
</div>
193+
</div>
194+
</div>
195+
</div>
196+
</div>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
`;
203+
3204
exports[`ExercisePreview using step data matches snapshot with overlay and selected false 1`] = `
4205
<div
5206
className="sc-ksZaOG gLzA-Dq"
@@ -263,7 +464,7 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec
263464
data-test-id="student-exercise-question"
264465
>
265466
<div
266-
className="sc-iBkjds lXypw openstax-question step-card-body"
467+
className="sc-iBkjds lXypw openstax-question step-card-body has-correct-answer"
267468
data-question-number={1}
268469
data-test-id="question"
269470
>
@@ -274,10 +475,10 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec
274475
className="openstax-answer"
275476
>
276477
<section
277-
className="answers-answer disabled"
478+
className="answers-answer disabled answer-selected answer-correct"
278479
>
279480
<input
280-
checked={false}
481+
checked={true}
281482
className="answer-input-box"
282483
disabled={true}
283484
id="1234@5-option-0"
@@ -290,14 +491,20 @@ exports[`ExercisePreview using step data matches snapshot with overlay and selec
290491
htmlFor="1234@5-option-0"
291492
>
292493
<span
293-
aria-label="Choice A:"
494+
aria-label="Selected Choice A:"
294495
className="answer-letter-wrapper"
295496
data-answer-choice="A"
296497
data-test-id="answer-choice-A"
297498
/>
298499
<div
299500
className="answer-answer"
300501
>
502+
<div
503+
className="sc-gKXOVf QPaPs"
504+
>
505+
Correct
506+
Answer
507+
</div>
301508
<span
302509
className="answer-content"
303510
dangerouslySetInnerHTML={

0 commit comments

Comments
 (0)