make challenge cards translateable

src/api/exercises.ts

@@ -6,6 +6,7 @@ const EXERCISES_ENDPOINT = `${BACKEND_API_URL}/exercises/`
 export interface Exercise {
     title: string,
     markdown: string,
+    markdown_de: string,
     skip_delay: number,
     next_exercise_id: number | null,
     id: number,
@@ -19,9 +20,17 @@ let allExercisesSolvedPage = "# 🎉 Congratulations! 🎉\n" +
     "Thank you for participating!  \n" +
     "Keep learning, keep exploring — and see you in the next competition. 🚀  ";
 
+let allExercisesSolvedPageDe = "# 🎉 Glückwunsch! 🎉\n" +
+    "\n" +
+    "Du hast es geschafft — du hast erfolgreich **alle Aufgaben** in diesem Wettbewerb gelöst! 🏆  \n\n" +
+    "Vielen Dank für deine Teilnahme!  \n" +
+    "Lerne weiter, entdecke weiter — und wir sehen uns im nächsten Wettbewerb. 🚀  ";
+
+
 export const FINAL_EXERCISE: Exercise = {
     title: "🚀 Congratulations, you finished all exercises!",
     markdown: allExercisesSolvedPage,
+    markdown_de: allExercisesSolvedPageDe,
     skip_delay: 0,
     next_exercise_id: null,
     id: -1,

src/components/BlocksemblerChallengeCard.vue

@@ -10,6 +10,7 @@ import BlocksemblerCodeSubmissionButton from "@/components/BlocksemblerCodeSubmi
 import {codingWorkspaceState} from "@/state";
 import {getCurrentExercise} from "@/api/exercises";
 import BlocksemblerChallengeSkipButton from "@/components/BlocksemblerChallengeSkipButton.vue";
+import TranslateIcon from "@/components/icons/TranslateIcon.vue";
 
 let nextSkipAllowedAt: Ref<Date | null> = ref(null);
 let remainingTimeToNextSkip: Ref<number | null> = ref(null);
@@ -19,6 +20,8 @@ let nextSubmissionAllowedAt: Ref<Date> = ref(new Date(Date.now() + 1000 * 60 * 6
 let remainingTimeToNextSubmission: Ref<number | null> = ref(null);
 let timeToNextSubmissionTimer: Ref<number | null> = ref(null);
 
+let language = ref("en");
+
 onMounted(async () => {
   marked.use(
       katexExtension({
@@ -31,11 +34,20 @@ onMounted(async () => {
 
 
 let markdownToHtml = computed(() => {
-  if (codingWorkspaceState.currentExercise === null) {
-    return ""
+  let currentMarkdown = "";
+
+  if (!codingWorkspaceState.currentExercise) {
+    return "";
   }
 
-  return marked(codingWorkspaceState.currentExercise.markdown);
+  if (language.value === "en") {
+    currentMarkdown = codingWorkspaceState.currentExercise.markdown
+  } else {
+    currentMarkdown = codingWorkspaceState.currentExercise.markdown_de;
+  }
+
+  return marked.parse(currentMarkdown);
+
 })
 
 const updateRemainingtimeToNextSkip = () => {
@@ -147,6 +159,14 @@ const skipFailed = () => {
   }, 10000);
 }
 
+const changeLanguage = () => {
+  if (language.value === "en") {
+    language.value = "de";
+  } else {
+    language.value = "en";
+  }
+}
+
 </script>
 
 <template>
@@ -165,6 +185,11 @@ const skipFailed = () => {
       <BlocksemblerChallengeSkipButton :remainingTime="remainingTimeToNextSkip"
                                        @skipFailed="skipFailed"
                                        @skipSuccessful="skipSuccessful"/>
+
+      <BaseButton @click="changeLanguage">
+        <TranslateIcon/>
+        <span v-if="language==='en'"> English</span><span v-else> Deutsch</span>
+      </BaseButton>
     </div>
 
     <div>

src/components/icons/TranslateIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg class="bi bi-translate" fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
+       xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z"/>
+    <path
+        d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31"/>
+  </svg>
+</template>