[UI Idea] Show variable value in view

[Felienne]

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

**- Showing a variable value in the screen** It would be nice if we could add a value counter to the output screen that would be constantly updated. For example if you make the multiplication game in level 6/7 that it would keep track of your score live. Or if you'd make the story adventure that you could see the items your carrying. So you could see: 'bag: rope, sword'. It would have to be a seperate bar at the top or bottom of the screen that could show a variable's value. This doesn't only contribute to the fun of playing a game, but it might also help in the understanding of variables. When students can see live what's 'saved in the variable' they might understand it better. I think the command could be 'show'. This could be incorporated in level 2.

I think this is an excellent idea and will help students indeed. Scratch also supports something like this, where you tick a variable and its value is shown in view (here shown for points):

Maybe this would be a great BSc project, it is very clear in scope a sort of separate of the rest of the project

[fRedelaar]

Uploading some mock-ups here to give more visual context for the staff of bachelorklas (thesis).

Mock up 1

Mock up 2

Mock up 3

[fRedelaar]

In the previous comment made in December, I've shown some mock-ups. These mock-ups were made to show the possible end-goal of this issue. I've redesigned the mock-ups to make Hedy as user-friendly, shape/color/font consistent as possible.

The latest designed mock-ups:

In the latest design, I've focused on consistency and "calmness". This is to prevent Hedy from getting an interface that is getting too full, like discussion #1835 mentioned. Since TiBiBa created the NL/EN dropdown, I've used this in the design for the variable view for consistency. There are two mock-ups. One without and one without color-coding. Color-coding is a functionality brought up by @Felienne where string, integer, and list types will be made distinctive of each other using colors.

1. Design without color-coding string/integer/list types Clicking on this label icon will expand the variable view.

2. Design with color-coding string/int/list types

After a lot of experimentation with colors, the design above is the best one I could come up with so far. It is based on a common theme used in IDEs called Darcula. I believe it could fit the Hedy theme since the editor is dark.

I am confident that I am able to create the color-code functionality in the variable view, but I am not sure about color-coding in the editor too. (I do think this functionality in the editor would be very cool and helpful).

QOL ideas

• It would be good for users to be able to hide some variables. By clicking on the specific variable in the view, it will be hidden from the view. A small "revert" option/button should be present after the first variable has been hidden.

Some details

• 50fa7b: green was used in the mock up for integers

• 8be9fd: cyan blue was used in the mock up for lists

• bd93f9: purple was used in the mock up for strings

• More Dracula (color scheme) colors

• 3182ce: The blue background matches the background of the EN/NL label

• the label emoji used in the screenshot is an emoji: 🏷

[Felienne]

Hi @fRedelaar!!

Firstly, let me say that I love the mockups.

Some topics to think about:

Colors I think the colors are a great addition. I am tagging @thjazi39 here, because he is working on the syntax highlighting for the next few weeks. We are surely planning to give numbers a different color at one point, once we do, we should have different colors in your UI as well. So if you already make sure you can handle different types, we can add them when the highlighter is ready.

Emoji Ali (not yet on Github) is working on metaphors for variables, so he will have an opinion about whether or not we should use the label as an icon :) I will let him know you are considering this so he can reach out.