feat(review): render question and answer images

[MichalTheProgrammer]

Hotfix for rendering images in the review

Summary by CodeRabbit

Release Notes

• New Features

  • Quiz review cards now display images for questions and individual answer options, with fallback labels when text is unavailable.

• Tests

  • Added comprehensive test coverage for image rendering in quiz review functionality.

[coderabbitai]

Walkthrough

Extends the quiz review pipeline with optional image support: ReviewAnswer and ReviewQuestion types gain an image?: QuizImage field, buildReviewQuestions populates these via new reviewQuestionImage/reviewChoiceImage helpers, ReviewQuestionCard renders them with ProgressiveQuizImage and fallback alt text, and server-render tests verify both image URLs and alt text output.

Changes

Review card image support

Layer / File(s)	Summary
ReviewAnswer and ReviewQuestion type extensions frontend/app/types/quiz.ts	Imports QuizImage and adds image?: QuizImage to both ReviewAnswer and ReviewQuestion interfaces.
Image helpers and answer/question population frontend/app/play/buildReviewQuestions.ts	Adds reviewQuestionImage and reviewChoiceImage helpers that trim paths and resolve URLs via resolveKqfPlayImageUrls; extends singlechoice, imagepixelate, and multichoice answer mappings to include image; attaches image to each question in the final output.
ReviewQuestionCard image rendering frontend/app/components/quiz/results/ReviewQuestionCard.tsx	Imports ProgressiveQuizImage, renders optional q.image for the question and optional a.image per answer with a computed fallback answerAlt, and refactors answer JSX layout to wrap content in an inner flex row.
Server-render tests frontend/app/play/buildReviewQuestions.test.tsx, frontend/app/components/quiz/results/ReviewQuestionCard.test.tsx	Adds Node.js tests that build quiz fixtures, run buildReviewQuestions, server-render ReviewQuestionCard, and assert question image thumbnail URLs, choice image thumbnail URLs, and fallback alt="Odpowiedź 1" for image-only answers.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

• rdest-devs/cogniro#16: Introduces the backend QuizImage model and quiz asset serving endpoints that supply the image fields now consumed by ReviewAnswer and ReviewQuestion.

Suggested labels

Feature

Suggested reviewers

• Ki3mONo
• OlaszPL

Poem

🐰 Hop hop, images appear in review land,
Alt text fallbacks ready, carefully planned.
Thumbnails resolve through URL helpers bright,
Each answer card now rendered with delight.
The quiz review pipeline blooms with sight! 🌸

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely summarizes the main change: adding image rendering for questions and answers in the review feature. It directly reflects the core functionality added across multiple files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch review-answer-images

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[OlaszPL]

LGTM, clean code!

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/app/components/quiz/results/ReviewQuestionCard.tsx`:
- Around line 47-55: The alt attribute for the ProgressiveQuizImage component in
ReviewQuestionCard is currently falling back to an empty string when q.image.alt
is not provided, which creates an accessibility issue for screen readers.
Replace the empty string fallback in the alt prop with a meaningful fallback
that uses the question text or question number as the alt text. This ensures
images are properly described to assistive technologies even when the image's
built-in alt attribute is missing.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 81ba4de2-6f72-4dde-bb57-564118728fd9

📥 Commits

Reviewing files that changed from the base of the PR and between 9d7cb95 and 8dc7a9f.

📒 Files selected for processing (5)

• frontend/app/components/quiz/results/ReviewQuestionCard.test.tsx
• frontend/app/components/quiz/results/ReviewQuestionCard.tsx
• frontend/app/play/buildReviewQuestions.test.tsx
• frontend/app/play/buildReviewQuestions.ts
• frontend/app/types/quiz.ts