{DIPLOMAT}: Translation of the HTML-Tag description

Diplomat
1

Hi,

at the Web-Development levels, there are HTML-tags listed in the middle. If you click on them, you get a short description of how to use them. For example

<p>-Basic Tag

I noticed that the caption “Example” is already translated - but is it possible to translate the short description as well?

How? Thanks for any hint!

Regards!

2 Likes
2

Hi there,

I want to make sure I understand what you’re saying.

ptag.png798×598 48.8 KB

The text in top part can be translated, but the text in the “Example:” area cannot. Do I understand correctly?

2 Likes
3

Hi maka,

thanks for the answer! Sorry, I was somewat unclear: Here is what I see with the language setting German:

My main question is: Where / how can I translate the texts that are still English? Is it possible at all?

Just as a side remark I noticed that the word Example was already translated to “Beispiel”, so I hoped that a translation of the rest is possible already…

Regards!

3 Likes
4

It looks like those aren’t available yet. I’ve asked someone to double check for me, but I don’t think we’ve gotten the HTML related items into places where they can be translated yet. If that’s correct, then we’ll try to add these so they can be translated.

If you’d like to work on what is available to be translated, you can do so by visiting https://CodeCombat.com/i18n or by updating the locale file for your language. They’re located in this Github page/folder: https://github.com/codecombat/codecombat/tree/master/app/locale

(I believe de-DE.coffee is the German file)

4 Likes
5

Hello maka,

thanks. So I will look out for when it’s ready to tranlate…

Regards!

3 Likes
6

Just noticed this little component on i18n: https://direct.codecombat.com/i18n/component/useshtml which is ready for translation.
No idea, where it is used. If anyone could tell me how to find out where it is used - any hints welcome!
Regards!

3 Likes
7

Problem solved!

Browsing through recent github conributions, I found a thread, where @nick describes how to create the descriptions that we are discussing here (https://github.com/codecombat/codecombat/issues/399).

The descriptions are created using the level editor, for example https://direct.codecombat.com/editor/level/tiny . At the COMPONENT tab you can find the component programming.UsesHTML. At the “Setting” tab, you can get into the property “Property Documentation”. Here you will find all the tags (as the <p>-tag) and if you unfold them, you find the fields with name and description.
.You need to add i18n - entries (with [+] and sub entries for your language. It is similar to articles translation that I described at How to translate Articles

With that, it seems easy to translate all the HTML-Tag descriptions.

I you need a walkthroug, let me know!

Regards!

NB: Couldn’t work out how to translate the example though… So @maka, you are quite right: Now I can translate the transcription now, but not the examples, as there seem to be no i18n fields for that…

2 Likes
8

This is how we would refactor it to allow translations:

Screenshot 2017-06-05 13.15.22.png2110×1220 255 KB

Let me know if that makes sense.

3 Likes
9

Hi Nick, it works! Thank you so much for showing me the ropes. Now even the examples can be translated!

Just for reference:

  • First go to 18n
  • expand your language (here de-DE),
  • add with the [+] “Example context template”.
  • Click again on [+], you get a blank field, there you enter the tag, for example p1, press enter
  • another field opens, where you can put the value of p1, here the translation of “This text is in his own block…”.

Regards!

Here the German translation for the p-Tag:

2 Likes