Andal.LND/frontend-app-authoring
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix feedback box bugs (#227)

Browse Source
This commit is contained in:
Kristin Aoki
2023-02-02 13:51:58 -05:00
committed by GitHub
parent 796dd388f7
commit 57dd03f40f
9 changed files with 141 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
View File

@@ -5,19 +5,33 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { answerOptionProps } from '../../../../../../../data/services/cms/types';
import FeedbackControl from './FeedbackControl';
import { messages } from './messages';
import { ProblemTypeKeys } from '../../../../../../../data/constants/problem';
export const FeedbackBox = ({
answer,
intl,
problemType,
setSelectedFeedback,
setUnselectedFeedback,
// injected
intl,
}) => {
const props = {
answer,
intl,
};
return (
return ((problemType === ProblemTypeKeys.NUMERIC || problemType === ProblemTypeKeys.TEXTINPUT) ? (
<div className="bg-light-300 p-4 mt-3 rounded text-primary-500">
<FeedbackControl
key={`selectedfeedback-${answer.id}`}
feedback={answer.selectedFeedback}
labelMessage={messages.selectedFeedbackLabel}
labelMessageBoldUnderline={messages.selectedFeedbackLabelBoldUnderlineText}
onChange={setSelectedFeedback}
{...props}
/>
</div>
) : (
<div className="bg-light-300 p-4 mt-3 rounded text-primary-500">
<FeedbackControl
key={`selectedfeedback-${answer.id}`}
@@ -36,10 +50,11 @@ export const FeedbackBox = ({
{...props}
/>
</div>
);
));
};
FeedbackBox.propTypes = {
answer: answerOptionProps.isRequired,
problemType: PropTypes.string.isRequired,
setAnswer: PropTypes.func.isRequired,
setSelectedFeedback: PropTypes.func.isRequired,
setUnselectedFeedback: PropTypes.func.isRequired,

9
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
View File

@@ -7,6 +7,7 @@ const answerWithFeedback = {
correct: true,
selectedFeedback: 'some feedback',
unselectedFeedback: 'unselectedFeedback',
problemType: 'sOMepRObleM',
};
const props = {
@@ -15,7 +16,13 @@ const props = {
};
describe('FeedbackBox component', () => {
test('renders', () => {
test('renders as expected with default props', () => {
expect(shallow(<FeedbackBox {...props} />)).toMatchSnapshot();
});
test('renders as expected with a numeric input problem', () => {
expect(shallow(<FeedbackBox {...props} problemType="numericalresponse" />)).toMatchSnapshot();
});
test('renders as expected with a text input problem', () => {
expect(shallow(<FeedbackBox {...props} problemType="stringresponse" />)).toMatchSnapshot();
});
});

76
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`FeedbackBox component renders 1`] = `
exports[`FeedbackBox component renders as expected with a numeric input problem 1`] = `
<div
className="bg-light-300 p-4 mt-3 rounded text-primary-500"
>
@@ -9,6 +9,79 @@ exports[`FeedbackBox component renders 1`] = `
Object {
"correct": true,
"id": "A",
"problemType": "sOMepRObleM",
"selectedFeedback": "some feedback",
"title": "Answer 1",
"unselectedFeedback": "unselectedFeedback",
}
}
feedback="some feedback"
intl={Object {}}
key="selectedfeedback-A"
labelMessage={
Object {
"defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
"description": "Label text for feedback if option is selected",
"id": "authoring.answerwidget.feedback.selected.label",
}
}
labelMessageBoldUnderline={
Object {
"defaultMessage": "is selected",
"description": "Bold & underlined text for feedback if option is selected",
"id": "authoring.answerwidget.feedback.selected.label.boldunderline",
}
}
/>
</div>
`;
exports[`FeedbackBox component renders as expected with a text input problem 1`] = `
<div
className="bg-light-300 p-4 mt-3 rounded text-primary-500"
>
<FeedbackControl
answer={
Object {
"correct": true,
"id": "A",
"problemType": "sOMepRObleM",
"selectedFeedback": "some feedback",
"title": "Answer 1",
"unselectedFeedback": "unselectedFeedback",
}
}
feedback="some feedback"
intl={Object {}}
key="selectedfeedback-A"
labelMessage={
Object {
"defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
"description": "Label text for feedback if option is selected",
"id": "authoring.answerwidget.feedback.selected.label",
}
}
labelMessageBoldUnderline={
Object {
"defaultMessage": "is selected",
"description": "Bold & underlined text for feedback if option is selected",
"id": "authoring.answerwidget.feedback.selected.label.boldunderline",
}
}
/>
</div>
`;
exports[`FeedbackBox component renders as expected with default props 1`] = `
<div
className="bg-light-300 p-4 mt-3 rounded text-primary-500"
>
<FeedbackControl
answer={
Object {
"correct": true,
"id": "A",
"problemType": "sOMepRObleM",
"selectedFeedback": "some feedback",
"title": "Answer 1",
"unselectedFeedback": "unselectedFeedback",
@@ -37,6 +110,7 @@ exports[`FeedbackBox component renders 1`] = `
Object {
"correct": true,
"id": "A",
"problemType": "sOMepRObleM",
"selectedFeedback": "some feedback",
"title": "Answer 1",
"unselectedFeedback": "unselectedFeedback",

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js
View File

@@ -38,7 +38,7 @@ export const useFeedback = (answer) => {
// Show feedback fields if feedback is present
const isVisible = !!answer.selectedFeedback || !!answer.unselectedFeedback;
setIsFeedbackVisible(isVisible);
}, [answer]);
}, []);
const toggleFeedback = (open) => {
// Do not allow to hide if feedback is added

3
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js
View File

@@ -103,8 +103,7 @@ describe('Answer Options Hooks', () => {
const key = state.keys.isFeedbackVisible;
output = module.useFeedback(answerWithOnlyFeedback);
expect(state.setState[key]).not.toHaveBeenCalled();
const [cb, prereqs] = useEffect.mock.calls[0];
expect(prereqs[0]).toStrictEqual(answerWithOnlyFeedback);
const [cb] = useEffect.mock.calls[0];
cb();
expect(state.setState[key]).toHaveBeenCalledWith(true);
});

16
src/editors/containers/ProblemEditor/data/OLXParser.js
View File

@@ -144,7 +144,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length],
title: stringresponse['@_answer'],
correct: true,
feedback,
selectedFeedback: feedback,
});
// Parsing additional_answer for string response.
@@ -156,7 +156,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length],
title: newAnswer['@_answer'],
correct: true,
feedback: answerFeedback,
selectedFeedback: answerFeedback,
});
});
} else {
@@ -165,7 +165,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length],
title: additionalAnswer['@_answer'],
correct: true,
feedback: answerFeedback,
selectedFeedback: answerFeedback,
});
}
@@ -177,7 +177,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length],
title: newAnswer['@_answer'],
correct: false,
feedback: newAnswer['#text'],
selectedFeedback: newAnswer['#text'],
});
});
} else {
@@ -185,7 +185,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length],
title: stringEqualHint['@_answer'],
correct: false,
feedback: stringEqualHint['#text'],
selectedFeedback: stringEqualHint['#text'],
});
}
@@ -245,7 +245,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length + answerOffset],
title: numericalresponse['@_answer'],
correct: true,
feedback,
selectedFeedback: feedback,
...responseParam,
});
@@ -258,7 +258,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length + answerOffset],
title: newAnswer['@_answer'],
correct: true,
feedback: answerFeedback,
selectedFeedback: answerFeedback,
});
});
} else {
@@ -267,7 +267,7 @@ export class OLXParser {
id: indexToLetterMap[answers.length + answerOffset],
title: additionalAnswer['@_answer'],
correct: true,
feedback: answerFeedback,
selectedFeedback: answerFeedback,
});
}
return answers;

4
src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
View File

@@ -175,7 +175,7 @@ class ReactStateOLXParser {
} else if (!answer.correct) {
wrongAnswers.push({
'@_answer': answer.title,
'#text': answer.feedback,
'#text': answer.selectedFeedback,
});
}
}
@@ -257,7 +257,7 @@ class ReactStateOLXParser {
}
getAnswerHints(elementObject) {
const feedback = elementObject?.feedback;
const feedback = elementObject?.selectedFeedback;
let correcthint = {};
if (feedback !== undefined && feedback !== '') {
correcthint = {

26
src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
View File

@@ -315,14 +315,14 @@ export const numericInputWithFeedbackAndHintsOLX = {
id: 'A',
title: '100',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
tolerance: '5',
},
{
id: 'B',
title: '200',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
},
],
},
@@ -378,19 +378,19 @@ export const textInputWithFeedbackAndHintsOLX = {
id: 'A',
title: 'the correct answer',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
},
{
id: 'B',
title: 'optional acceptable variant of the correct answer',
correct: true,
feedback: '',
selectedFeedback: '',
},
{
id: 'C',
title: 'optional incorrect answer such as a frequent misconception',
correct: false,
feedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
},
],
additionalStringAttributes: {
@@ -451,17 +451,17 @@ export const textInputWithFeedbackAndHintsOLXWithMultipleAnswers = {
id: 'A',
title: 'the correct answer',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
},
{
id: 'B',
title: '300',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
},
{
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
id: 'C',
title: '400',
},
@@ -469,7 +469,7 @@ export const textInputWithFeedbackAndHintsOLXWithMultipleAnswers = {
id: 'D',
title: 'optional incorrect answer such as a frequent misconception',
correct: false,
feedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
},
],
additionalStringAttributes: {
@@ -534,27 +534,27 @@ export const numericInputWithFeedbackAndHintsOLXException = {
id: 'A',
title: '300',
correct: true,
feedback: '',
selectedFeedback: '',
},
{
id: 'B',
title: '100',
correct: true,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
tolerance: '5',
},
{
id: 'C',
title: '200',
correct: true,
feedback: '',
selectedFeedback: '',
tolerance: '4',
},
{
id: 'D',
title: '500',
correct: true,
feedback: 'This is one feedback!',
selectedFeedback: 'This is one feedback!',
},
],
},

30
src/editors/containers/ProblemEditor/data/mockData/problemTestData.js
View File

@@ -41,7 +41,7 @@ export const checklistWithFeebackHints = {
'B',
'D',
],
feedback: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
selectedFeedback: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
},
{
id: 4,
@@ -51,7 +51,7 @@ export const checklistWithFeebackHints = {
'C',
'D',
],
feedback: 'You can specify optional feedback for one, several, or all answer combinations.',
selectedFeedback: 'You can specify optional feedback for one, several, or all answer combinations.',
},
],
settings: {
@@ -114,19 +114,19 @@ export const dropdownWithFeedbackHints = {
id: 'A',
title: 'an incorrect answer',
correct: false,
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
},
{
id: 'B',
title: 'the correct answer',
correct: true,
feedback: '',
selectedFeedback: '',
},
{
id: 'C',
title: 'an incorrect answer',
correct: false,
feedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
},
],
groupFeedbackList: [],
@@ -186,19 +186,19 @@ export const numericWithHints = {
{
id: 'A',
title: '100 +-5',
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
correct: true,
},
{
id: 'B',
title: '90 +-5',
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
correct: true,
},
{
id: 'C',
title: '60 +-5',
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
correct: false,
},
],
@@ -257,19 +257,19 @@ export const textInputWithHints = {
{
id: 'A',
title: 'the correct answer',
feedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
correct: true,
},
{
id: 'B',
title: 'optional acceptable variant of the correct answer',
feedback: '',
selectedFeedback: '',
correct: true,
},
{
id: 'C',
title: 'optional incorrect answer such as a frequent misconception',
feedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
correct: false,
},
],
@@ -325,25 +325,25 @@ export const singleSelectWithHints = {
id: 'A',
title: 'a correct answer',
correct: true,
feedback: 'Some new feedback',
selectedFeedback: 'Some new feedback',
},
{
id: 'B',
title: 'an incorrect answer',
correct: false,
feedback: '',
selectedFeedback: '',
},
{
id: 'C',
title: 'an incorrect answer',
correct: false,
feedback: 'Wrong feedback',
selectedFeedback: 'Wrong feedback',
},
{
id: 'D',
title: 'an incorrect answer again',
correct: false,
feedback: '',
selectedFeedback: '',
},
],
groupFeedbackList: [],