feat: add prompt to grading screen #471
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #471 +/- ##
===========================================
- Coverage 100.00% 99.90% -0.10%
===========================================
Files 107 108 +1
Lines 1086 1106 +20
Branches 160 164 +4
===========================================
+ Hits 1086 1105 +19
- Misses 0 1 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
jansenk
requested review from
Copilot,
jristau1984,
michaelroytman and
nsprenkle
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the ORA (Open Response Assessment) data model to support multiple prompts instead of a single prompt. The change updates the API documentation, Redux state management, selectors, and UI components to handle an array of prompts with descriptions.
Key changes:
- Updated
oraMetadatastructure from a singlepromptstring to apromptsarray of objects withdescriptionfields - Modified Redux selectors to extract and map prompt descriptions from the array
- Enhanced
ResponseDisplaycomponent to conditionally render single or multiple prompts with appropriate UI components
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/data/services/lms/api.js | Updated API documentation comment to reflect prompts instead of prompt |
| src/data/redux/app/selectors.js | Changed selector from prompt to prompts with mapping logic to extract descriptions |
| src/data/redux/app/selectors.test.js | Updated test data and assertions to use prompts array structure |
| src/data/redux/app/reducer.js | Changed initial state from prompt: '' to prompts: [] |
| src/data/redux/app/reducer.test.js | Updated test expectations for new prompts array structure |
| src/containers/ResponseDisplay/index.jsx | Added prompt display logic with single/multiple prompt handling and refactored HTML formatting |
| src/containers/ResponseDisplay/index.test.jsx | Added tests for single and multiple prompt display scenarios |
| src/containers/ResponseDisplay/messages.js | Added internationalization message for prompt collapsible header |
| src/containers/ResponseDisplay/PromptDisplay.jsx | New component file with SinglePromptDisplay and MultiplePromptDisplay components |
| src/containers/ResponseDisplay/ResponseDisplay.scss | Added styling for single and multiple prompt displays |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
nsprenkle
approved these changes
Nov 10, 2025
Contributor
nsprenkle
left a comment
nsprenkle
left a comment
There was a problem hiding this comment.
Design nit: I'm not sure why a separate design is needed for single / multi-prompt. I also have some critiques / questions:
- Why do the single / multi-prompt headers use different colors / expand arrow placement? They should probably be the same.
- The multi-prompt design with prompt collapsed makes it look like the response is the prompt. Either keeping the same separated Prompt
<br>Response design or explicitly labelling the response might make that clearer.
Comment on lines
+49
to
+53
| formattedHtml(text) { | ||
| const cleanedText = text.replaceAll(/\.\.\/asset/g, `${getConfig().LMS_BASE_URL}/asset`); | ||
| return parse(this.purify.sanitize(cleanedText)); | ||
| } | ||
|
|
Contributor
There was a problem hiding this comment.
NIT: this is technically a sanitizedHtml function. No?
| const multiPrompt = prompts.length > 1; | ||
| return ( | ||
| <div className="response-display"> | ||
| {!multiPrompt && <SinglePromptDisplay prompt={prompts[0]} />} |
Contributor
There was a problem hiding this comment.
NIT: add a comment as to why this styling changes.
Suggested change
| {!multiPrompt && <SinglePromptDisplay prompt={prompts[0]} />} | |
| /* For single prompt ORAs, display the prompt at the top of the page */ | |
| {!multiPrompt && <SinglePromptDisplay prompt={prompts[0]} />} |
Comment on lines
+36
to
+39
| * Returns the ORA Prompts | ||
| * @return {array[string]} - ORA prompt | ||
| */ | ||
| prompt: oraMetadataSelector(data => data.prompt), | ||
| prompts: oraMetadataSelector(data => (data.prompts ? data.prompts.map((oraPrompt) => oraPrompt.description) : [])), |
Contributor
There was a problem hiding this comment.
Does this require backend changes? If so, can you link them?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds the prompts to the ora grading screen.
In order to do so, I needed to fix the way we were loading the prompts from redux state, along with testing.
We were treating it as a single string, but actually it's being stored as a list of objects with the text in a "description" key:
For the prompt, I had behavior diverge when there is one vs multiple prompts. For one prompt, I added the prompt as a dropdown at the top of the screen, above the file uploads.
##Existing:
##New, open/collapsed
For multiple prompts, the prompt is included at the top of the text response to that prompt. I also added some padding between text submissions to improve the overall look.
##existing
##New, open / collapsed
