changed steps text and added submit button before steps

src/Addition.js

@@ -257,23 +257,31 @@ function Addition() {
       text += " = "
       if (trueNumbers){
         text += resArr[idxNumbers]
-        text += " und " + carries[idxCarry-1] + " Übertrag "
+        text += " mit Übertrag " + carries[idxCarry-1]
         text = text.replace(/ /g, "0")
-        text += resArr[idxNumbers]===realSum && carries[idxCarry-1]===realCarry ? "(Richtig) " : "(Falsch) ";
-
+        text += resArr[idxNumbers]===realSum && carries[idxCarry-1]===realCarry ? ": Richtig " : ": Falsch ";
         stepsGridCopy.push({step: text});
       }
     }
 
-    document.getElementById("stepsParagraph").innerHTML = "Rechenschritte: ";
-    setStepsGrid(stepsGridCopy);
+    let paragraph = document.getElementById("stepsParagraph")
+    paragraph.innerHTML = "Rechenschritte: ";
 
     let btnSubmit = document.createElement("button");
     btnSubmit.innerHTML = "Ergebnis abgeben";
     btnSubmit.addEventListener("click", finishCalculation);
     btnSubmit.classList = "btn btn-secondary btn-sm";
-    btnSubmit.id = "btnSubmitSteps";
-    document.getElementById("idmtResultSteps").appendChild(btnSubmit);
+    btnSubmit.id = "btnSubmitSteps1";
+    document.getElementById("idmtResultSteps").insertBefore(btnSubmit, paragraph);
+
+    setStepsGrid(stepsGridCopy);
+
+    let btnSubmit2 = document.createElement("button");
+    btnSubmit2.innerHTML = "Ergebnis abgeben";
+    btnSubmit2.addEventListener("click", finishCalculation);
+    btnSubmit2.classList = "btn btn-secondary btn-sm";
+    btnSubmit2.id = "btnSubmitSteps2";
+    document.getElementById("idmtResultSteps").appendChild(btnSubmit2);
 
     document.getElementById("idmtResultSteps").tabIndex = 0;
     document.getElementById("idmtResultSteps").focus();
@@ -305,7 +313,8 @@ function Addition() {
 
     setCarryArr(carryArrCopy);
 
-    document.getElementById("btnSubmitSteps").remove();
+    document.getElementById("btnSubmitSteps1").remove();
+    document.getElementById("btnSubmitSteps2").remove();
     document.getElementById("idmtResultSteps").style.display = "none";
   }
 
@@ -323,7 +332,9 @@ function Addition() {
       message = "Das ist leider falsch."
     }
     message = "<p>" + message + "</p>"
-    document.getElementById("finishCalculation").innerHTML = message
+    document.getElementById("finishCalculation").innerHTML = message;
+    document.getElementById("finishCalculation").tabIndex = "0";
+    document.getElementById("finishCalculation").focus();
   }
 
   return (
@@ -345,6 +356,8 @@ function Addition() {
         <input type="submit" value="berechnen"/>
       </form>
 
+      <div id="finishCalculation"></div>
+
       <div id="overview">
         <DataGrid
           dataSource={numbersGrid}
@@ -374,8 +387,6 @@ function Addition() {
           handleCarryChange={handleCarryChange}/>
       </div>
 
-      <div id="finishCalculation"></div>
-
       <div id="idmtResultSteps">
         <p id="stepsParagraph"></p>
         <DataGrid

src/Subtraction.js

@@ -297,21 +297,31 @@ function Subtraction() {
 
       if (trueNumbers){
         text += resArr[idxNumbers] + " = " + firstDigit
-        text += " mit " + carries[idxCarry-1] + " Übertrag "
+        text += " mit Übertrag " + carries[idxCarry-1]
         text = text.replace(/ /g, "0")
-        text += resArr[idxNumbers]===realDigitRes && carries[idxCarry-1]===realCarry ? "(Richtig) " : "(Falsch) ";
+        text += resArr[idxNumbers]===realDigitRes && carries[idxCarry-1]===realCarry ? ": Richtig " : ": Falsch ";
         stepsGridCopy.push({step: text});
       }
     }
 
-    document.getElementById("stepsParagraph").innerHTML = "Rechenschritte: ";
-    setStepsGrid(stepsGridCopy);
+    let paragraph = document.getElementById("stepsParagraph")
+    paragraph.innerHTML = "Rechenschritte: ";
+
     let btnSubmit = document.createElement("button");
     btnSubmit.innerHTML = "Ergebnis abgeben";
     btnSubmit.addEventListener("click", finishCalculation);
     btnSubmit.classList = "btn btn-secondary btn-sm";
-    btnSubmit.id = "btnSubmitSteps";
-    document.getElementById("idmtResultSteps").appendChild(btnSubmit);
+    btnSubmit.id = "btnSubmitSteps1";
+    document.getElementById("idmtResultSteps").insertBefore(btnSubmit, paragraph);
+
+    setStepsGrid(stepsGridCopy);
+
+    let btnSubmit2 = document.createElement("button");
+    btnSubmit2.innerHTML = "Ergebnis abgeben";
+    btnSubmit2.addEventListener("click", finishCalculation);
+    btnSubmit2.classList = "btn btn-secondary btn-sm";
+    btnSubmit2.id = "btnSubmitSteps2";
+    document.getElementById("idmtResultSteps").appendChild(btnSubmit2);
 
     document.getElementById("idmtResultSteps").tabIndex = 0;
     document.getElementById("idmtResultSteps").focus();
@@ -343,7 +353,8 @@ function Subtraction() {
 
     setCarryArr(carryArrCopy);
 
-    document.getElementById("btnSubmitSteps").remove();
+    document.getElementById("btnSubmitSteps1").remove();
+    document.getElementById("btnSubmitSteps2").remove();
     document.getElementById("idmtResultSteps").style.display = "none";
   }
 
@@ -379,6 +390,8 @@ function Subtraction() {
     }
     message = "<p>" + message + "</p>";
     document.getElementById("finishCalculation").innerHTML = message;
+    document.getElementById("finishCalculation").tabIndex = "0";
+    document.getElementById("finishCalculation").focus();
   }
 
   return (
@@ -400,6 +413,8 @@ function Subtraction() {
         <input type="submit" value="berechnen"/>
       </form>
 
+      <div id="finishCalculation"></div>
+
       <div id="overview">
         <DataGrid
           dataSource={numbersGrid}
@@ -429,8 +444,6 @@ function Subtraction() {
           handleCarryChange={handleCarryChange}/>
       </div>
 
-      <div id="finishCalculation"></div>
-
       <div id="idmtResultSteps">
         <p id="stepsParagraph"></p>
         <DataGrid