Label toggle

Feature description

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

The original PowerPoints where the data come from had a button that the user could toggle to hide or show the text labels and pointer lines that are overlaid on top of the images. Such a feature would be useful in our app, so that a student could quickly quiz themselves.

The labels should always be shown by default.

✅ Tasks to be Completed

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

• Add a button below the visual reference on the app home page to toggle labels. It should set the visibility CSS property of the labels to hidden.

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.
• (If applicable) New automated tests have been added to cover the changes.

Additional context

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

Start at the app home page and locate the visual reference and its overlaid text labels and pointer lines. Implement the toggle button so labels are visible by default and use the CSS visibility property to hide or show them. Run the repository's workflow checks and confirm the application runs without errors.