I499 edit questions

[ShanaLMoore]

Story: [i499] Edit Functionality for Questions

This implementation does not include stimulus case study questions at this time.

Ref:

• 🎁 Implement the ability to edit questions from the Question UI #499

Expected Behavior Before Changes

Users had no way to edit questions once they were created.

Expected Behavior After Changes

Users can see an edit button on their own questions and admins can see an edit button on all questions (expect stimulus case study).
Users can see the data of their question populated into a modal form.
Users can edit and update their question.

Screenshots / Video

Edit functionality

Screen.Recording.2026-01-20.at.3.10.38.PM.mov

User can only edit their own questions

Screen.Recording.2026-01-20.at.3.16.48.PM.mov

Wysiwyg for essay questions

Notes

This implementation does not include stimulus case study questions at this time. Users can perform an edit-like action on stimulus case study questions by exporting the question to a CSV, editing the CSV, importing the question, and deleting the old version.

[github-actions]

Test Results

139 tests  ±0   139 ✅ ±0   0s ⏱️ ±0s
  1 suites ±0     0 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit fdf8747. ± Comparison against base commit ffb1578.

♻️ This comment has been updated with latest results.

[Copilot]

Pull request overview

This pull request adds edit functionality for questions, allowing users to edit their own questions and admins to edit all questions (excluding Stimulus Case Study type). The implementation includes a modal-based editing interface that reuses the existing question creation form, with modifications to support pre-populating data from existing questions.

Changes:

• Added react-quill package for WYSIWYG editing of Essay and File Upload question types
• Implemented update route and controller action for questions API
• Created modal-based edit interface using the existing CreateQuestionForm component
• Enhanced form components to support both create and edit modes with data pre-population
• Added image management for existing images (update alt text, mark for deletion)

Reviewed changes

Copilot reviewed 23 out of 25 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
package.json	Added react-quill dependency for rich text editing
config/routes.rb	Added update route to questions API
app/models/question.rb	Enhanced images_as_json to include image IDs for edit functionality
app/javascript/components/ui/Question/QuestionWrapper.jsx	Passed subjects prop for edit modal
app/javascript/components/ui/Question/QuestionMetadata.jsx	Added edit button with permission checks and edit modal integration
app/javascript/components/ui/Question/QuestionEditModal.jsx	New modal component for editing questions
app/javascript/components/ui/CreateQuestionForm/index.jsx	Refactored to support both create and edit modes with data initialization
app/javascript/components/ui/CreateQuestionForm/QuestionFormUI.jsx	Extracted UI component to support modal rendering
app/javascript/components/ui/CreateQuestionForm/Essay.jsx	Added ReactQuill for rich text editing and data prop support
app/javascript/components/ui/CreateQuestionForm/Upload.jsx	Added ReactQuill for rich text editing and data prop support
app/javascript/components/ui/CreateQuestionForm/Subject.jsx	Enhanced to support pre-populated subjects
app/javascript/components/ui/CreateQuestionForm/LevelDropdown.jsx	Enhanced to support pre-selected level
app/javascript/components/ui/CreateQuestionForm/ImageUploader.jsx	Added support for existing images with deletion marking
app/javascript/components/ui/CreateQuestionForm/AnswerSet.jsx	Added initialData prop for pre-populating answers
app/javascript/components/ui/CreateQuestionForm/Bowtie.jsx	Added data prop for pre-populating bowtie answers
app/javascript/components/ui/CreateQuestionForm/Categorization.jsx	Added data prop for pre-populating categories
app/javascript/components/ui/CreateQuestionForm/DragAndDrop.jsx	Added data prop for pre-populating drag and drop items
app/javascript/components/ui/CreateQuestionForm/Matching.jsx	Added data prop for pre-populating matching pairs
app/javascript/components/ui/CreateQuestionForm/MultipleChoice.jsx	Added data prop for pre-populating choices
app/javascript/components/ui/CreateQuestionForm/SelectAllThatApply.jsx	Added data prop for pre-populating answer options
app/javascript/components/ui/CreateQuestionForm/StimulusCaseStudy.jsx	Enhanced to support editing with data pre-population
app/javascript/components/pages/Search/index.jsx	Code formatting changes and subjects prop passing
app/controllers/api/questions_controller.rb	Added update action with image handling and permission validation

Comments suppressed due to low confidence (1)

app/javascript/components/ui/CreateQuestionForm/index.jsx:111

• For Essay and File Upload question types, the handler converts data by splitting on newlines and wrapping in paragraph tags (lines 95-98, 107-110). However, when editing an existing Essay/Upload question, the data is already HTML from ReactQuill (as set in line 43). Calling .split('\n') on HTML content will break the formatting. This handler should check if the data is already HTML or use the data as-is when it's already in HTML format.

      Essay: () =>
        appendData({
          html: data
            .split('\n')
            .map((line, index) => `<p key=${index}>${line}</p>`)
            .join('')
        }),
      'Drag and Drop': () => appendData(filterValidData(data)),
      'Bow Tie': () => data && appendData(data),
      'Multiple Choice': () => appendData(filterValidData(data)),
      'Select All That Apply': () => appendData(filterValidData(data)),
      'Stimulus Case Study': () => appendData(data),
      'File Upload': () =>
        appendData({
          html: data
            .split('\n')
            .map((line, index) => `<p key=${index}>${line}</p>`)
            .join('')
        })

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.