[BUG] Allow users to navigate between exercises using header

[hasan-sh]

Fixes #4441

Enhanced the overall ui of exercises.

• Better header;
  • Clear background and font weight on the currently selected exercise
  • Also, users now can click to navigate through existing exercises
• Next button doesn't show currenlty.
  • Hiding it always is fine, since navigation is possible using the headers.

How to test

• see [BUG] Parsons puzzle: second exercise is unreachable #4441 or simply view the puzzles..

[ghost]

👇 Click on the image for a new way to code review

Legend

[Felienne]

Nice, the switching now works:

I am wondering though, how will kids know there is a second puzzle? The UI now does not really invite to click the 2 I am afraid. Maybe we should make the "advance" button that now goes to the quiz, go to the next puzzle?

We once had an issue coining the idea to make the quiz and Parsons more similar (#4001) but it was closed without us pursuing it further. I think we should do something like that still, make the parsons look more like the quiz with a clear advance step (we can still merge this, of course!)

[Felienne]

(added the original one to the project board for the meeting, but if I am needed to discuss, feel free to skip it till next time)

[mergify]

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).