Open
Conversation
- Implemented 5-star rating system for AI draft quality assessment - Added @Tracked aiDraftRating property to store rating (1-5) - Created starDefinitions array with rating values and tooltip descriptions: * 1 star: Not usable - requires complete rewrite * 2 stars: Has significant errors or disconnects that prevent use * 3 stars: Usable but requires editing before sending * 4 stars: Ready to use - could be sent as is * 5 stars: Exceptional quality - exceeds expectations - Added isStarFilled() action to determine filled/empty star state - Modified canBringDown getter to require rating before enabling button - Added showRatingControls getter to hide controls after draft is used - Reset aiDraftRating when generating new AI draft - Used {{#each}} loop in template to reduce repetitive star markup - Star rating is required before user can bring AI draft down to editor - Also minimized the line break for existing and AI text separator
- Styled stars with amber filled (#f5af4e) and gray empty (#ddd) colors - Created horizontal layout (stars + button side-by-side) with flexbox - Implemented custom CSS tooltips using ::after pseudo-element - Tooltips display with paddy green background (#8BC34A) - Positioned tooltips above stars with proper centering - Added required asterisk indicator in red on rating label - Optimized CSS by removing unnecessary transitions and redundant properties - Stars are 24px for adequate touch target size - Compact layout with star-rating-container fitting content width
- Added `await submission.answer` in model hook to preload answer relationship - Wrapped in try/catch since non-VMT submissions may not have answers - For VMT submissions, answer relationship wasn't loaded into Ember Data cache - Service uses peekRecord() which only checks cache, doesn't trigger load - Button now works immediately after page refresh without requiring user interaction Bug: Button stayed disabled after refresh even with student work present Root cause: Answer relationship not preloaded for some submissions
- Added @Tracked properties for checkbox states: * showUsageCheckboxes - controls visibility of checkbox UI * usageNotForStudents - won't use with students * usageNotForSelf - won't use for personal learning * usageForStudents - will use with students * usageToThinkAbout - will save for future consideration * usageFeedbackOnAI - will provide AI performance feedback - Created usageOptions array with checkbox keys and labels - Modified bringAiDraftDown() to show checkboxes instead of immediate copy - Added continueWithAIDraft() action to validate and process selections - Added hasSelectedUsageOption getter to ensure at least one checkbox selected - Updated showRatingControls to hide when checkboxes are visible - Checkbox selections logged (TODO: backend integration) before copying draft
- Added conditional .ai-usage-checkboxes section after star rating
- Displays when showUsageCheckboxes is true
- Used {{#each this.usageOptions}} loop to render checkboxes dynamically
- Each checkbox binds to tracked property via {{get this option.key}}
- Added usage-prompt with required asterisk indicator
- Included "Continue" button to proceed after selections
- Validates at least one checkbox selected before allowing continuation
- Compact template using array iteration reduces repetitive markup
UI flow: Rate stars → Click "Bring it Down" → Select usage options →
Click "Continue" → Content copied to editor
- Created .ai-usage-checkboxes styles with light background (#f9f9f9) - Styled checkbox options with flexbox layout and proper spacing - Added usage-prompt header with bold font and required asterisk - Checkbox inputs have pointer cursor for better UX - Continue button has top margin for visual separation - Clean, compact design matching existing AI draft section styles
- Add @Tracked aiWrittenFeedback property to store user's written feedback - Update canBringDown getter to require minimum 10 characters of feedback - Validation: aiDraftRating !== null && aiWrittenFeedback.trim().length >= 10 - Implement updateAiWrittenFeedback(event) action following standard Ember pattern - Reset aiWrittenFeedback to empty string when generating new AI draft
- Add written feedback textarea using Ember <Textarea> component - Implement two-way binding with @value={{this.aiWrittenFeedback}} - Add {{on 'input' this.updateAiWrittenFeedback}} event handler - Include label with required asterisk indicator for clarity - Set placeholder: "Share your thoughts on this AI-generated draft..." - Use rows={{1}} for compact horizontal layout - Follow standard form field patterns from codebase
- Create .ai-feedback-container with horizontal layout (flex-direction: row) - Add align-items: center to align label and textarea side by side - Set white-space: nowrap on label to prevent text wrapping - Style textarea: height 30px, padding 4px 8px, font-size 13px - Set max-width: 450px for balanced usability and compact appearance - Change .star-rating-container to flex-direction: row for horizontal stars - Change .ai-draft-actions to align-items: center for uniform alignment - Standardize all labels to 13px font-size for visual consistency
response-new.hbs: AI draft section now focuses on rating + usage‑intent flow, keeping the editor area clean for the PR scope response-new.js: action/state logic now aligned to the rating + usage‑intent gate only _response-mentor-thread.scss: refined usage‑checkbox card positioning (centered, compact, and closer to the action row)
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Description
Adds structured AI‑draft feedback capture in the response‑new flow. Teachers now must rate the draft and provide written feedback before bringing it down, then select how they intend to use the draft via a checkbox survey. This keeps AI drafts evaluable and ties usage intent to the draft lifecycle. The UI is compact and consistent with existing styling, and the AI button now works after refresh by preloading the answer relationship.
Feature Components:
Implementation – Rating & Feedback Gate:
aiDraftRatingandaiWrittenFeedbacktracked stateImplementation – Usage Survey:
Implementation – UI Layout:
Implementation – Refresh Fix:
answerrelationship in the submission routeChanges
Modified Files
app/components/response-new.jsaiDraftRating,aiWrittenFeedback)usageOptions,showUsageCheckboxes,hasSelectedUsageOption)app/components/response-new.hbsapp/styles/_response-mentor-thread.scssapp/routes/responses/new/submission.jssubmission.answerto fix AI button disabled state after refreshTesting
Manual
Automated