💻 Improvements to redesign of adventure page

[jpelay]

• The clear button is gonna create some very angry students who accidentally removed all their work. Solutions: Can we have an 'are you sure you want to remove all your code' pop-up? An 'undo' button would work too, or ctrl+Z? Or, last option: Do we even need the clear button? How many times does a student want to clear the whole field, and even if they do, it's not much effort to do so without having a clear button...?

• We need Dutch translations for some new buttons. => Maybe someone can add it here? Or in Weblate?

• The button says 'show editor' while I think we have been using the term 'input screen'. I think editor might be better though, so maybe it doesn't need to change? => @Felienne I dont have preferences either way, do you agree?

• There are nearly no margins at the sides (maybe because I don't have a very big screen) which makes it look a bit crowded. Can we add some margins? Same goes for the text of the adventures, I think it would look better if tehre was some white space on the sides of the text field.

• I don't really like the underling of 'level 1 - introduction', I think it might look better without the underlining, but that might just be my taste. The underlining also makes it feel clickable, which it is not. => I made it a little thicker, but I'm keeping it to solve another point further down.

• I really love the 'see more adventures' menu! I do think it's slightly counter intuitive that the button is on the right, while the menu appears on the left. => I don't think it's that counterintuitive due to us reading from left to right, in the case of languages that read from right to left, it appears on that side.

• Extra idea for the 'see more adventures' menu: Would it be possible to show in the menu which of the adventures you have completed? Like with a little tickmark or something behind the adventure? => This makes a lot of sense!! @Felienne I think we'd want here the tickmarks we are now using in the tabs? Shall we also add a tickmark next to the title?

• (low priority) why is the 'e' in our font a smaller size? It looks kind of strange? => Haha, no way for me to fix this sorry! Maybe I can change the font!

• (low priority) Before you could see if the adventure was just another adventure, or if you were learning a new command because of the tabs colours. We don't really have that anymore, exept for in the menu, but kids probably won't use that much. Maybe we can think of another way to show the students that they will learn a new command in this adventure. => This is why I didn't remove the underline, you can see now the type of adventure in the different colors of the underlining.

• In the parsons problem it's not really clear that you can do 2 exercises and that you have to click the 2. (Same as the old design though). => Opened 💻 Make it clearer that there are two parsons exercises #5924

• BUG: If you finish the level 1 quiz and click 'go to level 2' you'll be sent to the quiz of level 2, instead of the introduction. => Opened 🪲When finishing a quiz you're thrown to the next level quiz #5923

How to test

In regards of the margins, you can set the size of the screen in the responsive view mode to: 1077x524

[boryanagoncharenko]

Reviewed it, and it looks great! But perhaps, Marleen should have a look before this gets approved?