Add multilingual support for exercise descriptions

Closes #2743
Merges #2928

Co-authored-by: Sebastian Serth <[email protected]>

Author: Benedikt Artelt

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/exercises/_form.html.slim

@@ -2,6 +2,7 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
+  - append_stylesheet_pack_tag("multilang_#{I18n.locale}")
   - append_javascript_pack_tag('sortable')
   - append_javascript_pack_tag('toast-ui')
   - append_stylesheet_pack_tag('toast-ui')

app/views/exercises/_tips_content.html.slim

@@ -4,6 +4,7 @@
   meta name='turbolinks-visit-control' content='reload'
   - append_javascript_pack_tag('highlight')
   - append_stylesheet_pack_tag('highlight')
+  - append_stylesheet_pack_tag("multilang_#{I18n.locale}")
 
 #tips.card.d-block.overflow-scroll role='tab'
   .card-header.py-2

app/views/exercises/implement.html.slim

@@ -2,6 +2,7 @@
   // 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]

app/views/tips/_form.html.slim

@@ -2,6 +2,7 @@
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
   meta name='turbolinks-visit-control' content='reload'
+  - append_stylesheet_pack_tag("multilang_#{I18n.locale}")
   - append_javascript_pack_tag('toast-ui')
   - append_stylesheet_pack_tag('toast-ui')
 

app/views/tips/show.html.slim

@@ -4,6 +4,7 @@
   meta name='turbolinks-visit-control' content='reload'
   - append_javascript_pack_tag('highlight')
   - append_stylesheet_pack_tag('highlight')
+  - append_stylesheet_pack_tag("multilang_#{I18n.locale}")
 
 h1
   = @tip.to_s

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