style(Computer Avatar Selector): Improve selection flow

[hirokiterashima]

This change is inspired by a feedback from one of the masters students. It improves the computer avatar selection flow and lessens the likelihood that the student will skip the dialog guidance activity altogether.

Notes

Please style as you see fit. It'd be nice to make the view of the selected avatar a little bit more fun(?)/exciting(?) somehow, like how users select a character when they're playing a video game. Maybe use text/image animations to make the selected avatar pop, without being overwhelming?

There may be some old styles that we can remove due to this change.

Changes

• Initial avatar selection view no longer has the "continue" button. In this view, the student can only choose from a selection of avatars.
• When the student selects an avatar, hide all other avatars, make the selected avatar bigger, and show a "continue" and "back" button.
  • Choosing "back" takes user back to the avatar selection view
  • Choosing "continue" starts the dialog with the selected avatar
• Updated and added tests to reflect new behavior

Test

• Test that the avatar selection flow works as described above for these cases
  • when there are multiple avatars to choose from.
  • when there is only one avatar to choose from. In this case, we show the enlarged selected avatar and a "continue" button. (no "back" button)

[qltysh]

Coverage Impact

Unable to calculate total coverage change because base branch coverage was not found.

🚦 See full report on Qlty Cloud »

🛟 Help

• Diff Coverage: Coverage for added or modified lines of code (excludes deleted files). Learn more.

• Total Coverage: Coverage for the whole repository, calculated as the sum of all File Coverage. Learn more.

• File Coverage: Covered Lines divided by Covered Lines plus Missed Lines. (Excludes non-executable lines including blank lines and comments.)

  • Indirect Changes: Changes to File Coverage for files that were not modified in this PR. Learn more.

[breity]

Looks great. 👍

I added a bounce animation to the Continue button and renamed the button label to "Chat with [avatar name]". I also cleaned up some styles and template and removed the MatButtonToggleModule dependency.

[hirokiterashima]

It looks like the avatars' names are all in uppercase now, which is probably what we want? Can you change it back?

[breity]

@hirokiterashima Ah yes, thanks for catching. Should be fixed now.

[hirokiterashima]

🎉 This PR is included in version 5.223.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀