From 00f3e8f25e7cb736ce3b43eaf838430caa6db200 Mon Sep 17 00:00:00 2001 From: Benedikt Artelt Date: Tue, 6 May 2025 12:27:14 +0000 Subject: [PATCH 1/4] Add multilingual support for exercise descriptions --- app/javascript/multilang_de.css | 3 +++ app/javascript/multilang_en.css | 3 +++ app/views/exercises/implement.html.slim | 2 ++ docs/multilang.md | 32 +++++++++++++++++++++++++ 4 files changed, 40 insertions(+) create mode 100644 app/javascript/multilang_de.css create mode 100644 app/javascript/multilang_en.css create mode 100644 docs/multilang.md diff --git a/app/javascript/multilang_de.css b/app/javascript/multilang_de.css new file mode 100644 index 000000000..0245890bb --- /dev/null +++ b/app/javascript/multilang_de.css @@ -0,0 +1,3 @@ +:root[lang="de"] .multilang:not([lang="de"]) { + display: none; +} diff --git a/app/javascript/multilang_en.css b/app/javascript/multilang_en.css new file mode 100644 index 000000000..42a8926f0 --- /dev/null +++ b/app/javascript/multilang_en.css @@ -0,0 +1,3 @@ +:root[lang="en"] .multilang:not([lang="en"]) { + display: none; +} diff --git a/app/views/exercises/implement.html.slim b/app/views/exercises/implement.html.slim index bc8873e54..21679c31e 100644 --- a/app/views/exercises/implement.html.slim +++ b/app/views/exercises/implement.html.slim @@ -2,6 +2,8 @@ // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326. Otherwise, lti_parameters might be nil meta name='turbolinks-cache-control' content='no-cache' + - append_stylesheet_pack_tag("multilang_#{I18n.locale}") + #editor-column - unless @embed_options[:hide_exercise_description] diff --git a/docs/multilang.md b/docs/multilang.md new file mode 100644 index 000000000..e8044116b --- /dev/null +++ b/docs/multilang.md @@ -0,0 +1,32 @@ +# Multilanguage Support for Exercises and Tips + +This document provides an overview of how to support multilingual exercise descriptions and tips that are displayed in the exercise implementation view. + +## Introduction + +To improve the maintenance of exercises in multilingual teaching scenarios, it may be better to provide exercises with exercise descriptions in several languages than to work with translated copies of an exercise. CodeOcean already has multilingual support that can be used to achieve this. + +The implementation of multilanguage support in CodeOcean is inspired by [Moodle's Multilang Content Filter](https://docs.moodle.org/405/en/Multi-language_content_filter): Attributes are used to indicate the multilingual nature of a content element (`class="multilang"`) and to specify the exact language (`lang="XX"`). CSS is then used to control the visibility on the page. + +## Usage + +When making exercise descriptions or tips multilingual, the `.multilang`class must be assigned to all multilingual content. The `lang` attribute must be set to the appropriate locale, e.g. `"en"` or `"de"`. This very simple solution can be applied in many different ways: + +Example 1 (Separated Multilingual Content Blocks): + +``` +

Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist.

+

Implement a function that decides for a given parameter whether it is even or odd.

+``` + +Example 2 (Inline Separation of Multilingual Content): + +``` +

Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist. Implement a function that decides for a given parameter whether it is even or odd.

+``` + +This approach also applies to the description of tips, including their example sections. + +## Supported Locales + +At the time of writing CodeOcean supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [multilang_de.css](../app/javascript/multilang_de.css) and [multilang_en.css](../app/javascript/multilang_en.css) have been added to the application. To support other locales, just copy & paste one of these snippets and change the locale in the CSS rule. To really take effect, the appropriate locale must be added to CodeOcean (see [Config --> Locales](../config/locales/) for details). \ No newline at end of file From 822106a6d2dd65a56ba17aa56111102c3c810368 Mon Sep 17 00:00:00 2001 From: AutoPING-TUI Date: Tue, 3 Jun 2025 12:40:07 +0200 Subject: [PATCH 2/4] Apply suggestions from code review Aligning the code with the style of this repository. Co-authored-by: Sebastian Serth --- app/javascript/multilang_de.css | 2 +- app/javascript/multilang_en.css | 2 +- docs/multilang.md | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/javascript/multilang_de.css b/app/javascript/multilang_de.css index 0245890bb..d89955cb4 100644 --- a/app/javascript/multilang_de.css +++ b/app/javascript/multilang_de.css @@ -1,3 +1,3 @@ :root[lang="de"] .multilang:not([lang="de"]) { - display: none; + display: none; } diff --git a/app/javascript/multilang_en.css b/app/javascript/multilang_en.css index 42a8926f0..8fa5ad8df 100644 --- a/app/javascript/multilang_en.css +++ b/app/javascript/multilang_en.css @@ -1,3 +1,3 @@ :root[lang="en"] .multilang:not([lang="en"]) { - display: none; + display: none; } diff --git a/docs/multilang.md b/docs/multilang.md index e8044116b..d676d6d3d 100644 --- a/docs/multilang.md +++ b/docs/multilang.md @@ -10,19 +10,19 @@ The implementation of multilanguage support in CodeOcean is inspired by [Moodle' ## Usage -When making exercise descriptions or tips multilingual, the `.multilang`class must be assigned to all multilingual content. The `lang` attribute must be set to the appropriate locale, e.g. `"en"` or `"de"`. This very simple solution can be applied in many different ways: +When making exercise descriptions or tips multilingual, the `.multilang` class must be assigned to all multilingual content. The `lang` attribute must be set to the appropriate locale, e. g., `"en"` or `"de"`. This very simple solution can be applied in many different ways: Example 1 (Separated Multilingual Content Blocks): -``` +```md

Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist.

Implement a function that decides for a given parameter whether it is even or odd.

``` Example 2 (Inline Separation of Multilingual Content): -``` -

Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist. Implement a function that decides for a given parameter whether it is even or odd.

+```md +

Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist.Implement a function that decides for a given parameter whether it is even or odd.

``` This approach also applies to the description of tips, including their example sections. From 5e6584f33adeb1d2f5cdd24e48c73c97bc41770d Mon Sep 17 00:00:00 2001 From: AutoPING-TUI Date: Tue, 3 Jun 2025 14:13:51 +0200 Subject: [PATCH 3/4] Update multilang.md to add new languages --- docs/multilang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/multilang.md b/docs/multilang.md index d676d6d3d..fee161ece 100644 --- a/docs/multilang.md +++ b/docs/multilang.md @@ -29,4 +29,4 @@ This approach also applies to the description of tips, including their example s ## Supported Locales -At the time of writing CodeOcean supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [multilang_de.css](../app/javascript/multilang_de.css) and [multilang_en.css](../app/javascript/multilang_en.css) have been added to the application. To support other locales, just copy & paste one of these snippets and change the locale in the CSS rule. To really take effect, the appropriate locale must be added to CodeOcean (see [Config --> Locales](../config/locales/) for details). \ No newline at end of file +At the time of writing CodeOcean supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [multilang_de.css](../app/javascript/multilang_de.css) and [multilang_en.css](../app/javascript/multilang_en.css) have been added to the application. To support other locales, just copy and paste one of these snippets and change the locale in the CSS rule. To really take effect, the appropriate locale must be added to CodeOcean (see [Config --> Locales](../config/locales/) for details) and also requires a change to Rails.application.config.i18n.available_locales: https://github.com/openHPI/codeocean/blob/main/config/application.rb#L37. From 4a2f02b603005be0e04c9ee10fe3ebe69fff690b Mon Sep 17 00:00:00 2001 From: AutoPING-TUI Date: Wed, 4 Jun 2025 11:18:48 +0200 Subject: [PATCH 4/4] Update docs/multilang.md to make config link stable Co-authored-by: Sebastian Serth --- docs/multilang.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/multilang.md b/docs/multilang.md index fee161ece..519337120 100644 --- a/docs/multilang.md +++ b/docs/multilang.md @@ -29,4 +29,4 @@ This approach also applies to the description of tips, including their example s ## Supported Locales -At the time of writing CodeOcean supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [multilang_de.css](../app/javascript/multilang_de.css) and [multilang_en.css](../app/javascript/multilang_en.css) have been added to the application. To support other locales, just copy and paste one of these snippets and change the locale in the CSS rule. To really take effect, the appropriate locale must be added to CodeOcean (see [Config --> Locales](../config/locales/) for details) and also requires a change to Rails.application.config.i18n.available_locales: https://github.com/openHPI/codeocean/blob/main/config/application.rb#L37. +At the time of writing CodeOcean supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [`multilang_de.css`](../app/javascript/multilang_de.css) and [`multilang_en.css`](../app/javascript/multilang_en.css) have been added to the application. To support other locales, just copy and paste one of these snippets and change the locale in the CSS rule. To really take effect, the appropriate locale must be added to CodeOcean (see [Config --> Locales](../config/locales/) for details) and also requires a change to `Rails.application.config.i18n.available_locales` in [`config/application.rb`](../config/application.rb).