From cebe4e3b86937429f13759b843803e5e686af2ab Mon Sep 17 00:00:00 2001
From: glendc <glen.decauwsemaecker@otainsight.com>
Date: Wed, 21 Feb 2024 22:25:09 +0100
Subject: [PATCH] use numeric keyboard for number inputs

---
 site/1/mathbox.html     | 12 ++++++------
 site/1/thermometer.html |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/site/1/mathbox.html b/site/1/mathbox.html
index 516a355..493e9f4 100644
--- a/site/1/mathbox.html
+++ b/site/1/mathbox.html
@@ -158,10 +158,10 @@ <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 type="number" 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 type="number" 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>
@@ -446,7 +446,7 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                             document.getElementById("form-exercise").innerHTML = `
                                     <p>
                                         <span>${window.mathBoxState.exercise.a} + ${window.mathBoxState.exercise.b} =</span>
-                                        <input type="number" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" required>
+                                        <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>
@@ -457,7 +457,7 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                             document.getElementById("form-exercise").innerHTML = `
                                     <p>
                                         <span>${window.mathBoxState.exercise.a} - ${window.mathBoxState.exercise.b} =</span>
-                                        <input type="number" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" required>
+                                        <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>
@@ -478,14 +478,14 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                                 document.getElementById("form-exercise").innerHTML += `
                                         <p>
                                             <span class="box split-part">${window.mathBoxState.exercise.a}</span>
-                                            <input type="number" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" class="split-part" size="3" required>
+                                            <input inputmode="numeric" pattern="[0-9]+" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" class="split-part" size="3" required>
                                             <input type="hidden" id="answer-context" name="answer-context" value="b">
                                         </p>
                                     `;
                             } else {
                                 document.getElementById("form-exercise").innerHTML += `
                                         <p>
-                                            <input type="number" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" class="split-part" size="3" required>
+                                            <input inputmode="numeric" pattern="[0-9]+" id="answer" name="answer" min="0" max="${window.mathBoxState.countUntil}" value="" class="split-part" size="3" required>
                                             <input type="hidden" id="answer-context" name="answer-context" value="a">
                                             <span class="box split-part">${window.mathBoxState.exercise.b}</span>
                                         </p>
diff --git a/site/1/thermometer.html b/site/1/thermometer.html
index ede77da..7f8acf1 100644
--- a/site/1/thermometer.html
+++ b/site/1/thermometer.html
@@ -244,10 +244,10 @@ <h1>thermometer <code>🌡️</code></h1>
             </p>
             <form id="form-setup" , action="javascript:void(0)">
                 <label for="count-until">Tot hoeveel kan het kind al werken op de thermometer?</label>
-                <input type="number" id="count-until" name="count-until" min="3" max="100" value="20" required><br>
+                <input inputmode="numeric" pattern="[0-9]+" id="count-until" name="count-until" min="3" max="100" value="20" required><br>
 
                 <label for="num-exercises">Hoeveel oefeningen wenst u te doen?</label>
-                <input type="number" 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>
 
                 <button type="submit">🟢 start met oefenen</button>
             </form>
@@ -591,7 +591,7 @@ <h3 id="exercise-feedback">&nbsp;</h3>
                             document.getElementById("exercise-feedback").innerHTML = "schrijf de themperatuur ✏️";
                             document.getElementById("form-exercise").innerHTML = drawThermometer(window.thermomterState.exercise) + `
                                     <p>
-                                        <input type="number" id="answer" name="answer" min="0" max="${window.thermomterState.countUntil}" value="" required>
+                                        <input inputmode="numeric" pattern="[0-9]+" id="answer" name="answer" min="0" max="${window.thermomterState.countUntil}" value="" required>
                                         <span>℃</span>
                                     </p>
                                     <button type="submit" id="button-check">👉 antwoord</button>