Skip to content

Commit

Permalink
use numeric keyboard for number inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
glendc committed Feb 21, 2024
1 parent 899987b commit cebe4e3
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 9 deletions.
12 changes: 6 additions & 6 deletions site/1/mathbox.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions site/1/thermometer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit cebe4e3

Please sign in to comment.