[FEATURE] Parse and convert code to YAML-code

[Mark-Giesen]

It would be helpfull to have a tool to change a program into YAML-code. YAML-code being the same program but with keywords surrounded with {}. This way, new adventures can be created within Hedy and once ready moved to yaml without this extra effort of adding {}.

[Felienne]

Hi @Mark-Giesen!

The issue here is as follows. When content developers make content (often this is @MarleenGilsing nowadays, but I do so too) they test programs in the browser, to see if they work, let's assume I am making a new adventure for functions, then I will test like this:

The corresponding code is:

define square
    repeat 4 times
        forward 50
        turn 90

repeat 50 times
    call square
    forward 10
    turn 10

Now if I want to paste this into the yaml files... I have to manually change this code into:

{define} square
    {repeat} 4 {times}
    ETCETERA, you get the idea

This is annoying!

So a little script would be awesome! Maybe a new route like /hedy/12/convert-code with a textbox (does not even have to be an ace one, a simple one would already help) that:

• reads from a text box
• parses the code
• translates all keywords to just their counterparts with {} around it
• prints the converted text

I suspect you might also need a bit of help creating a page and a route, if you want I can add more details here!

[Mark-Giesen]

This is clear enough for now. I'll have a look at it when I have some free time.
How would you like to trigger this translation? As an option in the language-switcher? So in this example "NL/EN/YAML" ?

[Felienne]

This is clear enough for now. I'll have a look at it when I have some free time.

Thanks!

How would you like to trigger this translation? As an option in the language-switcher? So in this example "NL/EN/YAML" ?

I was thinking an entirely new page, which could have an edit box and button to trigger the translation, because that might be easier for you to build than integrating into the (already a bit complex) switcher, but if you want to go that way, also fine by me!

[Mark-Giesen]

I was thinking an entirely new page, which could have an edit box and button to trigger the translation, because that might be easier for you to build than integrating into the (already a bit complex) switcher, but if you want to go that way, also fine by me!

I never start with easy, might end up there though. For the "nice" solution I'd like to know the difference between the language-switcher in the editor (for admins only at the moment) and the keyword-toggle in the cheatsheet. Are these different use cases? Or the same but build by others? I might combine those use case(s) with this one.

[Felienne]

I'd like to know the difference between the language-switcher in the editor (for admins only at the moment) and the keyword-toggle in the cheatsheet. Are these different use cases? Or the same but build by others? I might combine those use case(s) with this one.

They have different use cases, I will drop the explanation here, but I guess we should also add this to the Teacher's docs!

The keyword-toggle allows non-logged in users, in languages other than English, to switch between keywords in their language and English:

This switcher switches out keywords in example codes and in start codes. It might seem like this switcher also translates full programs, but it does not! It only looks like that in the first tab because the start program is switched.

The goal of this toggle is to help kids programming in non-English to also see what the keywords could look like in English.

[Felienne]

The language switcher is a translation tool, it takes an existing program, and translates it:

This is useful to translate a program from one language to another. It is currently only available to the admin user, it used to be there for kids but we found the UX too cluttered and most kids not needing it. I only use it to demonstrate the "coolness" of Hedy, but I can see how some teachers might also want it if they teach in multi-lingual classes.

I hope that helps!

[Mark-Giesen]

This switcher switches out keywords in example codes and in start codes. It might seem like this switcher also translates full programs, but it does not! It only looks like that in the first tab because the start program is switched.

Since the autosave I hardly ever have start codes anymore, the code there is now something I tried. These are not translated, not even the keywords. The syntax highlighting is changed though, the other-language codes are no longer colored. I don't think this is very helpfull (anymore).

When not logged in, there is no autosave, but still it doesn't translate the keywords in the command window.

Of course I can now copy the example again, that is translated.

Besides that, switching language here always returns to the Introduction tab, also not helpfull, I think.

[Mark-Giesen]

This is useful to translate a program from one language to another.

So this translates more than just the keywords? I assume this only works with unchanged examples and startcode? I don't think we translate everything using google translate or something similar? If so, then for teachers this wouldn't be very helpful, because I would like to translate something children made in case I can't read it.

[Mark-Giesen]

I'm giving a course on requirements engineering at the moment, so I'm a little more keen on clear use cases then normal :-)

[Felienne]

Besides that, switching language here always returns to the Introduction tab, also not helpfull, I think.

Yes I noticed that too! I don't think that is intentional (feel free to open an issue).

[Felienne]

This is useful to translate a program from one language to another.

So this translates more than just the keywords?

No the switcher just translates keywords. We don't translate plain text strings or variables (that is possible but would require a lot of programming work)

I assume this only works with unchanged examples and startcode?

No that works on all programs! We do that by parsing and re-pretty-printing. But it only works on programs without errors (with errors they don't parse -> can't be translated)

I don't think we translate everything using google translate or something similar? If so, then for teachers this wouldn't be very helpful, because I would like to translate something children made in case I can't read it.

Yes, that would be a nice to have feature (maybe a fun student project?) but a lot of work for something (as you fairly note) that is not yet well scoped out.

[Felienne]

I'm giving a course on requirements engineering at the moment, so I'm a little more keen on clear use cases then normal :-)

haha thanks (also thanks for the context! helps me get it) I think this is very useful, because of the organic growth and changing features esp in terms of localization, this business is not so very aligned! Maybe, instead of figuring out what we have now, you can take a step back and describe what you would like in terms of features and UX? That would be very useful if you can find the time.

[Mark-Giesen]

haha thanks (also thanks for the context! helps me get it) I think this is very useful, because of the organic growth and changing features esp in terms of localization, this business is not so very aligned! Maybe, instead of figuring out what we have now, you can take a step back and describe what you would like in terms of features and UX? That would be very useful if you can find the time.

I will start with that step back. I was trying to find the clarity, but apparently it not completely clear anymore. I see three use cases that have some overlap:

• Global Keyword toggle (so students can learn the English keywords as well), all keywords in examples and snippets change and preferably those in the coding window as well.
• Translations of coding window code to EN (for teachers to support students coding in other languages). Keyword minimum, nice to translate rest as well.
• Keyword toggle from any language to templated keywords (for content designers, could be teachers creating their own adventures as well)

And of course you can switch to an other language to translate everything, that one will remain the same.

[Felienne]

• Global Keyword toggle (so students can learn the English keywords as well), all keywords in examples and snippets change and preferably those in the coding window as well.

Ah nice! I always saw this as different things, but I see how a toggle could also translate the coding window! Do you prefer the UX then in the top right? Or entirely different?

[Felienne]

Yes, that would be a nice to have feature (maybe a fun student project?) but a lot of work for something (as you fairly note) that is not yet well scoped out.

Made a discussion: #4656

[Mark-Giesen]

Ah nice! I always saw this as different things, but I see how a toggle could also translate the coding window! Do you prefer the UX then in the top right? Or entirely different?

This is what I expected the toggle on the Cheatsheet to do. That position is fine, it will not be used by the majority, so on the top right might be a little overkill.

[Felienne]

This is what I expected the toggle on the Cheatsheet to do. That position is fine, it will not be used by the majority, so on the top right might be a little overkill.

Yeah I think that makes total sense, I am not sure why I did not think of this myself. Thanks a lot!!

I will update the translator button issue (#4420)