✨ Refactor quiz attempt details review and summary

[b-l-i-n-d]

Summary

This PR modernizes the quiz attempt details experience and aligns review rendering with the new learning-area UI system. It introduces reusable shared components for attempt details, consolidates question-level review rendering, and updates summary/side panel behavior so learners see accurate attempt-specific data and clear correctness states.

Problem

The existing attempt details implementation had several user-facing and maintainability issues:

• Review rendering for different question types was fragmented and partly tied to interactive quiz templates.
• Attempt details could resolve to a generic/latest attempt instead of the attempt referenced in the URL.
• Question headers and status display logic were duplicated and inconsistent across templates.
• Fill-in-the-blank, true/false, multiple-choice, matching/ordering/image-answering review displays were not fully standardized for read-only review mode.
• Instructor feedback was not consistently surfaced in the new summary component.
• Sidebar-to-question navigation could place the target question under the sticky top bar.

Root Cause

The previous structure mixed concerns between active quiz-taking templates and review-only attempt details. There was no fully centralized shared attempt-details component set, and attempt selection relied on fallback model queries instead of URL-first resolution. In addition, summary sidebar scrolling used default browser alignment behavior that did not account for sticky header offset.

What Changed

Shared component architecture

• Moved attempt-details rendering to shared reusable templates under:
  • templates/shared/components/quiz/attempt-details/
• Renamed review container template to review-answers for consistent naming.
• Centralized attempt-details question wrapper/header usage to reduce duplication.

Read-only review templates

Added dedicated non-interactive review templates for attempt details:

• review-answer-dnd.php (image answering, ordering, matching)
• true-false.php
• multiple-choice.php
• open-ended.php
• fill-in-the-blank.php

These templates now render correctness state and structure specifically for review mode rather than reusing interactive behavior.

Question status and header consistency

• Updated attempt-details question wrapper to compute and render status badges consistently (Correct, Incorrect, Pending) based on answer correctness and manual-review question types.
• Added null-safety around attempt answer handling to avoid incorrect property access.

Attempt resolution and routing correctness

• Updated learning-area attempt details entry template to resolve attempt_id from URL (?attempt_id=...&action=view_details) first.
• Added ownership and quiz-match validation before rendering.
• Added graceful empty state when attempt cannot be resolved.

Instructor feedback in summary

• Shared summary component now reads instructor_feedback from attempt info and renders it conditionally when present.
• Added page-level summary feedback styling in _quiz-summary.scss to match quiz summary design language.

Styling updates

• Extended quiz summary and quiz component styles to support review-mode UI states and layouts.
• Added correctness-state styling for fill-in-the-blank gaps and review comparison blocks.
• Updated review DnD styling to use data attributes for state-driven visual treatment.

Sidebar question navigation behavior

• Updated summary sidebar TS behavior (summary-sidebar.ts) to:
  • remove magic selector/id strings into constants,
  • scroll to target question with sticky-header-aware offset,
  • avoid auto-scroll on page load (scroll only on explicit click),
  • keep hash updates for deep-linking consistency.

User Impact

Learners and reviewers now see:

• Correct attempt-specific details when opening a specific attempt URL.
• Clear, standardized read-only review presentation across all supported question types.
• Consistent question header/status display.
• Instructor feedback in summary when provided by instructor.
• Sidebar question jumps that no longer hide question headers under sticky UI.

Validation

• PHP syntax checks run on changed PHP templates (php -l) during implementation.
• Lint-staged hooks (including eslint/prettier for TS) ran successfully during commit for JS/TS changes.
• Manual code-path validation performed for:
  • URL attempt resolution + validation fallbacks,
  • review template routing by question type,
  • feedback rendering condition,
  • sidebar click navigation offset behavior.