added start over; added buttons to steps grid; fix everything

src/Addition.js

@@ -53,9 +53,16 @@ function Addition() {
     carryArrCopy.unshift(e.target.value);
     setCarryArr(carryArrCopy);
     let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined
-    if(nosLeft === 0 || (nosLeft === 1 && noCarry) ||
-       // stop after first iteration, numbers left is undefined at first
+
+    if((nosLeft === 1 && noCarry) ||
+       // if stop after first iteration, numbers left is undefined at first
        (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
+      nosLeft = 0;
+      handleResChange(" ", 0)
+    }
+
+    if(nosLeft === 0){
+      createIdmtResults()
       setShowAlert(true);
     }
   }
@@ -90,30 +97,36 @@ function Addition() {
     let carryText = "Übertrag = ";
 
     if(typeof numbers === "object" && imdtResIdx !== -1){
+      // set the digit index, start with the last digit
       if(typeof imdtResIdx === "undefined" || imdtResIdx === null){
         noOfDigits = Math.min(...numbers.map(n => n.length));
-        imdtResIdx = noOfDigits-1;
+        imdtResIdx = noOfDigits - 1;
       }
 
+      // skip over comma
       if(imdtResIdx === commaIdx){
-        handleResChange(".", nosLeft)
+        if(!resArr.includes(".")){
+          handleResChange(".", nosLeft);
+        }
         imdtResIdx = imdtResIdx - 1;
         nosLeft = nosLeft - 1;
       }
 
-      for (let n in numbers){ // iterate numbers
+      // iterate numbers for this digit index
+      for (let n in numbers){
+        // skip last empty number if no carry
         if(nosLeft === 1 && carryArr[0] === "0"){
           nosLeft = 0;
           imdtResIdx = -1;
-          handleResChange(" ", 0)
           return <></>
         }
+
+        // create label text like: d + d + .. = input
         let digit = numbers[parseInt(n)][imdtResIdx];
         if(digit === "" || digit === "&nbsp;"){
           digit = 0;
         }
         labelText += digit;
-
         if (parseInt(n) === numbers.length - 1){
           if(carryArr[0] !== undefined && carryArr[0] > 0){
             labelText += " + " + carryArr[0].toString();
@@ -124,11 +137,8 @@ function Addition() {
         }
       }
 
-      if(carryArr[0] > -1 || imdtResIdx === noOfDigits-1){
-        imdtRes = -1;
-        imdtResIdx = imdtResIdx - 1;
-        nosLeft = nosLeft - 1;
-      }
+      imdtResIdx -= 1;
+      nosLeft -= 1;
 
       return (
         <form>
@@ -137,7 +147,7 @@ function Addition() {
           </label>
           <input
             onChange={(e) => handleResChange(e, nosLeft)}
-            type="text" id="input_result" size="2"
+            type="text" id="input_result" size="2" maxLength="1"
             aria-labelledby="input_result_label" aria-required="true"
             ref={resInputField} autoFocus/>
           <br/>
@@ -146,7 +156,7 @@ function Addition() {
           </label>
           <input
             onChange={(e) => handleCarryChange(e, noOfDigits, nosLeft)}
-            type="text" id="input_carry" size="2"
+            type="text" id="input_carry" size="2" maxLength="1"
             aria-labelledby="input_carry_label" aria-required="true"
             ref={carryInputField}/>
         </form>
@@ -159,8 +169,32 @@ function Addition() {
     }
   }
 
+  const addButtonsToImdtSteps = () => {
+    if(stepsGrid[0]["step"]!==""){
+      let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
+      let trs = table.getElementsByTagName("tr");
+      for(let trIdx in trs){
+        let tr = trs[trIdx];
+        if(tr instanceof HTMLElement && trIdx < trs.length-1){
+          let td = tr.getElementsByTagName("td")[0];
+          let btn = document.createElement("button");
+          btn.innerHTML = "hier starten";
+          btn.classList = "btn btn-secondary btn-sm";
+          btn.id = "btn-" + trIdx;
+          btn.addEventListener("click", () => startOver(trIdx));
+          td.appendChild(btn);
+        }
+      }
+    }
+  }
+
   const showIdmtResults = () => {
     setShowAlert(false);
+    document.getElementById("idmtResultSteps").style.display = "inline-block";
+    addButtonsToImdtSteps()
+  }
+
+  const createIdmtResults = () => {
     let realResArr = realResult.toString().split("");
     while(realResArr.length < resArr.length){
       realResArr.unshift("&nbsp;"); // add " " before
@@ -215,32 +249,58 @@ function Addition() {
       let realCarry = parseInt(realSum/10).toString()
       realSum = (realSum % 10).toString()
       text += " = "
-
       if (trueNumbers){
         text += resArr[idxNumbers]
         text += " und " + carries[idxCarry-1] + " Übertrag "
         text = text.replace(/&nbsp;/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});
-
-//        let btn = document.createElement("button");
-//        btn.innerHTML = "bearbeiten: " + text;
-//        btn.addEventListener("click", () => startOver(i));
-//        document.getElementById("idmtResultSteps").appendChild(btn);
       }
     }
 
     document.getElementById("stepsParagraph").innerHTML = "Rechenschritte: ";
     setStepsGrid(stepsGridCopy);
+
     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);
+
+    document.getElementById("idmtResultSteps").tabIndex = 0;
+    document.getElementById("idmtResultSteps").focus();
+
+    document.getElementById("idmtResultSteps").style.display = "none";
   }
 
   const startOver = (idx) => {
-    console.log("clicked at " + idx)
+    let invertedIdx = numbers[0].length - idx - 1;
+    imdtResIdx = invertedIdx;
+
+    let carryArrCopy = [...carryArr];
+    let slicer = invertedIdx;
+    if(resArr[0] !== "&nbsp;" && !resArr.includes(".")){
+      slicer += 1;
+    }else if(resArr[0] === "&nbsp;" && resArr.includes(".")){
+      slicer -= 1;
+    }
+    carryArrCopy = carryArrCopy.slice(slicer);
+
+    // reset result and carries until the chosen step
+    let commaPos = resArr.indexOf(".");
+    if(resArr.includes(".") && commaPos >= invertedIdx){
+      imdtResIdx -= 1;
+      resArr = resArr.slice(invertedIdx);
+    }else{
+      resArr = resArr.slice(invertedIdx + 1);
+    }
+
+    setCarryArr(carryArrCopy);
+
+    document.getElementById("btnSubmitSteps").remove();
+    document.getElementById("idmtResultSteps").style.display = "none";
   }
 
   const finishCalculation = () => {
@@ -317,6 +377,7 @@ function Addition() {
           focusedRowEnabled={true}
           showBorders={true}
           showColumnHeaders={false}
+          noDataText=""
         >
           <Column dataField="step" />
         </DataGrid>

src/Subtraction.js

@@ -53,9 +53,16 @@ function Subtraction() {
     carryArrCopy.unshift(e.target.value);
     setCarryArr(carryArrCopy);
     let noCarry = carryArrCopy[0] === "0" || carryArrCopy[0] === undefined;
-    if(nosLeft === 0 || (nosLeft === 1 && noCarry) ||
-       // stop after first iteration, numbers left is undefined at first
+
+    if((nosLeft === 1 && noCarry) ||
+       // if stop after first iteration, numbers left is undefined at first
        (nosLeft !== nosLeft && realResult.toString().length === 1 && noCarry)){
+      nosLeft = 0;
+      handleResChange(" ", 0)
+    }
+
+    if(nosLeft === 0){
+      createIdmtResults()
       setShowAlert(true);
     }
   }
@@ -76,7 +83,7 @@ function Subtraction() {
       let afterComma = Math.max(...numbers.map(x => afterCommaLen(x)));
       realRes = parseFloat(realRes.toFixed(afterComma));
       setRealResult(realRes);
-      console.log("real result: ", realRes)
+      console.log("real result: ", realRes);
 
       let [numbersArr, commaIdx] = numbersToArrOfArr(numbers);
       setNumbers(numbersArr);
@@ -96,12 +103,17 @@ function Subtraction() {
     let digit = 0;
 
     if(typeof numbers === "object" && imdtResIdx !== -1){
+      // set the digit index, start with the last digit
       if(typeof imdtResIdx === "undefined" || imdtResIdx === null){
         noOfDigits = Math.min(...numbers.map(n => n.length));
-        imdtResIdx = noOfDigits-1;
+        imdtResIdx = noOfDigits - 1;
       }
+
+      // skip over comma
       if(imdtResIdx === commaIdx){
-        handleResChange(".", nosLeft)
+        if(!resArr.includes(".")){
+          handleResChange(".", nosLeft);
+        }
         imdtResIdx = imdtResIdx - 1;
         nosLeft = nosLeft - 1;
       }
@@ -110,22 +122,24 @@ function Subtraction() {
         labelText = "("
       }
 
-      for (let n in numbers){ // iterate numbers
+      // iterate numbers for this digit index
+      for (let n in numbers){
         if(parseInt(n)===0){
           firstDigit = numbers[parseInt(n)][imdtResIdx];
         }else{
+          // skip last empty number if no carry
           if(nosLeft === 1 && carryArr[0] === "0"){
             nosLeft = 0;
             imdtResIdx = -1;
-            handleResChange(" ", 0)
             return <></>
           }
+
+          // create label text like: d + d + (wie viel) = input
           digit = numbers[parseInt(n)][imdtResIdx];
           if(digit === "" || digit === "&nbsp;"){
             digit = 0;
           }
           labelText += digit;
-
           if (parseInt(n) === numbers.length - 1){
             if(carryArr[0] !== undefined && carryArr[0] > 0){
               labelText += " + " + carryArr[0].toString();
@@ -142,11 +156,8 @@ function Subtraction() {
       labelText += " + wie viel = " + firstDigit
       labelText = labelText.replace(/&nbsp;/g, "0")
 
-      if(carryArr[0] > -1 || imdtResIdx === noOfDigits-1){
-        imdtRes = -1;
-        imdtResIdx = imdtResIdx - 1;
-        nosLeft = nosLeft - 1;
-      }
+      imdtResIdx = imdtResIdx - 1;
+      nosLeft = nosLeft - 1;
 
       return (
         <form>
@@ -155,7 +166,7 @@ function Subtraction() {
           </label>
           <input
             onChange={(e) => handleResChange(e, nosLeft)}
-            type="text" id="input_result" size="2"
+            type="text" id="input_result" size="2" maxLength="1"
             aria-labelledby="input_result_label" aria-required="true"
             ref={resInputField} autoFocus/>
           <br/>
@@ -164,7 +175,7 @@ function Subtraction() {
           </label>
           <input
             onChange={(e) => handleCarryChange(e, noOfDigits, nosLeft)}
-            type="text" id="input_carry" size="2"
+            type="text" id="input_carry" size="2" maxLength="1"
             aria-labelledby="input_carry_label" aria-required="true"
             ref={carryInputField}/>
         </form>
@@ -177,8 +188,32 @@ function Subtraction() {
     }
   }
 
+  const addButtonsToImdtSteps = () => {
+    if(stepsGrid[0]["step"]!==""){
+      let table = document.getElementById("idmtResultSteps").getElementsByTagName("table")[0]
+      let trs = table.getElementsByTagName("tr");
+      for(let trIdx in trs){
+        let tr = trs[trIdx];
+        if(tr instanceof HTMLElement && trIdx < trs.length-1){
+          let td = tr.getElementsByTagName("td")[0];
+          let btn = document.createElement("button");
+          btn.innerHTML = "hier starten";
+          btn.classList = "btn btn-secondary btn-sm";
+          btn.id = "btn-" + trIdx;
+          btn.addEventListener("click", () => startOver(trIdx));
+          td.appendChild(btn);
+        }
+      }
+    }
+  }
+
   const showIdmtResults = () => {
     setShowAlert(false);
+    document.getElementById("idmtResultSteps").style.display = "inline-block";
+    addButtonsToImdtSteps()
+  }
+
+  const createIdmtResults = () => {
     let realResArr = realResult.toString().split("");
     while(realResArr.length < resArr.length){
       realResArr.unshift("&nbsp;"); // add " " before
@@ -259,7 +294,7 @@ function Subtraction() {
         text += resArr[idxNumbers] + " = " + firstDigit
         text += " mit " + carries[idxCarry-1] + " Übertrag "
         text = text.replace(/&nbsp;/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});
       }
     }
@@ -269,7 +304,42 @@ function Subtraction() {
     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);
+
+    document.getElementById("idmtResultSteps").tabIndex = 0;
+    document.getElementById("idmtResultSteps").focus();
+
+    document.getElementById("idmtResultSteps").style.display = "none";
+  }
+
+  const startOver = (idx) => {
+    let invertedIdx = numbers[0].length - idx - 1;
+    imdtResIdx = invertedIdx;
+
+    let carryArrCopy = [...carryArr];
+    let slicer = invertedIdx;
+    if(resArr[0] !== "&nbsp;" && !resArr.includes(".")){
+      slicer += 1;
+    }else if(resArr[0] === "&nbsp;" && resArr.includes(".")){
+      slicer -= 1;
+    }
+    carryArrCopy = carryArrCopy.slice(slicer);
+
+    // reset result and carries until the chosen step
+    let commaPos = resArr.indexOf(".");
+    if(resArr.includes(".") && commaPos >= invertedIdx){
+      imdtResIdx -= 1;
+      resArr = resArr.slice(invertedIdx);
+    }else{
+      resArr = resArr.slice(invertedIdx + 1);
+    }
+
+    setCarryArr(carryArrCopy);
+
+    document.getElementById("btnSubmitSteps").remove();
+    document.getElementById("idmtResultSteps").style.display = "none";
   }
 
   const finishCalculation = () => {
@@ -363,6 +433,7 @@ function Subtraction() {
           focusedRowEnabled={true}
           showBorders={true}
           showColumnHeaders={false}
+          noDataText=""
         >
           <Column dataField="step" />
         </DataGrid>