support multiplication in mathbox

plabayo · Feb 21, 2024 · 18d6207 · 18d6207
1 parent cebe4e3
commit 18d6207
Showing 1 changed file with 34 additions and 2 deletions.
diff --git a/site/1/mathbox.html b/site/1/mathbox.html
@@ -158,10 +158,12 @@ <h1>rekendoos <code>➕➖🟰</code></h1>
             </p>
             <form id="form-setup" , action="javascript:void(0)">
                 <label for="count-until">Tot hoeveel kan het kind al tellen?</label>
-                <input inputmode="numeric" pattern="[0-9]+" id="count-until" name="count-until" min="3" max="100" value="10" required><br>
+                <input inputmode="numeric" pattern="[0-9]+" id="count-until" name="count-until" min="3" max="100"
+                    value="10" required><br>
 
                 <label for="num-exercises">Hoeveel oefeningen wenst u te doen?</label>
-                <input inputmode="numeric" pattern="[0-9]+" id="num-exercises" name="num-exercises" min="1" max="100" value="10" required><br>
+                <input inputmode="numeric" pattern="[0-9]+" id="num-exercises" name="num-exercises" min="1" max="100"
+                    value="10" required><br>
 
                 <label>Wat wil u oefenen?</label><br>
                 <input type="checkbox" id="practice-som" name="practice" value="som" checked>
@@ -173,6 +175,9 @@ <h1>rekendoos <code>➕➖🟰</code></h1>
                 <input type="checkbox" id="practice-splitsen" name="practice" value="splitsen" checked>
                 <label for="practice-splitsen">splitsen 🔼</label><br>
 
+                <input type="checkbox" id="practice-vermenigvuldigen" name="practice" value="vermenigvuldigen">
+                <label for="practice-vermenigvuldigen">vermenigvuldigen ✖️</label><br>
+
                 <button type="submit">🟢 start met oefenen</button>
             </form>
         </div>
@@ -399,6 +404,15 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                                 `;
                                         }
                                         break;
+                                    case "vermenigvuldigen":
+                                        exerciseFeedback += "<h3>maak de vermenigvuldiging ✖️</h3>";
+                                        exerciseFeedback += `
+                                                <p>
+                                                    <span>${exercise.a} x ${exercise.b} =</span>
+                                                    <span class="box bad split-part">${exercise.answer}</span>
+                                                </p>
+                                            `;
+                                        break;
                                 }
                                 exerciseFeedback += '</div>';
                                 document.getElementById("review").innerHTML = exerciseFeedback;
@@ -433,6 +447,13 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                 window.mathBoxState.exercise.b = Math.floor(Math.random() * window.mathBoxState.exercise.a);
                                 window.mathBoxState.exercise.answer = window.mathBoxState.exercise.a - window.mathBoxState.exercise.b;
                                 break;
+                            case "vermenigvuldigen":
+                                while (!window.mathBoxState.exercise.answer || window.mathBoxState.exercise.answer > window.mathBoxState.countUntil) {
+                                    window.mathBoxState.exercise.a = Math.floor(Math.random() * Math.floor(window.mathBoxState.countUntil / 2));
+                                    window.mathBoxState.exercise.b = Math.floor(Math.random() * Math.floor(window.mathBoxState.countUntil / 2)) + 1;
+                                    window.mathBoxState.exercise.answer = window.mathBoxState.exercise.a * window.mathBoxState.exercise.b;
+                                }
+                                break;
                         }
                     }
 
@@ -463,6 +484,17 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                     <button type="reset" id="button-skip" hidden>🤷 weet het niet</button>
                                 `;
                             break;
+                        case "vermenigvuldigen":
+                            document.getElementById("exercise-feedback").innerHTML = "maak de vermenigvuldiging ✖️";
+                            document.getElementById("form-exercise").innerHTML = `
+                                    <p>
+                                        <span>${window.mathBoxState.exercise.a} x ${window.mathBoxState.exercise.b} =</span>
+                                        <input inputmode="numeric" pattern="[0-9]+" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" required>
+                                    </p>
+                                    <button type="submit" id="button-check">👉 antwoord</button>
+                                    <button type="reset" id="button-skip" hidden>🤷 weet het niet</button>
+                                `;
+                            break;
                         case "splitsen":
                             document.getElementById("exercise-feedback").innerHTML = "maak de splitsing 🔼";
                             formExercise = document.getElementById("form-exercise");