Make embedded reading indicator visible and prominent to instructors in all quiz editor modes

[Copilot]

Problem

When instructors open a quiz in the editor, embedded readings are only indicated in SUBMISSION and QUIZ_EDITOR modes. If an instructor is working in RAW or FORM editor mode, there is no visual indication that the quiz has an embedded reading, making this feature non-obvious and easy to miss.

Solution

This PR removes the editor mode restriction from the reading indicator visibility condition in frontend/components/quizzes/quiz_ui.ts and enhances the visual prominence of the indicator. The indicator now displays in all editor modes (RAW, FORM, SUBMISSION, and QUIZ_EDITOR) when an instructor is not viewing as a student.

The indicator appears as a blue info alert box with the message "📖 This quiz has an embedded reading. Click 'View as Student' above to preview the reading." whenever:

1. The quiz has an embedded reading (quiz()?.readingId())
2. The instructor hasn't checked the "View As Student" checkbox (!asStudent())

Changes

• Modified lines 205-210 in frontend/components/quizzes/quiz_ui.ts
• Visibility condition: Changed from quiz()?.readingId() && ['SUBMISSION', 'QUIZ_EDITOR'].includes(editorMode()) && !asStudent() to quiz()?.readingId() && !asStudent()
• Visual styling: Added Bootstrap alert alert-info class for prominent blue background box
• Message enhancement: Added 📖 emoji and improved message clarity

Behavior

Editor Mode	View As Student	Has Embedded Reading	Result
RAW	❌ No	✅ Yes	✅ Shows indicator (NEW)
FORM	❌ No	✅ Yes	✅ Shows indicator (NEW)
SUBMISSION	❌ No	✅ Yes	Shows indicator (enhanced styling)
SUBMISSION	✅ Yes	✅ Yes	Shows actual reading (unchanged)
QUIZ_EDITOR	❌ No	✅ Yes	Shows indicator (enhanced styling)
QUIZ_EDITOR	✅ Yes	✅ Yes	Shows actual reading (unchanged)

This change improves both discoverability and visual prominence of the embedded reading feature without affecting existing functionality.

Fixes the issue where instructors were unaware of embedded readings when editing quizzes in RAW or FORM modes.

Fixes blockpy-edu/blockpy-server#76

Original prompt

---

This section details on the original issue you should resolve

<issue_title>A quiz with an embedded reading should make this visible to instructors</issue_title> <issue_description>When an instructor opens up a quiz in the editor, they can click "View as Student" to see any embedded readings. However, this interface is not obvious. There should be something displayed when there is a reading embedded, even if they are not viewing as student.</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes blockpy-edu/blockpy-server#76

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[acbart]

I'd like to make it a little more obvious visually that there IS a reading. @copilot

[Copilot]

I'd like to make it a little more obvious visually that there IS a reading. @copilot

Enhanced the reading indicator with Bootstrap alert styling in commit c35ef9c. The indicator now uses:

• alert alert-info class for a blue background box
• 📖 book emoji for visual appeal
• Clearer, more positive messaging

The indicator is now much more visually prominent and will catch instructors' attention when they open a quiz with an embedded reading.