Skip to content

Commit f240e01

Browse files
jomcarvajaljomcarvajal
authored
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
1 parent 2456d6c commit f240e01

10 files changed

+207
-183
lines changed

‎src/components/Exercise.stories.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -821,6 +821,16 @@ export const PreviewCard = () => {
821821
hints: [],
822822
formats: ['free-response', 'multiple-choice'],
823823
combo_choices: [],
824+
collaborator_solutions: [
825+
{
826+
solution_type: 'detailed',
827+
content_html: `<span data-math='e^{\\text{Blue}}'></span>`,
828+
},
829+
{
830+
solution_type: 'no-detailed',
831+
content_html: `<span data-math='e^{\\text{Blue}}'></span>`,
832+
}
833+
],
824834
},
825835
],
826836

@@ -830,6 +840,7 @@ export const PreviewCard = () => {
830840

831841
const [showFeedback, setShowFeedback] = React.useState<boolean>(false);
832842
const [showCorrectAnswer, setShowCorrectAnswer] = React.useState<boolean>(false);
843+
const [selected, setSelected] = React.useState<boolean>(false);
833844

834845
return (
835846
<TextResizerProvider>
@@ -839,8 +850,12 @@ export const PreviewCard = () => {
839850
<button
840851
onClick={()=> setShowCorrectAnswer(prev => !prev)}>{`Turn ${showCorrectAnswer ? 'off': 'on'} correct answer`}
841852
</button>
853+
<button
854+
onClick={()=> setSelected(prev => !prev)}>{`${selected ? 'Selected': 'Unselected'}`}
855+
</button>
842856
<ExercisePreview
843857
exercise={props1.exercise}
858+
selected={selected}
844859
showAllFeedback={showFeedback}
845860
showCorrectAnswer={showCorrectAnswer}
846861
/>

‎src/components/Exercise/styles.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ export const exerciseStyles = css`
55
&.is-selected {
66
background-color: ${colors.card.header.background};
77
8-
.step-card-footer-inner,
8+
.step-card-footer,
99
.step-card-body,
10-
.step-card-header,
11-
.answer-letter-wrapper::before {
10+
.step-card-header {
1211
background-color: ${colors.card.header.background} !important;
1312
}
1413
}
1514
1615
&.preview-card {
1716
--spacing: 0.8rem;
17+
margin: 0 auto auto auto !important;
1818
1919
[data-task-step-id] {
2020
padding: 0;
@@ -105,7 +105,7 @@ export const exerciseStyles = css`
105105
}
106106
}
107107
108-
.step-card-footer, .detailed-solution {
108+
.step-card-footer .controls, .detailed-solution {
109109
display: none;
110110
}
111111

‎src/components/ExercisePreview.spec.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,16 @@ describe('ExercisePreview', () => {
2626
versions: [1],
2727
questions: [{
2828
id: '1234@5',
29-
collaborator_solutions: [],
29+
collaborator_solutions: [
30+
{
31+
solution_type: 'no-detailed',
32+
content_html: `<span data-math='e^{\\text{Blue}}'></span>`,
33+
},
34+
{
35+
solution_type: 'detailed',
36+
content_html: `<span data-math='e^{\\text{Blue}}'></span>`,
37+
},
38+
],
3039
formats: ['true-false'],
3140
stimulus_html: '',
3241
stem_html: '',

‎src/components/ExercisePreview.tsx

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { ExerciseData, ExerciseQuestionData, StepBase } from "src/types";
33
import { Exercise } from "./Exercise";
4+
import styled from "styled-components";
45

56
export interface ExercisePreviewProps {
67
exercise: ExerciseData;
@@ -20,26 +21,37 @@ export const ExercisePreview = (
2021
}: ExercisePreviewProps) => {
2122

2223
const hideAnswerFeedback = (exercise: ExerciseData) => {
23-
exercise.questions.map(question =>
24+
exercise.questions.map(question =>
2425
question.answers.map(a => {
25-
a.feedback_html = '';
26+
a.feedback_html = '';
2627
a.correctness = showCorrectAnswer ? a.correctness : undefined;
27-
} ));
28+
}));
2829
return exercise;
2930
};
3031

3132
const exercisePreviewProps = (exercise: ExerciseData) => {
3233
const formatAnswerData = (questions: ExerciseQuestionData[]) => questions.map((q) => (
33-
{ id: q.id, correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || '') }));
34+
{
35+
id: q.id,
36+
correct_answer_id: (q.answers.find((a) => a.correctness === '1.0')?.id || ''),
37+
content_html:
38+
showAllFeedback &&
39+
q.collaborator_solutions?.find(solution => solution.solution_type === 'detailed')?.content_html,
40+
}
41+
));
3442

3543
const questionStateFields = formatAnswerData(exercise.questions).reduce((acc, answer) => {
36-
const { id, correct_answer_id } = answer;
37-
return {
38-
...acc,
44+
const { id, correct_answer_id, content_html } = answer;
45+
return {
46+
...acc,
3947
[id]: {
48+
answer_id: '',
4049
correct_answer_id,
4150
is_completed: showCorrectAnswer,
42-
}
51+
solution: {
52+
content_html,
53+
}
54+
}
4355
};
4456
}, {});
4557

@@ -66,10 +78,27 @@ export const ExercisePreview = (
6678
};
6779
};
6880

81+
const StyledExercise = styled(Exercise)`
82+
83+
${(!showAllFeedback) &&
84+
`.step-card-footer {
85+
display: none;
86+
}`
87+
}
88+
${!showCorrectAnswer &&
89+
`.answer-answer {
90+
font-weight: normal;
91+
& > div {
92+
display: none;
93+
}
94+
}`
95+
}
96+
`;
97+
6998
return (
70-
<Exercise
99+
<StyledExercise
71100
exercise={showAllFeedback ? exercise : hideAnswerFeedback(exercise)}
72-
className={selected ? 'preview-card is-selected' : 'preview-card'}
101+
className={`preview-card ${selected ? 'is-selected' : ''}`}
73102
previewMode
74103
overlayChildren={overlayChildren}
75104
{...exercisePreviewProps(exercise)}

‎src/components/ExerciseQuestion.tsx

Lines changed: 30 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -134,36 +134,37 @@ export const ExerciseQuestion = React.forwardRef((props: ExerciseQuestionProps,
134134
>
135135
<FreeResponseReview free_response={free_response} />
136136
</Question>
137-
<StepCardFooter className="step-card-footer">
138-
<div className="step-card-footer-inner">
139-
<div className="points" role="status">
140-
{available_points ? <strong>Points: {available_points}</strong> : null}
141-
<span className="attempts-left">
142-
{hasMultipleAttempts &&
143-
attempts_remaining > 0 &&
144-
<AttemptsRemaining count={attempts_remaining} />}
145-
</span>
146-
<PublishedComments published_comments={published_comments} />
147-
{detailedSolution && (<div><strong>Detailed solution:</strong> <Content html={detailedSolution} /></div>)}
137+
{(previewMode && detailedSolution) || !previewMode ?
138+
<StepCardFooter className="step-card-footer">
139+
<div className="step-card-footer-inner">
140+
<div className="points" role="status">
141+
{available_points ? <strong>Points: {available_points}</strong> : null}
142+
<span className="attempts-left">
143+
{hasMultipleAttempts &&
144+
attempts_remaining > 0 &&
145+
<AttemptsRemaining count={attempts_remaining} />}
146+
</span>
147+
<PublishedComments published_comments={published_comments} />
148+
{detailedSolution && (<div><strong>Detailed solution:</strong> <Content html={detailedSolution} /></div>)}
149+
</div>
150+
<div className="controls">
151+
{(canAnswer && needsSaved) || shouldContinue ?
152+
<SaveButton
153+
disabled={apiIsPending || !answer_id || shouldContinue}
154+
isWaiting={apiIsPending || shouldContinue}
155+
attempt_number={attempt_number}
156+
onClick={() => {
157+
onAnswerSave(numberfyId(question.id));
158+
if (!hasFeedback) {
159+
setShouldContinue(true);
160+
}
161+
}}
162+
willContinue={!hasFeedback}
163+
/> :
164+
<NextButton onClick={() => onNextStep(questionNumber - 1)} canUpdateCurrentStep={canUpdateCurrentStep} />}
165+
</div>
148166
</div>
149-
<div className="controls">
150-
{(canAnswer && needsSaved) || shouldContinue ?
151-
<SaveButton
152-
disabled={apiIsPending || !answer_id || shouldContinue}
153-
isWaiting={apiIsPending || shouldContinue}
154-
attempt_number={attempt_number}
155-
onClick={() => {
156-
onAnswerSave(numberfyId(question.id));
157-
if (!hasFeedback) {
158-
setShouldContinue(true);
159-
}
160-
}}
161-
willContinue={!hasFeedback}
162-
/> :
163-
<NextButton onClick={() => onNextStep(questionNumber - 1)} canUpdateCurrentStep={canUpdateCurrentStep} />}
164-
</div>
165-
</div>
166-
</StepCardFooter>
167+
</StepCardFooter> : null}
167168
</div>
168169
);
169170
})

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

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
99
data-task-step-id={1}
1010
>
1111
<div
12-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
12+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
1313
>
1414
<div>
1515
<div
@@ -69,7 +69,7 @@ exports[`Exercise using step data matches snapshot 1`] = `
6969
data-test-id="student-exercise-question"
7070
>
7171
<div
72-
className="sc-iBkjds lXypw openstax-question step-card-body"
72+
className="sc-iBkjds bohpoA openstax-question step-card-body"
7373
data-question-number={1}
7474
data-test-id="question"
7575
>
@@ -206,7 +206,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
206206
data-task-step-id={1}
207207
>
208208
<div
209-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
209+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
210210
>
211211
<div
212212
onBlur={[Function]}
@@ -271,7 +271,7 @@ exports[`Exercise with overlay rendering matches snapshot 1`] = `
271271
data-test-id="student-exercise-question"
272272
>
273273
<div
274-
className="sc-iBkjds lXypw openstax-question step-card-body"
274+
className="sc-iBkjds bohpoA openstax-question step-card-body"
275275
data-question-number={1}
276276
data-test-id="question"
277277
>
@@ -408,7 +408,7 @@ exports[`Exercise with overlay rendering matches snapshot with previewMode 1`] =
408408
data-task-step-id={1}
409409
>
410410
<div
411-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
411+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
412412
>
413413
<div
414414
onBlur={[Function]}
@@ -473,7 +473,7 @@ exports[`Exercise with overlay rendering matches snapshot with previewMode 1`] =
473473
data-test-id="student-exercise-question"
474474
>
475475
<div
476-
className="sc-iBkjds lXypw openstax-question step-card-body"
476+
className="sc-iBkjds bohpoA openstax-question step-card-body"
477477
data-question-number={1}
478478
data-test-id="question"
479479
>
@@ -562,33 +562,6 @@ exports[`Exercise with overlay rendering matches snapshot with previewMode 1`] =
562562
</div>
563563
</div>
564564
</div>
565-
<div
566-
className="sc-ftvSup fUvOut step-card-footer"
567-
>
568-
<div
569-
className="step-card-footer-inner"
570-
>
571-
<div
572-
className="points"
573-
role="status"
574-
>
575-
<span
576-
className="attempts-left"
577-
/>
578-
</div>
579-
<div
580-
className="controls"
581-
>
582-
<button
583-
className="sc-jSMfEi hsxEPT"
584-
data-test-id="continue-btn"
585-
onClick={[Function]}
586-
>
587-
Next
588-
</button>
589-
</div>
590-
</div>
591-
</div>
592565
</div>
593566
</div>
594567
</div>
@@ -608,7 +581,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
608581
data-task-step-id={1}
609582
>
610583
<div
611-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
584+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
612585
>
613586
<div>
614587
<div
@@ -662,7 +635,7 @@ exports[`Exercise with question state data matches snapshot 1`] = `
662635
data-test-id="student-exercise-question"
663636
>
664637
<div
665-
className="sc-iBkjds lXypw openstax-question step-card-body"
638+
className="sc-iBkjds bohpoA openstax-question step-card-body"
666639
data-question-number={1}
667640
data-test-id="question"
668641
>
@@ -853,7 +826,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
853826
data-task-step-id={1}
854827
>
855828
<div
856-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
829+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
857830
>
858831
<div>
859832
<div
@@ -993,7 +966,7 @@ exports[`Exercise with question state data renders header icons with multiple ch
993966
data-test-id="student-exercise-question"
994967
>
995968
<div
996-
className="sc-iBkjds lXypw openstax-question step-card-body"
969+
className="sc-iBkjds bohpoA openstax-question step-card-body"
997970
data-question-number={1}
998971
data-test-id="question"
999972
>
@@ -1184,7 +1157,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
11841157
data-task-step-id={1}
11851158
>
11861159
<div
1187-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
1160+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
11881161
>
11891162
<div>
11901163
<div
@@ -1364,7 +1337,7 @@ exports[`Exercise with question state data renders header icons with two-step ex
13641337
data-test-id="student-exercise-question"
13651338
>
13661339
<div
1367-
className="sc-iBkjds lXypw openstax-question step-card-body"
1340+
className="sc-iBkjds bohpoA openstax-question step-card-body"
13681341
data-question-number={1}
13691342
data-test-id="question"
13701343
>
@@ -1501,7 +1474,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
15011474
data-task-step-id={1}
15021475
>
15031476
<div
1504-
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl hfZzAb"
1477+
className="sc-bczRLJ eAXREJ exercise-step sc-breuTD dSaRVj sc-hAZoDl QCsJH"
15051478
>
15061479
<div>
15071480
<div
@@ -1555,7 +1528,7 @@ exports[`Exercise with question state data shows a detailed solution 1`] = `
15551528
data-test-id="student-exercise-question"
15561529
>
15571530
<div
1558-
className="sc-iBkjds lXypw openstax-question step-card-body"
1531+
className="sc-iBkjds bohpoA openstax-question step-card-body"
15591532
data-question-number={1}
15601533
data-test-id="question"
15611534
>

0 commit comments

Comments
 (0)