💻 Redesign coding and adventure screen

[t1u1]

When there are many exercises in a page, they occupy screen real estate and also intimidate the students.

Suggestion:

By default, a page could just show the first exercise or introduction text, and collapse all other rows.

The student can expand or collapse the other rows by their choice. The system can remember their choice, so that if they navigate away and come back to a tab, they will be back in the same context.

[Annelein]

@gisellandrade could you maybe look into this as well? If you don't understand it, let me know on Discord!

[gisellandrade]

Wooow, this is very interesting!! I'll be creating a new suggestions to this!!

[gisellandrade]

Hello everyone! I've been working on this. There are three proposals. Let me know if there's some functionalities or buttons that I'm missing in a comment so I can add it. And also let met know if there's anything you would like to add

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

[gisellandrade]

Here are the proposals finished! You can see it clearly on Figma, and leave your comments if you want 😃

[t1u1]

@gisellandrade Thank you. I would just like to clarify that what I was referring in "rows of exercises" is the rows on the same page of an exercise.

For example, on this page: https://hedy.org/hedy/3#random_command

... there are 3 rows of example hedy programs, each with their own description on the left. My suggestion was to keep only one of those rows visible at first, and let the user expand the other rows later.

I think what you are addressing in the proposals is also useful, but tangential to my request.

[gisellandrade]

@t1u1 I'll make a version for this, because in the redesign, this is a border case. And also show some proposals for the part that shows the examples differently, eventhough in the meetings, we didn't wanted to change a lot of this page because it can be very confusing.

[AnneliesVlaar]

Hi @gisellandrade

Here are some of my remarks on the designs.

I really like the dropdown for the level and for the adventures. The progressbar looks really calm

There is this 'learn title', what is the purpose of this title? What will be the other titles?

In some of the designs some titles of adventures are at the top of the input field. Are they there to show progression? Will they be clickable to immediately go back to a previous exercise? How will it look if a student did more than two adventures. Will it always be the present and previous exercise? I like the designs without these adventure titles more, because it gives the input field a calmer look.

I do like the design where the next adventure button is at the bottom right. I think that is where you end after executing the program and checking the outcome?

The line numbers have the same background as the code. I think it helps to have a different background to visually separate them.

I do like the idea of a full-screen-button. Maybe the button can be in the input field and in the output field as well? (Right now it is possible to set the output field full screen, and to hide the exercise. If in your designs the output field can be set to full screen, we have the think about how to run the code, because these buttons are all placed in the input field.)

The design looks very blue, but the copy paste button of the example code is yellow with the tab symbol. Maybe it can have the same colour as the debug/copy/clean buttons? And instead of the tab symbol to also have the copy symbol. 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?

I do like the design where the exercise is on top. This gives more room for example code if it is a bit larger. And it gives an overview of the whole exercise at once without scrolling.

In one of the designs there is a box to show suggestions. It looks a bit messy within the input field. Maybe this can be a box that pops up from the side, like the one that is used to show information when making a customised adventure as a teacher?

There are couple of things that I am missing in the design:

The switch of the commando language ( I always use them to check which commando's I can use. Maybe we can integrate them with the suggestions, that you can have a tooltip with a suggestion. Or the commando's are clickable to see a suggestion. Or there is a questionmark to show more information. Or ...)

The custom name of the program, with the ability to rename it.

The button to share the program.

The button to hand in the program to the teacher.

The button to read the program out loud.

There is a feature to silent a line of code. In the current design this is not visible (https://github.com/hedyorg/hedy/issues/5204). Maybe in the new design we can make this more visible, when you hover over there appears the silent emoticon?

I hoop the feedback makes sense, if you have any questions, if something is unclear please let me know.

[AnneliesVlaar]

@t1u1 By collapsing rows there is an extra step needed to be executed by the user. Since most users are kids it is better to avoid extra steps.

Maybe we should avoid to have multiple examples in one adventure but put them in 3 different adventures. How do you think about that?

[t1u1]

Maybe we should avoid to have multiple examples in one adventure but put them in 3 different adventures. How do you think about that?

Yes, that would work great too, thanks!

[gisellandrade]

This is how the new "developer's mode" would look like :)