From 2193fe81259c201b31753cb20004310a710cdeb8 Mon Sep 17 00:00:00 2001 From: Shreya Bhandari Date: Tue, 3 Sep 2024 22:51:20 -0700 Subject: [PATCH] Translation fixes --- src/components/problem-layout/HintTextbox.js | 9 ++++-- src/components/problem-layout/ProblemCard.js | 13 +++++---- .../problem-layout/SubHintSystem.js | 6 ++-- .../problem-layout/ToastNotifyCorrectness.js | 14 +++++----- src/locales/en.json | 12 +++++++- src/locales/es.json | 12 +++++++- src/locales/se.json | 28 +++++++++++++------ src/util/useTranslation.js | 21 +++++++------- 8 files changed, 75 insertions(+), 40 deletions(-) diff --git a/src/components/problem-layout/HintTextbox.js b/src/components/problem-layout/HintTextbox.js index 96c2820b2c0..da8fa3fb1da 100644 --- 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')} @@ -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 index c3cc678b51d..2f086f71936 100644 --- 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 index 34c177a6e47..2fe82d69737 100644 --- 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" > - 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)} @@ -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 index a92b36daf87..62155b581fe 100644 --- 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 index bd5f3031ce8..8e6a3baa585 100644 --- 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!" } } \ No newline at end of file diff --git a/src/locales/es.json b/src/locales/es.json index 2457b2c8d23..64854c83304 100644 --- 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 index 140fc2ca31c..03b7032811a 100644 --- a/src/locales/se.json +++ b/src/locales/se.json @@ -1,9 +1,9 @@ { "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", @@ -11,23 +11,33 @@ }, "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 index d1b727f78da..ca74aa11633 100644 --- 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);