diff --git a/src/containers/ResponseDisplay/index.jsx b/src/containers/ResponseDisplay/index.jsx
index 09cdac4bd..28b00cd5b 100644
--- a/src/containers/ResponseDisplay/index.jsx
+++ b/src/containers/ResponseDisplay/index.jsx
@@ -10,8 +10,6 @@ import parse from 'html-react-parser';
import { selectors } from 'data/redux';
import { fileUploadResponseOptions } from 'data/services/lms/constants';
-
-import { getConfig } from '@edx/frontend-platform';
import SubmissionFiles from './SubmissionFiles';
import PreviewDisplay from './PreviewDisplay';
@@ -27,13 +25,7 @@ export class ResponseDisplay extends React.Component {
}
get textContents() {
- const { text } = this.props.response;
-
- const formattedText = text
- .map((item) => item.replaceAll(/\.\.\/asset/g, `${getConfig().LMS_BASE_URL}/asset`))
- .map((item) => parse(this.purify.sanitize(item)));
-
- return formattedText;
+ return this.props.response.text.map(text => parse(this.purify.sanitize(text)));
}
get submittedFiles() {
@@ -46,19 +38,60 @@ export class ResponseDisplay extends React.Component {
);
}
+ // New getter to extract prompts
+ get prompts() {
+ const raw = this.props.oraMetadata?.prompts || [];
+ return raw.map(p => p.description || '');
+ }
+
+ // New helper method
+ sanitizeAndParse = (html = '') => parse(this.purify.sanitize(html));
+
render() {
+ const textResponses = this.textContents || [];
+ const { prompts } = this;
+
return (
- {this.allowFileUpload &&
}
- {this.allowFileUpload &&
}
- {
- /* eslint-disable react/no-array-index-key */
- this.textContents.map((textContent, index) => (
-
- {textContent}
-
- ))
- }
+ {this.allowFileUpload &&
}
+ {this.allowFileUpload &&
}
+
+ {/* Prompt → Response pairs */}
+ {prompts.map((prompt, i) => {
+ const answer = textResponses[i] || '';
+
+ return (
+
+ {/* Prompt */}
+
+ Prompt {i + 1}} />
+
+ {this.sanitizeAndParse(prompt)}
+
+
+
+ {/* Learner Response */}
+
+
+
+ {answer ? (
+ this.sanitizeAndParse(answer)
+ ) : (
+ No response submitted for this prompt.
+ )}
+
+
+
+ );
+ })}
+
+ {/* only shows if no prompts */}
+ {prompts.length === 0
+ && textResponses.map((text) => (
+
+ {this.sanitizeAndParse(text)}
+
+ ))}
);
}
@@ -69,6 +102,8 @@ ResponseDisplay.defaultProps = {
text: [],
files: [],
},
+ // Add default
+ oraMetadata: { prompts: [] },
fileUploadResponseConfig: fileUploadResponseOptions.none,
};
ResponseDisplay.propTypes = {
@@ -80,6 +115,14 @@ ResponseDisplay.propTypes = {
}),
).isRequired,
}),
+ // Add PropTypes
+ oraMetadata: PropTypes.shape({
+ prompts: PropTypes.arrayOf(
+ PropTypes.shape({
+ description: PropTypes.string,
+ }),
+ ),
+ }),
fileUploadResponseConfig: PropTypes.oneOf(
Object.values(fileUploadResponseOptions),
),
@@ -87,6 +130,8 @@ ResponseDisplay.propTypes = {
export const mapStateToProps = (state) => ({
response: selectors.grading.selected.response(state),
+ // Add oraMetadata + use correct selector
+ oraMetadata: selectors.app.oraMetadata(state),
fileUploadResponseConfig: selectors.app.ora.fileUploadResponseConfig(state),
});