feat: Add various translations

public/i18n/de.json

@@ -38,5 +38,21 @@
   "minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
   "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!",
   "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten",
-  "overall-area": "Die Gesamtfläche für {{ numRats }} Ratten muss mindestens {{ minimumOverallArea }}m² betragen."
+  "overall-area": "Die Gesamtfläche für {{ numRats }} Ratten muss mindestens {{ minimumOverallArea }}m² betragen.",
+  "strongly-disagree": "Stimme gar nicht zu",
+  "strongly-agree": "Stimme voll zu",
+  "sus-question-easy-to-use":  "I thought CageCalc is easy to use",
+  "sus-question-like-to-use-frequently": "I would like to use CageCalc frequently",
+  "sus-question-unnecessarily-complex": "I find CageCalc unnecessarily complex",
+  "sus-question-need-support-of-technical-person": "I think that I need the support of a technical person to be able to use CageCalc",
+  "sus-question-well-integrated": "I found various functions in CageCalc were well integrated",
+  "sus-question-inconsistency": "I thought there was too much inconsistency in CageCalc",
+  "sus-question-learn-quickly": "I would imagine that most people would learn to use CageCalc very quickly",
+  "sus-question-cumbersome": "I found CageCalc very cumbersome to use",
+  "sus-question-confident": "I felt very confident using CageCalc",
+  "sus-question-need-to-learn": "I needed to learn a lot of things before I could get going with CageCalc",
+  "question-whats-missing": "Welche Funktion fehlt dir?",
+  "question-pain-points": "Was muss aus deiner Sicht an XX geändert werden?",
+  "question-other-feedback": "Was willst du uns mitgeben?",
+  "explanation-feedback": "Dein Feedback hilft uns den Rechner zu verbessern. Wir sammeln dabei keinerlei persönliche Daten. Du tust uns einfach nur einen großen Gefallen!"
 }

public/i18n/en.json

@@ -23,6 +23,7 @@
   "give-feedback": "Give Feedback",
   "feedback": "Feedback",
   "sus-title": "Rate the calculator",
+  "explanation-feedback": "",
   "submit": "Submit",
   "failed-base-area": "The base area of the cage must not be below {{ MINIMUM_BASE_AREA }}m².",
   "failed-overall-area": "The overall area in the cage is to small.",
@@ -38,5 +39,7 @@
   "minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
   "cage-complies-with-all-criteria": "This cage complies with all criteria!",
   "cage-for-x-rats": "Cage for {{ num_rats }} rats",
-  "overall-area": "The overall area in the cage must be above {{ minimumOverallArea }}m² for {{ numRats }} rats."
+  "overall-area": "The overall area in the cage must be above {{ minimumOverallArea }}m² for {{ numRats }} rats.",
+  "strongly-disagree": "Strongly Disagree",
+  "strongly-agree": "Strongly Agree"
 }

public/index.html

@@ -296,6 +296,7 @@
             </div>
             <div class="section">
                 <h1 class="title" data-i18n="sus-title">Bewerte den Rechner</h1>
+                <p class="is-spaced mb-4" data-i18n="explanation-feedback"></p>
                 <form id="sus-form">
                     <!--- Questions here --->
                         <div class="control" id="sus-control">

src/sus.js

@@ -1,3 +1,5 @@
+import i18next from "i18next";
+
 const scaleQuestions = [
     "sus-question-easy-to-use", // I thought CageCalc is easy to use
     "sus-question-like-to-use-frequently", // I would like to use CageCalc frequently
@@ -29,11 +31,8 @@ function prepareQuestionnaire() {
           <p class="control">
             <input class="sus-slider" type="range" min="1" max="5" step="1" name=${key} required>
             <div class="slider-labels">
-              <span data-i18n="strongly-disagree">Strongly Disagree</span>
+              <span data-i18n="strongly-disagree">${i18next.t('strongly-disagree')}</span>
-              <span data-i18n="disagree">Disagree</span>
+              <span data-i18n="strongly-agree">${i18next.t('strongly-agree')}</span>
-              <span data-i18n="neutral">Neutral</span>
-              <span data-i18n="agree">Agree</span>
-              <span data-i18n="strongly-agree">Strongly Agree</span>
             </div>
           </p>
         `;
@@ -64,7 +63,6 @@ window.addEventListener('DOMContentLoaded', () => {
         const jsonData = {};
 
         for (let [key, value] of formData.entries()) {
-            console.log(key, value);
             if (key.startsWith("sws-question")) {
                 jsonData[key] = parseInt(value, 10);
             } else {
@@ -87,11 +85,11 @@ window.addEventListener('DOMContentLoaded', () => {
             if (response.ok) {
                 messageDiv.className = "notification is-success";
                 messageDiv.setAttribute("data-i18n", "submit-success");
-                messageDiv.textContent = "Survey submitted successfully!";
+                messageDiv.textContent = i18next.t("Survey submitted successfully!");
             } else {
                 messageDiv.className = "notification is-danger";
                 messageDiv.setAttribute("data-i18n", "submit-error");
-                messageDiv.textContent = "There was an error submitting the survey.";
+                messageDiv.textContent = i18next.t("There was an error submitting the survey.");
             }
 
             messageDiv.classList.remove("is-hidden");
@@ -100,7 +98,7 @@ window.addEventListener('DOMContentLoaded', () => {
             const messageDiv = document.getElementById("response-message");
             messageDiv.className = "notification is-danger";
             messageDiv.removeAttribute("data-i18n"); // For dynamic error message
-            messageDiv.textContent = "Network error: " + error.message;
+            messageDiv.textContent = i18next.t("Network error: {{errorMessage}}",{"errorMessage": error.message});
             messageDiv.classList.remove("is-hidden");
         }
     });