💻 Adventure page redesign

[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

[gisellandrade]

I'm leaving here the drawer, and how it would look like