Translation fixes

CAHLR · Sep 4, 2024 · 2193fe8 · 2193fe8
1 parent 591ecf5
commit 2193fe8
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 40 deletions.
diff --git a/src/components/problem-layout/HintTextbox.js b/src/components/problem-layout/HintTextbox.js
@@ -11,12 +11,14 @@ import ProblemInput from "../problem-input/ProblemInput";
 import { stagingProp } from "../../util/addStagingProperty";
 import { toastNotifyCorrectness } from "./ToastNotifyCorrectness";
 import { joinList } from "../../util/formListString";
+import withTranslation from "../../util/withTranslation.js"
 
 class HintTextbox extends React.Component {
     static contextType = ThemeContext;
 
     constructor(props, context) {
         super(props);
+        this.translate = props.translate
         this.hint = props.hint;
         this.index = props.index;
         this.giveStuFeedback = props.giveStuFeedback
@@ -49,7 +51,7 @@ class HintTextbox extends React.Component {
 
         const isCorrect = !!correctAnswer
 
-        toastNotifyCorrectness(isCorrect, reason);
+        toastNotifyCorrectness(isCorrect, reason, this.translate);
 
         this.setState({
             isCorrect,
@@ -67,6 +69,7 @@ class HintTextbox extends React.Component {
     }
 
     render() {
+        const { translate } = this.props;
         const { classes, index, hintNum } = this.props;
         const { isCorrect } = this.state;
         const { debug, use_expanded_view } = this.context;
@@ -123,7 +126,7 @@ class HintTextbox extends React.Component {
                                         "data-selenium-target": `submit-button-${hintIndex}`
                                     })}
                             >
-                                Submit
+                                {translate('problem.Submit')}
                             </Button>
                         </center>
                     </Grid>
@@ -172,4 +175,4 @@ class HintTextbox extends React.Component {
     }
 }
 
-export default withStyles(styles)(HintTextbox);
+export default withStyles(styles)(withTranslation(HintTextbox));
diff --git a/src/components/problem-layout/ProblemCard.js b/src/components/problem-layout/ProblemCard.js
@@ -41,6 +41,7 @@ class ProblemCard extends React.Component {
     constructor(props, context) {
         super(props);
         // console.log("problem lesson props:", props);
+        this.translate = props.translate
         this.step = props.step;
         this.index = props.index;
         this.giveStuFeedback = props.giveStuFeedback;
@@ -96,8 +97,8 @@ class ProblemCard extends React.Component {
             // Bottom out hints
             this.hints.push({
                 id: this.step.id + "-h" + (this.hints.length + 1),
-                title: "Answer",
-                text: "The answer is " + this.step.stepAnswer,
+                title: this.translate('hintsystem.answer'),
+                text: this.translate('hintsystem.answerIs') + this.step.stepAnswer,
                 type: "bottomOut",
                 dependencies: Array.from(Array(this.hints.length).keys()),
             });
@@ -114,8 +115,8 @@ class ProblemCard extends React.Component {
                             i +
                             "-s" +
                             (hint.subHints.length + 1),
-                        title: "Answer",
-                        text: "The answer is " + hint.hintAnswer[0],
+                        title: this.translate('hintsystem.answer'),
+                        text: this.translate('hintsystem.answerIs') + hint.hintAnswer[0],
                         type: "bottomOut",
                         dependencies: Array.from(
                             Array(hint.subHints.length).keys()
@@ -248,9 +249,9 @@ class ProblemCard extends React.Component {
         );
 
         if (this.showCorrectness) {
-            toastNotifyCorrectness(isCorrect, reason);
+            toastNotifyCorrectness(isCorrect, reason, this.translate);
         } else {
-            toastNotifyCompletion();
+            toastNotifyCompletion(this.translate);
         }
 
         this.setState({

diff --git a/src/components/problem-layout/SubHintSystem.js b/src/components/problem-layout/SubHintSystem.js
@@ -9,6 +9,7 @@ import HintTextbox from './HintTextbox.js';
 import { renderText, chooseVariables } from '../../platform-logic/renderText.js';
 import Spacer from "../Spacer";
 import { ThemeContext } from "../../config/config";
+import withTranslation from "../../util/withTranslation.js"
 
 
 class SubHintSystem extends React.Component {
@@ -50,6 +51,7 @@ class SubHintSystem extends React.Component {
     }
 
     render() {
+        const { translate } = this.props;
         const { classes, index, parent, hintVars, problemID, seed } = this.props;
         const { currentExpanded } = this.state;
         const { debug, use_expanded_view } = this.context;
@@ -68,7 +70,7 @@ class SubHintSystem extends React.Component {
                                 id="panel1a-header"
                             >
                                 <Typography className={classes.heading}>
-                                    Hint {i + 1}: {renderText(hint.title, problemID,
+                                {translate('hintsystem.hint') + (i + 1) + ": "} {renderText(hint.title, problemID,
                                     chooseVariables(Object.assign({}, hintVars, hint.variabilization), seed), this.context)} </Typography>
                             </AccordionSummary>
                             <AccordionDetails>
@@ -106,4 +108,4 @@ const styles = theme => ({
 });
 
 
-export default withStyles(styles)(SubHintSystem);
+export default withStyles(styles)(withTranslation(SubHintSystem));
diff --git a/src/components/problem-layout/ToastNotifyCorrectness.js b/src/components/problem-layout/ToastNotifyCorrectness.js
@@ -1,30 +1,30 @@
 import { toast } from "react-toastify";
 import WrongAnswerReasons from "../../util/wrongAnswerReasons";
 
-export function toastNotifyCorrectness(isCorrect, reason) {
+export function toastNotifyCorrectness(isCorrect, reason, translate) {
     if (isCorrect) {
-        toast.success("Correct Answer!", {
+        toast.success(translate("toast.correct"), {
             autoClose: 3000
         })
     } else {
         if (reason === WrongAnswerReasons.wrong) {
-            toast.error("Incorrect Answer!", {
+            toast.error(translate("toast.incorrect"), {
                 autoClose: 3000
             })
         } else if (reason === WrongAnswerReasons.sameAsProblem) {
-            toast.error("Please simplify!", {
+            toast.error(translate("toast.simplify"), {
                 autoClose: 3000
             })
         } else if (reason === WrongAnswerReasons.errored) {
-            toast.error("Our system could not process that answer", {
+            toast.error(translate("toast.cantProcess"), {
                 autoClose: 3000
             })
         }
     }
 }
 
-export function toastNotifyCompletion() {
-    toast.info("Step Completed!", {
+export function toastNotifyCompletion(translate) {
+    toast.info(translate("toast.stepComplete"), {
         autoClose: 3000
     })
 }
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -28,6 +28,16 @@
     },
     "hintsystem": 
     {
-        "hint": "Hint "
+        "hint": "Hint ",
+        "answer": "Answer",
+        "answerIs": "The answer is "
+    },
+    "toast":
+    {
+        "correct": "Correct Answer!",
+        "incorrect": "Incorrect Answer!",
+        "simplify": "Please simplify!",
+        "cantProcess": "Our system could not process that answer",
+        "stepComplete": "Step Completed!"
     }
 }
diff --git a/src/locales/es.json b/src/locales/es.json
@@ -28,6 +28,16 @@
     },
     "hintsystem": 
     {
-        "hint": "Pista "
+        "hint": "Pista ",
+        "answer": "Respuesta",
+        "answerIs": "La respuesta es "
+    },
+    "toast":
+    {
+        "correct": "¡Respuesta correcta!",
+        "incorrect": "¡Respuesta incorrecta!",
+        "simplify": "¡Por favor, simplifica!",
+        "cantProcess": "Nuestro sistema no pudo procesar esa respuesta",
+        "stepComplete": "¡Paso completado!"
     }
 }
diff --git a/src/locales/se.json b/src/locales/se.json
@@ -1,33 +1,43 @@
 {
     "lessonSelection": 
     {
-       "welcomeInstructor": "Välkommen Instruktör!",
+       "welcomeInstructor": "Välkommen, lärare!",
        "welcomeTo": "Välkommen till",
-       "resetprogress": "Återställ Framsteg",
+       "resetprogress": "Nollställ framsteg",
        "select": "Vänligen välj en",
        "course": "kurs",
        "lessonplan": "lektionsplan",
        "onlyselect": "Välj"
     },
     "problem":
     {
-        "NextProblem": "Nästa Problem",
-        "PreviousProblem": "Föregående Problem",
+        "NextProblem": "Nästa uppgift",
+        "PreviousProblem": "Föregående uppgift",
         "Submit": "Skicka in",
         "Feedback": "Återkoppling",
         "Response": "Svar",
         "Thanks": "Tack för din återkoppling!",
-        "Description": "Känn dig fri att skicka återkoppling om detta problem om du stöter på några fel. Skicka återkoppling för alla delar av problemet på en gång.",
+        "Description": "Du får gärna skicka in feedback om du stöter på några buggar i denna uppgift. Skicka gärna all feedback om uppgiftens olika delar på en gång.",
         "Derivative": "är en härledning av",
         "Used": ", används under"
     },
     "platform":
     {
-        "Mastery": "Behärska Lektionen: ",
-        "LoggedIn": "Inte inloggad"
+        "Mastery": "Bemästrande av lektionen: ",
+        "LoggedIn": "Utloggad"
     },
     "hintsystem": 
     {
-        "hint": "Ledtråd "
-    }
+        "hint": "Ledtråd ",
+        "answer": "Svar",
+        "answerIs": "Svaret är "
+    },
+    "toast":
+    {
+        "correct": "Rätt svar!",
+        "incorrect": "Fel svar!",
+        "simplify": "Vänligen förenkla!",
+        "cantProcess": "Vårt system kunde inte bearbeta det svaret",
+        "stepComplete": "Steg slutfört!"
+    }    
 }
diff --git a/src/util/useTranslation.js b/src/util/useTranslation.js
@@ -1,20 +1,19 @@
-import { useState, useEffect } from "react";
 import { useLocalization } from "./LocalizationContext";
 
+import translationsEn from "../locales/en.json";
+import translationsEs from "../locales/es.json";
+import translationsSe from "../locales/se.json";
+
 export const useTranslation = () => {
     const { language } = useLocalization();
-    const [translations, setTranslations] = useState({});
 
-    useEffect(() => {
-        const loadTranslations = async (lang) => {
-            const module = await import(`../locales/${lang}.json`);
-            setTranslations(module.default || module);
-        };
+    const translationsMap = {
+        en: translationsEn,
+        es: translationsEs,
+        se: translationsSe,
+    };
 
-        if (["en", "es", "se"].includes(language)) {
-            loadTranslations(language);
-        }
-    }, [language]);
+    const translations = translationsMap[language] || translationsMap['en'];
 
     const translate = (key) => {
         return key.split(".").reduce((obj, k) => (obj || {})[k], translations);