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), });