Make palette collapsable to make room for code page and adventures

[Felienne]

Discussed in https://github.com/Felienne/hedy/discussions/1021

^{Originally posted by **remva** October 14, 2021} While trying out Hedy's levels, I figured that I have the attention span of a kid myself. I am easily distracted while performing levels. The labels with games and commands are mainly very interesting, but there might be a bit too much text per page. An implementation on the front-end site of Hedy could be to show less labels on the top and left hand side of the website. For example: - Instead of 10 labels on the top of the page, we could combine 'Story', 'Turtle', 'Dishes', 'Dice', 'Rock, paper, scissors', 'Restaurant', 'Fortune teller' and 'Haunted House', to one label called 'Games'. You could either hover over the word 'Games', so that a list with all those sub-labels will expand. Or you could click on the word 'Games' and enter a new page with a 3x3 grid that shows game-options with a picture and the name of the game. Just like lots of other game-websites. - Instead of showing all commands on the left site of the page, only the word 'Commands' can be shown. Once again, you could either hover over the word 'Commands', so that a list with all labels will expand. Or you click on the word, so you can see the theory behind every command on a different page. This is what I came up with right now. I look forward to all of your insights.

[TiBiBa]

I like both ideas a lot to make the code page less crowded. Will take an look at the issue next week and post some screenshots of possible designs.

[Felienne]

Discussed in #1021

Originally posted by remva October 14, 2021 While trying out Hedy's levels, I figured that I have the attention span of a kid myself. I am easily distracted while performing levels. The labels with games and commands are mainly very interesting, but there might be a bit too much text per page.

An implementation on the front-end site of Hedy could be to show less labels on the top and left hand side of the website. For example:

• Instead of 10 labels on the top of the page, we could combine 'Story', 'Turtle', 'Dishes', 'Dice', 'Rock, paper, scissors', 'Restaurant', 'Fortune teller' and 'Haunted House', to one label called 'Games'. You could either hover over the word 'Games', so that a list with all those sub-labels will expand. Or you could click on the word 'Games' and enter a new page with a 3x3 grid that shows game-options with a picture and the name of the game. Just like lots of other game-websites.
• Instead of showing all commands on the left site of the page, only the word 'Commands' can be shown. Once again, you could either hover over the word 'Commands', so that a list with all labels will expand. Or you click on the word, so you can see the theory behind every command on a different page.

This is what I came up with right now. I look forward to all of your insights.

@TiBiBa Posting my idea here too because for now I want to focus on the palette:

Lovely idea @remva!

I totally agree that the interface is very full! I think we want to keep the adventures in place because in a near future teachers will be able to customize the tabs (see #775) and then we could show a bit less in the default interface too with the same customisations. Or maybe have students unlock adventures by doing earlier ones.

But I like your thinking about the commands (in technical terms called: a palette). I think our front end wizard @TiBiBa should be able to make a nice panel that folds it in and out. I would say for now just leave it as is with all the commands underneath each other (rather than as suggested with a separate page for each command) as see how that feels.

[TiBiBa]

I did some testing with making the palette window collapsable with a button. See the screenshots below for my proposed solution:

[Felienne]

I did some testing with making the palette window collapsable with a button. See the screenshots below for my proposed solution:

Awesome!! So much more space for the programming fields and explanation!

I guess we need some textual changes where we rewrite "links staan de commando's" into "use the arrow to show all commands" but feel free to continue along these lines!

[remva]

Amazing work! It looks very clean.

[Felienne]

Amazing work! It looks very clean.

Thanks @remva! It was all inspired by your ideas so thanks a lot for your constructive feedback!!