View Architecture

This chapter outlines view conventions and examples for the MÜSLI integration. It pairs with the Controller Architecture chapter and focuses on HTML ERB views, Hotwire (Turbo Frames/Streams), and ViewComponents usage.

At a glance

The feature sections below (Registration Screens, Rosters, Assessments, Exams, Grade Schemes) include two tables:

• A Screens table to summarize each screen's purpose, main UI parts, and interaction model at a glance. It helps designers and developers align on scope and Hotwire usage, and links to static mockups when available.
• A Controller/action mapping table to tie those screens to concrete Rails endpoints and roles. It clarifies routing, authorization, and which actions are invoked from each screen. The following keys apply:

Conventions

• Templates: ERB (.html.erb).
• Components: ViewComponents in app/frontend/_components/ or feature folders.
• Hotwire: Frames vs Streams choice is deferred; decide per screen later.
• Stimulus: Use .controller.js suffix; colocate with feature folder under app/frontend/.
• Styling: SCSS; colocate per feature when practical.

Partials vs ViewComponents

Layout & Partials

• Use partials for reusable fragments (tables, forms, flash bars).
• Extract repeated frame shells (table headers, pagination) into partials.
• Keep forms server-rendered; augment with Stimulus when needed.

Mockups

Registration Screens

Campaigns (Teacher/Editor)

Screens

See Table keys above for column meanings.

Flow

flowchart LR
  subgraph TEACHER_EDITOR [Teacher/Editor]
    CIDX[Index] --> CNEW[New]
    CIDX --> CSHW[Show]
    CSHW --> OVW[Overview tab]
    CSHW --> SET[Settings tab]
    CSHW --> ITM[Items tab]
    CSHW --> POL[Policies tab]
    CSHW --> REGS[Registrations tab]
    CSHW --> ALLOCT[Allocation tab]
    CSHW --> CLOSE[Close registration]
    CLOSE --> ALLOC[Run allocation]
    ALLOC --> FIN[Finalize]
  end

Controller and actions mapping (teacher/editor)

Student Registration

Screens

Flow

flowchart LR
  subgraph Student
    IDX[Index] --> SHW[Visit campaign page]
    SHW --> ELIG{Eligible?}
    ELIG -->|No - Policy failed| ERR[Show error with reason]
    ELIG -->|No - Action required| REQS[Show action required page]
    REQS --> FULFILL[Fulfill requirement]
    FULFILL --> SHW
    ELIG -->|Yes| MODE{Mode}
    MODE -->|Preference-based| FORM_PREF[Show preference form]
    FORM_PREF --> RANK[Rank preferences]
    RANK --> SUBMIT[Submit]
    SUBMIT --> CONF_PREF[Confirmation submitted]
    CONF_PREF -.-> ALLOC[Allocation results after close]
    MODE -->|FCFS| FORM_FCFS[Show register buttons]
    FORM_FCFS --> REG[Click register/withdraw]
    REG --> CONF_FCFS[Confirmation enrolled/withdrawn]
  end

  subgraph TeacherEditor
    MGT[Manage Campaigns]
  end

Controller and actions mapping (student)

Rosters

Flow

flowchart LR
  OVR[Overview] --> DET[Detail]
  DET --> EDITR[Edit]
  OVR --> ASSIGN[Assign candidate]
  OVR --> ADD[Add student]
  OVR --> DELETE[Delete empty group]

Controller and actions mapping (teacher/editor)

Controller and actions mapping (tutor)

Assessments

Assessments (Lectures - Teacher/Editor)

Screens

See Table keys above for column meanings.

Flow

flowchart LR
  subgraph TEACHER_EDITOR [Teacher/Editor]
    SETUP[Setup] --> GR[Grading]
    GR --> PUB[Publish results]
  end
  subgraph TUTOR [Tutor]
    GRT[Grading entry]
  end
  subgraph STUDENT [Student]
    RES[Results]
  end
  PUB --> RES

Controller/action mapping (role-specific)

Assessments (Lectures - Tutor)

Screens

Flow

flowchart LR
  subgraph TUTOR [Tutor]
    TUT[Tutorial view] --> GRADE[Grading page]
    GRADE --> ENTER[Enter points per task]
    ENTER --> SAVE[Save team grade]
    SAVE --> NEXT{More teams?}
    NEXT -->|Yes| ENTER
    NEXT -->|No| COMPLETE[Mark complete]
  end

Controller/action mapping

Assessments (Lectures - Exam Grading Workflow)

The exam grading workflow progresses through four phases:

1. Phase 1: Point Entry — Teachers enter task points for each student; grade column remains empty
2. Phase 2: Distribution Analysis — View histogram, statistics, and percentiles of achieved points
3. Phase 3: Scheme Configuration — Set excellence/passing thresholds or manually define grade boundaries
4. Phase 4: Scheme Applied — Grades auto-computed; point edits auto-update grades

Screens

Two-Point Auto Algorithm

The Two-Point Auto mode simplifies grade scheme creation:

1. Set Excellence threshold (e.g., 54 pts = 1.0) — Students at or above this score receive grade 1.0
2. Set Passing threshold (e.g., 30 pts = 4.0) — Minimum score to pass; below this is 5.0 (fail)
3. System auto-generates intermediate bands (1.3, 1.7, 2.0, 2.3, 3.0, 3.7) with equal intervals
4. Preview shows point ranges, student count, and percentage per grade band
5. Pass rate calculated automatically (students with 4.0 or better / total)

Grade Auto-Update Behavior

After applying a grade scheme:

• Grades are computed automatically from total points
• If teacher edits any task points, grade recalculates immediately
• Grade column shows blue background + calculator icon to indicate computed value
• Manual override possible (triggers warning, marks as overridden)

Flow

flowchart LR
  subgraph TEACHER_EDITOR [Teacher/Editor]
    P1[Phase 1: Enter points] --> P2[Phase 2: Analyze distribution]
    P2 --> P3[Phase 3: Configure scheme]
    P3 --> P4[Phase 4: Grades computed]
    P4 --> PUB[Publish results]
  end

Assessments (Lectures - Student)

Screens

Flow

flowchart LR
  subgraph STUDENT [Student]
    A[Results Overview<br/>Index Page] -->|Click View Details| B[Results Detail<br/>Show Page]
    B -->|Back Button| A
    A -->|Filter: All/Graded/Pending| A
    A -->|Expand Older Assignments| A
    B -->|Download Feedback PDF| B
    B -->|View Assignment Page| C[Assignment Details]
  end

Controller/action mapping

Assessments (Seminars - Teacher/Editor)

Screens

Flow

flowchart LR
  subgraph TEACHER_EDITOR [Teacher/Editor]
    CONTENT[Content tab: Create talk] --> AUTO[Auto-create assessment]
    AUTO --> ASSESS[Assessments tab: View list]
    ASSESS --> INLINE[Inline grade]
    INLINE --> DETAIL[Optional: Click for details]
    DETAIL --> FEEDBACK[Add feedback]
  end

Controller/action mapping

Student Performance & Certification

Student Performance (Teacher/Editor)

Screens

Flow

flowchart LR
  subgraph Setup
    RC[Rule Configuration] --> PREVIEW[Preview Impact]
    PREVIEW --> SAVE[Save Rule]
    SAVE --> DIFF[Rule Change Diff Modal]
    DIFF --> GEN[Generate New Proposals]
  end

  subgraph Certification
    CD[Certification Dashboard] --> BULK[Bulk Accept Proposals]
    CD --> OVERRIDE[Manual Override]
    BULK --> CERT[Update Certifications]
    OVERRIDE --> CERT
  end

  subgraph Exam_Campaign
    CAMP[Campaign Settings] --> OPEN{Open Campaign}
    OPEN -->|Missing Certs| ERROR[Hard Fail: Complete Certifications]
    ERROR --> CD
    OPEN -->|All Complete| REG[Registration Open]
  end

  subgraph Finalization
    FIN[Finalize Campaign] --> CHECK{Check Certs}
    CHECK -->|Pending| REM[Remediation Modal]
    REM --> RESOLVE[Resolve Pending]
    RESOLVE --> CHECK
    CHECK -->|All Passed/Failed| MAT[Materialize Rosters]
  end

  GEN --> CD
  CERT --> CAMP

Controller/action mapping

Student Performance (Student)

Screens

Flow

flowchart LR
  subgraph Student
    DASH[Dashboard] --> PERF[Performance Overview]
    PERF --> DETAILS[Assignment Details]
    PERF --> CHECK{Certification Status?}
    CHECK -->|Passed| REG[Can Register for Exam]
    CHECK -->|Failed/Pending| BLOCK[Cannot Register]
  end

Controller/action mapping

Exams

Exams (Teacher/Editor)

Screens

Flow

flowchart LR
  subgraph Exam_Setup
    IX[Exams Index] --> NEW[Create Exam]
    NEW --> CAMP[Campaign Settings]
    CAMP --> REG_POLICY_CHECK{Has Registration-Phase<br/>Policy?}
    REG_POLICY_CHECK -->|Yes| CERT_CHECK{All Certifications<br/>Complete?}
    CERT_CHECK -->|No| ERROR[Pre-Flight Error Modal]
    ERROR --> CERT_DASH[Certification Dashboard]
    CERT_DASH --> CAMP
    CERT_CHECK -->|Yes| OPEN[Open Campaign]
    REG_POLICY_CHECK -->|No| OPEN
  end

  subgraph Registration
    OPEN --> REG[Students Register]
    REG --> CLOSE[Close Campaign]
  end

  subgraph Finalization
    CLOSE --> FIN_POLICY_CHECK{Has Finalization-Phase<br/>Policy?}
    FIN_POLICY_CHECK -->|Yes| PENDING_CHECK{Pending Certs Among<br/>Registrants?}
    PENDING_CHECK -->|Yes| REM[Remediation Modal]
    REM --> RESOLVE[Quick-Resolve Pending]
    RESOLVE --> PENDING_CHECK
    PENDING_CHECK -->|No| AUTO_REJECT[Auto-Reject Failed Certs]
    FIN_POLICY_CHECK -->|No| MAT[Materialize Roster]
    AUTO_REJECT --> MAT
  end

  subgraph Post_Registration
    MAT --> ROSTER[Exam Roster]
    ROSTER --> GRADE[Enter Grades]
  end

  IX -->|Click Certification Summary| CERT_DASH
  IX -->|Click Registered Count| ROSTER

Controller/action mapping

Exams (Tutor)

Tutors have read-only access if permitted by abilities.

Screens

Controller/action mapping

Dashboards

Student Dashboard

The student dashboard is the primary landing page for logged-in students, replacing the simple lecture list with a unified view of tasks, deadlines, and course progress.

Screens

Flow

flowchart LR
  subgraph Student_Dashboard
    DASH[Student Dashboard] --> REG[Register for Campaign]
    DASH --> SUBMIT[Submit Assignment]
    DASH --> RESULTS[View Grade]
    DASH --> ANNOUNCE[View Announcement]
    DASH --> COURSE[Go to Course]
    DASH --> TUTOR_ROSTER[View Tutorial Roster]
    DASH --> TUTOR_GRADE[Grade Submissions]
  end

Controller/action mapping

Teacher & Editor Dashboard

The teacher/editor dashboard serves as the administrative mission control for staff managing one or more lectures.

Screens

Flow

flowchart LR
  subgraph Teacher_Dashboard
    DASH[Teacher Dashboard] --> CAMPAIGNS[Manage Campaigns]
    DASH --> ROSTERS[Manage Rosters]
    DASH --> GRADEBOOK[Gradebook]
    DASH --> CERT[Student Performance]
    DASH --> ANNOUNCE[Announcements]
    DASH --> GRADE[Start Grading]
    DASH --> ALLOC[Allocate & Finalize]
    DASH --> TUTOR_ROSTER[View Tutorial Roster]
    DASH --> TUTOR_GRADE[Grade Submissions]
  end

Controller/action mapping