Add multilingual support for exercise descriptions

app/javascript/multilang_de.scss

@@ -0,0 +1,3 @@
+:root[lang="de"] .multilang:not([lang="de"]) {
+  display: none;
+}

app/javascript/multilang_en.scss

@@ -0,0 +1,3 @@
+:root[lang="en"] .multilang:not([lang="en"]) {
+  display: none;
+}

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')

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
+<p class="multilang" lang="de">Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist.</p>
+<p class="multilang" lang="en">Implement a function that decides for a given parameter whether it is even or odd.</p>
+```
+
+Example 2 (Inline Separation of Multilingual Content):
+
+```html
+<p><span class="multilang" lang="de">Implementieren Sie eine Funktion, die für einen gegebenen Parameter entscheidet, ob er gerade oder ungerade ist.</span><span class="multilang" lang="en">Implement a function that decides for a given parameter whether it is even or odd.</span></p>
+```
+
+## 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).