QuizView - initial work for build mode

[fisher-alice]

This PR adds a two-panel layout - the left panel is for Resource Panel and right panel is the workspace. Thee are also two modes: build and attempt. Both views will mount the resource panel. This is different from other level edit views intentionally. We use QuizView for building the quiz to provide a more seamless authoring experience for curriculum writers.

Updates were made in the resource panel:

• added configuration and question bank tabs,
• added a prop to hide all navigation (in instructions and footer) since we want to exclude in build mode,
• added a callback prop that reports if tabs are available since Quiz level can sometimes not have any tabs.

QuizView now either renders either the build or attempt view.

Follow-up work is to match the config panel UI with Moshe's beautiful mockups.

Links

• Jira: https://codedotorg.atlassian.net/browse/SL-2167

Testing story

Tested locally:

Screencast vid of placeholder quiz attempt view, then level edit, then build questions view with configuration tab in Sidebar.

Screen.Recording.2026-09-04.at.4.01.19.PM.mov

Deployment notes

Privacy and security

[Copilot]

🟡 Changes recommended

Failed saves are not handled, resizing can hide the workspace, and accessibility issues remain.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds Quiz build mode and a shared two-panel Quiz shell.

Changes:

• Adds quiz configuration editing and persistence.
• Extends ResourcePanel with quiz-specific tabs.
• Adds resizable builder and placeholder attempt layouts.

File summaries

File	Description
_quiz_fields.html.haml	Links saved quizzes to build mode.
types.ts	Defines Quiz view and level types.
QuizView.tsx	Adds the shared Quiz layout.
Quiz.tsx	Removes the old placeholder component.
quiz-view.module.scss	Styles the two-panel layout.
index.js	Exports QuizView.
entrypoint.ts	Loads QuizView.
useQuizBuilderView.tsx	Composes builder content.
QuizConfigurationPanel.tsx	Implements configuration editing and saving.
quiz-configuration-panel.module.scss	Styles the configuration panel.
useQuizAttemptView.tsx	Provides the attempt placeholder.
ResourcePanel/types.ts	Adds quiz tab identifiers.
ResourcePanel/styles.module.scss	Adjusts empty-tab borders.
ResourcePanel/index.tsx	Supports quiz content and navigation behavior.
projects/utils.ts	Reads the quiz-builder app option.
useTwoPanelLayout.ts	Adds reusable sidebar resizing.

Review details

Suppressed comments (3)

apps/src/quiz/builder/QuizConfigurationPanel.tsx:128

• Validation errors are inserted above the form while focus remains on Save, but this element is not a live region, so screen readers are not notified that saving failed. Mark the message as an alert.

      {error && (
        <Typography variant="body3" color="error">
          {error}
        </Typography>

apps/src/quiz/builder/QuizConfigurationPanel.tsx:75

• The new save flow has no frontend unit coverage for request serialization, local validation, server rejection, or loading-state cleanup. Add focused tests for a successful save, both local validation paths, and a rejected HttpClient.put; the rejection case would catch the unreachable non-OK branch below.

  const handleSave = async () => {
    setError(null);
    // Blank means "no time limit" - QuizConfigurationData needs a real
    // positive integer otherwise. Checked here too, not just server-side
    // (Quiz's own time_limit_minutes validation), so a bad value shows up
    // immediately instead of after a round trip.

apps/src/quiz/builder/QuizConfigurationPanel.tsx:114

• HttpClient.put throws a NetworkError for every non-2xx response (apps/src/util/HttpClient.ts:101-105), so this branch is unreachable. Controller validation failures and network failures therefore skip setError and reject the click handler without telling the user. Catch the thrown error, read its response body when available, and set a fallback message for other failures.

      if (!response.ok) {
        const data = await response.json();
        setError(data.error || 'Something went wrong.');
        return;

• Files reviewed: 16/16 changed files
• Comments generated: 3
• Review effort level: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[fisher-alice]

Updated -

Screen.Recording.2026-09-04.at.5.09.45.PM.mov

[fisher-alice]

I'll log this as a follow-up TODO.