Refactor question button from template to TypeScript component

[Copilot]

The question/help button was implemented as inline HTML and JavaScript in the Jinja2 template, mixing presentation with business logic and violating established component patterns.

Changes

AssignmentInterface (frontend/components/assignment_interface.ts)

• Added question form observables: questionTitle, questionContent, includeCode
• Added showQuestionModal() and submitQuestion() methods
• Makes functionality available to all assignment interface subclasses

BlockPyInterface (frontend/components/blockpy/blockpy_interface.ts)

• Inlined question button template following existing pattern (same approach as reader.ts)
• Uses Knockout.js data-bind for event handling

Template cleanup (templates/blockpy/editor.html)

• Removed 191 lines of inline HTML and JavaScript
• Template now only contains structural markup

Before/After

Before:

<!-- In template -->
<button onclick="showQuestionModal()">Ask Question</button>
<script>
function showQuestionModal() { ... }
function submitQuestion() { 
    const title = $('#question-title').val();
    // 70+ lines of jQuery...
}
</script>

After:

// In AssignmentInterface
questionTitle: ko.Observable<string>;

showQuestionModal() {
    $('#question-modal').modal('show');
}

submitQuestion() {
    const title = this.questionTitle();
    // Type-safe, testable code
}

// In BlockPyInterface  
const TEMPLATE = `<button data-bind="click: showQuestionModal">...</button>`;
ko.components.register("blockpy", { viewModel: BlockPyInterface, template: TEMPLATE });

This aligns with the component architecture used throughout the codebase and enables proper separation of concerns, type safety, and reusability.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.