💻 Redesign of Adventure page within tryit endpoint

[Annelein]

Fixes #5535

https://www.figma.com/design/wrT20i7nKRBm66eVrf5A8F/Class-%2F%2F-Adventures-ideas?node-id=111-107&t=WR6z6PvgzdUO63sk-0

[Annelein]

A few good points that @AnneliesVlaar mentioned in #5517 , I've also added some

Few points of discussion:

• If the user uses the copy symbol, will the copy symbol (and button) than change into a paste symbol? And what behaviour will it have? Clean and paste? Paste at the end? Paste at the cursor?
• Do we want the explanation to be smaller in height and thus scrollable?

Missing in the design:

• Suggestion box / cheatsheet / commands dropdown
• Custom name of the program
• Button to share the program
• Button to submit the program
• Button to read the program out loud
• 💻 show clearly you can click to disable a line of code #5204

Please leave a comment if there is something else you're missing or that needs to be discussed

Screen.Recording.2024-07-03.at.15.13.08.mov

[Felienne]

• If the user uses the copy symbol, will the copy symbol (and button) than change into a paste symbol? And what behaviour will it have? Clean and paste?

Ow that is a great idea, I would love a copy button that changes into a paste button on theory. However in practice, no other tool has that (as fas as I know) so I fear it will be more confusing if we do it. We can disable the copy button if something has already been copied? But I also see how we can, for now, just aline with other tools do with is nothing.

Paste at the end? Paste at the cursor?

This is an unrelated interesting question! We have long discussed pasting at the end instead of over for the yellow example buttons. I am fine with that but maybe it is out of scope here? Do we need to discuss that now?

• Do we want the explanation to be smaller in height and thus scrollable?

Another very hard question!!!! I think it does not look nice that the explanation "hops" when switching tabs. However kids might not care so much? I fear that they will not scroll and then miss important explanation if we don't show it all (but on the other other hand, maybe they never read?)

In conclusion I think I'd keep it as we have it, but I can easily be swayed.

[AnneliesVlaar]

• If the user uses the copy symbol, will the copy symbol (and button) than change into a paste symbol? And what behaviour will it have? Clean and paste?

Ow that is a great idea, I would love a copy button that changes into a paste button on theory. However in practice, no other tool has that (as fas as I know) so I fear it will be more confusing if we do it. We can disable the copy button if something has already been copied? But I also see how we can, for now, just aline with other tools do with is nothing.

I can see that an all-in-one copy/paste button can be confusing. I was wondering, if you copy your code (to use it in a different level/adventure I guess), how do you paste it there without a paste button. Can we easily teach student to use a button to copy and ctrl+v for example to paste?

Paste at the end? Paste at the cursor?

This is an unrelated interesting question! We have long discussed pasting at the end instead of over for the yellow example buttons. I am fine with that but maybe it is out of scope here? Do we need to discuss that now?

I will make separate issue about the yellow button.

• Do we want the explanation to be smaller in height and thus scrollable?

Another very hard question!!!! I think it does not look nice that the explanation "hops" when switching tabs. However kids might not care so much? I fear that they will not scroll and then miss important explanation if we don't show it all (but on the other other hand, maybe they never read?)

In conclusion I think I'd keep it as we have it, but I can easily be swayed.

[gisellandrade]

@Annelein Here's the new buttons for the design and new modifications

And also I just add the language buttons that shows this

[Felienne]

As discussed in the meeting, if @boryanagoncharenko does a sanity check and merge, @MarleenGilsing can test it on alpha!

[jpelay]

As discussed in the meeting, if @boryanagoncharenko does a sanity check and merge, @MarleenGilsing can test it on alpha!

Yes! The url to try the new design is: localhost:8080/tryit

[boryanagoncharenko]

It is a big PR, did my best to go through the code! LGTM

[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).

[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).

[jpelay]

It is a big PR, did my best to go through the code! LGTM

Yes, it's huuuuuge. Ill do my best to test thoroughly on Alpha!

[MarleenGilsing]

As I said I before, I think the redesign is great and looks a lot better and more professional. Great job!

I tested it. These are the things I found:

• 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.
• 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?
• On my laptop the page looks like this:
  
  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 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.
• 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?
• (low priority) why is the 'e' in our font a smaller size? It looks kind of strange?
• (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.
• 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).
• 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.

[Felienne]

Thanks for the superextensive review Marleen!!! I marked the PR tobediscussed again so we can go over the issues in next week's meeting

[jpelay]

As I said I before, I think the redesign is great and looks a lot better and more professional. Great job!

I tested it. These are the things I found:

• 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.
• 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?
• On my laptop the page looks like this:
  
  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 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.
• 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?
• (low priority) why is the 'e' in our font a smaller size? It looks kind of strange?
• (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.
• 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).
• 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.

Thank you sooo much for the feedback!!! May I ask what's your screen resolution?

[MarleenGilsing]

You're welcome! My screen resolution is 1536x864