Lessons should have a quick reference of the commands
Closed this issue · 5 comments
The UI should have a way of quickly visualizing the commands and goals of each lesson. As discussed, this can be put on the right side of the canvas, as a slim panel which basically lists all commands and important information for that lesson.
Would it be a fixed panel on the right or would it be a expandable panel in case someone needs a reminder? If it's the latter, I've found https://www.npmjs.com/package/react-simple-sidenav which could be modified to satisfy our needs (move it to the right and remove the opacity to be able to keep it open while playing). What do you think?
I think an expandable panel would be best. What do you think about this other component? https://www.npmjs.com/package/react-sidebar
(demo here: http://balloob.github.io/react-sidebar/example/)
It seems it could work out-of-the-box for our use case.
In my opinion it should be a fixed panel. Since the commands are in english, and the students think in portuguese, they always have to "translate" their thoughts. To click some button to open a expandable panel everytime they need would be annoying. The kid should be able to look at the reference while writing their programs. If it is going to be an expandable panel, it should be in a way that once the student opens it, it stays openned, and offering an option to hide it again.
That was also what I had in mind, @nildo: a panel that doesn't prevent you from writing code, but that can be hidden if the student finds it too polluting (lessons can start with it being visible). Then a button can trigger the panel's visibility. This react-sidebar component seems to allow this easily.
Great! I'll work on that, then. I think we were all thinking of the same thing but I didn't explain myself well.