diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index 46a8b5c26f5..f56d469f8fb 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -47,9 +47,14 @@ export type MarkdownRemark = { }; }; +export type MultipleChoiceAnswer = { + answer: string; + feedback: string | null; +}; + export type Question = { text: string; - answers: string[]; + answers: MultipleChoiceAnswer[]; solution: number; }; export type Fields = { diff --git a/client/src/templates/Challenges/odin/show.tsx b/client/src/templates/Challenges/odin/show.tsx index 37a90abe6eb..d8d44cd1994 100644 --- a/client/src/templates/Challenges/odin/show.tsx +++ b/client/src/templates/Challenges/odin/show.tsx @@ -231,6 +231,12 @@ class ShowOdin extends Component { const blockNameTitle = `${t( `intro:${superBlock}.blocks.${block}.title` )} - ${title}`; + + const feedback = + this.state.selectedOption !== null + ? answers[this.state.selectedOption].feedback + : undefined; + return ( { @@ -307,7 +313,7 @@ class ShowOdin extends Component {

{t('learn.question')}

- {answers.map((option, index) => ( + {answers.map(({ answer }, index) => ( ))} @@ -338,7 +344,16 @@ class ShowOdin extends Component { }} > {this.state.isWrongAnswer && ( - {t('learn.wrong-answer')} + + {feedback ? ( + + ) : ( + t('learn.wrong-answer') + )} + )} {!this.state.allAssignmentsCompleted && assignments.length > 0 && ( @@ -420,7 +435,10 @@ export const query = graphql` } question { text - answers + answers { + answer + feedback + } solution } translationPending diff --git a/client/src/templates/Challenges/video.css b/client/src/templates/Challenges/video.css index 13ffe992c83..dcbe0cfd18c 100644 --- a/client/src/templates/Challenges/video.css +++ b/client/src/templates/Challenges/video.css @@ -114,3 +114,7 @@ input:focus-visible + .video-quiz-input-visible { /* remove default prism background */ background: none; } + +.multiple-choice-feedback p { + margin-bottom: 0; +} diff --git a/client/src/templates/Challenges/video/show.tsx b/client/src/templates/Challenges/video/show.tsx index 8348f54f84a..1a26ed9d4cb 100644 --- a/client/src/templates/Challenges/video/show.tsx +++ b/client/src/templates/Challenges/video/show.tsx @@ -208,6 +208,12 @@ class ShowVideo extends Component { const blockNameTitle = `${t( `intro:${superBlock}.blocks.${block}.title` )} - ${title}`; + + const feedback = + this.state.selectedOption !== null + ? answers[this.state.selectedOption].feedback + : undefined; + return ( { @@ -257,7 +263,7 @@ class ShowVideo extends Component {
- {answers.map((option, index) => ( + {answers.map(({ answer }, index) => ( // answers are static and have no natural id property, so // index should be fine as a key: