From 467c36d29ad11847c90a9339e8a6e334e58c47f4 Mon Sep 17 00:00:00 2001 From: Sebastian Serth Date: Wed, 2 Jul 2025 12:31:56 +0200 Subject: [PATCH] Add multilingual support for exercise descriptions This change is inspired by the respective changes in CodeOcean. --- app/javascript/multilang_de.scss | 3 +++ app/javascript/multilang_en.scss | 3 +++ app/views/layouts/application.html.slim | 2 +- docs/multilang.md | 30 +++++++++++++++++++++++++ 4 files changed, 37 insertions(+), 1 deletion(-) create mode 100644 app/javascript/multilang_de.scss create mode 100644 app/javascript/multilang_en.scss create mode 100644 docs/multilang.md diff --git a/app/javascript/multilang_de.scss b/app/javascript/multilang_de.scss new file mode 100644 index 000000000..d89955cb4 --- /dev/null +++ b/app/javascript/multilang_de.scss @@ -0,0 +1,3 @@ +:root[lang="de"] .multilang:not([lang="de"]) { + display: none; +} diff --git a/app/javascript/multilang_en.scss b/app/javascript/multilang_en.scss new file mode 100644 index 000000000..8fa5ad8df --- /dev/null +++ b/app/javascript/multilang_en.scss @@ -0,0 +1,3 @@ +:root[lang="en"] .multilang:not([lang="en"]) { + display: none; +} diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 78acf5fc8..737122c38 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -11,7 +11,7 @@ html lang=I18n.locale data-default-locale=I18n.default_locale = favicon_link_tag('/icon.svg', type: 'image/svg+xml') = favicon_link_tag('/icon.png', rel: 'apple-touch-icon', type: 'image/png') = tag.link rel: 'manifest', href: pwa_manifest_path - = stylesheet_pack_tag('stylesheets', media: 'all', 'data-turbolinks-track': 'reload', integrity: true, crossorigin: 'anonymous') + = stylesheet_pack_tag('stylesheets', "multilang_#{I18n.locale}", media: 'all', 'data-turbolinks-track': 'reload', integrity: true, crossorigin: 'anonymous') = stylesheet_link_tag('application', media: 'all', 'data-turbolinks-track': 'reload', integrity: true, crossorigin: 'anonymous') = javascript_pack_tag('application', 'data-turbolinks-track': 'reload', defer: false, integrity: true, crossorigin: 'anonymous') = javascript_include_tag('application', 'data-turbolinks-track': 'reload', integrity: true, crossorigin: 'anonymous') diff --git a/docs/multilang.md b/docs/multilang.md new file mode 100644 index 000000000..4cbf76253 --- /dev/null +++ b/docs/multilang.md @@ -0,0 +1,30 @@ +# Multilanguage Support for Tasks + +This document provides an overview of how to support multilingual task descriptions. + +## Introduction + +To improve the maintenance of tasks in multilingual teaching scenarios, it may be better to provide tasks with task descriptions in several languages than to work with translated copies of a task. CodeHarbor already has multilingual support that can be used to achieve this. + +The implementation of multilanguage support in CodeHarbor 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 task 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): + +```html +

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): + +```html +

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.

+``` + +## Supported Locales + +At the time of writing CodeHarbor supports the `DE` and `EN` locales. Accordingly, the two CSS snippets [`multilang_de.scss`](../app/javascript/multilang_de.scss) and [`multilang_en.scss`](../app/javascript/multilang_en.scss) 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 CodeHarbor (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).