Colored region annotations in quiz images

[leandrumartin]

Feature description

A clear and concise description of the feature, and why it should be added to the project.

The images displayed in the quiz feature are currently not annotated at all. So for many of the questions asking about a sub-bone, it is showing an image of the entire bone. What should happen is that the bone image is shown with a color annotation highlighting the sub-bone, i.e. the same visual with the same annotations (minus text labels) that appears in the main page viewing area is shown in the quiz.

---

✅ Tasks to be Completed

A checklist of individual tasks that likely must be done before the feature can be considered "complete".

• Add colored region annotations to images in quiz. As much as possible/reasonable, reuse existing functions in ColoredRegionsOverlay.js for clean code.

The fetchBoneImage function in quiz.js is using incorrect logic for grabbing annotations. It is trying to grab pre-annotated images from URLs that don't exist. This is the wrong approach. Instead, we should be using the same logic to overlay the colored region annotations as the main page viewing area.

---

Acceptance Criteria

A checklist of conditions that must be met for this task to be considered complete. How will we verify that it's done correctly?

• The new feature is implemented as described.
• All related code passes the repository's workflow checks (linting, tests).
• The application runs without errors after the changes are made.
• Any related documentation has been updated, including JSDoc comments or docstrings

---

Additional context

Add any other context or screenshots about the feature request here.

See here how in the main viewer, the image for the pubic rami sub-bone is the pubis bone with annotations indicating the location of the sub-bone:

But in the quiz interface, the bone is shown without any annotations. There is no way for the person taking the quiz to know which sub-bone of the pubis bone is being asked about.