[AITT-1252] Add progress bar to the personalization quiz

[levadadenys]

[AITT-1252] Add progress bar to the personalization quiz

2025-10-20.16.57.09.mov

Links

• Jira: AITT-1152

Testing story

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Creation Checklist:

• Tests provide adequate coverage
• Privacy impacts have been documented
• Security impacts have been documented
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Follow-up work items (including potential tech debt) are tracked and linked

[Copilot]

Pull Request Overview

This PR implements a progress bar for the personalization quiz to provide users with visual feedback on their completion progress. The progress bar displays the current question number, total questions, and percentage complete.

• Adds a new PersonalizationProgressBar component with question tracking and percentage calculation
• Updates layout styling to accommodate the progress bar at the top of the quiz
• Integrates the progress bar into the main quiz container with conditional rendering

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
PersonalizationProgressBar.tsx	New component implementing progress bar with question count and percentage display
PersonalizationCollectorContainer.tsx	Integrates progress bar component and updates layout structure
personalization-information.module.scss	Adds styling for progress bar container and updates page layout
personalization_information.html.haml	Removes center justification to accommodate new layout

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[kobryan0619]

Not sure if these comments are needed.

[levadadenys]

Yes, this is a nice to have, not a need to have. This is intentional documentation for easier support in the future. While this is more straight forward example, I still try to add docs as a rule so that I don't forget to add it where it's less straight forward.

[tess323]

LGTM!

[tess323]

@MollyPeredo @kobryan0619 - tapping you in as well

[cearachew]

👍

[MollyPeredo]

This looks great. Love how smooth the animation is!