Remove palette?

[Felienne]

Hi @MarleenGilsing, @OnnoEbbens and others!

I am thinking lately about removing the sidebar with the examples. The interface is getting too full, and we need to make space so it all feels a bit calmer (@TiBiBa has suggested this many times) It is a bit sad because from our user study we heard that it is a good feature, but... maybe it is just the presence of examples that kids like and not perse this implementation.

The side bar was there before we had adventures, and I guess now the adventures serve as the examples also. And they have the nice benefit that we can dose them f.e. in level 1, we first example print and ask in the story and then turn and forward in the turtle adventure.

What do you think? Technically it is a piece of cake to remove it (although we should not forget to also remove it from the customization page) but I wanted to check with you too first before doing that.

[TiBiBa]

[TiBiBa]

We do have to re-write the adventure structure to support this new structure. I was just looking at the yaml files and the NL version is 2500+ lines. That's a nightmare to fix! Might be an idea to store the adventure in a db as well and write a UI to easily create and edit them? Some work for now, big reward onwards.

[MarleenGilsing]

I really like this lay-out! It looks much cleaner and more orderly.
It will also improve the higher levels where the example codes get longer and longer.

Maybe we can somehow incorporate the try buttons in the 'level 1' tab? Even though the students don't seem to use them much while working on the adventures, I think it was still a great idea to have an example of the new commands in the simpelest form.

[Felienne]

Lovely idea @MarleenGilsing! Once we have this new structure in place, we (you, haha) can write the level defaults (that control the first tab) a bit!

[Felienne]

We do have to re-write the adventure structure to support this new structure. I was just looking at the yaml files and the NL version is 2500+ lines. That's a nightmare to fix! Might be an idea to store the adventure in a db as well and write a UI to easily create and edit them? Some work for now, big reward onwards.

In a few weeks @Mark-Giesen will join the Hedy team and he will work on the yamls/translations specifically so maybe he can make the change to store these things differently (the db is surely an option!)

[OnnoEbbens]

I think it is a good idea to remove the sidebar with examples. There are not many students that use it, and those who use it are often annoyed that their code is replaced with the example when you click "try". However I do think we need a place where students can see and maybe try syntax examples. When you help a student it is very helpful if you can refer a student to a place where they can see a correct example.

For now I made cheatsheets for the students with syntax examples. See hedy spiekbrief.pdf (it is in Dutch). The students actively use this and usually open it as a pdf on their computer. However I have not made this for every level and it gets outdated really fast.

I think it would be better to have some sort of sandbox in Hedy where you can select a level and then you can see all commands (not just the new ones) that are available in that level and how they can be used. Students can open this in a different browser tab and use it to play around and then return to their original program to fix it. Looking forward to hear what you think about this.

[TiBiBa]

I think it is a good idea to remove the sidebar with examples. There are not many students that use it, and those who use it are often annoyed that their code is replaced with the example when you click "try". However I do think we need a place where students can see and maybe try syntax examples. When you help a student it is very helpful if you can refer a student to a place where they can see a correct example.

For now I made cheatsheets for the students with syntax examples. See hedy spiekbrief.pdf (it is in Dutch). The students actively use this and usually open it as a pdf on their computer. However I have not made this for every level and it gets outdated really fast.

I think it would be better to have some sort of sandbox in Hedy where you can select a level and then you can see all commands (not just the new ones) that are available in that level and how they can be used. Students can open this in a different browser tab and use it to play around and then return to their original program to fix it. Looking forward to hear what you think about this.

I like the idea of a sandbox! Where we only have the code editor and buttons for each supported command in that level. It would be nice if students could choose between "trying everything out" and "following the adventures". Giving them more freedom on how they would like to interact with Hedy. We can also set this as an option on class customizations if teachers want to allow the sandbox.

I also like the idea of a cheatsheet! Maybe we can integrate this into the website?

[Felienne]

I think it is a good idea to remove the sidebar with examples. There are not many students that use it, and those who use it are often annoyed that their code is replaced with the example when you click "try".

Yeah we heard that a lot!

However I do think we need a place where students can see and maybe try syntax examples. When you help a student it is very helpful if you can refer a student to a place where they can see a correct example.

We will still have example code in each levels but that will be a tad bigger than one line.

For now I made cheatsheets for the students with syntax examples. See hedy spiekbrief.pdf (it is in Dutch). The students actively use this and usually open it as a pdf on their computer. However I have not made this for every level and it gets outdated really fast.

Ah that is a lovely idea @OnnoEbbens! Me and Timon were just talking about this the other day, that we should make official ones and send them to schools as goodies! Maybe you can share with us the Word files that you used to create this and and we can add them to the repo and expand on them? The levels should really be quite stable so I think we can finish them and make them look nice with syntax highlighting etc.

I think it would be better to have some sort of sandbox in Hedy where you can select a level and then you can see all commands (not just the new ones) that are available in that level and how they can be used. Students can open this in a different browser tab and use it to play around and then return to their original program to fix it. Looking forward to hear what you think about this.

This is a lovely idea!! Could be a really nice project for a student. Maybe make a separate discussion for that idea? This can be closed I think because we effectively removed the side bar already.

[OnnoEbbens]

Thanks, If we create a sandbox with clear examples this might also function as a cheatsheet.

[OnnoEbbens]

@Felienne: I've send the word files of the cheatsheets by mail. Feel free to share and modify

[StephanEggermont]

At Level 1, I found the sidebar very useful. The code replacement might be made less annoying by adding undo. There is a usability issue with using both a sidebar and top tabs: it is not immediately clear how navigating the content is supposed to work. The sidebar is better at explaining than the top tabs, which only provide a title.

[redelaar]

I've been thinking a bit about the cheat sheet idea, or still having a palette but then less space-consuming. Maybe something like this would be sufficient? (A green "special" tab, that contains a sheetsheet of all the usable commands thus far)

[Felienne]

owwww @fRedelaar I love the confused smiley as logo for this!! Do you think you can make a draft of this (not sue if this is made with code or photoshop)? Otherwise we can ask @TiBiBa when he is back next week

[redelaar]

@Felienne I appreciate your reaction!! Do you mean a draft PR? In that case, sure I can take a look :). Should the button press download a PDF file, or show a drop-down with the commands (for now)?

The mock-up was made partly with code and partly photoshop!

[Felienne]

@Felienne I appreciate your reaction!! Do you mean a draft PR? In that case, sure I can take a look :).

That would be amazing!

Should the button press download a PDF file, or show a drop-down with the commands (for now)?

I think we want to show the list of commands, coming from the level defaults yaml file

[StephanEggermont]

Would you prefer a dropdown triangle next to the confused smiley icon to indicate that it is no action button like the two next to it?

[TiBiBa]

Would you prefer a dropdown triangle next to the confused smiley icon to indicate that it is no action button like the two next to it?

Thanks for the suggestion! Funny coincidence: This has just been implemented a few hours ago.

[MarleenGilsing]

I really like the new confused button! 👍

Maybe we can solve the problem of a code being replaced by by the 'try code' with an 'are you sure?' message?
Or maybe we could open a new tab with the try-code? So the students can use it more as a cheatsheet rather than it replacing their code.

[TiBiBa]

Just noticed this comment, love this idea! Currently the try it button completely removes the old code, which might not be what children expect. I think the "are you sure?" modal can be intrusive every time. I already discussed this with @Felienne some time ago, but it might be nice to support "multiple tabs" on which children can maintain programs on the same page. Making the try-it button re-direct to a new tab would be a great addition to this.