UX principle: UI elements should not jump around if possible

[mircealungu]

e.g. the text visible jumps between the exercise and solution and it is unpleasant:

this would be one possible version where text would not jump around:

we should try to implement this @merleschoen @tfnribeiro

[merleschoen]

Yes, we should look into that! I remember having a discussion with @tfnribeiro whether the solution should be above or under the context and we agreed that it should be above the context for all exercises with bottom input for consistency, but I guess we can revisit that decision.

[tfnribeiro]

What about we place the button above. The idea is that most of the time we have Word -> Context -> Input, so we can keep this idea for the audio exercises. Here is how it looks:

SpellWhatYouHear

TranslateWhatYouHear

[tfnribeiro]

Implemented in https://github.com/zeeguu/web/tree/audio-exercise-aligned-with-sol, will do a PR with the screenshots of before and after. Essentially, the word is always shown on top after the progress bar, followed by context if it exists, input correct and navigation.