In the video, I show how to insert native language explanations in foreign language courses with Moodle in a consistent and time-efficient way at any location.
In foreign language courses in the classroom, participants can ask for help at any time. If they don’t understand something, they can ask the teacher.
However, in online foreign language courses, the circumstances are different: participants cannot ask for help immediately, at least in asynchronous teaching situations. Therefore, foreign language course creators need to think very carefully about how to give help. Not understanding foreign language text, especially instructions, can be so disruptive to the flow of a learning phase that the course’s continuation is significantly disrupted, if not impossible.

Using a plug-in for changing the language

Moodle has a feature built into its core to translate the user interface into the selected language. This is not possible with text written by course creators. Teachers have to do it themselves.

The plug-in Multi-Language Content (v2) is a great help here. With it, teachers can quite comfortably assign selected text to an installed language. Then only this part of the text is displayed in the selected language. If several languages are installed, a translation should be entered for each of these languages. Otherwise, there will be an ugly blank space. The tool does offer the option of entering a text for „Other languages“ so that such a blank space does not occur. But what kind of hint should that be? There could perhaps be a note in English that appears one selects a language without an explanation. However, this does not make much sense. If one sets the language to Spanish and gets an explanation in English, while the French student gets an explanation in her/his mother tongue – this is only frustrating.

Furthermore, the participants only see one language at one time. If the user interface is set to the native language, then the work instructions – if they have been translated with the plug-in – are only displayed in the native language. The learners will, therefore, never see work instructions in the target language. And this is not what I want to achieve as a language teacher.

Native language explanations should be consistent

As another disadvantage, there is a need for a considerable amount of work behind such a translation. Native-language explanations – like the whole course, of course – must have a consistent structure. So if work instructions have been translated at one point, participants can expect them to be translated everywhere. If there is no translation where there was one before, the help becomes arbitrary. And the students could feel lost. This should be avoided.

In the following video, I show how to offer help so that the target-language text always remains visible, while consistency is maintained without teachers having to do unnecessary work.

Native language explanations: consistent and effective

The code for copy&paste

<button type="button" class="btn btn-outline-dark" data-toggle="tooltip" data-placement="top" title="Text, that is displayed, when you hover over the button"> Label of the button </button>

Replace the blue text as you like. The text in orange modifies the appearance of the button itself. There is an explanation for this in the video. You can also copy this part of the code from the Bootstrap page. With some modifications, you can change the appearance from the buttons significantly. I have already presented the different button styles in a video before.

Refer to native language explanations with a symbol

If the outline button is still too dominant for you, you can have a less noticeable icon displayed instead of a text-label. A good source for these icons is the FontAwesome project (I use version 4.7. There, all icons are royalty-free). The above code is modified in some parts:

<button type="button" class="btn btn-link" data-toggle="tooltip" data-placement="top" title="" data-original-title="Text, der erscheint, wenn der Mauszeiger über dem Button steht"> <span style="font-size: 1em; color: Tomato;"><i class="fas fa-lightbulb"></i></span></button>

The result looks like this:

Discreet reference to the translation with an icon of FontAwesome.

Here is the explanation:

  • btn-link (green): This part ensures that the button has no frame.
  • <span …> …</span> (blue): Between these tags, the text on the button is modified. You only need to change the blue part if you don’t like the light bulb icon. If you want a speech bubble , you can use fa-comments-o at this point. Font Awesome certainly offers icons for every purpose and taste. Follow the link and look for the icon you want. Then click on the icon, copy the part fa-… from the code snippet that appears and paste it in place of the blue text part above.
  • color: Tomato; (blue): This part makes the icon appear in red. If you prefer a different color, you could replace Tomato with Gold, for example. You can find an overview of the color names behind this link.

Weitersagen …